Ingress table changes (#221)

* Save updated URLs to project

* Combine the ingress route target service and port columns

* Cleanup for eslint

Author: rakillen

electron/app/locales/en/webui.json

@@ -761,6 +761,7 @@
   "ingress-design-ingress-route-targetservicenamespace-label": "Target Service Namespace",
   "ingress-design-ingress-route-targetservicenamespace-help": "The target service namespace value points to the namespace where the domain is running.",
   "ingress-design-ingress-route-accesspoint-label": "Access Point",
+  "ingress-design-ingress-route-target-label": "Target",
   "ingress-design-ingress-route-targetservice-label": "Target Service",
   "ingress-design-ingress-route-targetservice-placeholder": "Select Domain Service",
   "ingress-design-ingress-route-targetservice-placeholder-empty": "No Domain Services Available",

webui/src/js/models/vz-application-definition.js

@@ -5,8 +5,8 @@
  */
 'use strict';
 
-define(['utils/observable-properties', 'utils/validation-helper', 'knockout', 'utils/wkt-logger'],
-  function(props, validationHelper, ko) {
+define(['utils/observable-properties', 'utils/validation-helper', 'utils/wkt-logger'],
+  function(props, validationHelper) {
     return function (name, k8sDomain) {
       function VerrazzanoApplicationModel() {
         let componentChanged = false;
@@ -30,10 +30,6 @@ define(['utils/observable-properties', 'utils/validation-helper', 'knockout', 'u
           'loggingTraitEnabled', 'loggingTraitImage', 'loggingTraitConfiguration' ];
         this.components = props.createListProperty(this.componentKeys).persistByKey('name');
 
-        // this is a transient ko observable that is not persisted
-        this.hosts = ko.observableArray();
-        this.generatedHost = ko.observable();
-
         this.readFrom = (json) => {
           props.createGroup(name, this).readFrom(json);
         };

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

@@ -129,15 +129,10 @@ function(i18n, accUtils, ko, ArrayDataProvider, BufferingDataProvider, project,
         resizable: 'enabled'
       },
       {
-        headerText: this.labelMapper('ingress-route-targetservice-label'),
+        headerText: this.labelMapper('ingress-route-target-label'),
         sortProperty: 'targetService',
         resizable: 'enabled'
       },
-      {
-        headerText: this.labelMapper('ingress-route-targetport-label'),
-        sortProperty: 'targetPort',
-        resizable: 'enabled'
-      },
       {
         headerText: this.labelMapper('ingress-route-accesspoint-label'),
         sortProperty: 'targetServiceNameSpace'
@@ -170,6 +165,18 @@ function(i18n, accUtils, ko, ArrayDataProvider, BufferingDataProvider, project,
       return 'r' + routeIndex;
     }
 
+    // display in the target column, example "host:port"
+    this.getTargetText = (routeData) => {
+      let result = routeData.targetService;
+      if(result) {
+        const port = routeData.targetPort;
+        if(port != null) {
+          result += `:${port}`;
+        }
+      }
+      return result;
+    };
+
     this.handleAddRoute = () => {
       const uids = [];
       this.routes.observable().forEach(route => {

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

@@ -507,57 +507,50 @@ function (project, accUtils, utils, ko, i18n, BufferingDataProvider, ArrayDataPr
       return null;
     }
 
-    this.computedUrl = (rowData) => {
-      return ko.computed(() => {
-        let urlHost = '<host>';
-        const generatedHost = project.vzApplication.generatedHost();
-        if(generatedHost && generatedHost.length) {
-          urlHost = generatedHost;
-        }
+    function getUrl(ruleData, generatedHostname) {
+      let urlHost = '<host>';
+      if(generatedHostname && generatedHostname.length) {
+        urlHost = generatedHostname;
+      }
 
-        const ruleHost = getRuleHost(rowData);
-        if(ruleHost) {
-          urlHost = ruleHost;
-        }
+      const ruleHost = getRuleHost(ruleData);
+      if(ruleHost) {
+        urlHost = ruleHost;
+      }
 
-        let result = 'https://' + urlHost;
+      let result = 'https://' + urlHost;
 
-        let urlPath = '<path>';
-        const paths = rowData.paths;
-        if(paths && paths.length) {
-          urlPath = paths[0].path;
-          if(urlPath && urlPath.length) {
-            result += urlPath;
-          }
+      let urlPath = '<path>';
+      const paths = ruleData.paths;
+      if(paths && paths.length) {
+        urlPath = paths[0].path;
+        if(urlPath && urlPath.length) {
+          result += urlPath;
         }
+      }
 
-        return result;
-      });
-    };
+      return result;
+    }
 
-    // resolves to true if the row data can make a clickable link
-    this.computedCanLink = (rowData) => {
-      return ko.computed(() => {
-        const appHosts = project.vzApplication.hosts();
-        if(!appHosts.length) {
-          return false;
-        }
+    function isLinkable(ruleData, hostnames) {
+      if(!hostnames || !hostnames.length) {
+        return false;
+      }
 
-        const ruleHost = getRuleHost(rowData);
-        if(ruleHost && !appHosts.includes(ruleHost)) {
-          return false;
-        }
+      const ruleHost = getRuleHost(ruleData);
+      if(ruleHost && !hostnames.includes(ruleHost)) {
+        return false;
+      }
 
-        const paths = rowData.paths;
-        if(!paths || !paths.length) {
-          return false;
-        }
+      const paths = ruleData.paths;
+      if(!paths || !paths.length) {
+        return false;
+      }
 
-        return paths[0].pathType !== 'regex';
-      });
-    };
+      return paths[0].pathType !== 'regex';
+    }
 
-    this.updateUrls = async() => {
+    this.updateUrls = async(component) => {
       const busyDialogMessage = this.labelMapper('get-hosts-in-progress');
       dialogHelper.openBusyDialog(busyDialogMessage, 'bar', 1 / 2.0);
 
@@ -577,8 +570,16 @@ function (project, accUtils, utils, ko, i18n, BufferingDataProvider, ArrayDataPr
         return;
       }
 
-      project.vzApplication.hosts(hostsResult.hostnames);
-      project.vzApplication.generatedHost(hostsResult.generatedHostname);
+      const observableRules = this.componentObservable(component, 'ingressTraitRules');
+      for(const ruleData of observableRules()) {
+        const canLink = isLinkable(ruleData, hostsResult.hostnames);
+        const url = getUrl(ruleData, hostsResult.generatedHostname);
+
+        if((ruleData.url !== url) || (ruleData.canLink !== canLink)) {
+          const newData = {...ruleData, canLink: canLink, url: url };
+          observableRules.replace(ruleData, newData);
+        }
+      }
     };
 
     this.componentsIngressTraitRulesDataProvider = (component) => {

webui/src/js/views/ingress-design-view.html

@@ -203,11 +203,8 @@ <h6 class="wkt-subheading">
           <td data-bind="attr: { title: row.data.path }">
             <oj-bind-text value="[[row.data.path]]"></oj-bind-text>
           </td>
-          <td data-bind="attr: { title: row.data.targetService }">
-            <oj-bind-text value="[[row.data.targetService]]"></oj-bind-text>
-          </td>
-          <td>
-            <oj-bind-text value="[[row.data.targetPort]]"></oj-bind-text>
+          <td data-bind="attr: { title: getTargetText(row.data) }">
+            <oj-bind-text value="[[getTargetText(row.data)]]"></oj-bind-text>
           </td>
           <oj-bind-if test="[[!isAccessPointDefined(row.data.accessPoint)]]">
             <td>

webui/src/js/views/vz-application-design-view.html

@@ -136,7 +136,8 @@ <h6 slot="header">
                         <h6 class="wkt-subheading">
                           <oj-bind-text value="[[labelMapper('ingress-trait-rules-table-title')]]"></oj-bind-text>
                         </h6>
-                        <oj-button id="updateUrls" chroming="callToAction" on-oj-action="[[updateUrls]]">
+                        <oj-button id="updateUrls" chroming="callToAction"
+                                   on-oj-action="[[() => updateUrls(component.data)]]">
                           <oj-bind-text value="[[labelMapper('ingress-trait-rules-update-urls-button-label')]]"></oj-bind-text>
                         </oj-button>
                       </div>
@@ -157,14 +158,14 @@ <h6 class="wkt-subheading">
                             <td>
                               <oj-bind-text value="[[getFirstPathText(row.data)]]"></oj-bind-text>
                             </td>
-                            <td data-bind="attr: { title: computedUrl(row.data) }">
-                              <oj-bind-if test="[[computedCanLink(row.data)]]">
-                                <a data-bind="attr: { href: computedUrl(row.data) }">
-                                  <oj-bind-text value="[[computedUrl(row.data)]]"></oj-bind-text>
+                            <td data-bind="attr: { title: row.data.url }">
+                              <oj-bind-if test="[[row.data.canLink]]">
+                                <a data-bind="attr: { href: row.data.url }">
+                                  <oj-bind-text value="[[row.data.url]]"></oj-bind-text>
                                 </a>
                               </oj-bind-if>
-                              <oj-bind-if test="[[!computedCanLink(row.data)()]]">
-                                <oj-bind-text value="[[computedUrl(row.data)]]"></oj-bind-text>
+                              <oj-bind-if test="[[!row.data.canLink]]">
+                                <oj-bind-text value="[[row.data.url]]"></oj-bind-text>
                               </oj-bind-if>
                             </td>
                             <td>