Merge branch 'staging' of https://github.com/porter-dev/porter into staging

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -37,7 +37,6 @@ export default class Dashboard extends Component<PropsType, StateType> {
   // Allows rollback to update the top-level chart
   refreshChart = () => {
     let { currentCluster } = this.props;
-    console.log(currentCluster)
     api.getChart('<token>', {
       namespace: this.state.namespace,
       context: currentCluster,

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

@@ -38,8 +38,8 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     components: [] as ResourceType[]
   }
 
-  componentDidMount() {
-    let { currentCluster, setCurrentError } = this.context;
+  updateResources = () => {
+    let { currentCluster } = this.context;
     let { currentChart } = this.props;
 
     api.getChartComponents('<token>', {
@@ -55,6 +55,16 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     });
   }
 
+  componentDidMount() {
+    this.updateResources();
+  }
+
+  componentDidUpdate(prevProps: PropsType) {
+    if (this.props.currentChart !== prevProps.currentChart) {
+      this.updateResources();
+    }
+  }
+
   renderIcon = () => {
     let { currentChart } = this.props;
 
@@ -79,9 +89,11 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       return (
         <GraphSection
           components={this.state.components}
-          currentChartName={currentChart.name}
-          currentChartVersion={currentChart.version}
+          currentChart={currentChart}
           setSidebar={setSidebar}
+          
+          // Handle resize YAML wrapper
+          showRevisions={this.state.showRevisions}
         />
       );
     } else if (this.state.currentTab === 'list') {

dashboard/src/main/home/dashboard/expanded-chart/GraphSection.tsx

@@ -2,16 +2,16 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 
 import { Context } from '../../../../shared/Context';
-import { ResourceType } from '../../../../shared/types';
+import { ResourceType, ChartType } from '../../../../shared/types';
 
 import GraphDisplay from './graph/GraphDisplay';
 import Loading from '../../../../components/Loading';
 
 type PropsType = {
   components: ResourceType[],
-  currentChartName: string,
-  currentChartVersion: number,
-  setSidebar: (x: boolean) => void
+  currentChart: ChartType,
+  setSidebar: (x: boolean) => void,
+  showRevisions: boolean
 };
 
 type StateType = {
@@ -30,8 +30,8 @@ export default class GraphSection extends Component<PropsType, StateType> {
           setSidebar={this.props.setSidebar}
           components={this.props.components}
           isExpanded={this.state.isExpanded}
-          currentChartName={this.props.currentChartName}
-          currentChartVersion={this.props.currentChartVersion}
+          currentChart={this.props.currentChart}
+          showRevisions={this.props.showRevisions}
         />
       );
     }

dashboard/src/main/home/dashboard/expanded-chart/RevisionSection.tsx

@@ -38,7 +38,8 @@ export default class RevisionSection extends Component<PropsType, StateType> {
       if (err) {
         console.log(err)
       } else {
-        this.setState({ revisions: res.data.reverse() });
+        res.data.sort((a: ChartType, b: ChartType) => { return -(a.version - b.version) });
+        this.setState({ revisions: res.data });
       }
     });
   }

dashboard/src/main/home/dashboard/expanded-chart/ValuesYaml.tsx

@@ -26,7 +26,10 @@ export default class ValuesYaml extends Component<PropsType, StateType> {
   }
 
   updateValues() {
-    let values = yaml.dump(this.props.currentChart.config);
+    let values = '# Nothing here yet';
+    if (this.props.currentChart.config) {
+      values = yaml.dump(this.props.currentChart.config);
+    }
     this.setState({ values });
   }
 

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
-import { ResourceType, NodeType, EdgeType } from '../../../../../shared/types';
+import { ResourceType, NodeType, EdgeType, ChartType } from '../../../../../shared/types';
 
 import Node from './Node';
 import Edge from './Edge';
@@ -15,8 +15,10 @@ type PropsType = {
   components: ResourceType[],
   isExpanded: boolean,
   setSidebar: (x: boolean) => void,
-  currentChartName: string,
-  currentChartVersion: number
+  currentChart: ChartType,
+
+  // Handle revisions expansion for YAML wrapper
+  showRevisions: boolean
 };
 
 type StateType = {
@@ -46,6 +48,7 @@ type StateType = {
   openedNode: NodeType | null,
   suppressCloseNode: boolean, // Still click should close opened unless on a node
   suppressDisplay: boolean, // Ignore clicks + pan/zoom on InfoPanel or ButtonSection
+  version?: number // Track in localstorage for handling updates when unmounted
 };
 
 // TODO: region-based unselect, shift-click, multi-region
@@ -88,7 +91,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
   }
 
   componentDidMount() {
-    let { components } = this.props;
+    let { components, currentChart } = this.props;
 
     // Initialize origin
     let height = this.spaceRef.offsetHeight;
@@ -101,24 +104,40 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     // Suppress trackpad gestures
     this.spaceRef.addEventListener("touchmove", (e: any) => e.preventDefault());
     this.spaceRef.addEventListener("mousewheel", (e: any) => e.preventDefault());
-    let graph = localStorage.getItem(`charts.${this.props.currentChartName}-${this.props.currentChartVersion}`)
-    let nodes = [] as NodeType[]
-    let edges = [] as EdgeType[]
 
+    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keyup", this.handleKeyUp);
+
+    // Handle graph from localstorage
+    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)
+      nodes = this.createNodes(components);
+      edges = this.createEdges(components);
       this.setState({ nodes, edges });
     } else {
       let storedState = JSON.parse(localStorage.getItem(
-        `charts.${this.props.currentChartName}-${this.props.currentChartVersion}`
-        )
-      )
+        `charts.${currentChart.name}-${currentChart.version}`
+      ));
       this.setState(storedState);
     }
 
-    document.addEventListener("keydown", this.handleKeyDown);
-    document.addEventListener("keyup", this.handleKeyUp);
+    window.onbeforeunload = () => {
+      this.storeChart();
+    }
+  }
+
+  // Live update on rollback/upgrade
+  componentDidUpdate(prevProps: PropsType) {
+    if (prevProps.components !== this.props.components) {
+      let nodes = [] as NodeType[];
+      let edges = [] as EdgeType[];
+  
+      nodes = this.createNodes(this.props.components);
+      edges = this.createEdges(this.props.components);
+      this.setState({ nodes, edges, openedNode: null });
+    }
   }
 
   createNodes = (components: ResourceType[]) => {
@@ -145,7 +164,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
   }
 
   createEdges = (components: ResourceType[]) => {
-    let edges = [] as EdgeType[]
+    let edges = [] as EdgeType[];
     components.map((c: ResourceType) => {
       c.Relations?.ControlRels?.map((rel: any) => {
         if (rel.Source == c.ID) {
@@ -163,13 +182,14 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
         }
       })
     });
-    return edges
+    return edges;
   }
 
-  componentWillUnmount() {
-    let graph = this.state;
+  storeChart = () => {
+    let { currentChart } = this.props;
+    let graph = JSON.parse(JSON.stringify(this.state));
 
-    // flush non-persistent data
+    // Flush non-persistent data
     graph.activeIds = [];
     graph.currentNode = null;
     graph.currentEdge = null;
@@ -179,9 +199,13 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     graph.suppressCloseNode = false;
 
     localStorage.setItem(
-      `charts.${this.props.currentChartName}-${this.props.currentChartVersion}`, 
+      `charts.${currentChart.name}-${currentChart.version}`,
       JSON.stringify(graph)
-    )
+    );
+  }
+
+  componentWillUnmount() {
+    this.storeChart();
     
     this.spaceRef.removeEventListener("touchmove", (e: any) => e.preventDefault());
     this.spaceRef.removeEventListener("mousewheel", (e: any) => e.preventDefault());
@@ -482,6 +506,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
 
           // For YAML wrapper to trigger resize
           isExpanded={this.state.isExpanded}
+          showRevisions={this.props.showRevisions}
         />
       </StyledGraphDisplay>
     );

dashboard/src/main/home/dashboard/expanded-chart/graph/InfoPanel.tsx

@@ -13,7 +13,8 @@ type PropsType = {
   openedNode: NodeType,
   setSuppressDisplay: (x: boolean) => void,
   closeNode: () => void,
-  isExpanded: boolean
+  isExpanded: boolean,
+  showRevisions: boolean
 };
 
 type StateType = {
@@ -51,7 +52,8 @@ export default class InfoPanel extends Component<PropsType, StateType> {
 
   componentDidUpdate(prevProps: PropsType) {
     if ((prevProps.openedNode !== this.props.openedNode 
-      || prevProps.isExpanded !== this.props.isExpanded) && this.wrapperRef
+      || prevProps.isExpanded !== this.props.isExpanded
+      || prevProps.showRevisions !== this.props.showRevisions) && this.wrapperRef
     ) {
       this.setState({ wrapperHeight: this.wrapperRef.offsetHeight });
     }
@@ -210,6 +212,7 @@ const StyledInfoPanel = styled.div`
   height: ${(props: { expanded: boolean }) => props.expanded ? 'calc(100% - 68px)' : '40px'};
   width: ${(props: { expanded: boolean }) => props.expanded ? 'calc(50% - 68px)' : '400px'};
   max-width: 600px;
+  min-width: 400px;
   background: #34373Cdf;
   border-radius: 3px;
   padding-left: 11px;