custom annotations support

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

@@ -14,10 +14,18 @@ type StateType = {};
 
 export default class InputArray extends Component<PropsType, StateType> {
 
-  renderInputList = () => {
+  dict2arr = (dict: Record<string, any>) => {
+    let arr = [];
+    for (let key in dict) {
+      arr.push(`${key}: ${dict[key]}`)
+    }
+    return arr
+  }
+
+  renderInputList = (values: string[]) => {
     return (
       <>
-        {this.props.values.map((value: string, i: number) => {
+        {values.map((value: string, i: number) => {
           return (
             <InputWrapper>
               <Input
@@ -25,15 +33,15 @@ export default class InputArray extends Component<PropsType, StateType> {
                 width="270px"
                 value={value}
                 onChange={(e: any) => {
-                  let values = [...this.props.values];
-                  values[i] = e.target.value;
-                  this.props.setValues(values);
+                  let v = [...values];
+                  v[i] = e.target.value;
+                  this.props.setValues(v);
                 }}
               />
               <DeleteButton onClick={() => {
-                let values = [...this.props.values];
-                values.splice(i, 1);
-                this.props.setValues(values);
+                let v = [...values];
+                v.splice(i, 1);
+                this.props.setValues(v);
               }}>
                 <i className="material-icons">cancel</i>
               </DeleteButton>
@@ -45,18 +53,24 @@ export default class InputArray extends Component<PropsType, StateType> {
   }
 
   render() {
+    let { values } = this.props;
+
+    if (!Array.isArray(values)) {
+      values = this.dict2arr(values)
+    }
+
     return (
       <StyledInputArray>
         <Label>{this.props.label}</Label>
         {
-          this.props.values.length === 0
+          values.length === 0
           ? <></>
-          : this.renderInputList()
+          : this.renderInputList(values)
         }
         <AddRowButton onClick={() => {
-          let values = [...this.props.values];
-          values.push("");
-          this.props.setValues(values);
+          let v = [...values];
+          v.push("");
+          this.props.setValues(v);
         }}>
           <i className="material-icons">add</i> Add Row
         </AddRowButton>

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

@@ -223,8 +223,19 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
 
     // Convert dotted keys to nested objects
     let values = {};
+
     for (let key in rawValues) {
-      _.set(values, key, rawValues[key]);
+      if (key === "ingress.annotations") {
+        let annotations = {} as Record<string, any>;
+        rawValues[key].forEach((v: string) => {
+          let splits = v.split(":");
+          annotations[splits[0].trim()] = splits[1].trim();
+        });
+
+        _.set(values, key, annotations);
+      } else {
+        _.set(values, key, rawValues[key]);
+      }
     }
 
     // Weave in preexisting values and convert to yaml

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

@@ -161,7 +161,17 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
     // Convert dotted keys to nested objects
     let values = {};
     for (let key in rawValues) {
-      _.set(values, key, rawValues[key]);
+      if (key === "ingress.annotations") {
+        let annotations = {} as Record<string, any>;
+        rawValues[key].forEach((v: string) => {
+          let splits = v.split(":");
+          annotations[splits[0].trim()] = splits[1].trim();
+        });
+
+        _.set(values, key, annotations);
+      } else {
+        _.set(values, key, rawValues[key]);
+      }
     }
 
     let imageUrl = this.state.selectedImageUrl;
@@ -180,8 +190,28 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
       tag = "latest";
     }
 
-    _.set(values, "image.repository", imageUrl);
-    _.set(values, "image.tag", tag);
+    let provider;
+    switch (currentCluster.service) {
+      case 'eks':
+        provider = 'aws';
+        break;
+      case 'gke':
+        provider = 'gcp';
+        break;
+      case 'doks':
+        provider = 'digitalocean';
+        break;
+      default:
+        provider = null;
+    }
+
+    // don't overwrite for templates that already have a source (i.e. non-Docker templates)
+    if (imageUrl && tag) {
+      _.set(values, "image.repository", imageUrl);
+      _.set(values, "image.tag", tag);
+    }
+
+    _.set(values, "ingress.provider", provider);
 
     console.log(`
       ${this.props.currentTemplate.name}\n