Wtkui 305 targetsvc selection (#79)

* WKTUI-305  Add support for querying target services and ports

* retrieve ports for existing route

* preload existing target ports for drop down

* update message

* doc update

* get target service details cleanup

Co-authored-by: Robert Patrick <[email protected]>

Author: jshum2479

documentation/staging/content/navigate/kubernetes/k8s-ingress-controller.md

@@ -86,7 +86,7 @@ When editing a route:
 - Use the `Name` field to set the route name.  
 - Use the `Virtual Host` and `Path Expression` fields to define the matching rules that determine which requests match this route.  
 - All requests in the defined rules are routed to the service specified by the `Target Service` field that resides in the namespace specified by the read-only
-`Target Service Namespace` field and the port specified by the `Target Port` field.  
+`Target Service Namespace` field and the port specified by the `Target Port` field. Once the domain has been deployed, you can also select the values from the drop down list. 
 - Specify the `Transport Option` for the ingress route:
     * Select `Plain HTTP` for unencrypted traffic from the client through the ingress controller to the target service.
     * Select `SSL terminate at ingress controller` for SSL

electron/app/js/kubectlUtils.js

@@ -538,13 +538,12 @@ async function createOrReplaceTLSSecret(kubectlExe, namespace, secret, key, cert
   return createOrReplaceSecret(kubectlExe, namespace, secret, createArgs, errorKeys, options);
 }
 
-async function getServiceDetails(kubectlExe, ingressNamespace, serviceName, options) {
-  let getArgs = [];
-  if (serviceName === '') {
-    getArgs = [ 'get', 'services', '-n', ingressNamespace, '--output=json' ];
-  } else {
-    getArgs = [ 'get', 'services', serviceName, '-n', ingressNamespace, '--output=json' ];
+async function getServiceDetails(kubectlExe, namespace, serviceName, options) {
+  const getArgs = [ 'get', 'services' ];
+  if (serviceName) {
+    getArgs.push(serviceName);
   }
+  getArgs.push('-n', namespace, '--output=json');
   const httpsProxyUrl = getHttpsProxyUrl();
   const bypassProxyHosts = getBypassProxyHosts();
 
@@ -554,13 +553,13 @@ async function getServiceDetails(kubectlExe, ingressNamespace, serviceName, opti
   };
 
   return new Promise(resolve => {
-    executeFileCommand(kubectlExe, getArgs, env).then((serviceDetails) => {
-      results.serviceDetails = JSON.parse(serviceDetails);
+    executeFileCommand(kubectlExe, getArgs, env).then((serviceDetailsJson) => {
+      results.serviceDetails = JSON.parse(serviceDetailsJson);
       resolve(results);
     }).catch(err => {
       results.isSuccess = false;
       results.reason = i18n.t('kubectl-get-service-details-error-message',
-        {namespace: ingressNamespace, error: getErrorMessage(err) });
+        {namespace: namespace, error: getErrorMessage(err) });
       resolve(results);
     });
   });

electron/app/locales/en/webui.json

@@ -678,6 +678,9 @@
   "ingress-design-ingress-route-traefik-mw-label": "Traefik Middleware",
   "ingress-design-ingress-route-traefik-mw-help": "Customize Traefik Middlewares Object",
 
+  "ingress-design-ingress-routes-getting-target-service-title" : "Retrieving existing domain service details",
+  "ingress-design-ingress-routes-getting-target-service-error-message": "Failed to get existing domain service details from Kubernetes namespace {{namespace}}: {{error}}.",
+
   "ingress-design-ingress-route-name-field-validation-error": "Route {{routeName}}",
   "ingress-design-ingress-route-field-validation-error": "Route: {{routeName}}, Field: {{fieldName}}",
   "ingress-design-ingress-route-field-tls-config-error": "The route '{{routeName}}' has the '{{fieldName}}' set to '{{tlsOption}}' but the '{{specifyTlsSecretFieldName}}' field is disabled.",

webui/src/js/viewModels/ingress-design-view-impl.js

@@ -6,12 +6,12 @@
 
 define(['utils/i18n', 'accUtils', 'knockout', 'ojs/ojarraydataprovider',
   'ojs/ojbufferingdataprovider', 'models/wkt-project', 'utils/dialog-helper',
-  'utils/ingress-routes-updater', 'utils/view-helper', 'ojs/ojtreeview',
+  'utils/ingress-routes-updater', 'utils/view-helper', 'utils/k8s-helper', 'ojs/ojtreeview',
   'ojs/ojformlayout', 'ojs/ojinputtext', 'ojs/ojcollapsible', 'ojs/ojselectsingle', 'ojs/ojswitch', 'ojs/ojtable',
   'ojs/ojcheckboxset'
 ],
 function(i18n, accUtils, ko, ArrayDataProvider, BufferingDataProvider, project, dialogHelper,
-  ingressRouteUpdater, viewHelper) {
+  ingressRouteUpdater, viewHelper, k8sHelper) {
 
   function IngressDesignViewModel() {
 
@@ -209,31 +209,58 @@ function(i18n, accUtils, ko, ArrayDataProvider, BufferingDataProvider, project,
       window.api.ipc.invoke('show-error-message', title, message);
     };
 
-    this.handleEditRoute = (event, context) => {
+    async function getTargetServiceDetails (project) {
+
+      const kubectlExe = k8sHelper.getKubectlExe();
+      const kubectlOptions = k8sHelper.getKubectlOptions();
+      const results = await window.api.ipc.invoke('k8s-get-service-details',
+        kubectlExe, project.k8sDomain.kubernetesNamespace.value, '', kubectlOptions);
+      let serviceLists = {};
+      if (results.isSuccess) {
+        for (const item of results.serviceDetails.items) {
+          serviceLists[item.metadata.name] = { ports: item.spec.ports};
+        }
+      } else {
+        const errTitle = i18n.t('ingress-design-ingress-routes-getting-target-service-title');
+        const errMessage = i18n.t('ingress-design-ingress-routes-getting-target-service-error-message', {
+          error: results.reason,
+          namespace: namespace
+        });
+        await window.api.ipc.invoke('show-error-message', errTitle, errMessage);
+        return Promise.resolve(false);
+      }
+      return Promise.resolve( { serviceList: serviceLists});
+    };
+
+    this.handleEditRoute = async (event, context) => {
       // using context.item.data directly was causing problems
       // when project data was reloaded with matching UIDs.
       const index = context.item.index;
       let route = this.routes.observable()[index];
-      const options = {route: route};
-
-      dialogHelper.promptDialog('route-edit-dialog', options)
-        .then(result => {
-
-          // no result indicates operation was cancelled
-          if (result) {
-            let changed = false;
-            project.ingress.ingressRouteKeys.forEach(key => {
-              if ((key !== 'uid') && result.hasOwnProperty(key)) {
-                route[key] = result[key];
-                changed = true;
+      getTargetServiceDetails(this.project).then( svc => {
+        const options = {route: route, serviceList: svc.serviceList};
+        dialogHelper.promptDialog('route-edit-dialog', options)
+          .then(result => {
+
+            // no result indicates operation was cancelled
+            if (result) {
+              let changed = false;
+              project.ingress.ingressRouteKeys.forEach(key => {
+                if ((key !== 'uid') && result.hasOwnProperty(key)) {
+                  route[key] = result[key];
+                  changed = true;
+                }
+              });
+
+              if (changed) {
+                this.routes.observable.replace(route, route);
               }
-            });
-
-            if (changed) {
-              this.routes.observable.replace(route, route);
             }
-          }
-        });
+          });
+      }
+      );
+
+
     };
 
     this.handleCancel = () => {

webui/src/js/viewModels/ingress-design-view.js

@@ -5,15 +5,15 @@
  */
 
 define(['viewModels/ingress-design-view-impl','utils/i18n', 'accUtils', 'knockout', 'ojs/ojarraydataprovider',
-  'ojs/ojbufferingdataprovider', 'models/wkt-project', 'utils/dialog-helper', 'utils/view-helper',
+  'ojs/ojbufferingdataprovider', 'models/wkt-project', 'utils/dialog-helper',  'utils/view-helper', 'utils/k8s-helper',
   'ojs/ojtreeview', 'ojs/ojformlayout', 'ojs/ojinputtext',
   'ojs/ojcollapsible', 'ojs/ojselectsingle', 'ojs/ojswitch', 'ojs/ojtable', 'ojs/ojcheckboxset'
 ],
 function(IngressDesignViewModel, i18n, accUtils, ko, ArrayDataProvider, BufferingDataProvider, project, dialogHelper,
-  viewHelper) {
+  viewHelper, k8sHelper) {
 
   return function() {
-    return new IngressDesignViewModel(i18n, accUtils, ko, ArrayDataProvider, BufferingDataProvider, project,
-      dialogHelper, viewHelper);
+    return new IngressDesignViewModel(i18n, accUtils, ko,  ArrayDataProvider, BufferingDataProvider, project,
+      dialogHelper, viewHelper, k8sHelper);
   };
 });

webui/src/js/viewModels/route-edit-dialog.js

@@ -5,9 +5,9 @@
  */
 'use strict';
 
-define(['accUtils', 'knockout', 'utils/i18n', 'models/wkt-project', 'utils/view-helper', 'ojs/ojarraydataprovider',
+define(['accUtils', 'knockout', 'utils/i18n', 'models/wkt-project',  'utils/view-helper', 'ojs/ojarraydataprovider',
   'ojs/ojbufferingdataprovider', 'utils/observable-properties', 'ojs/ojconverter-number', 'ojs/ojinputtext',
-  'ojs/ojlabel', 'ojs/ojbutton', 'ojs/ojdialog', 'ojs/ojformlayout', 'ojs/ojvalidationgroup'],
+  'ojs/ojlabel', 'ojs/ojbutton', 'ojs/ojdialog', 'ojs/ojformlayout', 'ojs/ojvalidationgroup', 'ojs/ojselectcombobox'],
 function(accUtils, ko, i18n, project, viewHelper, ArrayDataProvider, BufferingDataProvider, props, ojConverterNumber) {
   function RouteEditDialogModel(args) {
     const DIALOG_SELECTOR = '#routeEditDialog';
@@ -38,9 +38,37 @@ function(accUtils, ko, i18n, project, viewHelper, ArrayDataProvider, BufferingDa
 
     this.project = project;
     this.route = args.route;
+    this.serviceList = args.serviceList;
+
+    this.buildTargetSvcNames = () => {
+      let options = [];
+      for(var name in this.serviceList){
+        options.push( { id : name, value: name, text: name});
+      }
+      return options;
+    };
+
+    this.buildTargetSvcPorts = (svcName) => {
+      let options = [];
+      if (this.serviceList[svcName]) {
+        for (const port of this.serviceList[svcName].ports) {
+          options.push( { id : port.port, value: port.port, text: port.port});
+        }
+      }
+
+      return options;
+    };
+
     this.askIfConsoleSvc = ko.observable(this.route.isConsoleService);
+    this.targetSvcNames = this.buildTargetSvcNames();
+    this.targetSvcPorts = ko.observableArray([] );
+
+    if (this.route.targetService) {
+      this.targetSvcPorts = this.buildTargetSvcPorts(this.route.targetService);
+    }
 
     this.savedAnnotations = args.route.annotations || {};
+    this.targetServicePorts = new ArrayDataProvider(this.targetSvcPorts, {keyAttributes: 'id'});
 
     this.tlsOptions = [
       { id: 'plain', value: 'plain', text: this.labelMapper('route-tlsoption-plain') },
@@ -156,6 +184,14 @@ function(accUtils, ko, i18n, project, viewHelper, ArrayDataProvider, BufferingDa
       }
     };
 
+    this.targetSvcNameChanged = (event) => {
+      this.targetSvcPorts.removeAll();
+      const list = this.buildTargetSvcPorts(event.detail.value);
+      for (const item of list) {
+        this.targetSvcPorts.push(item);
+      }
+    };
+
     this.okInput = () => {
       let tracker = document.getElementById('ingressTracker');
       if (tracker.valid !== 'valid') {

webui/src/js/views/route-edit-dialog.html

@@ -33,17 +33,22 @@
                        readonly="true"
                        help.instruction="[[labelMapper('route-targetservicenamespace-help')]]">
         </oj-input-text>
-        <oj-input-text label-hint="[[labelMapper('route-targetservice-label')]]"
-                       help.instruction="[[labelMapper('route-targetservice-help')]]"
-                       value="{{targetService.observable}}"
-                       validators="[[project.ingress.validators.k8sNameValidator]]">
-        </oj-input-text>
-        <oj-input-number label-hint="[[labelMapper('route-targetport-label')]]"
-                         converter="[[portNumberConverter]]"
-                         value="{{targetPort.observable}}"
+
+        <oj-combobox-one id="targetsvc" value="{{targetService.observable}}"
+                         label-hint="[[labelMapper('route-targetservice-label')]]"
+                         help.instruction="[[labelMapper('route-targetservice-help')]]"
+                         validators="[[project.ingress.validators.k8sNameValidator]]"
+                         options="[[targetSvcNames]]"
+                         on-value-changed = "[[targetSvcNameChanged]]">
+        </oj-combobox-one>
+
+        <oj-combobox-one id="targetport" value="{{targetPort.observable}}"
+                         label-hint="[[labelMapper('route-targetport-label')]]"
+                         validators="[[project.ingress.validators.targetPortValidator]]"
                          help.instruction="[[labelMapper('route-targetport-help')]]"
-                         validators="[[project.ingress.validators.targetPortValidator]]">
-        </oj-input-number>
+                         options="[[targetServicePorts]]"
+                         >
+        </oj-combobox-one>
 
         <oj-radioset id="tlsOptionId"
                      label-hint="[[labelMapper('route-tls-label')]]"