Merge pull request #3244 from weaveworks/3243-pluggable-node-details-…

…extras Support rendering node details extras
weaveworks · Jul 9, 2018 · 4bd0be0 · 4bd0be0
2 parents c96611b + 08ed71f
commit 4bd0be0
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 267 deletions.
diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js
@@ -1,5 +1,4 @@
 import debug from 'debug';
-import { find } from 'lodash';
 import { fromJS } from 'immutable';
 
 import ActionTypes from '../constants/action-types';
@@ -827,30 +826,6 @@ export function shutdown() {
   };
 }
 
-export function getImagesForService(orgId, serviceId) {
-  return (dispatch, getState, { api }) => {
-    dispatch({
-      type: ActionTypes.REQUEST_SERVICE_IMAGES,
-      serviceId
-    });
-
-    // Use the fluxv2 api
-    api.getFluxImages(orgId, serviceId)
-      .then((services) => {
-        dispatch({
-          type: ActionTypes.RECEIVE_SERVICE_IMAGES,
-          service: find(services, s => s.ID === serviceId),
-          serviceId
-        });
-      }, ({ errors }) => {
-        dispatch({
-          type: ActionTypes.RECEIVE_SERVICE_IMAGES,
-          errors
-        });
-      });
-  };
-}
-
 export function setMonitorState(monitor) {
   return {
     type: ActionTypes.MONITOR_STATE,

diff --git a/client/app/scripts/components/app.js b/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,
 };
 

diff --git a/client/app/scripts/components/details-card.js b/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>

diff --git a/client/app/scripts/components/details.js b/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}
           />
         ))}

diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
@@ -1,8 +1,10 @@
 import debug from 'debug';
 import React from 'react';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Map as makeMap } from 'immutable';
+import { noop } from 'lodash';
 
 import { clickCloseDetails, clickShowTopologyForNode } from '../actions/app-actions';
 import { brightenColor, getNeutralColor, getNodeColorDark } from '../utils/color-utils';
@@ -19,8 +21,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 +249,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} />
@@ -298,6 +291,14 @@ class NodeDetails extends React.Component {
   }
 }
 
+NodeDetails.propTypes = {
+  renderNodeDetailsExtras: PropTypes.func,
+};
+
+NodeDetails.defaultProps = {
+  renderNodeDetailsExtras: noop,
+};
+
 function mapStateToProps(state, ownProps) {
   const currentTopologyId = state.get('currentTopologyId');
   return {

diff --git a/client/app/scripts/components/node-details/node-details-image-status.js b/client/app/scripts/components/node-details/node-details-image-status.js
diff --git a/client/app/scripts/constants/action-types.js b/client/app/scripts/constants/action-types.js
@@ -48,9 +48,7 @@ const ACTION_TYPES = [
   'RECEIVE_NODES_FOR_TOPOLOGY',
   'RECEIVE_NODES',
   'RECEIVE_NOT_FOUND',
-  'RECEIVE_SERVICE_IMAGES',
   'RECEIVE_TOPOLOGIES',
-  'REQUEST_SERVICE_IMAGES',
   'RESET_LOCAL_VIEW_STATE',
   'RESUME_TIME',
   'ROUTE_TOPOLOGY',

diff --git a/client/app/scripts/reducers/__tests__/root-test.js b/client/app/scripts/reducers/__tests__/root-test.js
@@ -731,37 +731,4 @@ describe('RootReducer', () => {
       constructEdgeId('def456', 'abc123')
     ]);
   });
-  it('receives images for a service', () => {
-    const action = {
-      type: ActionTypes.RECEIVE_SERVICE_IMAGES,
-      serviceId: 'cortex/configs',
-      service: {
-        ID: 'cortex/configs',
-        Containers: [{
-          Available: [{
-            ID: 'quay.io/weaveworks/cortex-configs:master-1ca6274a',
-            CreatedAt: '2017-04-26T13:50:13.284736173Z'
-          }],
-          Current: { ID: 'quay.io/weaveworks/cortex-configs:master-1ca6274a' },
-          Name: 'configs'
-        }]
-      }
-    };
-
-    const nextState = reducer(initialState, action);
-    expect(nextState.getIn(['serviceImages', 'cortex/configs'])).toEqual({
-      isFetching: false,
-      errors: undefined,
-      containers: [{
-        Name: 'configs',
-        Current: {
-          ID: 'quay.io/weaveworks/cortex-configs:master-1ca6274a'
-        },
-        Available: [{
-          ID: 'quay.io/weaveworks/cortex-configs:master-1ca6274a',
-          CreatedAt: '2017-04-26T13:50:13.284736173Z'
-        }]
-      }]
-    });
-  });
 });
diff --git a/client/app/scripts/reducers/root.js b/client/app/scripts/reducers/root.js
@@ -89,7 +89,6 @@ export const initialState = makeMap({
   viewport: makeMap({ width: 0, height: 0 }),
   websocketClosed: false,
   zoomCache: makeMap(),
-  serviceImages: makeMap()
 });
 
 function calcSelectType(topology) {
@@ -749,22 +748,6 @@ export function rootReducer(state = initialState, action) {
       return clearNodes(state);
     }
 
-    case ActionTypes.REQUEST_SERVICE_IMAGES: {
-      return state.setIn(['serviceImages', action.serviceId], {
-        isFetching: true
-      });
-    }
-
-    case ActionTypes.RECEIVE_SERVICE_IMAGES: {
-      const { service, errors, serviceId } = action;
-
-      return state.setIn(['serviceImages', serviceId], {
-        isFetching: false,
-        containers: service ? service.Containers : null,
-        errors
-      });
-    }
-
     case ActionTypes.MONITOR_STATE: {
       return state.set('monitor', action.monitor);
     }

diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
@@ -1110,59 +1110,6 @@ a {
 
     }
   }
-
-  .image-status {
-
-    .progress-wrapper {
-      position: relative;
-      min-height: 35px;
-    }
-
-    .node-details-content-section-header {
-      display: flex;
-      justify-content: space-between;
-      line-height: 26px;
-    }
-
-    .images .wrapper{
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .weave-circular-progress-wrapper {
-      position: absolute;
-      left: 50%;
-    }
-
-    .new-image {
-      color: $color-blue-600;
-    }
-
-    a {
-      &:hover {
-        background-color: $color-purple-50;
-        cursor: pointer;
-      }
-    }
-
-    .node-details-table-node-link {
-      background-color: transparent;
-      border: 0;
-      cursor: pointer;
-      padding: 0;
-      outline: 0;
-    }
-
-    .node-details-table-node-link,
-    .node-details-table-node-label,
-    .node-details-table-node-value {
-      flex: 1;
-      font-size: $font-size-small;
-      color: $text-color;
-      line-height: 24px;
-      text-transform: none;
-    }
-  }
 }