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

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

@@ -18,46 +18,46 @@
  * Returns the run duration filter component
  *
  * @param {DurationInputModel} durationFilterModel the duration input model
- * @param {NumericComparisonOperatorSelectionModel} operatorSelectionModel the comparison operator selection model
+ * @param {ComparisonOperatorSelectionModel} operatorSelectionModel the comparison operator selection model
  * @return {Component} the duration filter
  */
 export const durationFilter = (durationFilterModel, operatorSelectionModel) => {
-    const { hours, minutes, seconds, secondsMin, minutesMin } = durationFilterModel.raw;
+    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: minutesMin,
-        max: 60,
+        min: 0,
+        max: 59,
         value: minutes,
         oninput: (e) => {
             const { value } = e.target;
             durationFilterModel.update({ minutes: value.length === 0 ? null : Number(value) });
         },
     }, 'm');
     const secondsInput = h('input.flex-grow', {
         id: 'seconds-input',
         type: 'number',
-        min: secondsMin,
-        max: 60,
+        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,
@@ -70,5 +70,9 @@
         ]),
     ]);
 
-    return comparisonOperatorFilter(inputs, operatorSelectionModel);
+    return comparisonOperatorFilter(
+        inputs,
+        operatorSelectionModel.selected[0],
+        (operator) => operatorSelectionModel.select(operator),
+    );
 };

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

@@ -0,0 +1,30 @@
+/**
+ * @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 { amountFilter } from '../common/filters/amountFilter.js';
+
+/**
+ * Returns the author filter component
+ * @param {RunsOverviewModel} runModel the runs model object
+ * @return {vnode} A text box that lets the user look for logs with a specific author
+ */
+const nDetectorsFilter = (runModel) => amountFilter(runModel.getNDetectorsFilter(), (filter) => runModel.setNDetectorsFilter(filter), {
+    operatorAttributes: {
+        id: 'nDetectors-operator',
+    },
+    limitAttributes: {
+        id: 'nDetectors-limit',
+    },
+});
+
+export default nDetectorsFilter;

lib/public/components/Filters/RunsFilter/nEpns.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.
+ */
+
+import { amountFilter } from '../common/filters/amountFilter.js';
+
+/**
+ * Returns the nEpns filter component
+ * @param {RunsOverviewModel} runModel The runs model object
+ * @return {vnode} A text box and operator that lets the user look for logs with a specific number of EPNs
+ */
+const nEpnsFilter = (runModel) => amountFilter(
+    runModel.nEpnsFilter,
+    (filter) => {
+        runModel.nEpnsFilter = filter;
+    },
+    {
+        operatorAttributes: {
+            id: 'nEpns-operator',
+        },
+        limitAttributes: {
+            id: 'nEpns-limit',
+        },
+    },
+);
+
+export default nEpnsFilter;

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

@@ -0,0 +1,30 @@
+/**
+ * @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 { amountFilter } from '../common/filters/amountFilter.js';
+
+/**
+ * Returns the author filter component
+ * @param {RunsOverviewModel} runModel the run model object
+ * @return {vnode} A text box that lets the user look for logs with a specific author
+ */
+const nFlpsFilter = (runModel) => amountFilter(runModel.getNFlpsFilter(), (filter) => runModel.setNFlpsFilter(filter), {
+    operatorAttributes: {
+        id: 'nFlps-operator',
+    },
+    limitAttributes: {
+        id: 'nFlps-limit',
+    },
+});
+
+export default nFlpsFilter;

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

@@ -11,30 +11,22 @@
  * or submit itself to any jurisdiction.
  */
 
-import { SelectionDropdownModel } from '../../../common/selection/dropdown/SelectionDropdownModel.js';
+import { SelectionModel } from '../../../common/selection/SelectionModel.js';
 
 /**
- * Model storing state of a selection of predfined numerical comparison operators
+ * Model storing state of a selection of predefined comparison operators
  */
-export class NumericComparisonOperatorSelectionModel extends SelectionDropdownModel {
+export class ComparisonOperatorSelectionModel extends SelectionModel {
     /**
      * Constructor
      * @param {string} [defaultOperator = '='] one of ['<', '<=', '=', '>=', '>'] operators
      */
     constructor(defaultOperator = '=') {
         super({
-            availableOptions: ['<', '<=', '=', '>=', '>'].map((op) => ({ value: op })),
+            availableOptions: ['<', '<=', '=', '>=', '>'].map((operator) => ({ value: operator })),
             multiple: false,
             allowEmpty: false,
             defaultSelection: [{ value: defaultOperator }],
         });
     }
-
-    // eslint-disable-next-line valid-jsdoc
-    /**
-     * @inheritDoc
-     */
-    get selected() {
-        return super.selected[0];
-    }
 }

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

@@ -14,36 +14,60 @@
 import { comparisonOperatorFilter } from './comparisonOperatorFilter.js';
 import { h } from '/js/src/index.js';
 
+/**
+ * @callback filterChangeHandler
+ * @param {{operator: string, limit: (number|number)}|null} newFilter the new filter value
+ */
+
 /**
  * Returns a component which provide an amount filter, allowing to choose a limit and the comparison operator to apply
  *
- * @param {NumericFilterModel} numericFilterModel filter model
- * @param {{operatorAttributes: (object|undefined), operandAttributes: (object|undefined)}} options eventual options to configure the filter: use
- *     `operatorAttributes` to define the attributes of the operator selection component and `operandAttributes` to define the attributes of the
- *     operand input component
+ * @param {{operator: string, limit: (number|null)}|null} currentValue the operator to use to compare the limit to the actual
+ *     values
+ * @param {filterChangeHandler} onChange callback called any time the operator OR the limit changes
+ * @param {{operatorAttributes: (object|undefined), limitAttributes: (object|undefined)}} options eventual options to configure the filter: use
+ *     `operatorAttributes` to define the attributes of the operator selection component and `limitAttributes` to define the attributes of the
+ *     limit input component
  *
- * @return {Component} the filter component
+ * @return {vnode} the component
  */
-export const amountFilter = (numericFilterModel, options) => {
-    const { operatorSelectionModel } = numericFilterModel;
+export const amountFilter = (currentValue, onChange, options) => {
+    const { operator, limit } = currentValue || { operator: '=', limit: null };
+    const { operatorAttributes = {}, limitAttributes = {} } = options;
+
+    // eslint-disable-next-line require-jsdoc
+    const updateFilter = ({ newOperator, newLimit }) => {
+        onChange({
+            operator: newOperator || operator,
+            limit: newLimit !== undefined ? newLimit : limit,
+        });
+    };
 
     return comparisonOperatorFilter(
         h('input.flex-grow', {
             type: 'number',
-            min: numericFilterModel.minValue,
-            max: numericFilterModel.maxValue,
-            value: numericFilterModel.value,
+            min: 0,
+            value: limit,
             oninput: (e) => {
-                const { value } = e.target;
-                if (value === '') {
-                    numericFilterModel.value = null;
+                let newLimit;
+
+                if (e.target.value === '') {
+                    newLimit = null;
                 } else {
-                    numericFilterModel.value = Number(value);
+                    const value = parseInt(e.target.value, 10);
+                    if (!isNaN(value)) {
+                        newLimit = value;
+                    }
+                }
+
+                if (newLimit !== undefined && newLimit !== limit) {
+                    updateFilter({ newLimit });
                 }
             },
-            ...options.operandAttributes,
+            ...limitAttributes,
         }, ''),
-        operatorSelectionModel,
-        options.operatorAttributes,
+        operator,
+        (newOperator) => updateFilter({ newOperator }),
+        operatorAttributes,
     );
 };

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

@@ -13,22 +13,33 @@
 
 import { h } from '/js/src/index.js';
 
+/**
+ * Handle an operator change event
+ *
+ * @callback operatorChangeHandler
+ *
+ * @param {string} operator the new operator value
+ *
+ * @return {*}
+ */
+
 /**
  * Wrap a given input inside a comparison operator filter, prefixing the input by an operator selector
  *
- * @param {Compoenent} operandInput the input for the operand value (the one to wrap)
- * @param {NumericComparisonOperatorSelectionModel} operatorSelectionModel the operator selection model
+ * @param {*} limitInput the input for the limit value (the one to wrap)
+ * @param {*} currentLimit the current limit value
+ * @param {operatorChangeHandler} onOperatorChange callback called when the operator changes
  * @param {*} [operatorAttributes] the list of attributes to apply on the operator selector (note that value and
  *     onchange attribute are override)
  *
- * @return {ComponenT} the filter component
+ * @return {vnode} the filter component
  */
-export const comparisonOperatorFilter = (operandInput, operatorSelectionModel, operatorAttributes = {}) => h('.flex-row.g3', [
+export const comparisonOperatorFilter = (limitInput, currentLimit, onOperatorChange, operatorAttributes = {}) => h('.flex-row.g3', [
     h('', h('select.form-control', {
         ...operatorAttributes,
-        value: operatorSelectionModel.selected,
-        onchange: (e) => operatorSelectionModel.select(e.target.value),
-    }, operatorSelectionModel.options?.map(({ value }) => h('option', {
-        value,
-    }, value)))), operandInput,
+        value: currentLimit,
+        onchange: (e) => onOperatorChange(e.target.value),
+    }, ['<', '<=', '=', '>=', '>'].map((operator) => h('option', {
+        value: operator,
+    }, operator)))), limitInput,
 ]);