expanded chart state overhaul + form parity

dashboard/src/components/values-form/ValuesForm.tsx

@@ -27,13 +27,12 @@ export default class ValuesForm extends Component<PropsType, StateType> {
   updateFormState() {
     let formState: any = {};
     this.props.sections.forEach((section: Section, i: number) => {
-      console.log(section);
       section.contents.forEach((item: FormElement, i: number) => {
 
         // If no name is assigned use values.yaml variable as identifier
         let key = item.name || item.variable;
         
-        let def = (item.settings && item.settings.default) || (item.variable && item.variable[0]);
+        let def = (item.value && item.value[0]) || (item.settings && item.settings.default);
 
         /* Set default value from chart config if available
         if (this.props.config) {
@@ -63,7 +62,6 @@ export default class ValuesForm extends Component<PropsType, StateType> {
 
   // Initialize corresponding state fields for form blocks
   componentDidMount() {
-    console.log(this.props.sections)
     this.updateFormState();
   }
 

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -23,7 +23,7 @@ type StateType = {
 
 export default class ClusterDashboard extends Component<PropsType, StateType> {
   state = {
-    namespace: '',
+    namespace: 'default',
     currentChart: null as (ChartType | null)
   }
 

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

@@ -32,7 +32,7 @@ type StateType = {
   showRevisions: boolean,
   components: ResourceType[],
   podSelectors: string[]
-  revisionPreview: ChartType | null,
+  isPreview: boolean,
   devOpsMode: boolean,
   tabOptions: any[],
   tabContents: any,
@@ -55,7 +55,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     showRevisions: false,
     components: [] as ResourceType[],
     podSelectors: [] as string[],
-    revisionPreview: null as (ChartType | null),
+    isPreview: false,
     devOpsMode: localStorage.getItem('devOpsMode') === 'true',
     tabOptions: [] as any[],
     tabContents: [] as any,
@@ -64,25 +64,29 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     forceRefreshRevisions: false,
   }
 
-  refreshChart = (callback?: () => void) => {
+  // Retrieve full chart data (includes form and values)
+  getChartData = (chart: ChartType) => {
     let { currentProject } = this.context;
     let { currentCluster, setCurrentChart } = this.props;
+    this.setState({ loading: true })
     api.getChart('<token>', {
       namespace: this.props.namespace,
       cluster_id: currentCluster.id,
       storage: StorageType.Secret
     }, {
-      name: this.props.currentChart.name,
-      revision: 0,
+      name: chart.name,
+      revision: chart.version,
       id: currentProject.id
     }, (err: any, res: any) => {
       if (err) {
         console.log(err);
-        callback();
       } else {
         setCurrentChart(res.data);
         this.setState({ loading: false });
-        callback();
+
+        // After retrieving full chart data, update tabs and resources
+        this.updateTabs();
+        this.updateResources();
       }
     });
   }
@@ -108,18 +112,21 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     });
   }
 
+  refreshChart = () => this.getChartData(this.props.currentChart);
+
   componentDidMount() {
-    this.refreshChart(() => this.updateTabs());
-    this.updateResources();
+    this.getChartData(this.props.currentChart);
   }
 
   componentDidUpdate(prevProps: PropsType) {
+    /*
     if (this.props.currentChart !== prevProps.currentChart) {
       this.updateResources();
     }
+    */
   }
 
-  upgradeValues = (rawValues: any) => {
+  onSubmit = (rawValues: any) => {
     let { currentProject, currentCluster, setCurrentError } = this.context;
 
     // Convert dotted keys to nested objects
@@ -162,10 +169,10 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       showRevisions,
       saveValuesStatus,
       tabOptions,
-      revisionPreview,
+      isPreview,
     } = this.state;
     let { currentChart, setSidebar, setCurrentView } = this.props;
-    let chart = revisionPreview || currentChart;
+    let chart = currentChart;
 
     switch (currentTab) {
       case 'status': 
@@ -223,7 +230,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
                 <ValuesFormWrapper key={i}>
                   <ValuesForm 
                     sections={tab.sections} 
-                    onSubmit={this.upgradeValues}
+                    onSubmit={this.onSubmit}
                     saveValuesStatus={saveValuesStatus}
                   />
                 </ValuesFormWrapper>
@@ -261,7 +268,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     }
 
     // Filter tabs if previewing an old revision
-    if (this.state.revisionPreview) {
+    if (this.state.isPreview) {
       let liveTabs = ['status', 'settings', 'deploy'];
       tabOptions = tabOptions.filter((tab: any) => !liveTabs.includes(tab.value));
     }
@@ -269,29 +276,9 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     this.setState({ tabOptions });
   }
 
-  setRevisionPreview = (oldChart: ChartType) => {
-    let { currentCluster, currentProject } = this.context;
-    this.setState({ revisionPreview: oldChart }, () => this.updateTabs());
-
-    if (oldChart) {
-      api.getChartComponents('<token>', {
-        namespace: oldChart.namespace,
-        cluster_id: currentCluster.id,
-        storage: StorageType.Secret
-      }, {
-        id: currentProject.id,
-        name: oldChart.name,
-        revision: oldChart.version
-      }, (err: any, res: any) => {
-        if (err) {
-          console.log(err)
-        } else {
-          this.setState({ components: res.data.Objects, podSelectors: res.data.PodSelectors });
-        }
-      });
-    } else {
-      this.updateResources();
-    }
+  setRevision = (chart: ChartType, isCurrent?: boolean) => {
+    this.setState({ isPreview: !isCurrent });
+    this.getChartData(chart);
   }
 
   // TODO: consolidate with pop + push in refreshTabs
@@ -328,7 +315,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
 
   render() {
     let { currentChart, setCurrentChart } = this.props;
-    let chart = this.state.revisionPreview || currentChart;
+    let chart = currentChart;
 
     return ( 
       <div>
@@ -364,7 +351,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
               toggleShowRevisions={() => this.setState({ showRevisions: !this.state.showRevisions })}
               chart={chart}
               refreshChart={this.refreshChart}
-              setRevisionPreview={this.setRevisionPreview}
+              setRevision={this.setRevision}
               forceRefreshRevisions={this.state.forceRefreshRevisions}
               refreshRevisionsOff={() => this.setState({ forceRefreshRevisions: false })}
             />
@@ -374,7 +361,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
             currentTab={this.state.currentTab}
             setCurrentTab={(x: string) => this.setState({ currentTab: x })}
             options={this.state.tabOptions}
-            color={this.state.revisionPreview ? '#f5cb42' : null}
+            color={this.state.isPreview ? '#f5cb42' : null}
             addendum={
               <TabButton onClick={this.toggleDevOpsMode} devOpsMode={this.state.devOpsMode}>
                 <i className="material-icons">offline_bolt</i> DevOps Mode

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

@@ -13,7 +13,7 @@ type PropsType = {
   toggleShowRevisions: () => void,
   chart: ChartType,
   refreshChart: () => void,
-  setRevisionPreview: (preview: ChartType) => void
+  setRevision: (x: ChartType, isCurrent?: boolean) => void
   forceRefreshRevisions: boolean,
   refreshRevisionsOff: () => void,
 };
@@ -34,7 +34,7 @@ export default class RevisionSection extends Component<PropsType, StateType> {
     maxVersion: 0, // Track most recent version even when previewing old revisions
   }
 
-  refreshHistory = () => {
+  refreshHistory = (callback?: () => void) => {
     let { chart } = this.props;
     let { currentCluster, currentProject } = this.context;
     api.getRevisions('<token>', {
@@ -47,6 +47,7 @@ export default class RevisionSection extends Component<PropsType, StateType> {
       } else {
         res.data.sort((a: ChartType, b: ChartType) => { return -(a.version - b.version) });
         this.setState({ revisions: res.data, maxVersion: res.data[0].version });
+        callback && callback();
       }
     });
   }
@@ -59,8 +60,11 @@ export default class RevisionSection extends Component<PropsType, StateType> {
   componentDidUpdate(prevProps: PropsType) {
     if (this.props.forceRefreshRevisions) {
       this.props.refreshRevisionsOff();
-      this.props.refreshChart();
-      this.refreshHistory();
+
+      // Force refresh occurs on submit -> set current to newest
+      this.refreshHistory(() => {
+        this.props.setRevision(this.state.revisions[0], true);
+      });
     } else if (this.props.chart !== prevProps.chart) {
       this.refreshHistory();
     }
@@ -94,9 +98,9 @@ export default class RevisionSection extends Component<PropsType, StateType> {
         this.setState({ loading: false });
       } else {
         this.setState({ loading: false });
-        this.props.refreshChart();
-        this.refreshHistory();
-        this.props.setRevisionPreview(null);
+        this.refreshHistory(() => {
+          this.props.setRevision(this.state.revisions[0], true);
+        });
       }
     });
   }
@@ -104,9 +108,9 @@ export default class RevisionSection extends Component<PropsType, StateType> {
   handleClickRevision = (revision: ChartType) => {
     let isCurrent = revision.version === this.state.maxVersion;
     if (isCurrent) {
-      this.props.setRevisionPreview(null);
+      this.props.setRevision(revision, true);
     } else {
-      this.props.setRevisionPreview(revision);
+      this.props.setRevision(revision);
     }
   }
 

dashboard/src/shared/types.tsx

@@ -100,7 +100,7 @@ export interface FormElement {
   label: string,
   name?: string,
   variable?: string,
-  values?: any,
+  value?: any,
   settings?: {
     default?: number | string | boolean,
     options?: any[],