Allow multiple charts to be deployed when creating a new node (#78)

AMRC-FactoryPlus · Jan 15, 2024 · a90eebf · a90eebf
1 parent 0084644
commit a90eebf
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 59 deletions.
diff --git a/app/Domain/Nodes/Actions/CreateNodeAction.php b/app/Domain/Nodes/Actions/CreateNodeAction.php
@@ -34,8 +34,9 @@ public function execute(
         $nodeName,
         $destinationCluster,
         $destinationNode,
-        $chart,
+        $charts,
     ) {
+
         // =========================
         // Validate User Permissions
         // =========================
@@ -72,10 +73,13 @@ public function execute(
             "name" => $nodeName . '/' . $destinationCluster . '/' . $destinationNode,
         ]);
 
+        // Split the $charts string (comma-delimited) into an array of UUIDs
+        $charts = explode(',', $charts);
+
         // Create an entry in the Edge Agent Deployment app to trigger the deployment of the edge agent
         $configDB->putConfig(App::EdgeAgentDeployment, $uuid, [
             "name" => $nodeName,
-            "charts" => [$chart],
+            "charts" => $charts,
             "cluster" => $destinationCluster,
             "hostname" => $destinationNode,
         ]);

diff --git a/app/Http/Controllers/NodeController.php b/app/Http/Controllers/NodeController.php
@@ -51,7 +51,7 @@ public function store(CreateNodeRequest $request)
                 nodeName: $validated['node_name'],
                 destinationCluster: $validated['destination_cluster'],
                 destinationNode: $validated['destination_node'],
-                chart: $validated['chart'],
+                charts: $validated['charts'],
             )
         );
     }

diff --git a/app/Http/Requests/CreateNodeRequest.php b/app/Http/Requests/CreateNodeRequest.php
@@ -49,7 +49,7 @@ public function rules()
     {
         return [
             'node_name' => ['required', 'string', 'min:5', 'regex:/^\w+$/i'],
-            'chart' => ['required', 'uuid', 'string',],
+            'charts' => ['required', 'string'],
             'destination_cluster' => ['required', 'string'],
             'destination_node' => ['required', 'string'],
         ];

diff --git a/resources/js/components/FormControls/Checkbox.vue b/resources/js/components/FormControls/Checkbox.vue
@@ -4,24 +4,25 @@
   -->
 
 <template>
-    <div @mouseup="toggle"
-         class="cursor-pointer flex justify-between items-center w-full select-none text-gray-500 focus:ring-gray-400 p-4"
-         :class="[
+  <div @mouseup="toggle"
+       class="cursor-pointer flex justify-between items-center w-full select-none text-gray-500 focus:ring-gray-400 p-4 gap-3"
+       :class="[
              localValue ? 'bg-gray-100' : 'hover:bg-gray-100']">
-      <div v-if="control.name" class="flex flex-col flex-shrink mr-2">
-        <div class="bg-transparent text-gray-700 flex focus:outline-none text-left" :class="[control.description ? 'mb-1' : 'text-sm']">{{
-            control.name
-          }}
-        </div>
-        <div class="text-xs text-gray-500" v-if="control.description">{{ control.description }}</div>
-      </div>
-      <div
-          class="w-5 h-5 flex items-center justify-center border focus:outline-none text-center text-xs mx-10 lg:mx-0 flex-shrink-0"
-          :class="[localValue ? 'bg-gray-700 text-white' : 'bg-white']">
-        <input type="checkbox" class="hidden" checked>
-        <i class="fa-solid fa-check" :class="this.localValue ? '' : 'hidden'"></i>
+    <div
+        class="w-5 h-5 flex items-center justify-center border focus:outline-none text-center text-xs mx-10 lg:mx-0 flex-shrink-0"
+        :class="[localValue ? 'bg-gray-700 text-white' : 'bg-white']">
+      <input type="checkbox" class="hidden" checked>
+      <i class="fa-solid fa-check" :class="this.localValue ? '' : 'hidden'"></i>
+    </div>
+    <div v-if="control.name" class="flex flex-col flex-shrink">
+      <div class="bg-transparent text-gray-700 flex focus:outline-none text-left"
+           :class="[control.description ? 'mb-1' : 'text-sm']">{{
+          control.name
+        }}
       </div>
+      <div class="text-xs text-gray-500" v-if="control.description">{{control.description}}</div>
     </div>
+  </div>
 </template>
 <script>
 export default {
@@ -35,29 +36,29 @@ export default {
   watch: {
 
     value (val) {
-      this.localValue = val;
+      this.localValue = val
     },
 
     localValue (val) {
-      this.$emit('valueUpdated', val);
-      this.$emit('input', val);
-    }
+      this.$emit('valueUpdated', val)
+      this.$emit('input', val)
+    },
   },
 
   methods: {
     toggle () {
-      this.localValue = !this.localValue;
+      this.localValue = !this.localValue
     },
 
     reset () {
-      this.localValue = this.control.default ? this.control.default : false;
-    }
+      this.localValue = this.control.default ? this.control.default : false
+    },
   },
 
   data () {
     return {
-      localValue: !!this.value
-    };
-  }
-};
-</script>
+      localValue: !!this.value,
+    }
+  },
+}
+</script>
diff --git a/resources/js/components/FormControls/FormWrapper.vue b/resources/js/components/FormControls/FormWrapper.vue
@@ -9,7 +9,7 @@
             {{ control.description }}
         </div>
         <div class="flex flex-col" :class="[showDescription ? 'col-span-2' : 'col-span-3']">
-            <div class="flex items-center mb-1">
+            <div class="flex items-center mb-2">
                 <h4 v-if="control.name">{{ control.name }}</h4>
                 <button v-if="control.infoLink" @mouseup="goto_url_tab(control.infoLink)"
                         v-tooltip="control.infoTooltip" class="fa-sharp fa-solid fa-info-circle fa-fw fpl-button-info text-xs"></button>
@@ -50,4 +50,4 @@ export default {
         return {};
     },
 }
-</script>
+</script>
diff --git a/resources/js/components/FormControls/Input.vue b/resources/js/components/FormControls/Input.vue
@@ -9,7 +9,7 @@
       {{ control.description }}
     </div>
     <div class="flex flex-col" :class="[showDescription ? 'col-span-2' : 'col-span-3']">
-      <div class="flex items-center mb-1">
+      <div class="flex items-center mb-2">
         <h4 v-if="control.name">{{ control.name }}</h4>
         <button v-if="control.infoLink" @mouseup="goto_url_tab(control.infoLink)"
                 v-tooltip="control.infoTooltip" class="fa-sharp fa-solid fa-info-circle fa-fw fpl-button-info text-xs"></button>

diff --git a/resources/js/components/FormControls/MultiSelection.vue b/resources/js/components/FormControls/MultiSelection.vue
@@ -4,7 +4,7 @@
   -->
 
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-wrap gap-3">
     <div v-if="control.options?.length === 0">
       <div class=" bg-gray-100 animate-pulse flex relative items-center justify-start w-full h-16"></div>
     </div>
@@ -34,11 +34,11 @@ export default {
 
   methods: {
     updateCheckState (option) {
-      if (this.localValue.includes(option.id)) {
-        this.localValue.splice(this.localValue.indexOf(option.id), 1);
+      if (this.localValue.includes(option.value)) {
+        this.localValue.splice(this.localValue.indexOf(option.value), 1);
         return;
       }
-      this.localValue.push(option.id);
+      this.localValue.push(option.value);
     },
   },
 

diff --git a/resources/js/components/General/FormControl.vue b/resources/js/components/General/FormControl.vue
@@ -23,16 +23,19 @@
                 class="inline-flex justify-center w-80 border pl-4 py-2 bg-white font-medium text-gray-700 fpl-input text-left"
                 id="menu-button" aria-expanded="true" aria-haspopup="true">
           <div class="flex-grow truncate">
-            {{ value ? value : 'Select...' }}
+            {{value ? value : 'Select...'}}
           </div>
           <i class="fa-solid fa-chevron-down text-gray-400"></i>
         </button>
       </OverflowMenu>
 
     </FormWrapper>
-    <form-control-multi-selection :key="control.id" v-else-if="control.type === 'multiSelection'" :control="control"
-                                  :value="value"
-                                  @valueUpdated="broadcastValueUpdated"/>
+    <FormWrapper :key="control.id" v-else-if="control.type === 'multiSelection'" :control="control">
+      <form-control-multi-selection
+          :control="control"
+          :value="value"
+          @valueUpdated="broadcastValueUpdated"/>
+    </FormWrapper>
     <form-control-checkbox :key="control.id" v-else-if="control.type === 'checkbox'" :control="control" :valid="valid"
                            :value="value"
                            @valueUpdated="broadcastValueUpdated"/>

diff --git a/resources/js/components/General/Wizard.vue b/resources/js/components/General/Wizard.vue
@@ -304,9 +304,9 @@ export default {
             return JSON.stringify(paramContent);
           case 'arrayOfStrings' :
             suppliedData.forEach((element) => {
-              paramContent.push(element[value.translator.field]);
+              paramContent.push(element);
             });
-            return JSON.stringify(paramContent);
+            return paramContent;
           case 'invert' :
             return !suppliedData;
           case 'multiply' :

diff --git a/resources/js/components/Nodes/NewNodeOverlay.vue b/resources/js/components/Nodes/NewNodeOverlay.vue
@@ -102,18 +102,16 @@ export default {
   methods: {
 
     buildHelmChartTemplateOptions() {
-      this.steps.nodeSelection.controls.chart.options = Object.keys(this.helmChartTemplates).map((helmChartTemplate) => {
+      this.steps.nodeSelection.controls.charts.options = Object.keys(this.helmChartTemplates).map((helmChartTemplate) => {
         return {
           title: this.helmChartTemplates[helmChartTemplate].name,
           value: helmChartTemplate,
           action: () => {
-            this.steps.__request.parameters.chart.data = helmChartTemplate
-            this.steps.nodeSelection.controls.chart.value = this.helmChartTemplates[helmChartTemplate].name
+            this.steps.__request.parameters.charts.data = helmChartTemplate
+            this.steps.nodeSelection.controls.charts.value = this.helmChartTemplates[helmChartTemplate].name
           },
         }
       })
-      this.steps.__request.parameters.chart.data = this.defaultHelmChartTemplates.helm.agent
-      this.steps.nodeSelection.controls.chart.value = this.helmChartTemplates[this.defaultHelmChartTemplates.helm.agent].name
       this.$forceUpdate();
 
     },
@@ -152,8 +150,9 @@ export default {
               dataType: 'static',
               data: null,
             },
-            chart: {
-              dataType: 'static',
+            charts: {
+              dataType: 'collected',
+              dataSource: ['nodeSelection', 'controls', 'charts', 'value'],
               data: null,
             },
           },
@@ -163,7 +162,7 @@ export default {
           controls: {
             node_name: {
               name: 'Node Name',
-              description: 'Node names must use underscores for spaces.',
+              description: 'Node names must use underscores for spaces',
               prefix: '',
               placeholder: 'e.g. Assembly_Cell',
               type: 'input',
@@ -178,7 +177,7 @@ export default {
             },
             destination_node: {
               name: 'Destination Node',
-              description: 'Choose a remote cluster and edge device on which to deploy the new Sparkplug node.',
+              description: 'Choose a remote cluster and edge device on which to deploy the new Sparkplug node',
               type: 'dropdown',
               options: [],
               validations: {
@@ -188,17 +187,17 @@ export default {
               initialValue: '',
               value: '',
             },
-            chart: {
-              name: 'Helm Chart',
-              description: 'Choose a helm chart to deploy to the edge cluster.',
-              type: 'dropdown',
+            charts: {
+              name: 'Helm Charts',
+              description: 'Choose the Helm charts to deploy to the edge cluster',
+              type: 'multiSelection',
               options: [],
               validations: {
                 required: helpers.withMessage('Please choose a chart', required),
               },
               disabled: false,
-              initialValue: '',
-              value: '',
+              initialValue: [],
+              value: [],
             }
           },
           buttons: [