form handle unit

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

@@ -66,6 +66,15 @@ export default class ValuesForm extends Component<PropsType, StateType> {
     }
   }
 
+  getInputValue = (item: FormElement) => {
+    let key = item.name || item.variable;
+    let value = this.state[key];
+    if (item.settings && item.settings.unit) {
+      value = value.split(item.settings.unit)[0]
+    }
+    return value;
+  }
+
   renderSection = (section: Section) => {
     return section.contents.map((item: FormElement, i: number) => {
 
@@ -106,8 +115,13 @@ export default class ValuesForm extends Component<PropsType, StateType> {
             <InputRow
               key={i}
               type='text'
-              value={this.state[key]}
-              setValue={(x: string) => this.setState({ [key]: x })}
+              value={this.getInputValue(item)}
+              setValue={(x: string) => {
+                if (item.settings && item.settings.unit) {
+                  x = x + item.settings.unit;
+                }
+                this.setState({ [key]: x });
+              }}
               label={item.label}
               unit={item.settings ? item.settings.unit : null}
             />
@@ -117,8 +131,14 @@ export default class ValuesForm extends Component<PropsType, StateType> {
             <InputRow
               key={i}
               type='number'
-              value={this.state[key]}
-              setValue={(x: number) => this.setState({ [key]: x })}
+              value={this.getInputValue(item)}
+              setValue={(x: number) => {
+                let val = x.toString();
+                if (item.settings && item.settings.unit) {
+                  val = val + item.settings.unit;
+                }
+                this.setState({ [key]: val });
+              }}
               label={item.label}
               unit={item.settings ? item.settings.unit : null}
             />
@@ -168,7 +188,7 @@ export default class ValuesForm extends Component<PropsType, StateType> {
         <SaveButton
           disabled={this.props.disabled}
           text='Deploy'
-          onClick={() => this.props.onSubmit(this.state)}
+          onClick={() => console.log(this.state)}
           status={this.props.saveValuesStatus}
           makeFlush={true}
         />

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

@@ -98,6 +98,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     let nodes = [] as NodeType[];
     let edges = [] as EdgeType[];
     if (!graph) {
+      console.log('nada')
       nodes = this.createNodes(components);
       edges = this.createEdges(components);
       this.setState({ nodes, edges });
@@ -136,6 +137,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
   // Live update on rollback/upgrade
   componentDidUpdate(prevProps: PropsType) {
     if (prevProps.components !== this.props.components) {
+      this.storeChartGraph();
       this.getChartGraph();
     }
   }

dashboard/src/main/home/templates/expanded-template/ExpandedTemplate.tsx

@@ -44,7 +44,6 @@ export default class ExpandedTemplate extends Component<PropsType, StateType> {
       if (err) {
         this.setState({ loading: false, error: true });
       } else {
-        console.log(res.data);
         let { form, values, markdown, metadata } = res.data;
         let keywords = metadata.keywords;
         this.setState({ form, values, markdown, keywords, loading: false, error: false });

dashboard/src/main/home/templates/expanded-template/TemplateInfo.tsx

@@ -32,11 +32,13 @@ export default class TemplateInfo extends Component<PropsType, StateType> {
   }
 
   renderTagList = () => {
-    return this.props.keywords.map((tag: string, i: number) => {
-      return (
-        <Tag key={i}>{tag}</Tag>
-      )
-    });
+    if (this.props.keywords) {
+      return this.props.keywords.map((tag: string, i: number) => {
+        return (
+          <Tag key={i}>{tag}</Tag>
+        )
+      });
+    }
   }
 
   renderMarkdown = () => {
@@ -50,7 +52,7 @@ export default class TemplateInfo extends Component<PropsType, StateType> {
   }
 
   renderTagSection = () => {
-    if (this.props.keywords.length > 0) {
+    if (this.props.keywords && this.props.keywords.length > 0) {
       return (
         <TagSection>
           <i className="material-icons">local_offer</i>