[O2B-536] Improve runs overview duration filter (#1856)

Author: martinboulais

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

@@ -23,7 +23,6 @@ import dcsFilter from '../../../components/Filters/RunsFilter/dcs.js';
 import epnFilter from '../../../components/Filters/RunsFilter/epn.js';
 import runQualityFilter from '../../../components/Filters/RunsFilter/runQuality.js';
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
-import { durationFilter } from '../../../components/Filters/RunsFilter/durationFilter.js';
 import { displayRunDuration } from '../format/displayRunDuration.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
 import nEpnsFilter from '../../../components/Filters/RunsFilter/nEpns.js';
@@ -54,6 +53,7 @@ import { aliEcsEnvironmentLinkComponent } from '../../../components/common/exter
 import { detectorsFilterComponent } from '../../../components/Filters/RunsFilter/detectorsFilterComponent.js';
 import { timeRangeFilter } from '../../../components/Filters/common/filters/timeRangeFilter.js';
 import { rawTextFilter } from '../../../components/Filters/common/filters/rawTextFilter.js';
+import { numericalComparisonFilter } from '../../../components/Filters/common/filters/numericalComparisonFilter.js';
 
 /**
  * List of active columns for a generic runs table
@@ -368,7 +368,17 @@ export const runsActiveColumns = {
         noEllipsis: true,
         format: (_duration, run) => displayRunDuration(run),
         exportFormat: (_duration, run) => formatRunDuration(run),
-        filter: durationFilter,
+
+        /**
+         * Run duration filter component
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the duration filter component
+         */
+        filter: (runsOverviewModel) => numericalComparisonFilter(
+            runsOverviewModel.filteringModel.get('runDuration'),
+            { selectorPrefix: 'duration' },
+        ),
         filterTooltip: 'Run duration (in minutes)',
     },
     environmentId: {

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

@@ -64,6 +64,7 @@ export class RunsOverviewModel extends OverviewPageModel {
             o2start: new TimeRangeFilterModel(),
             o2end: new TimeRangeFilterModel(),
             definitions: new RunDefinitionFilterModel(),
+            runDuration: new NumericalComparisonFilterModel({ scale: 60 * 1000 }),
             runTypes: new RunTypesFilterModel(runTypesProvider.items$),
             eorReason: new EorReasonFilterModel(eorReasonTypeProvider.items$),
             magnets: new MagnetsFilteringModel(magnetsCurrentLevelsProvider.items$),
@@ -171,8 +172,6 @@ export class RunsOverviewModel extends OverviewPageModel {
     resetFiltering(fetch = true) {
         this._filteringModel.reset();
 
-        this._runDurationFilter = null;
-
         this.environmentIdsFilter = '';
 
         this.runQualitiesFilters = [];
@@ -204,7 +203,6 @@ export class RunsOverviewModel extends OverviewPageModel {
      */
     isAnyFilterActive() {
         return this._filteringModel.isAnyFilterActive()
-               || this._runDurationFilter !== null
                || this.environmentIdsFilter !== ''
                || this.runQualitiesFilters.length !== 0
                || this._triggerValuesFilters.size !== 0
@@ -249,26 +247,6 @@ export class RunsOverviewModel extends OverviewPageModel {
         this.notify();
     }
 
-    /**
-     * Returns the run duration filter (filter is defined in minutes)
-     * @return {{operator: string, limit: (number|null)}|null} The current run duration filter
-     */
-    get runDurationFilter() {
-        return this._runDurationFilter;
-    }
-
-    /**
-     * 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}
-     */
-    set runDurationFilter(newRunDurationFilter) {
-        this._runDurationFilter = newRunDurationFilter;
-        this._applyFilters();
-    }
-
     /**
      * Returns the current environment id(s) filter
      * @return {String} The current environment id(s) filter
@@ -536,11 +514,6 @@ export class RunsOverviewModel extends OverviewPageModel {
      */
     _getFilterQueryParams() {
         return {
-            ...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.environmentIdsFilter && {
                 'filter[environmentIds]': this.environmentIdsFilter,
             },

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

@@ -175,7 +175,7 @@ export const RunsPerDataPassOverviewPage = ({
                     },
                     filter: ({ gaqNotBadFractionFilterModel }) => numericalComparisonFilter(
                         gaqNotBadFractionFilterModel,
-                        { selectorPrefix: 'gaqNotBadFraction' },
+                        { step: 0.0001, selectorPrefix: 'gaqNotBadFraction' },
                     ),
                     profiles: ['runsPerDataPass'],
                 },

lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js

@@ -469,8 +469,8 @@ module.exports = () => {
         expect(runDurationOperator).to.not.be.null;
         expect(await runDurationOperator.evaluate((element) => element.value)).to.equal('=');
 
-        const runDurationLimitSelector = '#duration-limit';
-        await fillInput(page, runDurationLimitSelector, '1500');
+        const runDurationLimitSelector = '#duration-operand';
+        await fillInput(page, runDurationLimitSelector, '1500', ['change']);
         await waitForTableLength(page, 3);
 
         await page.select(runDurationOperatorSelector, '=');
@@ -483,11 +483,7 @@ module.exports = () => {
             return time === '25:00:00';
         })).to.be.true;
 
-        await page.$eval(runDurationLimitSelector, (input) => {
-            input.value = '';
-        });
-        await page.focus(runDurationLimitSelector);
-        await page.keyboard.type('3000');
+        await fillInput(page, runDurationLimitSelector, '3000', ['change']);
         await waitForTableLength(page, 0);
 
         await page.select(runDurationOperatorSelector, '>=');

test/public/runs/overview.test.js

@@ -361,9 +361,7 @@ module.exports = () => {
          * Therefore additional action is invoked in between
          */
         await page.select('.runDuration-filter select', '>=');
-        await pressElement(page, '#openFilterToggle');
-        await pressElement(page, '#openFilterToggle');
-        await fillInput(page, '.runDuration-filter input[type=number]', '10');
+        await fillInput(page, '#duration-operand', '10', ['change']);
 
         await expectColumnValues(page, 'runNumber', ['55', '1']);