[O2B-1505] Processed feedback, timeValidator JOI updated, debounce removed, SBDuration filter frontend fixed

Author: Houwie7000

lib/domain/dtos/filters/LhcFillsFilterDto.js

@@ -12,17 +12,12 @@
  */
 const Joi = require('joi');
 const { validateRange } = require('../../../utilities/rangeUtils');
-const { validateTime } = require('../../../utilities/validateTime');
+const { validateTimeDuration } = require('../../../utilities/validateTime');
 
 exports.LhcFillsFilterDto = Joi.object({
     hasStableBeams: Joi.boolean(),
     fillNumbers: Joi.string().trim().custom(validateRange).messages({
         'any.invalid': '{{#message}}',
     }),
-    beamDuration: {
-        limit: Joi.string().trim().min(8).max(8).custom(validateTime).messages({
-            'any.invalid': '{{#message}}',
-        }),
-        operator: Joi.string().trim().min(1).max(2),
-    },
+    beamDuration: validateTimeDuration,
 });

lib/public/components/Filters/LhcFillsFilter/beamDurationFilter.js

@@ -23,9 +23,9 @@ import { rawTextFilter } from '../common/filters/rawTextFilter.js';
 export const beamDurationFilter = (beamDurationFilterModel) => {
     const amountFilter = rawTextFilter(
         beamDurationFilterModel.operandInputModel,
-        { classes: ['w-100', 'beam-duration-filter'], placeholder: 'e.g 16:14:15 (HH:MM:SS)' },
+        { id: 'beam-duration-filter-operand', classes: ['w-100', 'beam-duration-filter'], placeholder: 'e.g 16:14:15 (HH:MM:SS)' },
     );
 
-    return comparisonOperatorFilter(amountFilter, beamDurationFilterModel.operatorSelectionModel.value, (value) =>
-        beamDurationFilterModel.operatorSelectionModel.select(value));
+    return comparisonOperatorFilter(amountFilter, beamDurationFilterModel.operatorSelectionModel.current, (value) =>
+        beamDurationFilterModel.operatorSelectionModel.select(value), { id: 'beam-duration-filter-operator' });
 };

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

@@ -26,12 +26,12 @@ export class TextComparisonFilterModel extends FilterModel {
 
         this._operatorSelectionModel = new ComparisonSelectionModel();
         this._operatorSelectionModel.visualChange$.bubbleTo(this._visualChange$);
+        // Unless the filter contains a value don't apply the filters.
+        this._operatorSelectionModel.observe(() => this._operandInputModel.value ? this.notify() : this._visualChange$.notify());
 
         this._operandInputModel = new RawTextFilterModel();
         this._operandInputModel.visualChange$.bubbleTo(this._visualChange$);
         this._operandInputModel.bubbleTo(this);
-
-        this._operatorSelectionModel.observe(() => this._operandInputModel.value ? this.notify() : this._visualChange$.notify());
     }
 
     /**

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

@@ -23,11 +23,12 @@ import { h } from '/js/src/index.js';
  * @return {Component} the filter
  */
 export const rawTextFilter = (filterModel, configuration) => {
-    const { classes = [], placeholder = '' } = configuration || {};
+    const { classes = [], placeholder = '', id = '' } = configuration || {};
     return h(
         'input',
         {
             type: 'text',
+            id: id,
             class: classes.join(' '),
             value: filterModel.value,
             placeholder: placeholder,

lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js

@@ -17,7 +17,6 @@ import { StableBeamFilterModel } from '../../../components/Filters/LhcFillsFilte
 import { RawTextFilterModel } from '../../../components/Filters/common/filters/RawTextFilterModel.js';
 import { OverviewPageModel } from '../../../models/OverviewModel.js';
 import { addStatisticsToLhcFill } from '../../../services/lhcFill/addStatisticsToLhcFill.js';
-import { debounce } from '../../../utilities/debounce.js';
 import { TextComparisonFilterModel } from '../../../components/Filters/common/filters/TextComparisonFilterModel.js';
 
 /**
@@ -41,20 +40,14 @@ export class LhcFillsOverviewModel extends OverviewPageModel {
             hasStableBeams: new StableBeamFilterModel(),
         });
 
-        this._filteringModel.observe(() => this._applyFilters(true));
+        this._filteringModel.observe(() => this._applyFilters());
         this._filteringModel.visualChange$.bubbleTo(this);
 
         this.reset(false);
 
         if (stableBeamsOnly) {
             this._filteringModel.get('hasStableBeams').setStableBeamsOnly(true);
         }
-
-        const updateDebounceTime = () => {
-            this._debouncedLoad = debounce(this.load.bind(this), model.inputDebounceTime);
-        };
-        model.appConfiguration$.observe(() => updateDebounceTime());
-        updateDebounceTime();
     }
 
     /**
@@ -96,7 +89,7 @@ export class LhcFillsOverviewModel extends OverviewPageModel {
         this._filteringModel.reset();
 
         if (fetch) {
-            this._applyFilters(true);
+            this._applyFilters();
         }
     }
 
@@ -123,8 +116,8 @@ export class LhcFillsOverviewModel extends OverviewPageModel {
      *
      * @return {void}
      */
-    _applyFilters(now = false) {
+    _applyFilters() {
         this._pagination.currentPage = 1;
-        now ? this.load() : this._debouncedLoad(true);
+        this.load();
     }
 }

lib/utilities/validateTime.js

@@ -1,26 +1,42 @@
-import Joi from 'joi';
-
 /**
- * Validates digital time in string format
+ * @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.
  *
- * @param {*} incomingValue  The time to validate
- * @param {*} helpers The helpers object
- * @returns {number|import("joi").ValidationError} The value if validation passes, as seconds (Number)
+ * 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.
  */
-export const validateTime = (incomingValue, helpers) => {
-    // Checks for valid time format.
-    const { error, value } = Joi.string().pattern(/^\d{2}:[0-5]\d:[0-5]\d$/).validate(incomingValue);
+import Joi from 'joi';
 
-    if (error !== undefined) {
-        return helpers.error('any.invalid', { message: `Validation error: ${error?.message ?? 'failed to validate time'}` });
-    }
+const joiTimeDurationErrorText = 'Invalid duration value';
 
+/**
+ * Transform digital time in string format
+ *
+ * @param {*} incomingValue  The time to transform
+ * @returns {number} The value as seconds (Number)
+ */
+export const transformTime = (incomingValue) => {
     // Extract time to seconds...
-    const [hoursStr, minutesStr, secondsStr] = value.split(':');
-
-    const hours = Number(hoursStr);
-    const minutes = Number(minutesStr);
-    const seconds = Number(secondsStr);
+    const [hoursStr, minutesStr, secondsStr] = incomingValue.split(':');
 
-    return hours * 3600 + minutes * 60 + seconds;
+    return Number(hoursStr) * 3600 + Number(minutesStr) * 60 + Number(secondsStr);
 };
+
+/**
+ * Joi object that validates time duration filters.
+ * This is for duration, not a point in time. 10000:59:59 is valid.
+ * The operator is also validated.
+ */
+export const validateTimeDuration = Joi.object({
+    limit: Joi.string().trim().pattern(/^\d+:[0-5]?\d:[0-5]?\d$/).custom(transformTime).messages({
+        'string.pattern.base': joiTimeDurationErrorText,
+        'string.base': joiTimeDurationErrorText,
+        'any.invalid': joiTimeDurationErrorText,
+    }),
+    operator: Joi.string().trim().min(1).max(2),
+});

test/public/lhcFills/overview.test.js

@@ -268,14 +268,17 @@ module.exports = () => {
 
     it('should successfully display filter elements', async () => {
         const filterSBExpect = { selector: '.stableBeams-filter .w-30', value: 'Stable Beams Only' };
-        const filterFillNRExpect = {selector: 'div.items-baseline:nth-child(1) > div:nth-child(1)', value: 'Fill #'}
-        const filterSBDurationExpect = {selector: 'div.items-baseline:nth-child(3) > div:nth-child(1)', value: 'SB Duration'}
-        const filterSBDurationPlaceholderExpect = {selector: 'input.w-100:nth-child(2)', value: 'e.g 16:14:15 (HH:MM:SS)'}
+        const filterFillNRExpect = {selector: 'div.items-baseline:nth-child(1) > div:nth-child(1)', value: 'Fill #'};
+        const filterSBDurationExpect = {selector: 'div.items-baseline:nth-child(3) > div:nth-child(1)', value: 'SB Duration'};
+        const filterSBDurationPlaceholderExpect = {selector: 'input.w-100:nth-child(2)', value: 'e.g 16:14:15 (HH:MM:SS)'};
+        const filterSBDurationOperatorExpect = { value: true };
 
 
         await goToPage(page, 'lhc-fill-overview');
         // Open the filtering panel
         await openFilteringPanel(page);
+        // Note: expectAttributeValue does not work here.
+        expect(await page.evaluate(() => document.querySelector('#beam-duration-filter-operator > option:nth-child(3)').selected)).to.equal(filterSBDurationOperatorExpect.value);
         await expectInnerText(page, filterSBExpect.selector, filterSBExpect.value);
         await expectInnerText(page, filterFillNRExpect.selector, filterFillNRExpect.value);
         await expectInnerText(page, filterSBDurationExpect.selector, filterSBDurationExpect.value);