[O2B-1103] Environment history occurrences histogram (#1328)

SandroBoelsz · martinboulais · web-flow · commit 7557b6905be2 · 2024-01-18T12:07:56.000+01:00
* [O2B-1103] implemented the environment history occurrences histogram

* [O2B-1103] implemented changes requested in the API PR

* [O2B-1103] additional fix for the PR changes

* [O2B-1103] changed existing status acronyms in accordance to the RMreportW29_2023

* [O2B-1103] added a max displayed bin limit to the environmentHistoryOccurences chart

---------

Co-authored-by: Martin Boulais &lt;31805063+martinboulais@users.noreply.github.com&gt;
diff --git a/lib/public/domain/enums/statusAcronyms.js b/lib/public/domain/enums/statusAcronyms.js
@@ -13,12 +13,11 @@
 
 const statusAcronyms = {
     STANDBY: 'S',
-    DEPLOYED: 'DL',
+    DEPLOYED: 'D',
     CONFIGURED: 'C',
     RUNNING: 'R',
     ERROR: 'E',
-    MIX: 'M',
-    DESTROYED: 'DS',
+    DESTROYED: 'X',
 };
 
 export const STATUS_ACRONYMS = statusAcronyms;
diff --git a/lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js b/lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js
@@ -13,7 +13,7 @@
 
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 import { formatRunsList } from '../../Runs/format/formatRunsList.js';
-import { displayEnvironmentStatusHistory } from '../format/displayEnvironmentStatusHistory.js';
+import { displayEnvironmentStatusHistoryOverview } from '../format/displayEnvironmentStatusHistoryOverview.js';
 import { displayEnvironmentStatus } from '../format/displayEnvironmentStatus.js';
 import { infoLoggerButtonGroup } from '../../../components/common/selection/infoLoggerButtonGroup/infoLoggerButtonGroup.js';
 
@@ -59,7 +59,7 @@ export const environmentsActiveColumns = {
         sortable: false,
         size: 'w-30',
         title: true,
-        format: (_, environment) => displayEnvironmentStatusHistory(environment),
+        format: (_, environment) => displayEnvironmentStatusHistoryOverview(environment),
         balloon: true,
     },
     runs: {
diff --git a/lib/public/views/Environments/format/displayEnvironmentStatusHistory.js b/lib/public/views/Environments/format/displayEnvironmentStatusHistory.js
@@ -10,28 +10,17 @@
  *  granted to it by virtue of its status as an Intergovernmental Organization
  *  or submit itself to any jurisdiction.
  */
-import { h } from '/js/src/index.js';
+
 import { STATUS_ACRONYMS } from '../../../domain/enums/statusAcronyms.js';
-import { coloredEnvironmentStatusComponent } from '../ColoredEnvironmentStatusComponent.js';
 
 /**
- * Display the given environment's status history string
+ * Display the given environment's status history as a string of acronyms
  *
- * @param {Environment} environment the environment for which status should be displayed
- * @return {vnode} the resulting component
+ * @param {String} statusHistory the environment status history seperated by commas
+ * @return {String} the abbreviated string representation of the environment status history
  */
-export const displayEnvironmentStatusHistory = (environment) => {
-    const { historyItems } = environment;
-
-    const statusHistory = historyItems
-        .filter(({ status }) => status in STATUS_ACRONYMS)
-        .map(({ status }) => ({ status, content: STATUS_ACRONYMS[status] }));
-
-    return h(
-        '.flex-row',
-        statusHistory.map((value, index) => h('.flex-row', [
-            coloredEnvironmentStatusComponent(value.status, value.content),
-            h('', index < statusHistory.length - 1 ? '-' : ''),
-        ])),
-    );
-};
+export const displayEnvironmentStatusHistory = (statusHistory) =>
+    statusHistory.split(',')
+        .filter((status) => status in STATUS_ACRONYMS)
+        .map((status) => STATUS_ACRONYMS[status])
+        .join('');
diff --git a/lib/public/views/Environments/format/displayEnvironmentStatusHistoryOverview.js b/lib/public/views/Environments/format/displayEnvironmentStatusHistoryOverview.js
@@ -0,0 +1,37 @@
+/**
+ *  @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 { h } from '/js/src/index.js';
+import { STATUS_ACRONYMS } from '../../../domain/enums/statusAcronyms.js';
+import { coloredEnvironmentStatusComponent } from '../ColoredEnvironmentStatusComponent.js';
+
+/**
+ * Display the given environment's status history string
+ *
+ * @param {Environment} environment the environment for which status should be displayed
+ * @return {vnode} the resulting component
+ */
+export const displayEnvironmentStatusHistoryOverview = (environment) => {
+    const { historyItems } = environment;
+
+    const statusHistory = historyItems
+        .filter(({ status }) => status in STATUS_ACRONYMS)
+        .map(({ status }) => ({ status, content: STATUS_ACRONYMS[status] }));
+
+    return h(
+        '.flex-row',
+        statusHistory.map((value, index) => h('.flex-row', [
+            coloredEnvironmentStatusComponent(value.status, value.content),
+            h('', index < statusHistory.length - 1 ? '-' : ''),
+        ])),
+    );
+};
diff --git a/lib/public/views/Statistics/StatisticsPage.js b/lib/public/views/Statistics/StatisticsPage.js
@@ -24,6 +24,7 @@ import { ChartDarkColors } from './chartColors.js';
 import { tagOccurrencesBarChartComponent } from './charts/tagOccurrencesBarChartComponent.js';
 import { timeRangeFilter } from '../../components/Filters/common/filters/timeRangeFilter.js';
 import { eorReasonOccurrencesBarChartComponent } from './charts/eorReasonOccurrencesBarChartComponent.js';
+import { environmentHistoryOccurrencesBarChartComponent } from './charts/environmentHistoryOccurrencesBarChartComponent.js';
 import { formatTimeRange } from '../../components/common/formatting/formatTimeRange.js';
 import spinner from '../../components/common/spinner.js';
 import errorAlert from '../../components/common/errorAlert.js';
@@ -57,6 +58,7 @@ export const StatisticsPage = ({ statisticsModel }) => {
                 [STATISTICS_PANELS_KEYS.EFFICIENCY_PER_DETECTOR]: 'Detector efficiency',
                 [STATISTICS_PANELS_KEYS.LOG_TAG_OCCURRENCES]: 'Tag occurrences in logs',
                 [STATISTICS_PANELS_KEYS.EOR_REASON_OCCURRENCES]: 'End of run reason occurrences',
+                [STATISTICS_PANELS_KEYS.ENVIRONMENT_HISTORY_OCCURRENCES]: 'Environment history occurrences',
             },
             {
                 [STATISTICS_PANELS_KEYS.LHC_FILL_EFFICIENCY]: (remoteData) => remoteDataDisplay(remoteData, {
@@ -160,6 +162,12 @@ export const StatisticsPage = ({ statisticsModel }) => {
                         h('.flex-grow.chart-box', eorReasonOccurrencesBarChartComponent(eorReasonOccurrences)),
                     ],
                 }),
+                [STATISTICS_PANELS_KEYS.ENVIRONMENT_HISTORY_OCCURRENCES]: (remoteData) => remoteDataDisplay(remoteData, {
+                    Success: (environmentHistoryOccurrences) => [
+                        h('h3', `Environment history occurrences - ${periodLabel}`),
+                        h('.flex-grow.chart-box', environmentHistoryOccurrencesBarChartComponent(environmentHistoryOccurrences)),
+                    ],
+                }),
             },
             { panelClass: ['p2', 'g3', 'flex-column', 'flex-grow'] },
         ),
diff --git a/lib/public/views/Statistics/StatisticsPageModel.js b/lib/public/views/Statistics/StatisticsPageModel.js
@@ -26,6 +26,7 @@ export const STATISTICS_PANELS_KEYS = {
     EFFICIENCY_PER_DETECTOR: 'efficiency-per-detector',
     LOG_TAG_OCCURRENCES: 'log-tag-occurrences',
     EOR_REASON_OCCURRENCES: 'eor-reasons-occurrences',
+    ENVIRONMENT_HISTORY_OCCURRENCES: 'environment-history-occurrences',
 };
 
 /**
@@ -166,6 +167,13 @@ class StatisticsTabbedPanelModel extends TabbedPanelModel {
                     { from: this._period.from, to: this._period.to },
                 ));
                 break;
+            case STATISTICS_PANELS_KEYS.ENVIRONMENT_HISTORY_OCCURRENCES:
+                // eslint-disable-next-line max-len
+                this._fetchEndpointForPanelData(buildUrl(
+                    '/api/statistics/environments/historyOccurrences',
+                    { from: this._period.from, to: this._period.to },
+                ));
+                break;
             case STATISTICS_PANELS_KEYS.EFFICIENCY_PER_DETECTOR:
                 this._detectorEfficiencyTabModel.fetch();
                 break;
@@ -193,6 +201,7 @@ class StatisticsTabbedPanelModel extends TabbedPanelModel {
             case STATISTICS_PANELS_KEYS.TIME_BETWEEN_RUNS_DISTRIBUTION:
             case STATISTICS_PANELS_KEYS.LOG_TAG_OCCURRENCES:
             case STATISTICS_PANELS_KEYS.EOR_REASON_OCCURRENCES:
+            case STATISTICS_PANELS_KEYS.ENVIRONMENT_HISTORY_OCCURRENCES:
                 return this._observableData.getCurrent();
             case STATISTICS_PANELS_KEYS.EFFICIENCY_PER_DETECTOR:
                 return this._detectorEfficiencyTabModel;
diff --git a/lib/public/views/Statistics/charts/environmentHistoryOccurrencesBarChartComponent.js b/lib/public/views/Statistics/charts/environmentHistoryOccurrencesBarChartComponent.js
@@ -0,0 +1,65 @@
+/**
+ *  @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 { ChartColors } from '../chartColors.js';
+import { barChartComponent } from '../../../components/common/chart/barChart/barChartComponent.js';
+import { displayEnvironmentStatusHistory } from '../../Environments/format/displayEnvironmentStatusHistory.js';
+
+const VISIBLE_BIN_COUNT = 32;
+
+/**
+ * Bar chart displaying environment status history occurrences
+ *
+ * @param {{statusHistory: string, count: number}[]} environmentHistoryOccurrences the environment history occurrences
+ * @return {Component} the chart component
+ */
+export const environmentHistoryOccurrencesBarChartComponent = (environmentHistoryOccurrences) => {
+    const visibleBins = environmentHistoryOccurrences.slice(0, VISIBLE_BIN_COUNT);
+    const excessBins = environmentHistoryOccurrences.slice(VISIBLE_BIN_COUNT);
+    const excessCount = excessBins.reduce((sum, { count }) => sum + count, 0);
+
+    const points = visibleBins.map(({ statusHistory, count }) => ({
+        x: displayEnvironmentStatusHistory(statusHistory),
+        y: count,
+    }));
+
+    if (excessCount > 0) {
+        points.push({
+            x: 'Other',
+            y: excessCount,
+        });
+    }
+
+    return barChartComponent(points, {
+        placeholder: 'No environment history on the given period',
+        chartConfiguration: {
+            axis: {
+                x: {
+                    label: 'Environments',
+                    ticks: { overlapping: 'rotate' },
+                },
+                y: {
+                    label: 'Count',
+                    ticks: { format: (t) => Number.isInteger(t) ? t : null },
+                    min: 0,
+                },
+            },
+            datasets: {
+                bar: {
+                    fill: ChartColors.Blue.dark,
+                    stroke: ChartColors.Blue.light,
+                },
+            },
+        },
+    });
+};
