[O2B-643] Run duration accept format HH:MM:SS

lib/public/components/Filters/RunsFilter/durationFilter.js

@@ -11,26 +11,68 @@
  * or submit itself to any jurisdiction.
  */
 
-import { amountFilter } from '../common/filters/amountFilter.js';
+import { h } from '/js/src/index.js';
+import { comparisonOperatorFilter } from '../common/filters/comparisonOperatorFilter.js';
 
 /**
  * Returns the run duration filter component
  *
- * @param {RunsOverviewModel} runModel the runs model object
- *
- * @return {vnode} the duration filter
+ * @param {DurationInputModel} durationFilterModel the duration input model
+ * @param {ComparisonOperatorSelectionModel} operatorSelectionModel the comparison operator selection model
+ * @return {Component} the duration filter
  */
-export const durationFilter = (runModel) => amountFilter(
-    runModel.runDurationFilter,
-    (filter) => {
-        runModel.runDurationFilter = filter;
-    },
-    {
-        operatorAttributes: {
-            id: 'duration-operator',
+export const durationFilter = (durationFilterModel, operatorSelectionModel) => {
+    const { hours, minutes, seconds } = durationFilterModel.raw;
+
+    const hoursInput = h('input.flex-grow', {
+        id: 'hours-input',
+        type: 'number',
+        min: 0,
+        value: hours,
+        oninput: (e) => {
+            const { value } = e.target;
+            durationFilterModel.update({ hours: value.length === 0 ? null : Number(value) });
+        },
+    });
+    const minutesInput = h('input.flex-grow', {
+        id: 'minutes-input',
+        type: 'number',
+        min: 0,
+        max: 59,
+        value: minutes,
+        oninput: (e) => {
+            const { value } = e.target;
+            durationFilterModel.update({ minutes: value.length === 0 ? null : Number(value) });
         },
-        limitAttributes: {
-            id: 'duration-limit',
+    }, 'm');
+    const secondsInput = h('input.flex-grow', {
+        id: 'seconds-input',
+        type: 'number',
+        min: 0,
+        max: 59,
+        value: seconds,
+        oninput: (e) => {
+            const { value } = e.target;
+            durationFilterModel.update({ seconds: value.length === 0 ? null : Number(value) });
         },
-    },
-);
+    }, 's');
+
+    const inputs = h('.flex-row.w-40', [
+        hoursInput,
+        minutesInput,
+        secondsInput,
+        h('.flex-row.items-center.p2', [
+            h('label', { for: 'hours-input' }, 'h'),
+            ':',
+            h('label', { for: 'minutes-input' }, 'm'),
+            ':',
+            h('label', { for: 'seconds-input' }, 's'),
+        ]),
+    ]);
+
+    return comparisonOperatorFilter(
+        inputs,
+        operatorSelectionModel.selected[0],
+        (operator) => operatorSelectionModel.select(operator),
+    );
+};

lib/public/components/Filters/common/filters/ComparisonOperatorSelectionModel.js

@@ -0,0 +1,32 @@
+/**
+ * @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 { SelectionModel } from '../../../common/selection/SelectionModel.js';
+
+/**
+ * Model storing state of a selection of predefined comparison operators
+ */
+export class ComparisonOperatorSelectionModel extends SelectionModel {
+    /**
+     * Constructor
+     * @param {string} [defaultOperator = '='] one of ['<', '<=', '=', '>=', '>'] operators
+     */
+    constructor(defaultOperator = '=') {
+        super({
+            availableOptions: ['<', '<=', '=', '>=', '>'].map((operator) => ({ value: operator })),
+            multiple: false,
+            allowEmpty: false,
+            defaultSelection: [{ value: defaultOperator }],
+        });
+    }
+}

lib/public/components/common/form/inputs/DurationInputModel.js

@@ -0,0 +1,98 @@
+/**
+ *  @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 { Observable } from '/js/src/index.js';
+
+/**
+ * @typedef DurationInputRawData
+ * @property {number} hours the number of hours
+ * @property {number} minutes the number of minutes
+ * @property {number} seconds the number of seconds
+ */
+
+/**
+ * Store the duration input
+ */
+export class DurationInputModel extends Observable {
+    /**
+     * Constructor
+     */
+    constructor() {
+        super();
+
+        this._raw = {
+            hours: null,
+            minutes: null,
+            seconds: null,
+        };
+
+        /**
+         * Timestamp (ms)
+         * @type {number|null}
+         * @private
+         */
+        this._value = null;
+    }
+
+    /**
+     * Update the inputs raw values
+     * @param {DurationInputRawData} raw the input raw values
+     * @return {void}
+     */
+    update(raw) {
+        try {
+            this._raw = { ...this._raw, ...raw };
+            this._value =
+                (this._raw.hours || 0) * 60 * 60 * 1000 +
+                (this._raw.minutes || 0) * 60 * 1000 +
+                (this._raw.seconds || 0) * 1000;
+
+            if (this._value === 0) {
+                this.reset();
+            }
+        } catch (_) {
+            this._value = null;
+        }
+
+        this.notify();
+    }
+
+    /**
+     * Reset the inputs to its initial state
+     * @return {void}
+     */
+    reset() {
+        this._raw = {
+            hours: null,
+            minutes: null,
+            seconds: null,
+        };
+        this._value = null;
+    }
+
+    /**
+     * Returns the raw input values
+     * @return {DurationInputRawData} the raw values
+     */
+    get raw() {
+        return this._raw;
+    }
+
+    /**
+     * Returns the current date represented by the inputs (null if no valid value is represented)
+     * @return {number|null} the current value
+     */
+    get value() {
+        return this._value;
+    }
+}

lib/public/views/Runs/ActiveColumns/runsActiveColumns.js

@@ -262,7 +262,8 @@ export const runsActiveColumns = {
         noEllipsis: true,
         format: (_duration, run) => displayRunDuration(run),
         exportFormat: (_duration, run) => formatRunDuration(run),
-        filter: durationFilter,
+        filter: ({ runDurationFilterModel, runDurationOperatorSelectionModel }) =>
+            durationFilter(runDurationFilterModel, runDurationOperatorSelectionModel),
     },
     environmentId: {
         name: 'Environment ID',

lib/public/views/Runs/Overview/RunsOverviewModel.js

@@ -21,6 +21,9 @@ import { EorReasonFilterModel } from '../../../components/Filters/RunsFilter/Eor
 import pick from '../../../utilities/pick.js';
 import { OverviewPageModel } from '../../../models/OverviewModel.js';
 import { getRemoteDataSlice } from '../../../utilities/fetch/getRemoteDataSlice.js';
+import { DurationInputModel } from '../../../components/common/form/inputs/DurationInputModel.js';
+import { ComparisonOperatorSelectionModel }
+    from '../../../components/Filters/common/filters/ComparisonOperatorSelectionModel.js';
 
 /**
  * Model representing handlers for runs page
@@ -51,6 +54,15 @@ export class RunsOverviewModel extends OverviewPageModel {
         this._eorReasonsFilterModel.observe(() => this._applyFilters());
         this._eorReasonsFilterModel.visualChange$.observe(() => this.notify());
 
+        this._runDurationFilterModel = new DurationInputModel();
+        this._runDurationFilterModel.observe(() => this._applyFilters());
+        this._runDurationOperatorSelectionModel = new ComparisonOperatorSelectionModel();
+        this._runDurationOperatorSelectionModel.observe(() => {
+            if (this._runDurationFilterModel.value !== null) {
+                this._applyFilters();
+            }
+        });
+
         // Export items
         this._allRuns = RemoteData.NotAsked();
 
@@ -157,8 +169,6 @@ export class RunsOverviewModel extends OverviewPageModel {
         this.o2endFilterFromTime = '00:00';
         this.o2endFilterToTime = '23:59';
 
-        this._runDurationFilter = null;
-
         this._lhcPeriodsFilter = null;
 
         this.environmentIdsFilter = '';
@@ -173,6 +183,9 @@ export class RunsOverviewModel extends OverviewPageModel {
 
         this.nFlpsFilter = null;
 
+        this._runDurationFilterModel.reset();
+        this._runDurationOperatorSelectionModel.reset();
+
         this.ddflpFilter = '';
 
         this.dcsFilter = '';
@@ -207,7 +220,7 @@ export class RunsOverviewModel extends OverviewPageModel {
             || this.o2endFilterTo !== ''
             || this.o2endFilterToTime !== '23:59'
             || this.o2endFilterFromTime !== '00:00'
-            || this._runDurationFilter !== null
+            || this._runDurationFilterModel.value !== null
             || this._lhcPeriodsFilter !== null
             || this.environmentIdsFilter !== ''
             || this.runQualitiesFilters.length !== 0
@@ -262,7 +275,7 @@ export class RunsOverviewModel extends OverviewPageModel {
         if (this.o2endFilterTo !== '') {
             this.activeFilters.push('O2 End to');
         }
-        if (this._runDurationFilter !== null) {
+        if (this._runDurationFilterModel.value !== null) {
             this.activeFilters.push('Run duration');
         }
         if (this._lhcPeriodsFilter !== null) {
@@ -512,23 +525,19 @@ export class RunsOverviewModel extends OverviewPageModel {
     }
 
     /**
-     * Returns the run duration filter (filter is defined in minutes)
-     * @return {{operator: string, limit: (number|null)}|null} The current run duration filter
+     * Returns the run duration filter model
+     * @return {DurationInputModel} The current run duration filter model
      */
-    get runDurationFilter() {
-        return this._runDurationFilter;
+    get runDurationFilterModel() {
+        return this._runDurationFilterModel;
     }
 
     /**
-     * Sets the limit of duration (in minutes) and the comparison operator to filter
-     *
-     * @param {{operator: string, limit: (number|null)}|null} newRunDurationFilter The new filter value
-     *
-     * @return {void}
+     * Returns the run duration filter operator selection model
+     * @return {ComparisonOperatorSelectionModel} selection model
      */
-    set runDurationFilter(newRunDurationFilter) {
-        this._runDurationFilter = newRunDurationFilter;
-        this._applyFilters();
+    get runDurationOperatorSelectionModel() {
+        return this._runDurationOperatorSelectionModel;
     }
 
     /**
@@ -895,10 +904,9 @@ export class RunsOverviewModel extends OverviewPageModel {
                 'filter[o2end][to]':
                     new Date(`${this.o2endFilterTo.replace(/\//g, '-')}T${this.o2endFilterToTime}:59.999`).getTime(),
             },
-            ...this._runDurationFilter && this._runDurationFilter.limit !== null && {
-                'filter[runDuration][operator]': this._runDurationFilter.operator,
-                // Convert filter to milliseconds
-                'filter[runDuration][limit]': this._runDurationFilter.limit * 60 * 1000,
+            ...this._runDurationFilterModel.value && {
+                'filter[runDuration][operator]': this._runDurationOperatorSelectionModel.selected,
+                'filter[runDuration][limit]': this._runDurationFilterModel.value,
             },
             ...this._lhcPeriodsFilter && {
                 'filter[lhcPeriods]': this._lhcPeriodsFilter,

test/public/defaults.js

@@ -308,6 +308,11 @@ module.exports.expectInnerTextTo = async (page, selector, validator) => {
     expect(validator(actualInnerText), `"${actualInnerText}" is invalid with respect of given validator`).to.be.true;
 };
 
+module.exports.expectSelectToBe = async (page, selector, selectedOption) => {
+    await page.waitForSelector(selector);
+    expect(await (await page.$(selector)).evaluate(({ value }) => value)).to.be.equal(selectedOption);
+};
+
 /**
  * Evaluate and return the html content of a given element handler
  * @param {{evaluate}} elementHandler the puppeteer handler of the element to inspect