preview old revisions on click (graph, list, yaml)

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

@@ -22,7 +22,8 @@ type PropsType = {
 type StateType = {
   showRevisions: boolean,
   currentTab: string,
-  components: ResourceType[]
+  components: ResourceType[],
+  revisionPreview: ChartType | null
 };
 
 const tabOptions = [
@@ -35,7 +36,8 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
   state = {
     showRevisions: false,
     currentTab: 'graph',
-    components: [] as ResourceType[]
+    components: [] as ResourceType[],
+    revisionPreview: null as (ChartType | null)
   }
 
   updateResources = () => {
@@ -65,6 +67,23 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     }
   }
 
+  setRevisionPreview = (oldChart: ChartType) => {
+    let { currentCluster } = this.context;
+    this.setState({ revisionPreview: oldChart });
+
+    api.getChartComponents('<token>', {
+      namespace: oldChart.namespace,
+      context: currentCluster,
+      storage: StorageType.Secret
+    }, { name: oldChart.name, revision: oldChart.version }, (err: any, res: any) => {
+      if (err) {
+        console.log(err)
+      } else {
+        this.setState({ components: res.data });
+      }
+    });
+  }
+
   renderIcon = () => {
     let { currentChart } = this.props;
 
@@ -83,15 +102,16 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
   }
 
   renderTabContents = () => {
-    let { currentChart, refreshChart, setSidebar} = this.props;
+    let { currentChart, refreshChart, setSidebar } = this.props;
+    let chart = this.state.revisionPreview || currentChart;
     
     if (this.state.currentTab === 'graph') {
       return (
         <GraphSection
           components={this.state.components}
-          currentChart={currentChart}
+          currentChart={chart}
           setSidebar={setSidebar}
-          
+
           // Handle resize YAML wrapper
           showRevisions={this.state.showRevisions}
         />
@@ -99,7 +119,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     } else if (this.state.currentTab === 'list') {
       return (
         <ListSection
-          currentChart={currentChart}
+          currentChart={chart}
           components={this.state.components}
         />
       );
@@ -107,7 +127,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
 
     return (
       <ValuesYaml
-        currentChart={currentChart}
+        currentChart={chart}
         refreshChart={refreshChart}
       />
     );
@@ -115,7 +135,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
 
   render() {
     let { currentChart, setCurrentChart, refreshChart } = this.props;
-    let chart = currentChart;
+    let chart = this.state.revisionPreview || currentChart;
 
     return ( 
       <div>
@@ -157,6 +177,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
               toggleShowRevisions={() => this.setState({ showRevisions: !this.state.showRevisions })}
               chart={chart}
               refreshChart={refreshChart}
+              setRevisionPreview={this.setRevisionPreview}
             />
 
             <TabSelector

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

@@ -36,6 +36,7 @@ export default class ListSection extends Component<PropsType, StateType> {
   }
 
   renderContents = () => {
+    console.log('rerendered!')
     if (this.props.components && this.props.components.length > 0) {
       return (
         <ResourceList>

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

@@ -25,6 +25,13 @@ export default class ResourceItem extends Component<PropsType, StateType> {
     RawYAML: yaml.dump(this.props.resource.RawYAML)
   }
 
+  // Handle previewing old revisions
+  componentDidUpdate(prevProps: PropsType) {
+    if (prevProps.resource.RawYAML !== this.props.resource.RawYAML) {
+      this.setState({ RawYAML: yaml.dump(this.props.resource.RawYAML) });
+    }
+  }
+
   renderIcon = (kind: string) => {
 
     let icon = 'tonality';

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

@@ -11,20 +11,23 @@ type PropsType = {
   showRevisions: boolean,
   toggleShowRevisions: () => void,
   chart: ChartType,
-  refreshChart: () => void
+  refreshChart: () => void,
+  setRevisionPreview: (preview: ChartType) => void
 };
 
 type StateType = {
   revisions: ChartType[],
   rollbackRevision: number | null,
-  loading: boolean
+  loading: boolean,
+  maxVersion: number
 };
 
 export default class RevisionSection extends Component<PropsType, StateType> {
   state = {
     revisions: [] as ChartType[],
     rollbackRevision: null as (number | null),
-    loading: false
+    loading: false,
+    maxVersion: 0, // Track most recent version even when previewing old revisions
   }
 
   refreshHistory = () => {
@@ -39,7 +42,7 @@ export default class RevisionSection extends Component<PropsType, StateType> {
         console.log(err)
       } else {
         res.data.sort((a: ChartType, b: ChartType) => { return -(a.version - b.version) });
-        this.setState({ revisions: res.data });
+        this.setState({ revisions: res.data, maxVersion: res.data[0].version });
       }
     });
   }
@@ -88,18 +91,23 @@ export default class RevisionSection extends Component<PropsType, StateType> {
   }
 
   renderRevisionList = () => {
-    return this.state.revisions.map((revision: any, i: number) => {
+    return this.state.revisions.map((revision: ChartType, i: number) => {
+      let isCurrent = revision.version === this.state.maxVersion;
       return (
-        <Tr key={i}>
+        <Tr
+          key={i}
+          onClick={() => this.props.setRevisionPreview(revision)}
+          selected={this.props.chart.version === revision.version}
+        >
           <Td>{revision.version}</Td>
           <Td>{this.readableDate(revision.info.last_deployed)}</Td>
           <Td>{revision.info.status}</Td>
           <Td>
             <RollbackButton
-              disabled={revision.version === this.props.chart.version}
+              disabled={isCurrent}
               onClick={() => this.setState({ rollbackRevision: revision.version })}
             >
-              {revision.version === this.props.chart.version ? 'Current' : 'Revert'}
+              {isCurrent ? 'Current' : 'Revert'}
             </RollbackButton>
           </Td>
         </Tr>
@@ -110,17 +118,19 @@ export default class RevisionSection extends Component<PropsType, StateType> {
   renderExpanded = () => {
     if (this.props.showRevisions) {
       return (
-        <RevisionsTable>
-          <tbody>
-            <Tr>
-              <Th>Revision No.</Th>
-              <Th>Timestamp</Th>
-              <Th>Status</Th>
-              <Th>Rollback</Th>
-            </Tr>
-            {this.renderRevisionList()}
-          </tbody>
-        </RevisionsTable>
+        <TableWrapper>
+          <RevisionsTable>
+            <tbody>
+              <Tr disableHover={true}>
+                <Th>Revision No.</Th>
+                <Th>Timestamp</Th>
+                <Th>Status</Th>
+                <Th>Rollback</Th>
+              </Tr>
+              {this.renderRevisionList()}
+            </tbody>
+          </RevisionsTable>
+        </TableWrapper>
       )
     }
   }
@@ -158,13 +168,14 @@ export default class RevisionSection extends Component<PropsType, StateType> {
       )
     }
 
+    let isCurrent = this.props.chart.version === this.state.maxVersion || this.state.maxVersion === 0;
     return (
       <div>
         <RevisionHeader
           showRevisions={this.props.showRevisions}
           onClick={this.props.toggleShowRevisions}
         >
-          Current Revision - <Revision>No. {this.props.chart.version}</Revision>
+          {isCurrent ? `Current Revision` : `Previewing Revision`} - <Revision>No. {this.props.chart.version}</Revision>
           <i className="material-icons">expand_more</i>
         </RevisionHeader>
 
@@ -187,6 +198,10 @@ export default class RevisionSection extends Component<PropsType, StateType> {
 
 RevisionSection.contextType = Context;
 
+const TableWrapper = styled.div`
+  padding-bottom: 20px;
+`;
+
 const LoadingPlaceholder = styled.div`
   height: 40px;
   display: flex;
@@ -294,17 +309,24 @@ const RollbackButton = styled.div`
 
 const Tr = styled.tr`
   line-height: 1.8em;
+  cursor: ${(props: { disableHover?: boolean, selected?: boolean }) => props.disableHover ? '' : 'pointer'};
+  background: ${(props: { disableHover?: boolean, selected?: boolean  }) => props.selected ? '#ffffff11' : ''};
+  :hover {
+    background: ${(props: { disableHover?: boolean, selected?: boolean  }) => props.disableHover ? '' : '#ffffff22'};
+  }
 `;
 
 const Td = styled.td`
   font-size: 13px;
   color: #ffffff;
+  padding-left: 32px;
 `;
 
 const Th = styled.td`
   font-size: 13px;
   font-weight: 500;
   color: #aaaabb;
+  padding-left: 32px;
 `;
 
 const RevisionsTable = styled.table`
@@ -313,6 +335,7 @@ const RevisionsTable = styled.table`
   padding-left: 32px;
   padding-bottom: 20px;
   min-width: 500px;
+  border-collapse: collapse;
 `;
 
 const Revision = styled.div`