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

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

@@ -11,26 +11,76 @@
  * 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
+ * Returns the duration filter component
  *
- * @param {RunsOverviewModel} runModel the runs model object
- *
- * @return {vnode} the duration filter
+ * @param {DurationFilterModel} durationFilterModel the duration filter model
+ * @return {Component} the duration filter
  */
-export const durationFilter = (runModel) => amountFilter(
-    runModel.runDurationFilter,
-    (filter) => {
-        runModel.runDurationFilter = filter;
-    },
-    {
-        operatorAttributes: {
-            id: 'duration-operator',
-        },
-        limitAttributes: {
-            id: 'duration-limit',
-        },
-    },
-);
+export const durationFilter = (durationFilterModel) => {
+    const { durationInputModel, operatorSelectionModel } = durationFilterModel;
+
+    const { hours, minutes, seconds } = durationInputModel.raw;
+
+    /**
+     * Return oninput handler for given time unit
+     *
+     * @param {'hours'|'minutes'|'seconds'} unitName time unit
+     * @return {function(InputEvent, void)} oninput handler for input for given time unit
+     */
+    const updateInputModelHandlerByTimeUnit = (unitName) => (e) => {
+        const { value } = e.target;
+        const parsedValue = Number(value);
+        if (value.length > 0 || 0 <= parsedValue && (unitName === 'hours' || parsedValue < 60)) {
+            durationInputModel.update({ [unitName]: value.length > 0 ? parsedValue : null });
+        } else {
+            durationFilterModel.visualChange$.notify();
+        }
+    };
+
+    const hoursInput = h('input.flex-grow', {
+        id: 'hours-input',
+        type: 'number',
+        min: 0,
+        value: hours,
+        oninput: updateInputModelHandlerByTimeUnit('hours'),
+    });
+    const minutesInput = h('input.flex-grow', {
+        id: 'minutes-input',
+        type: 'number',
+        min: 0,
+        max: 59,
+        value: minutes,
+        oninput: updateInputModelHandlerByTimeUnit('minutes'),
+    }, 'm');
+    const secondsInput = h('input.flex-grow', {
+        id: 'seconds-input',
+        type: 'number',
+        min: 0,
+        max: 59,
+        value: seconds,
+        oninput: updateInputModelHandlerByTimeUnit('seconds'),
+    }, 's');
+
+    const inputs = h('.flex-row.w-100', [
+        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/Filters/common/filters/DurationFilterModel.js

@@ -0,0 +1,87 @@
+/**
+ * @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';
+
+import { DurationInputModel } from '../../../common/form/inputs/DurationInputModel.js';
+import { ComparisonOperatorSelectionModel } from './ComparisonOperatorSelectionModel.js';
+
+/**
+ * Duration filter model which stores time value and selected operator
+ */
+export class DurationFilterModel extends Observable {
+    /**
+     * Constructor
+     */
+    constructor() {
+        super();
+        this._visualChange$ = new Observable();
+
+        this._durationInputModel = new DurationInputModel();
+        this._durationInputModel.bubbleTo(this);
+        this._operatorSelectionModel = new ComparisonOperatorSelectionModel();
+        this._operatorSelectionModel.observe(() => {
+            if (this._durationInputModel.value === null) {
+                this._visualChange$.notify();
+            } else {
+                this.notify();
+            }
+        });
+    }
+
+    /**
+     * Returns the observable notified any time there is a visual change which has no impact on the actual filter value
+     *
+     * @return {Observable} the observable
+     */
+    get visualChange$() {
+        return this._visualChange$;
+    }
+
+    /**
+     * Retrun duration input model
+     *
+     * @return {DurationInputModel} duration input model
+     */
+    get durationInputModel() {
+        return this._durationInputModel;
+    }
+
+    /**
+     * Return operator selection model
+     *
+     * @return {ComparisonOperatorSelectionModel} operator selection model
+     */
+    get operatorSelectionModel() {
+        return this._operatorSelectionModel;
+    }
+
+    /**
+     * States if the filter has been filled
+     *
+     * @return {boolean} true if the filter has been filled
+     */
+    isEmpty() {
+        return this._durationInputModel.value === null;
+    }
+
+    /**
+     * Reset the filter to its default value
+     *
+     * @return {void}
+     */
+    reset() {
+        this._durationInputModel.reset();
+        this._operatorSelectionModel.reset();
+    }
+}

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, from range [0, 59]
+ * @property {number} seconds the number of seconds, from range [0, 59]
+ */
+
+/**
+ * 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 };
+            const { hours, minutes, seconds } = this._raw;
+            if ((hours ?? minutes ?? seconds ?? null) === null) {
+                this._value = null;
+            } else {
+                this._value = (hours || 0) * 60 * 60 * 1000
+                    + (minutes || 0) * 60 * 1000
+                    + (seconds || 0) * 1000;
+            }
+        } 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

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