From 301e01dfd88db163b1a6123cd29eb4859cfcc041 Mon Sep 17 00:00:00 2001 From: Martin Boulais <31805063+martinboulais@users.noreply.github.com> Date: Wed, 20 Jul 2022 14:01:52 +0200 Subject: [PATCH] [O2B-652] Fill overview improvements (#657) Refacto: move formatting functions in a common directory --- CHANGELOG.md | 1 + lib/public/components/Post/index.js | 2 +- lib/public/components/RunDetail/index.js | 4 +-- lib/public/components/TagDetail/index.js | 2 +- lib/public/components/lhcFillsDetail/index.js | 2 +- .../{ => formatting}/formatBoolean.js | 0 .../utilities/formatting/formatDuration.js | 36 +++++++++++++++++++ .../{ => formatting}/formatTimestamp.js | 0 lib/public/views/Envs/ActiveColumns/index.js | 2 +- .../views/LhcFills/ActiveColumns/index.js | 18 +++++++--- lib/public/views/Logs/ActiveColumns/index.js | 2 +- lib/public/views/Runs/ActiveColumns/index.js | 4 +-- .../views/Runs/ActiveColumnsLogs/index.js | 2 +- lib/public/views/Tags/ActiveColumns/index.js | 2 +- 14 files changed, 61 insertions(+), 16 deletions(-) rename lib/public/utilities/{ => formatting}/formatBoolean.js (100%) create mode 100644 lib/public/utilities/formatting/formatDuration.js rename lib/public/utilities/{ => formatting}/formatTimestamp.js (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9308f7bb0c..8eb28bf08f 100644 --- 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 index ffc2109c93..adfcf55ece 100644 --- 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 index 786c10678c..bdfa63cfd1 100644 --- 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 index 5b25611cbc..52f2e7caaf 100644 --- 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 index bd0e6c7e57..bc14a6deaa 100644 --- 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 b/lib/public/utilities/formatting/formatBoolean.js similarity index 100% rename from lib/public/utilities/formatBoolean.js rename to lib/public/utilities/formatting/formatBoolean.js diff --git a/lib/public/utilities/formatting/formatDuration.js b/lib/public/utilities/formatting/formatDuration.js new file mode 100644 index 0000000000..8b7c77410a --- /dev/null +++ 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 b/lib/public/utilities/formatting/formatTimestamp.js similarity index 100% rename from lib/public/utilities/formatTimestamp.js rename to lib/public/utilities/formatting/formatTimestamp.js diff --git a/lib/public/views/Envs/ActiveColumns/index.js b/lib/public/views/Envs/ActiveColumns/index.js index b21b0cc7ff..1d2467227d 100644 --- 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 index bdba3c1494..4a884fed7a 100644 --- 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 index 9038d9d378..3995aeaa03 100644 --- 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 index 5333617500..7afa8b0aab 100644 --- 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 index 3ff182677b..79582dc629 100644 --- 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 index 305d29ab6b..ba644e59f8 100644 --- 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