[O2B-1642] Improve the UX of the environments overview table

lib/public/app.css

@@ -962,6 +962,34 @@ label {
     width: 8rem;
 }
 
+/*
+ * Columns of the environments overview: all of them but the detectors, which take the remaining width, have a fixed width fitting their
+ * content
+ */
+.w-environments-id-column {
+    width: 10rem;
+}
+
+.w-environments-status-column {
+    width: 12rem;
+}
+
+.w-environments-created-column {
+    width: 12rem;
+}
+
+.w-environments-history-column {
+    width: 18rem;
+}
+
+.w-environments-configuration-column {
+    width: 11rem;
+}
+
+.w-environments-runs-column {
+    width: 8rem;
+}
+
 /*
  * Beam types of the LHC fills overview, by what collides: only shapes and neutral shades are used, as colors are reserved to states
  */

lib/public/components/common/formatting/dataTakingConfiguration.js

@@ -0,0 +1,52 @@
+/**
+ * @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 { labelledLine } from './labelledLine.js';
+
+/**
+ * Format the number of EPNs: the count if known, ON if EPNs are used without a known count, OFF otherwise
+ *
+ * @param {boolean} epn true if EPNs are used
+ * @param {number|null} nEpns the number of EPNs
+ * @return {string|number} the formatted value
+ */
+const formatEpnsCount = (epn, nEpns) => {
+    if (!epn) {
+        return 'OFF';
+    }
+    return typeof nEpns === 'number' ? nEpns : 'ON';
+};
+
+/**
+ * Display the data taking configuration of a run or of an environment: the number of EPNs and FLPs, the DCS state and the trigger, two by line
+ *
+ * @param {string} idPrefix the prefix of the ids of the elements (e.g. `row123`)
+ * @param {object} configuration the configuration to display
+ * @param {boolean} configuration.epn true if EPNs are used
+ * @param {number|null} configuration.nEpns the number of EPNs
+ * @param {number|null} configuration.nFlps the number of FLPs
+ * @param {boolean} configuration.dcs true if DCS is enabled
+ * @param {string|null} configuration.triggerValue the trigger (OFF, LTU or CTP)
+ * @return {Component} the configuration
+ */
+export const dataTakingConfiguration = (idPrefix, { epn, nEpns, nFlps, dcs, triggerValue }) => h('', [
+    h(`#${idPrefix}-nodes.flex-row.g2`, [
+        labelledLine(`${idPrefix}-nEpns`, 'EPNs', formatEpnsCount(epn, nEpns)),
+        labelledLine(`${idPrefix}-nFlps`, 'FLPs', nFlps ?? '-'),
+    ]),
+    h(`#${idPrefix}-states.flex-row.g2`, [
+        labelledLine(`${idPrefix}-dcs`, 'DCS', dcs ? 'ON' : 'OFF'),
+        labelledLine(`${idPrefix}-triggerValue`, 'TRG', triggerValue || '-'),
+    ]),
+]);

lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js

@@ -14,30 +14,45 @@
 import { CopyToClipboardComponent, h } from '/js/src/index.js';
 import { iconPlus } from '/js/src/icons.js';
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
+import { dataTakingConfiguration } from '../../../components/common/formatting/dataTakingConfiguration.js';
+import { linkWithActionsDropdown } from '../../../components/common/selection/infoLoggerButtonGroup/linkWithActionsDropdown.js';
 import { formatRunsList } from '../../Runs/format/formatRunsList.js';
 import { displayEnvironmentStatus } from '../format/displayEnvironmentStatus.js';
-import { buttonLinkWithDropdown } from '../../../components/common/selection/infoLoggerButtonGroup/buttonLinkWithDropdown.js';
 import { infologgerLinksComponents } from '../../../components/common/externalLinks/infologgerLinksComponents.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';;
-import { coloredEnvironmentStatusComponent } from '../ColoredEnvironmentStatusComponent.js';
 import { environmentStatusHistoryLegendComponent } from '../../../components/environments/environmentStatusHistoryComponent.js';
+import { overflowBalloon } from '../../../components/common/popover/overflowBalloon.js';
 import { infoTooltip } from '../../../components/common/popover/infoTooltip.js';
 import { aliEcsEnvironmentLinkComponent } from '../../../components/common/externalLinks/aliEcsEnvironmentLinkComponent.js';
-import { StatusAcronym } from '../../../domain/enums/statusAcronym.mjs';
+import { formatEnvironmentStatusHistory } from '../format/formatEnvironmentStatusHistory.js';
+import { parseEnvironmentConfiguration } from '../format/parseEnvironmentConfiguration.js';
 import { timeRangeFilter } from '../../../components/Filters/common/filters/timeRangeFilter.js';
 import { checkboxes } from '../../../components/Filters/common/filters/checkboxFilter.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 
 /**
- * List of active columns for a generic Environments component
+ * List of active columns for the environments overview
+ *
+ * The current status is displayed with its message and the status history with the time spent running by the environment
  */
 export const environmentsActiveColumns = {
     id: {
-        name: 'Id',
-        size: 'w-10 f6 w-wrapped',
+        name: 'Environment',
+        size: 'w-environments-id-column',
+        classes: 'f6',
         visible: true,
         primary: true,
-        format: (environmentId, { status, runs }) => buttonLinkWithDropdown(
+        noEllipsis: true,
+
+        /**
+         * Display the id of the environment as a link with its actions
+         *
+         * @param {string} environmentId the id of the environment
+         * @param {Environment} environment the environment
+         * @return {Component} the environment id
+         */
+        format: (environmentId, { status, runs }) => linkWithActionsDropdown(
+            `row${environmentId}-id`,
             environmentId,
             'env-details',
             { environmentId },
@@ -54,7 +69,6 @@ export const environmentsActiveColumns = {
                     { id: 'add-log-link', class: 'btn btn-primary h2' },
                 ),
             ],
-            '125px',
         ),
 
         /**
@@ -66,36 +80,42 @@ export const environmentsActiveColumns = {
          */
         filter: ({ filteringModel }) => textInputFilter(filteringModel, 'ids', 'e.g. CmCvjNbg, TDI59So3d...'),
     },
-    runs: {
-        name: 'Runs',
+    status: {
+        name: 'Current Status',
         visible: true,
         sortable: false,
-        size: 'w-10',
-        format: formatRunsList,
-        balloon: true,
+        size: 'w-environments-status-column',
+        classes: 'f6',
+        noEllipsis: true,
 
         /**
-         * Run numbers filter component
+         * Display the current status of the environment, with its message below it
          *
-         * @param {object} environmentOverviewModel the overview model
-         * @param {FilteringModel} environmentOverviewModel.filteringModel the filtering model
+         * @param {*} _ unused, the status is read from the environment
+         * @param {Environment} environment the environment
+         * @return {Component} the current status and its message
+         */
+        format: (_, environment) => h('', [
+            h(`#row${environment.id}-currentStatus`, displayEnvironmentStatus(environment)),
+            h(`#row${environment.id}-statusMessage.f7.gray-darker`, overflowBalloon(environment.statusMessage || '-')),
+        ]),
+
+        /**
+         * Status filter component
+         *
+         * @param {EnvironmentOverviewModel} environmentOverviewModel the environment overview model
          * @return {Component} the filter component
          */
-        filter: ({ filteringModel }) => textInputFilter(filteringModel, 'runNumbers', 'e.g. 553203, 553221, ...'),
-    },
-    updatedAt: {
-        name: 'Last Update',
-        visible: true,
-        sortable: false,
-        size: 'w-10',
-        format: (timestamp) => formatTimestamp(timestamp, false),
+        filter: (environmentOverviewModel) => checkboxes(environmentOverviewModel.filteringModel.get('currentStatus')),
     },
     createdAt: {
         name: 'Created At',
         visible: true,
         sortable: false,
-        size: 'w-10',
-        format: (timestamp) => formatTimestamp(timestamp, false),
+        size: 'w-environments-created-column',
+        classes: 'f6',
+        noEllipsis: true,
+        format: (timestamp) => formatTimestamp(timestamp, true),
 
         /**
          * CreatedAt filter component
@@ -105,41 +125,84 @@ export const environmentsActiveColumns = {
          */
         filter: (environmentOverviewModel) => timeRangeFilter(environmentOverviewModel.filteringModel.get('created')),
     },
-    status: {
-        name: 'Current Status',
+    historyItems: {
+        name: h('.flex-row.g2.items-center', ['Status History', infoTooltip(environmentStatusHistoryLegendComponent())]),
         visible: true,
         sortable: false,
-        size: 'w-10',
+        size: 'w-environments-history-column',
+        classes: 'f6',
         noEllipsis: true,
-        format: (_, environment) => displayEnvironmentStatus(environment),
+        format: (historyItems, { id }) => formatEnvironmentStatusHistory(historyItems, id),
 
         /**
-         * Status filter component
+         * Status history filter component
          *
-         * @param {EnvironmentOverviewModel} environmentOverviewModel the environment overview model
+         * @param {object} environmentOverviewModel the overview model
+         * @param {FilteringModel} environmentOverviewModel.filteringModel the filtering model
          * @return {Component} the filter component
          */
-        filter: (environmentOverviewModel) => checkboxes(environmentOverviewModel.filteringModel.get('currentStatus')),
+        filter: ({ filteringModel }) => textInputFilter(filteringModel, 'statusHistory', 'e.g. D-R-X'),
     },
-    historyItems: {
-        name: h('.flex-row.g2.items-center', ['Status History', infoTooltip(environmentStatusHistoryLegendComponent())]),
+    runs: {
+        name: 'Runs',
         visible: true,
         sortable: false,
-        size: 'w-20',
-        format: (historyItems) => historyItems
-            .flatMap(({ status }) => [
-                '-',
-                coloredEnvironmentStatusComponent(status, StatusAcronym[status]),
-            ]).slice(1),
+        size: 'w-environments-runs-column',
+        classes: 'f6',
+        format: formatRunsList,
         balloon: true,
 
         /**
-         * Status history filter component
+         * Run numbers filter component
          *
          * @param {object} environmentOverviewModel the overview model
          * @param {FilteringModel} environmentOverviewModel.filteringModel the filtering model
          * @return {Component} the filter component
          */
-        filter: ({ filteringModel }) => textInputFilter(filteringModel, 'statusHistory', 'e.g. D-R-X'),
+        filter: ({ filteringModel }) => textInputFilter(filteringModel, 'runNumbers', 'e.g. 553203, 553221, ...'),
+    },
+    configuration: {
+        name: 'Configuration',
+        visible: true,
+        sortable: false,
+        size: 'w-environments-configuration-column',
+        classes: 'f6',
+        noEllipsis: true,
+
+        /**
+         * Display the number of EPNs and FLPs, the DCS state and the trigger of the environment, two by line, as for the runs
+         *
+         * @param {*} _ unused, the configuration is read from the environment
+         * @param {Environment} environment the environment
+         * @return {Component|string} the configuration, or a dash if the environment has no valid configuration
+         */
+        format: (_, { id, rawConfiguration }) => {
+            const configuration = parseEnvironmentConfiguration(rawConfiguration);
+            return configuration ? dataTakingConfiguration(`row${id}`, configuration) : '-';
+        },
+    },
+    detectors: {
+        name: 'Detectors',
+        visible: true,
+        sortable: false,
+        classes: 'f6',
+        noEllipsis: true,
+
+        /**
+         * Display the number of detectors of the environment followed by their names, on a single line
+         *
+         * @param {*} _ unused, the detectors are read from the configuration of the environment
+         * @param {Environment} environment the environment
+         * @return {Component|string} the detectors, or a dash if the environment has none
+         */
+        format: (_, { id, rawConfiguration }) => {
+            const detectors = parseEnvironmentConfiguration(rawConfiguration)?.detectors ?? [];
+            return detectors.length > 0
+                ? h(`#row${id}-detectors`, overflowBalloon(h('', [
+                    h('.badge.bg-gray-light.mr1', detectors.length),
+                    detectors.join(', '),
+                ])))
+                : '-';
+        },
     },
 };

lib/public/views/Environments/Overview/environmentOverviewComponent.js

@@ -19,9 +19,9 @@ import { paginationComponent } from '../../../components/Pagination/paginationCo
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
 import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
-const TABLEROW_HEIGHT = 58;
+const TABLEROW_HEIGHT = 51;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
-const PAGE_USED_HEIGHT = 181;
+const PAGE_USED_HEIGHT = 215;
 
 /**
  * The shows the environment table