[O2B-652] Fill overview improvements (#657)

Refacto: move formatting functions in a common directory
AliceO2Group · Jul 20, 2022 · 301e01d · 301e01d
1 parent b7b3f1d
commit 301e01d
Show file tree

Hide file tree

Showing 14 changed files with 61 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file. See [standa
 ## [0.34.0]()
 * Notable changes for users:
   * Run tags update is now integrated in the global run update
+  * LHC Fill overview's run lists are now hyperlinks to the corresponding run detail page
 * Notable changes for developers:
   * `GET` RUNS API:
     * `tag` filter do not exist anymore, it is replaced by `tags` which is the list of tags texts to filter on

diff --git a/lib/public/components/Post/index.js b/lib/public/components/Post/index.js
@@ -12,7 +12,7 @@
  */
 
 import { h } from '/js/src/index.js';
-import { formatTimestamp } from '../../utilities/formatTimestamp.js';
+import { formatTimestamp } from '../../utilities/formatting/formatTimestamp.js';
 
 /**
  * A generic generator function to create a list of custom links based on custom defined properties

diff --git a/lib/public/components/RunDetail/index.js b/lib/public/components/RunDetail/index.js
@@ -13,8 +13,8 @@
 
 import format from '../Detail/index.js';
 import { h, iconTrash, iconPlus } from '/js/src/index.js';
-import { formatTimestamp } from '../../utilities/formatTimestamp.js';
-import { formatBoolean } from '../../utilities/formatBoolean.js';
+import { formatTimestamp } from '../../utilities/formatting/formatTimestamp.js';
+import { formatBoolean } from '../../utilities/formatting/formatBoolean.js';
 import { formatRunDuration } from '../../views/Runs/formatRunDuration.js';
 
 /**

diff --git a/lib/public/components/TagDetail/index.js b/lib/public/components/TagDetail/index.js
@@ -13,7 +13,7 @@
 
 import format from '../Detail/index.js';
 import { h } from '/js/src/index.js';
-import { formatTimestamp } from '../../utilities/formatTimestamp.js';
+import { formatTimestamp } from '../../utilities/formatting/formatTimestamp.js';
 
 /**
  * The method to correctly format the current values given from the backend

diff --git a/lib/public/components/lhcFillsDetail/index.js b/lib/public/components/lhcFillsDetail/index.js
@@ -13,7 +13,7 @@
  */
 
 import format from '../Detail/index.js';
-import { formatTimestamp } from '../../utilities/formatTimestamp.js';
+import { formatTimestamp } from '../../utilities/formatting/formatTimestamp.js';
 
 /**
  * The active fields we want to display

diff --git a/lib/public/utilities/formatBoolean.js → ...lic/utilities/formatting/formatBoolean.js b/lib/public/utilities/formatBoolean.js → ...lic/utilities/formatting/formatBoolean.js
diff --git a/lib/public/utilities/formatting/formatDuration.js b/lib/public/utilities/formatting/formatDuration.js
@@ -0,0 +1,36 @@
+/**
+ * @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.
+ */
+
+const MILLISECONDS_IN_ONE_SECOND = 1000;
+
+const MILLISECONDS_IN_ONE_MINUTE = 60 * MILLISECONDS_IN_ONE_SECOND;
+
+const MILLISECONDS_IN_ONE_HOUR = 60 * MILLISECONDS_IN_ONE_MINUTE;
+
+/**
+ * Format a given duration (in milliseconds) in the format HH:MM:SS
+ *
+ * @param {number} duration the duration to format (in milliseconds)
+ *
+ * @return {string} the formatted duration
+ */
+export const formatDuration = (duration) => {
+    const hours = Math.floor(duration / MILLISECONDS_IN_ONE_HOUR);
+    const minutes = Math.floor(duration % MILLISECONDS_IN_ONE_HOUR / MILLISECONDS_IN_ONE_MINUTE);
+    const seconds = Math.floor(duration % MILLISECONDS_IN_ONE_MINUTE / MILLISECONDS_IN_ONE_SECOND);
+
+    // eslint-disable-next-line require-jsdoc
+    const formatNumber = (number) => String(number).padStart(2, '0');
+
+    return `${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(seconds)}`;
+};
diff --git a/lib/public/utilities/formatTimestamp.js → ...c/utilities/formatting/formatTimestamp.js b/lib/public/utilities/formatTimestamp.js → ...c/utilities/formatting/formatTimestamp.js
diff --git a/lib/public/views/Envs/ActiveColumns/index.js b/lib/public/views/Envs/ActiveColumns/index.js
@@ -11,7 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
-import { formatTimestamp } from '../../../utilities/formatTimestamp.js';
+import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 
 /**
  * Method to receive the list of active columns for a generic Environments component

diff --git a/lib/public/views/LhcFills/ActiveColumns/index.js b/lib/public/views/LhcFills/ActiveColumns/index.js
@@ -12,14 +12,16 @@
  * or submit itself to any jurisdiction.
  */
 
-import { formatTimestamp } from '../../../utilities/formatTimestamp.js';
+import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
+import { h } from '/js/src/index.js';
+import { formatDuration } from '../../../utilities/formatting/formatDuration.js';
 
 /**
  * Method to receive the list of active columns for a generic Environments component
- * @param {Object} _model The global model object
+ * @param {Object} model The global model object
  * @return {Object} A collection of columns.
  */
-const activeColumns = (_model) => ({
+const activeColumns = (model) => ({
     fillNumber: {
         name: 'Fill Number',
         visible: true,
@@ -42,7 +44,7 @@ const activeColumns = (_model) => ({
         name: 'Beams Duration',
         visible: true,
         size: 'w-15',
-        format: (time) => time ? `${time} sec` : '-',
+        format: (time) => time ? formatDuration(time * 1000) : '-',
     },
     beamType: {
         name: 'Beam Type',
@@ -62,7 +64,13 @@ const activeColumns = (_model) => ({
         sortable: false,
         size: 'w-15',
         title: true,
-        format: (runs) => runs && runs.length > 0 ? runs.map(({ runNumber }) => runNumber).join(', ') : '-',
+        format: (runs) => runs && runs.length > 0 ? [].concat(...runs.map(({ runNumber, id }) => [
+            h('a', {
+                onclick: (e) => model.router.handleLinkEvent(e),
+                href: `?page=run-detail&id=${id}`,
+            }, runNumber),
+            ', ',
+        ])).slice(0, -1) : '-',
         balloon: true,
     },
 });

diff --git a/lib/public/views/Logs/ActiveColumns/index.js b/lib/public/views/Logs/ActiveColumns/index.js
@@ -19,7 +19,7 @@ import authorFilter from '../../../components/Filters/LogsFilter/author.js';
 import createdFilter from '../../../components/Filters/LogsFilter/created.js';
 import runsFilter from '../../../components/Filters/LogsFilter/runs.js';
 import { remoteDataTagFilter } from '../../../components/Filters/common/remoteDataTagFilter.js';
-import { formatTimestamp } from '../../../utilities/formatTimestamp.js';
+import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 
 /**
  * A method to display a small and simple number/icon collection as a column

diff --git a/lib/public/views/Runs/ActiveColumns/index.js b/lib/public/views/Runs/ActiveColumns/index.js
@@ -25,7 +25,7 @@ import dcsFilter from '../../../components/Filters/RunsFilter/dcs.js';
 import epnFilter from '../../../components/Filters/RunsFilter/epn.js';
 import runQuality from '../../../components/Filters/RunsFilter/runQuality.js';
 import { remoteDataTagFilter } from '../../../components/Filters/common/remoteDataTagFilter.js';
-import { formatTimestamp } from '../../../utilities/formatTimestamp.js';
+import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 import { durationFilter } from '../../../components/Filters/RunsFilter/durationFilter.js';
 import { formatRunDuration } from '../formatRunDuration.js';
 import fillNumbersFilter from '../../../components/Filters/RunsFilter/fillNumbers.js';
@@ -71,7 +71,7 @@ const activeColumns = (model) => ({
         balloon: (tags) => tags && tags.length > 0,
     },
     fillNumber: {
-        name: 'Fill Number',
+        name: 'Fill No.',
         visible: true,
         size: 'w-5 f6',
         format: (fill) => fill !== null ? fill : '-',

diff --git a/lib/public/views/Runs/ActiveColumnsLogs/index.js b/lib/public/views/Runs/ActiveColumnsLogs/index.js
@@ -19,7 +19,7 @@ import authorFilter from '../../../components/Filters/LogsFilter/author.js';
 import createdFilter from '../../../components/Filters/LogsFilter/created.js';
 import runsFilter from '../../../components/Filters/LogsFilter/runs.js';
 import { remoteDataTagFilter } from '../../../components/Filters/common/remoteDataTagFilter.js';
-import { formatTimestamp } from '../../../utilities/formatTimestamp.js';
+import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 
 /**
  * A method to display a small and simple number/icon collection as a column

diff --git a/lib/public/views/Tags/ActiveColumns/index.js b/lib/public/views/Tags/ActiveColumns/index.js
@@ -11,7 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
-import { formatTimestamp } from '../../../utilities/formatTimestamp.js';
+import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 
 /**
  * Method to retrieve the list of active columns for a generic table component