Got rid of all NodeDetailsImageStatus code and replaced it with renderNodeDetailsExtras function.

client/app/scripts/components/app.js

@@ -201,7 +201,9 @@ class App extends React.Component {
 
           {showingTroubleshootingMenu && <TroubleshootingMenu />}
 
-          {showingDetails && <Details />}
+          {showingDetails && <Details
+            renderNodeDetailsExtras={this.props.renderNodeDetailsExtras}
+          />}
 
           <div className="header">
             {timeTravelSupported && this.props.renderTimeTravel()}
@@ -263,11 +265,13 @@ function mapStateToProps(state) {
 
 App.propTypes = {
   renderTimeTravel: PropTypes.func,
+  renderNodeDetailsExtras: PropTypes.func,
   monitor: PropTypes.bool,
 };
 
 App.defaultProps = {
   renderTimeTravel: () => <TimeTravelWrapper />,
+  renderNodeDetailsExtras: () => null,
   monitor: false,
 };
 

client/app/scripts/components/details-card.js

@@ -60,6 +60,7 @@ class DetailsCard extends React.Component {
           key={this.props.id}
           nodeId={this.props.id}
           mounted={this.state.mounted}
+          renderNodeDetailsExtras={this.props.renderNodeDetailsExtras}
           {...this.props}
         />
       </div>

client/app/scripts/components/details.js

@@ -15,6 +15,7 @@ class Details extends React.Component {
             index={index}
             cardCount={details.size}
             nodeControlStatus={controlStatus.get(obj.id)}
+            renderNodeDetailsExtras={this.props.renderNodeDetailsExtras}
             {...obj}
           />
         ))}

client/app/scripts/components/node-details.js

@@ -19,8 +19,6 @@ import NodeDetailsInfo from './node-details/node-details-info';
 import NodeDetailsRelatives from './node-details/node-details-relatives';
 import NodeDetailsTable from './node-details/node-details-table';
 import Warning from './warning';
-import CloudFeature from './cloud-feature';
-import NodeDetailsImageStatus from './node-details/node-details-image-status';
 
 
 const log = debug('scope:node-details');
@@ -249,14 +247,7 @@ class NodeDetails extends React.Component {
             return null;
           })}
 
-          <CloudFeature>
-            <NodeDetailsImageStatus
-              name={details.label}
-              metadata={details.metadata}
-              pseudo={details.pseudo}
-              topologyId={topologyId}
-            />
-          </CloudFeature>
+          {this.props.renderNodeDetailsExtras({ topologyId, details })}
         </div>
 
         <Overlay faded={this.props.transitioning} />

client/app/scripts/components/node-details/node-details-image-status.js

@@ -1,126 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import find from 'lodash/find';
-import map from 'lodash/map';
-import { CircularProgress } from 'weaveworks-ui-components';
-
-import { getImagesForService } from '../../actions/app-actions';
-
-const topologyWhitelist = ['kube-controllers'];
-
-function newImagesAvailable(images, currentId) {
-  const current = find(images, i => i.ID === currentId);
-
-  if (current) {
-    const timestamp = new Date(current.CreatedAt);
-    return Boolean(find(images, i => new Date(i.CreatedAt) > timestamp));
-  }
-
-  return false;
-}
-
-
-class NodeDetailsImageStatus extends React.PureComponent {
-  constructor(props, context) {
-    super(props, context);
-
-    this.getImagesUrl = this.getImagesUrl.bind(this);
-  }
-
-  componentDidMount() {
-    if (this.shouldRender() && this.props.serviceId) {
-      this.props.getImagesForService(this.props.params.orgId, this.props.serviceId);
-    }
-  }
-
-  getImagesUrl() {
-    const { serviceId, params } = this.props;
-    return `/flux/${params.orgId}/services/${encodeURIComponent(serviceId)}`;
-  }
-
-  shouldRender() {
-    const { pseudo, topologyId } = this.props;
-    return !pseudo && topologyId && topologyWhitelist.includes(topologyId);
-  }
-
-  renderImages() {
-    const { errors, containers, isFetching } = this.props;
-    const error = !isFetching && errors;
-
-    if (isFetching) {
-      return (
-        <div className="progress-wrapper"><CircularProgress /></div>
-      );
-    }
-
-    if (error) {
-      return (
-        <p>Error: {JSON.stringify(map(errors, 'message'))}</p>
-      );
-    }
-
-    if (!containers) {
-      return 'No service images found';
-    }
-
-    return (
-      <div className="images">
-        {containers.map((container) => {
-          const statusText = newImagesAvailable(container.Available, container.Current.ID)
-            ? <span className="new-image">New image(s) available</span>
-            : 'Image up to date';
-
-          return (
-            <div key={container.Name} className="wrapper">
-              <div className="node-details-table-node-label">{container.Name}</div>
-              <div className="node-details-table-node-value">{statusText}</div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-  render() {
-    const { containers } = this.props;
-
-    if (!this.shouldRender()) {
-      return null;
-    }
-
-    return (
-      <div className="node-details-content-section image-status">
-        <div className="node-details-content-section-header">
-          Container image status
-          {containers &&
-            <div>
-              <a
-                href={this.getImagesUrl()}
-                className="node-details-table-node-link">
-                  View in Deploy
-              </a>
-            </div>
-          }
-
-        </div>
-        {this.renderImages()}
-      </div>
-    );
-  }
-}
-
-function mapStateToProps({ scope }, { metadata, name }) {
-  const namespace = find(metadata, d => d.id === 'kubernetes_namespace');
-  const nodeType = find(metadata, d => d.id === 'kubernetes_node_type');
-  const serviceId = (namespace && nodeType) ? `${namespace.value}:${nodeType.value.toLowerCase()}/${name}` : null;
-  const { containers, isFetching, errors } = scope.getIn(['serviceImages', serviceId]) || {};
-
-  return {
-    isFetching,
-    errors,
-    containers,
-    serviceId
-  };
-}
-
-export default connect(mapStateToProps, { getImagesForService })(NodeDetailsImageStatus);