Allow addition of multiple application components

Author: rakillen

webui/src/js/viewModels/choose-component-dialog.js

@@ -14,7 +14,7 @@ function(accUtils, ko, i18n, props, validationHelper, ArrayDataProvider) {
 
     this.i18n = i18n;
     this.availableComponentNames = args.availableComponentNames;
-    this.selectedComponentName = ko.observable();
+    this.selectedComponentNames = ko.observableArray();
 
     this.availableComponentNamesDP = new ArrayDataProvider(this.availableComponentNames, { keyAttributes: 'value' });
 
@@ -42,7 +42,7 @@ function(accUtils, ko, i18n, props, validationHelper, ArrayDataProvider) {
 
       $(DIALOG_SELECTOR)[0].close();
 
-      const result = {componentName: this.selectedComponentName()};
+      const result = {componentNames: this.selectedComponentNames()};
       args.setValue(result);
     };
 

webui/src/js/viewModels/vz-application-design-view.js

@@ -107,14 +107,20 @@ function (project, accUtils, utils, ko, i18n, BufferingDataProvider, ArrayDataPr
 
       dialogHelper.promptDialog('choose-component-dialog', { availableComponentNames }).then(result => {
         // no result indicates operation was cancelled
-        if (result && result.componentName) {
-          this.project.vzApplication.components.addNewItem({
-            name: result.componentName,
-            ingressTraitEnable: false,
-            manualScalerTraitEnabled: false,
-            metricsTraitEnabled: false,
-            loggingTraitEnabled: false,
-          });
+        if (result && result.componentNames) {
+          for(const componentName of result.componentNames) {
+            this.project.vzApplication.components.addNewItem({
+              name: componentName,
+              ingressTraitEnable: false,
+              manualScalerTraitEnabled: false,
+              metricsTraitEnabled: false,
+              loggingTraitEnabled: false,
+            });
+          }
+
+          // this shouldn't be needed, but duplicate entries will show in the components accordion
+          // if multiple components are added at once.
+          this.components.observable.sort();
 
           // this shouldn't be needed, but when a new component is added,
           // the accordion control doesn't enforce "single collapsible open" behavior.

webui/src/js/views/choose-component-dialog.html

@@ -12,11 +12,17 @@
     <oj-validation-group id="chooseComponentTracker">
       <div class="oj-panel">
         <oj-form-layout max-columns="2" direction="row">
-          <oj-select-single label-hint="[[labelMapper('name-label')]]"
-                            value="{{selectedComponentName}}"
-                            data="{{availableComponentNamesDP}}"
-                            help.instruction="[[labelMapper('name-help')]]">
-          </oj-select-single>
+          <oj-select-many label-hint="[[labelMapper('name-label')]]"
+                          value="{{selectedComponentNames}}"
+                          help.instruction="[[labelMapper('name-help')]]">
+            <oj-bind-for-each data="[[availableComponentNamesDP]]">
+              <template>
+                <oj-option value="[[$current.data.value]]">
+                  <oj-bind-text value="[[$current.data.label]]"></oj-bind-text>
+                </oj-option>
+              </template>
+            </oj-bind-for-each>
+          </oj-select-many>
         </oj-form-layout>
       </div>
     </oj-validation-group>