[O2B-1128] Implemented status history legend on environment overview (#1354)

SandroBoelsz · martinboulais · web-flow · commit b7dead551cae · 2024-02-01T11:05:18.000+01:00
* [O2B-1128] Implemented tooltip legend for status history on environment overview

* [O2B-1128] moved multiple popover triggers into a single trigger

* [O2B-1128] removed balloon check on statusHistory column because test expected a single popover trigger

* [O2B-1128] incorporated the PR suggestions

* [O2B-1128] fix typo

* Minor improvements

* Fix histogram

* Display tooltip on the table header

* Fix linter

* Fix tests

---------

Co-authored-by: Martin Boulais &lt;31805063+martinboulais@users.noreply.github.com&gt;
diff --git a/docs/data-model.md b/docs/data-model.md
@@ -196,7 +196,7 @@ Concerning the **Update mode** of the fields:
 | `id`            | Environment id                                        | `Dxi029djX`, `EIDO13i3D`                                                          | AT COE          | `id`           | Insert          |
 | `createdAt`     | When the environment is created                       |                                                                                   | AT COE          | `id`           | Insert          |
 | `toredownAt`    | When the environment is stopped                       |                                                                                   | AT EOE          | `id`           | Update          |
-| `status`        | Actual status of the envrionment                      | `STOPPED`, `STARTED`                                                              |                 | `id`           | Update          |
+| `status`        | Actual status of the envrionment                      | `DEPLOYED`, `STARTED`                                                             |                 | `id`           | Update          |
 | `statusMessage` | A bigger message to show more detail about the status | `Environment sucessfully closed`, `Error creating envrionment: bad configuration` |                 | `id`           | Update          |
 
 ### LhcFills
diff --git a/lib/database/seeders/20230124105627-environment-history.js b/lib/database/seeders/20230124105627-environment-history.js
@@ -35,7 +35,7 @@ module.exports = {
                     },
                     {
                         environment_id: 'TDI59So3d',
-                        status: 'STOPPED',
+                        status: 'DEPLOYED',
                         status_message: 'Environment has been stopped',
                         created_at: new Date('2019-08-09 18:00:00'),
                         updated_at: new Date('2019-08-09 18:00:00'),
diff --git a/lib/public/app.css b/lib/public/app.css
@@ -71,7 +71,6 @@ html, body {
 .w-85  { width:  85%; }
 .w-90  { width:  90%; }
 .w-95  { width:  95%; }
-.w-100 { width: 100%; }
 .mw-100 { max-width: 100%; }
 .mh-100 { max-height: 100%; }
 .w-30rem { width: 30rem; }
@@ -82,6 +81,9 @@ html, body {
     width: unset;
 }
 
+/* cursors */
+.cursor-info { cursor: help; }
+
 /* specific margins */
 .ml1 { margin-left: var(--space-xs); }
 .ml2 { margin-left: var(--space-s); }
diff --git a/lib/public/components/common/popover/infoTooltip.js b/lib/public/components/common/popover/infoTooltip.js
@@ -0,0 +1,25 @@
+/**
+ *  @license
+ *  Copyright CERN and copyright holders of ALICE O2. This software is
+ *  distributed under the terms of the GNU General Public License v3 (GPL
+ *  Version 3), copied verbatim in the file "COPYING".
+ *
+ *  See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ *  In applying this license CERN does not waive the privileges and immunities
+ *  granted to it by virtue of its status as an Intergovernmental Organization
+ *  or submit itself to any jurisdiction.
+ */
+import { tooltip } from './tooltip.js';
+import { h, info } from '/js/src/index.js';
+
+/**
+ * Display an info icon with a tooltip displayed on hover
+ *
+ * @param {Component} content the content of the help tooltip
+ * @return {Component} the info icon with tooltip
+ */
+export const infoTooltip = (content) => tooltip(
+    h('.cursor-help.h-100.w-100', { style: 'cursor: help' }, info()),
+    content,
+);
diff --git a/lib/public/components/common/table/headers.js b/lib/public/components/common/table/headers.js
@@ -32,13 +32,13 @@ export const headers = (columns, models) => {
     const { sort: sortModel = null, filter: filterModel = null } = models || {};
 
     return h('thead', h(`tr${isInlineFilter ? '.va-top' : ''}`, columns.map((column) => {
-        const { size, name, sortable, key, inlineFilter } = column;
+        const { size, name, sortable, key, inlineFilter, information } = column;
         const classes = [size || null, column.classes || null];
 
         // Name needs to be empty for a popover, otherwise the name when hovering will be blocking the popover.
         const attributes = {
             scope: 'col',
-            title: column.information ? '' : name,
+            title: information || undefined,
         };
         let content = [name];
         if (sortModel && sortable) {
diff --git a/lib/public/components/environments/environmentStatusHistoryComponent.js b/lib/public/components/environments/environmentStatusHistoryComponent.js
@@ -0,0 +1,42 @@
+/**
+ *  @license
+ *  Copyright CERN and copyright holders of ALICE O2. This software is
+ *  distributed under the terms of the GNU General Public License v3 (GPL
+ *  Version 3), copied verbatim in the file "COPYING".
+ *
+ *  See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ *  In applying this license CERN does not waive the privileges and immunities
+ *  granted to it by virtue of its status as an Intergovernmental Organization
+ *  or submit itself to any jurisdiction.
+ */
+
+import { coloredEnvironmentStatusComponent } from '../../views/Environments/ColoredEnvironmentStatusComponent.js';
+import { h } from '/js/src/index.js';
+import { STATUS_ACRONYMS } from '../../domain/enums/statusAcronyms.js';
+
+/**
+ * Returns a legend for the environment status history acronyms.
+ *
+ * @return {Component} the resulting environment status history legend component
+ */
+export const environmentStatusHistoryLegendComponent = () =>
+    h('', [
+        h('h5', 'Status History Legend'),
+        Object.keys(STATUS_ACRONYMS).map((status) =>
+            h('.flex-row.justify-between', [
+                h('', status),
+                h('', STATUS_ACRONYMS[status]),
+            ])),
+    ]);
+
+/**
+ * Returns a tooltip legend for the environment status history acronyms.
+ *
+ * @param {{status: string, acronym: string}[]} statusHistory list of history items (full status and their acronym)
+ * @return {Component} the resulting environment status history component
+ */
+export const environmentStatusHistoryComponent = (statusHistory) => statusHistory.flatMap((value) => [
+    coloredEnvironmentStatusComponent(value.status, value.acronym),
+    '-',
+]).slice(0, -1);
diff --git a/lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js b/lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js
@@ -18,7 +18,10 @@ import { displayEnvironmentStatus } from '../format/displayEnvironmentStatus.js'
 import { buttonLinkWithDropdown } from '../../../components/common/selection/infoLoggerButtonGroup/buttonLinkWithDropdown.js';
 import { CopyToClipboardComponent } from '../../../components/common/selection/infoLoggerButtonGroup/CopyToClipboardComponent.js';
 import { infologgerLinksComponents } from '../../../components/common/infologger/infologgerLinksComponents.js';
-import { displayEnvironmentStatusHistory } from '../format/displayEnvironmentStatusHistory.js';
+import { coloredEnvironmentStatusComponent } from '../ColoredEnvironmentStatusComponent.js';
+import { STATUS_ACRONYMS } from '../../../domain/enums/statusAcronyms.js';
+import { environmentStatusHistoryLegendComponent } from '../../../components/environments/environmentStatusHistoryComponent.js';
+import { infoTooltip } from '../../../components/common/popover/infoTooltip.js';
 
 /**
  * List of active columns for a generic Environments component
@@ -73,13 +76,16 @@ export const environmentsActiveColumns = {
         noEllipsis: true,
         format: (_, environment) => displayEnvironmentStatus(environment),
     },
-    statusHistory: {
-        name: 'Status History',
+    historyItems: {
+        name: h('.flex-row.g2.items-center', ['Status History', infoTooltip(environmentStatusHistoryLegendComponent())]),
         visible: true,
         sortable: false,
         size: 'w-20',
-        title: true,
-        format: (_, environment) => displayEnvironmentStatusHistory(environment),
+        format: (historyItems) => historyItems
+            .flatMap(({ status }) => [
+                coloredEnvironmentStatusComponent(status, STATUS_ACRONYMS[status]),
+                '-',
+            ]).slice(0, -1),
         balloon: true,
     },
 };
diff --git a/lib/public/views/Environments/ColoredEnvironmentStatusComponent.js b/lib/public/views/Environments/ColoredEnvironmentStatusComponent.js
@@ -12,19 +12,25 @@
  */
 
 import { h } from '/js/src/index.js';
+import { STATUS_ACRONYMS } from '../../domain/enums/statusAcronyms.js';
 
 /**
  * Returns a component displaying a colored environment status
  *
  * @param {string} status The environment status color to display
  * @param {string} content Optional custom content to show in given status color
  *
- * @return {vnode} the formatted status
+ * @return {Component} the formatted status
  */
-export const coloredEnvironmentStatusComponent = (status, content = status) => h(statusToCssClassMapping[status] ?? '', content);
+export const coloredEnvironmentStatusComponent = (status, content = status) => {
+    if (!(status in STATUS_ACRONYMS)) {
+        return null;
+    }
+    return h('span', { class: statusToCssClassMapping[status] ?? '' }, content);
+};
 
 const statusToCssClassMapping = {
-    RUNNING: '.success',
-    ERROR: '.danger',
-    CONFIGURED: '.warning',
+    RUNNING: 'success',
+    ERROR: 'danger',
+    CONFIGURED: 'warning',
 };
diff --git a/lib/public/views/Environments/format/displayEnvironmentStatusHistory.js b/lib/public/views/Environments/format/displayEnvironmentStatusHistory.js
diff --git a/lib/public/views/Environments/format/displayEnvironmentStatusHistoryOverview.js b/lib/public/views/Environments/format/displayEnvironmentStatusHistoryOverview.js
diff --git a/lib/public/views/Statistics/charts/environmentHistoryOccurrencesBarChartComponent.js b/lib/public/views/Statistics/charts/environmentHistoryOccurrencesBarChartComponent.js
@@ -13,7 +13,7 @@
 
 import { ChartColors } from '../chartColors.js';
 import { barChartComponent } from '../../../components/common/chart/barChart/barChartComponent.js';
-import { displayEnvironmentStatusHistory } from '../../Environments/format/displayEnvironmentStatusHistory.js';
+import { STATUS_ACRONYMS } from '../../../domain/enums/statusAcronyms.js';
 
 const VISIBLE_BIN_COUNT = 32;
 
@@ -29,7 +29,7 @@ export const environmentHistoryOccurrencesBarChartComponent = (environmentHistor
     const excessCount = excessBins.reduce((sum, { count }) => sum + count, 0);
 
     const points = visibleBins.map(({ statusHistory, count }) => ({
-        x: displayEnvironmentStatusHistory(statusHistory),
+        x: statusHistory.split(',').map((status) => STATUS_ACRONYMS[status] ?? null).filter((acronym) => acronym).join(''),
         y: count,
     }));
 
diff --git a/test/lib/server/services/statistics/StatisticsService.test.js b/test/lib/server/services/statistics/StatisticsService.test.js
@@ -333,7 +333,7 @@ module.exports = () => {
         expect(historyOccurrences).to.eql([
             { statusHistory: 'STANDBY,ERROR', count: 1 },
             { statusHistory: 'STANDBY,DEPLOYED,ERROR,DESTROYED', count: 1 },
-            { statusHistory: 'CONFIGURED,RUNNING,STOPPED,DESTROYED', count: 1 },
+            { statusHistory: 'CONFIGURED,RUNNING,DEPLOYED,DESTROYED', count: 1 },
         ]);
     });
 
diff --git a/test/public/envs/detailsPage.test.js b/test/public/envs/detailsPage.test.js
@@ -57,7 +57,7 @@ module.exports = () => {
         expect(historyItems).to.have.lengthOf(4);
         expect(await historyItems[0].$eval('.badge', (element) => element.innerText)).to.equal('CONFIGURED');
         expect(await historyItems[1].$eval('.badge', (element) => element.innerText)).to.equal('RUNNING');
-        expect(await historyItems[2].$eval('.badge', (element) => element.innerText)).to.equal('STOPPED');
+        expect(await historyItems[2].$eval('.badge', (element) => element.innerText)).to.equal('DEPLOYED');
         expect(await historyItems[3].$eval('.badge', (element) => element.innerText)).to.equal('DESTROYED');
     });
 
diff --git a/test/public/envs/overview.test.js b/test/public/envs/overview.test.js
@@ -102,7 +102,7 @@ module.exports = () => {
         expect(await page.$eval('#totalRowsCount', (element) => parseInt(element.innerText, 10))).to.equal(11);
     });
 
-    it('Should have balloon on status message and runs columns', async () => {
+    it('Should have balloon on runs column', async () => {
         await goToPage(page, 'env-overview');
         await page.waitForTimeout(100);
 

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ module.exports = {`
`35`	`35`	`},`
`36`	`36`	`{`
`37`	`37`	`environment_id: 'TDI59So3d',`
`38`		`- status: 'STOPPED',`
	`38`	`+ status: 'DEPLOYED',`
`39`	`39`	`status_message: 'Environment has been stopped',`
`40`	`40`	`created_at: new Date('2019-08-09 18:00:00'),`
`41`	`41`	`updated_at: new Date('2019-08-09 18:00:00'),`