adding Operator Node Selector, fixing bugs with node selector tables, and adding tooltips to all icon buttons

electron/app/js/helmUtils.js

@@ -233,6 +233,8 @@ function processHelmChartValues(args, helmChartValues) {
  for (const [propertyName, propertyValue] of Object.entries(helmChartValues)) {
  if (propertyName === 'imagePullSecrets') {
  args.push(...formatArrayOfObjectsSetArgument(propertyName, propertyValue));
+ } else if (propertyName === 'nodeSelector') {
+ args.push(...formatNodeSelectorSetArgument(propertyValue));
  } else {
  args.push('--set', formatSetArgument(propertyName, propertyValue));
  }
@@ -270,6 +272,22 @@ function formatArrayOfObjectsSetArgument(name, objectArray) {
  return result;
 }
 
+function formatNodeSelectorSetArgument(nodeSelectorMap) {
+ const result = [];
+ for (const [key, value] of Object.entries(nodeSelectorMap)) {
+ result.push('--set', formatSetArgument(`nodeSelector.${_getQuotedInnerKey(key)}`, value, true));
+ }
+ return result;
+}
+
+function _getQuotedInnerKey(key) {
+ let result = key;
+ if (key.includes('.')) {
+ result = `${key.replaceAll('.', '\\.')}`;
+ }
+ return result;
+}
+
 module.exports = {
  addOrUpdateWkoHelmChart,
  installWko,

webui/package.json

@@ -10,7 +10,7 @@
  "jet-audit": "ojaf"
  },
  "dependencies": {
- "@oracle/oraclejet": "^13.0.1",
+ "@oracle/oraclejet": "^13.0.2",
  "@oracle/wrc-jet-pack": "~2.3.0",
  "i18next": "^21.9.1",
  "jquery": "^3.6.0",

webui/src/js/models/k8s-domain-definition.js

@@ -96,7 +96,9 @@ define(['knockout', 'utils/observable-properties', 'utils/common-utilities', 'ut
  this.memoryLimit = props.createProperty();
  this.memoryLimit.addValidator(...validationHelper.getK8sMemoryValidators());
 
- this.domainNodeSelector = props.createListProperty(['name', 'value']);
+ // Jet tables do not work if you allow changing the value used as the primary key so always add a uid...
+ //
+ this.domainNodeSelector = props.createListProperty(['uid', 'name', 'value']);
 
  // update the secrets list when the uid changes.
  this.uid.observable.subscribe(() => {

webui/src/js/models/wko-definition.js

@@ -64,6 +64,10 @@ define(['utils/observable-properties', 'utils/validation-helper'],
  this.javaLoggingFileSizeLimit = props.createProperty(20000000);
  this.javaLoggingFileCount = props.createProperty(10);
 
+ // Jet tables do not work if you allow changing the value used as the primary key so always add a uid...
+ //
+ this.nodeSelector = props.createListProperty(['uid', 'name', 'value']);
+
  // internal fields that should not be read or written to the project file.
  this.internal = {
  operatorImagePullRegistryAddress: props.createProperty()

webui/src/js/utils/wko-actions-base.js

@@ -234,6 +234,17 @@ function(WktActionsBase, project, wktConsole, i18n, projectIo, dialogHelper, val
  this.addHelmChartValueIfSet(helmChartValues, 'javaLoggingFileSizeLimit', this.project.wko.javaLoggingFileSizeLimit);
  this.addHelmChartValueIfSet(helmChartValues, 'javaLoggingFileCount', this.project.wko.javaLoggingFileCount);
 
+ if (this.project.wko.nodeSelector.hasValue()) {
+ const nodeSelectorMap = {};
+ this.project.wko.nodeSelector.value.forEach(label => {
+ nodeSelectorMap[label.name] = label.value;
+ });
+
+ if (Object.keys(nodeSelectorMap).length > 0) {
+ helmChartValues['nodeSelector'] = nodeSelectorMap;
+ }
+ }
+
  return helmChartValues;
  }
 
@@ -336,4 +347,4 @@ function(WktActionsBase, project, wktConsole, i18n, projectIo, dialogHelper, val
  }
 
  return WkoActionsBase;
-});
+});

webui/src/js/viewModels/app-main.js

@@ -213,6 +213,10 @@ function(accUtils, ko, i18n, project, wktConsole, dialogHelper, viewHelper, scre
  return this.navCollapsed() ? 'oj-ux-ico-arrow-right' : 'oj-ux-ico-arrow-left';
  }, this);
 
+ this.collapseArrowTooltip = ko.computed(() => {
+ return this.navCollapsed() ? this.labelMapper('expand-arrow-tooltip') : this.labelMapper('collapse-arrow-tooltip');
+ });
+
  this.collapseNav = () => {
  this.navCollapsed(!this.navCollapsed());
 

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

@@ -21,14 +21,6 @@ function (project, accUtils, utils, ko, i18n, screenUtils, BufferingDataProvider
  this.applyAuxImageConfig(newValue);
  }));
 
- // subscriptions.push(this.project.k8sDomain.clusters.observable.subscribe(() => {
- // document.getElementById('clusters-table').refresh();
- // }));
-
- subscriptions.push(this.project.k8sDomain.domainNodeSelector.observable.subscribe(() => {
- document.getElementById('domain-node-selector-table').refresh();
- }));
-
  subscriptions.push(project.image.createPrimaryImage.observable.subscribe(() => {
  document.getElementById('create-image-switch').refresh();
  const primaryImageTag = document.getElementById('primary-image-tag');
@@ -423,8 +415,8 @@ function (project, accUtils, utils, ko, i18n, screenUtils, BufferingDataProvider
  },
  ];
 
- this.domainNodeSelectorDP =
- new ArrayDataProvider(this.project.k8sDomain.domainNodeSelector.observable, { keyAttributes: 'name' });
+ this.domainNodeSelectorDP = new BufferingDataProvider(
+ new ArrayDataProvider(this.project.k8sDomain.domainNodeSelector.observable, { keyAttributes: 'uid' }));
 
  this.handleAddDomainNodeSelector = () => {
  const labelNames = [];
@@ -437,7 +429,11 @@ function (project, accUtils, utils, ko, i18n, screenUtils, BufferingDataProvider
  nextIndex++;
  }
 
- this.project.k8sDomain.domainNodeSelector.addNewItem({ name: `new-label-${nextIndex + 1}`, value: '' });
+ this.project.k8sDomain.domainNodeSelector.addNewItem({
+ uid: utils.getShortUuid(),
+ name: `new-label-${nextIndex + 1}`,
+ value: ''
+ });
  };
  }
 

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

@@ -4,10 +4,12 @@
  * Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
  */
 define(['utils/i18n', 'accUtils', 'knockout', 'ojs/ojcorerouter', 'ojs/ojmodulerouter-adapter', 'ojs/ojarraydataprovider',
- 'ojs/ojarraytreedataprovider', 'models/wkt-project', 'ojs/ojconverter-number', 'ojs/ojtreeview', 'ojs/ojformlayout',
- 'ojs/ojinputtext', 'ojs/ojcollapsible', 'ojs/ojselectsingle', 'ojs/ojswitch', 'ojs/ojinputnumber'
+ 'ojs/ojarraytreedataprovider', 'ojs/ojbufferingdataprovider', 'models/wkt-project', 'ojs/ojconverter-number', 'utils/view-helper',
+ 'utils/common-utilities', 'ojs/ojtreeview', 'ojs/ojformlayout', 'ojs/ojinputtext', 'ojs/ojcollapsible',
+ 'ojs/ojselectsingle', 'ojs/ojswitch', 'ojs/ojinputnumber'
 ],
-function (i18n, accUtils, ko, CoreRouter, ModuleRouterAdapter, ArrayDataProvider, ArrayTreeDataProvider, project, ojConverterNumber) {
+function (i18n, accUtils, ko, CoreRouter, ModuleRouterAdapter, ArrayDataProvider, ArrayTreeDataProvider,
+ BufferingDataProvider, project, ojConverterNumber, viewHelper, utils) {
  function OperatorDesignViewModel() {
 
  let subscriptions = [];
@@ -90,6 +92,45 @@ function (i18n, accUtils, ko, CoreRouter, ModuleRouterAdapter, ArrayDataProvider
  });
  };
 
+ this.nodeSelectorColumnMetadata = [
+ {
+ headerText: this.labelMapper('node-selector-label-name-header'),
+ sortProperty: 'name'
+ },
+ {
+ headerText: this.labelMapper('node-selector-label-value-header'),
+ sortable: 'disabled'
+ },
+ {
+ 'className': 'wkt-table-delete-cell',
+ 'headerClassName': 'wkt-table-add-header',
+ 'headerTemplate': 'headerTemplate',
+ 'template': 'actionTemplate',
+ 'sortable': 'disable',
+ width: viewHelper.BUTTON_COLUMN_WIDTH
+ },
+ ];
+
+ this.nodeSelectorDP = new BufferingDataProvider(
+ new ArrayDataProvider(this.project.wko.nodeSelector.observable, { keyAttributes: 'uid' }));
+
+ this.handleAddNodeSelector = () => {
+ const labelNames = [];
+ this.project.wko.nodeSelector.observable().forEach(label => {
+ labelNames.push(label.name);
+ });
+
+ let nextIndex = 0;
+ while (labelNames.indexOf(`new-label-${nextIndex + 1}`) !== -1) {
+ nextIndex++;
+ }
+
+ this.project.wko.nodeSelector.addNewItem({
+ uid: utils.getShortUuid(),
+ name: `new-label-${nextIndex + 1}`,
+ value: ''
+ });
+ };
  }
 
  /*

webui/src/js/viewModels/project-settings-page.js

@@ -236,6 +236,11 @@ function(accUtils, ko, i18n, project, ArrayDataProvider,
  return i18n.t('project-settings-build-tool-label', {toolName: name});
  };
 
+ this.getBuilderExecutableFilePathTooltip = () => {
+ let name = this.getDockerLabelForBuilderType(this.project.settings.builderType.value) || '<Unknown>';
+ return i18n.t('project-settings-build-tool-tooltip', {toolName: name});
+ };
+
  this.chooseBuilder = () => {
  const label = this.getDockerLabelForBuilderType(this.project.settings.builderType.value);
  window.api.ipc.invoke('get-image-builder-exe', label).then(exePath => {

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

@@ -432,7 +432,7 @@ function (project, accUtils, utils, ko, i18n, screenUtils, BufferingDataProvider
  ];
 
  this.domainNodeSelectorDP =
- new ArrayDataProvider(this.project.k8sDomain.domainNodeSelector.observable, { keyAttributes: 'name' });
+ new BufferingDataProvider(new ArrayDataProvider(this.project.k8sDomain.domainNodeSelector.observable, { keyAttributes: 'name' }));
 
  this.handleAddDomainNodeSelector = () => {
  const labelNames = [];
@@ -445,7 +445,11 @@ function (project, accUtils, utils, ko, i18n, screenUtils, BufferingDataProvider
  nextIndex++;
  }
 
- this.project.k8sDomain.domainNodeSelector.addNewItem({ name: `new-label-${nextIndex + 1}`, value: '' });
+ this.project.k8sDomain.domainNodeSelector.addNewItem({
+ uid: utils.getShortUuid(),
+ name: `new-label-${nextIndex + 1}`,
+ value: ''
+ });
  };
  }
 

webui/src/js/views/app-main.html

@@ -27,7 +27,7 @@
  <div class="collapseNavBlock">
  <oj-button id="collapseNavButton"
  on-oj-action="[[collapseNav]]"
- :title="[[labelMapper('button-collapse-nav')]]">
+ :title="[[collapseArrowTooltip]]">
  <span slot='startIcon' :class="[[collapseArrowClass]]"></span>
  </oj-button>
  </div>

webui/src/js/views/discover-dialog.html

@@ -42,7 +42,7 @@
  chroming="borderless"
  disabled="[[isRemote]]"
  on-oj-action="[[chooseDomainHome]]">
- <span><oj-bind-text value="[[labelMapper('domain-home-choose')]]"></oj-bind-text></span>
+ <span><oj-bind-text value="[[labelMapper('domain-home-tooltip')]]"></oj-bind-text></span>
  <span slot="endIcon" class="oj-ux-ico-folder" role="img"></span>
  </oj-button>
  </oj-input-text>

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

@@ -295,7 +295,7 @@ <h6 class="wkt-subheading"><oj-bind-text value="[[labelMapper('clusters-title')]
  <td>
  <oj-button display="icons" chroming="borderless" on-oj-action="[[handleEditCluster]]">
  <span slot="endIcon" class="oj-ux-ico-edit"></span>
- <oj-bind-text value="[[labelMapper('edit-cluster-label')]]"></oj-bind-text>
+ <oj-bind-text value="[[labelMapper('edit-cluster-tooltip')]]"></oj-bind-text>
  </oj-button>
  </td>
  <td>
@@ -304,7 +304,7 @@ <h6 class="wkt-subheading"><oj-bind-text value="[[labelMapper('clusters-title')]
  disabled="[[isDomainInPV() === false]]"
  on-oj-action="[[handleDeleteCluster]]">
  <span slot="endIcon" class="oj-ux-ico-trash"></span>
- <oj-bind-text value="[[labelMapper('delete-cluster-label')]]"></oj-bind-text>
+ <oj-bind-text value="[[labelMapper('delete-cluster-tooltip')]]"></oj-bind-text>
  </oj-button>
  </td>
  </tr>
@@ -320,7 +320,7 @@ <h6 class="wkt-subheading"><oj-bind-text value="[[labelMapper('clusters-title')]
  disabled="[[isDomainInPV() === false]]"
  on-oj-action="[[handleAddCluster]]">
  <span slot="endIcon" class="oj-ux-ico-plus"></span>
- <oj-bind-text value="[[labelMapper('add-cluster-label')]]"></oj-bind-text>
+ <oj-bind-text value="[[labelMapper('add-cluster-tooltip')]]"></oj-bind-text>
  </oj-button>
  </template>
  <template slot="noData">
@@ -426,8 +426,8 @@ <h6 class="wkt-subheading"><oj-bind-text value="[[labelMapper('encryption-secret
  help.instruction="[[labelMapper('encryption-value-help')]]">
  </oj-input-password>
  <oj-button display="icons" chroming="borderless" on-oj-action="[[handleRegenerateEncryptionValue]]">
- <oj-bind-text value="[[labelMapper('regenerate-encryption-value-label')]]"></oj-bind-text>
  <span slot='startIcon' class="oj-ux-ico-replay"></span>
+ <oj-bind-text value="[[labelMapper('regenerate-encryption-value-tooltip')]]"></oj-bind-text>
  </oj-button>
  </oj-form-layout>
  </div>
@@ -545,15 +545,15 @@ <h6 class="wkt-subheading"><oj-bind-text value="[[labelMapper('domain-node-selec
  <td>
  <oj-button display="icons" chroming="borderless" on-oj-action="[[row.data.remove]]">
  <span slot="endIcon" class="oj-ux-ico-trash"></span>
- <oj-bind-text value="[[labelMapper('domain-node-selector-delete-row-icon-text')]]"></oj-bind-text>
+ <oj-bind-text value="[[labelMapper('domain-node-selector-delete-row-tooltip')]]"></oj-bind-text>
  </oj-button>
  </td>
  </tr>
  </template>
  <template slot="headerTemplate" data-oj-as="header">
  <oj-button display="icons" chroming="borderless" on-oj-action="[[handleAddDomainNodeSelector]]">
  <span slot="endIcon" class="oj-ux-ico-plus"></span>
- <oj-bind-text value="[[labelMapper('domain-node-selector-add-row-icon-text')]]"></oj-bind-text>
+ <oj-bind-text value="[[labelMapper('domain-node-selector-add-row-tooltip')]]"></oj-bind-text>
  </oj-button>
  </template>
  </oj-table>

webui/src/js/views/domain-status-dialog.html

@@ -14,8 +14,7 @@
  <oj-bind-text value="{{labelMapper('domain-status-overallstatus')}}"></oj-bind-text>
  </oj-label>
  <br>
- <oj-input-text id="overallstatus" value="{{domainOverallStatus}}" readonly="true"
- ></oj-input-text>
+ <oj-input-text id="overallstatus" value="{{domainOverallStatus}}" readonly="true"></oj-input-text>
  </div>
 
  <div class="oj-panel wkt-notop">

webui/src/js/views/image-code-view.html

@@ -35,5 +35,6 @@
 
  <div slot="disabled" class="oj-panel wkt-code-view-platform-frame">
  <p class="wkt-center-text-in-frame"><oj-bind-text value="[[labelMapper('not-creating-images-no-content')]]"></oj-bind-text></p>
+ </div>
  </oj-switcher>
 </div>