[OGUI-524] new env k v panel (#486)

* [OGUI-524] Bump dependencies * [OGUI-524] Update styles * [OGUI-524] Add env variables panel * [OGUI-524] Add error on top of button * [OGUI-524] Update request * [OGUI-524] Remove userVars from general table * [OGUI-524] Add userVars to each env table * [OGUI-524] Fix tests failing after vars panel * [OGUI-524] Add tests for vars panel * [OGUI-524] Refactor code on workflowsPage * [OGUI-524] Fix tests * [OGUI-524] Bump WebUI to latest 1.10.4 * [OGUI-524] Configuration hidden * [OGUI-524] Fix eslint
AliceO2Group · Mar 27, 2020 · 339fd02 · 339fd02
1 parent d9af411
commit 339fd02
Show file tree

Hide file tree

Showing 10 changed files with 619 additions and 184 deletions.
diff --git a/Control/package-lock.json b/Control/package-lock.json
diff --git a/Control/package.json b/Control/package.json
@@ -26,7 +26,7 @@
     "coverage-local": "nyc --reporter=lcov npm run mocha"
   },
   "dependencies": {
-    "@aliceo2/web-ui": "1.9.2",
+    "@aliceo2/web-ui": "1.10.4",
     "@grpc/proto-loader": "^0.5.3",
     "grpc": "^1.24.2",
     "kafka-node": "^4.1.3"

diff --git a/Control/public/app.css b/Control/public/app.css
@@ -17,9 +17,10 @@
 }
 
 .disabled-content {
-	pointer-events: none;
-	opacity: 0.5;
+  pointer-events: none;
+  opacity: 0.5;
 }
+
 .grafana-font {
   font-family: Roboto, Helvetica Neue, Arial, sans-serif;
   font-size: 12px;
@@ -37,6 +38,18 @@ tr:hover td {
   cursor: pointer;
 }
 
+.actionable-icon {
+  cursor: pointer;
+}
+
+.actionable-icon:hover {
+  transform: scale(1.2);
+}
+
+.actionable-icon:active {
+  transform: scale(1.5);
+}
+
 .menu-title-large {
   text-transform: uppercase;
   height: 2em;
@@ -51,9 +64,13 @@ tr:hover td {
 
 .panel-title {
   border: 1px solid #ddd;
-  background:var(--color-gray-light);
+  background: var(--color-gray-light);
 }
 
 .panel {
   border: 1px solid var(--color-gray-light);
 }
+
+.border-bot {
+  border-bottom: 1px solid var(--color-gray-light);
+}
diff --git a/Control/public/common/showTableList.js b/Control/public/common/showTableList.js
@@ -9,42 +9,45 @@ import parseObject from './utils.js';
  * @param {Array.<function(DOMEvent, item)>} actions - (optional) add a button for each line with object as argument
  * @return {vnode} table view
  */
-export default (model, list, actions) => h('table.table', [
-  h('thead', [
-    h('tr',
-      [
+export default (model, list, actions) => {
+  list.forEach((environment) => delete environment.userVars);
+  return h('table.table', [
+    h('thead', [
+      h('tr', [
         list.length > 0 && Object.keys(list[0]).map((columnName) => h('th', {style: 'text-align:center'}, columnName)),
         actions && h('th', {style: 'text-align:center'}, 'Actions')
-      ]
-    )
-  ]),
-  h('tbody', list.map((item) => h('tr', [
-    Object.keys(item).map(
-      (columnName) => typeof item[columnName] === 'object'
-        ? h('td', {style: 'text-align: center'}, parseObject(item[columnName], columnName))
-        : h('td',
-          columnName === 'state' ? {
-            class: (item[columnName] === 'RUNNING' ? 'success' : (item[columnName] === 'CONFIGURED' ? 'warning' : '')),
-            style: 'font-weight: bold;text-align:center'
-          } : {style: 'text-align:center'},
-          item[columnName]
+      ])
+    ]),
+    h('tbody', list.map((item) => h('tr', [
+      Object.keys(item).map(
+        (columnName) => typeof item[columnName] === 'object'
+          ? h('td', {style: 'text-align: center'}, parseObject(item[columnName], columnName))
+          : h('td',
+            columnName === 'state' ? {
+              class: (item[columnName] === 'RUNNING' ?
+                'success'
+                : (item[columnName] === 'CONFIGURED' ? 'warning' : '')),
+              style: 'font-weight: bold;text-align:center'
+            } : {style: 'text-align:center'},
+            item[columnName]
+          )
+      ),
+      actions && h('td', {style: 'text-align:center'},
+        h('.btn-group',
+          h('button.btn.btn-primary', {
+            class: model.loader.active ? 'loading' : '',
+            disabled: model.loader.active,
+            onclick: (event) => actions[0](event, item),
+            title: 'Open the environment page with more details'
+          }, 'Details'),
+          actions.length >= 2 && h('button.btn.btn-danger', {
+            class: model.loader.active ? 'loading' : '',
+            disabled: model.loader.active,
+            onclick: (event) => actions[1](event, item),
+            title: 'Shutdown environment'
+          }, 'Shutdown'),
         )
-    ),
-    actions && h('td', {style: 'text-align:center'},
-      h('.btn-group',
-        h('button.btn.btn-primary', {
-          class: model.loader.active ? 'loading' : '',
-          disabled: model.loader.active,
-          onclick: (event) => actions[0](event, item),
-          title: 'Open the environment page with more details'
-        }, 'Details'),
-        actions.length >= 2 && h('button.btn.btn-danger', {
-          class: model.loader.active ? 'loading' : '',
-          disabled: model.loader.active,
-          onclick: (event) => actions[1](event, item),
-          title: 'Shutdown environment'
-        }, 'Shutdown'),
       )
-    )
-  ]))),
-]);
+    ]))),
+  ]);
+};
diff --git a/Control/public/common/sidebar.js b/Control/public/common/sidebar.js
@@ -1,7 +1,5 @@
 import {h} from '/js/src/index.js';
-import {
-  iconGridTwoUp, iconExcerpt, iconPlus, iconMediaSkipBackward, iconMediaSkipForward, iconCog
-} from '/js/src/icons.js';
+import {iconGridTwoUp, iconExcerpt, iconPlus, iconMediaSkipBackward, iconMediaSkipForward} from '/js/src/icons.js';
 
 /**
  * Sidebar is the main navigation menu to choose pages though QueryRouter instance
@@ -13,7 +11,7 @@ export default (model) => h('.absolute-fill scroll-y.flex-column', [
     model.sideBarMenu ? 'Environments' : 'ENVS'),
   menuItem(model, 'Create', 'newEnvironment', iconPlus()),
   menuItem(model, 'Active', 'environments', iconGridTwoUp()),
-  menuItem(model, 'Configuration', 'configuration', iconCog()),
+  // menuItem(model, 'Configuration', 'configuration', iconCog()),
   h('', {style: 'flex-grow:1'}), // empty item to fill in space
   menuItem(model, 'About', 'about', iconExcerpt()),
   collapseSidebarMenuItem(model),

diff --git a/Control/public/environment/environmentPage.js b/Control/public/environment/environmentPage.js
@@ -148,6 +148,10 @@ const showEnvDetailsTable = (item) =>
         h('tr', [
           h('th', 'Root Role'),
           h('td', item.rootRole)
+        ]),
+        h('tr', [
+          h('th', 'User Vars'),
+          h('td', JSON.stringify(item.userVars))
         ])
       ])
     ]

diff --git a/Control/public/workflow/Workflow.js b/Control/public/workflow/Workflow.js
@@ -24,7 +24,8 @@ export default class Workflow extends Observable {
     this.form = {
       repository: '',
       revision: 'master',
-      template: ''
+      template: '',
+      variables: {}
     };
   }
 
@@ -174,7 +175,7 @@ export default class Workflow extends Observable {
           } else {
             path = repository + 'workflows/' + template + '@' + revision;
           }
-          this.model.environment.newEnvironment({workflowTemplate: path});
+          this.model.environment.newEnvironment({workflowTemplate: path, vars: this.form.variables});
         } else {
           this.model.environment.itemNew =
             RemoteData.failure('Selected template does not exist for this repository & revision');
@@ -197,6 +198,59 @@ export default class Workflow extends Observable {
     this.getAllTemplatesAsMap(options);
   }
 
+  /**
+   * Method to check inputs of key and value
+   * and add them to form of creating new environment
+   * @param {string} key
+   * @param {string} value
+   * @return {boolean}
+   */
+  addVariable(key, value) {
+    const isKeyCorrect = key && key.trim() !== '';
+    const isValueCorrect = value && value.trim() !== '';
+    if (isKeyCorrect && isValueCorrect) {
+      if (!this.form.variables[key]) {
+        this.form.variables[key] = value;
+        this.notify();
+        return true;
+      } else {
+        this.model.notification.show(`Key '${key}' already exists.`, 'danger', 2000);
+      }
+    } else {
+      this.model.notification.show('Key and Value cannot be empty', 'danger', 2000);
+    }
+    return false;
+  }
+
+  /**
+   * Method to update the value of a (K;V) pair
+   * @param {string} key
+   * @param {string} value
+   */
+  updateVariableValueByKey(key, value) {
+    if (value && value.trim() !== '') {
+      this.form.variables[key] = value;
+      this.notify();
+    } else {
+      this.model.notification.show(`Value for '${key}' cannot be empty`, 'warning', 2000);
+    }
+  }
+
+  /**
+   * Method to remove one of the variables by key
+   * @param {string} key
+   * @return {boolean}
+   */
+  removeVariableByKey(key) {
+    if (this.form.variables[key]) {
+      delete this.form.variables[key];
+      this.notify();
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   /**
    * HTTP Requests
    */

diff --git a/Control/public/workflow/revisionPanel.js b/Control/public/workflow/revisionPanel.js
@@ -21,9 +21,9 @@ export default (workflow, templatesMap, repository) =>
  * @param {string} repository
  * @return {vnode}
  */
-const revisionInputDropdown = (workflow, templatesMap, repository) => h('.m2.text-left', [
+const revisionInputDropdown = (workflow, templatesMap, repository) => h('.m2.text-left.w-100', [
   h('h5', 'Revision:'),
-  h('.w-50', {style: 'display:flex; flex-direction: row;'}, [
+  h('', {style: 'display:flex; flex-direction: row;'}, [
     h('.dropdown', {
       style: 'flex-grow: 1;',
       onclick: () => workflow.setRevisionInputDropdownVisibility(false),