Merge pull request #553 from porter-dev/0.2.0-fix-149

[0.2.0] Fixes #149: chart overview and manifests don't update on revision select

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -98,9 +98,15 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
         }
       )
       .then((res) => {
-        this.setState({ currentChart: res.data, loading: false }, () => {
-          this.updateTabs();
-        });
+        this.updateComponents({ currentChart: res.data, loading: false }, res.data);
+        // // if the current tab is manifests or chart overview, update components as well
+        // if (this.state.currentTab == "graph" || this.state.currentTab == "list") {
+        //   this.updateComponents({ currentChart: res.data, loading: false }, currentChart);
+        // } else {
+        //   this.setState({ currentChart: res.data, loading: false }, () => {
+        //     this.updateTabs()
+        //   })
+        // }
       })
       .catch(console.log);
   };
@@ -197,9 +203,8 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     this.setState({ websockets });
   };
 
-  updateResources = () => {
+  updateComponents = (state : any, currentChart : ChartType) => {
     let { currentCluster, currentProject } = this.context;
-    let { currentChart } = this.state;
 
     api
       .getChartComponents(
@@ -216,10 +221,13 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
         }
       )
       .then((res) => {
-        this.setState({
-          components: res.data.Objects,
-          podSelectors: res.data.PodSelectors,
-        });
+        let newState = state || {}
+
+        newState.components = res.data.Objects
+        newState.podSelectors = res.data.PodSelectors
+
+        this.setState(newState);
+        this.updateTabs();
       })
       .catch(console.log);
   };

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/GraphDisplay.tsx

@@ -8,6 +8,7 @@ import Edge from "./Edge";
 import InfoPanel from "./InfoPanel";
 import ZoomPanel from "./ZoomPanel";
 import SelectRegion from "./SelectRegion";
+import _ from "lodash";
 
 const zoomConstant = 0.01;
 const panConstant = 0.8;
@@ -100,8 +101,10 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     let graph = localStorage.getItem(
       `charts.${currentChart.name}-${currentChart.version}`
     );
+    
     let nodes = [] as NodeType[];
     let edges = [] as EdgeType[];
+
     if (!graph) {
       nodes = this.createNodes(components);
       edges = this.createEdges(components);
@@ -143,7 +146,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
 
   // Live update on rollback/upgrade
   componentDidUpdate(prevProps: PropsType) {
-    if (prevProps.components !== this.props.components) {
+    if (!(_.isEqual(prevProps.currentChart, this.props.currentChart))) {
       this.storeChartGraph(prevProps);
       this.getChartGraph();
     }
@@ -243,7 +246,9 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
   };
 
   storeChartGraph = (props?: PropsType) => {
+
     let useProps = props || this.props;
+
     let { currentChart } = useProps;
     let graph = JSON.parse(JSON.stringify(this.state));
 
@@ -559,9 +564,9 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
           showKindLabels={this.state.showKindLabels}
           isOpen={node === this.state.openedNode}
           // Parameterized to allow setting to null
-          setCurrentNode={(node: NodeType) =>
+          setCurrentNode={(node: NodeType) => {
             this.setState({ currentNode: node })
-          }
+          }}
         />
       );
     });