[O2B-536] Improve runs overview environment ID filter

Author: martinboulais

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

@@ -13,7 +13,6 @@
 
 import { h } from '/js/src/index.js';
 import { runNumbersFilter } from '../../../components/Filters/RunsFilter/runNumbersFilter.js';
-import environmentIdFilter from '../../../components/Filters/RunsFilter/environmentId.js';
 import nDetectorsFilter from '../../../components/Filters/RunsFilter/nDetectors.js';
 import nFlpsFilter from '../../../components/Filters/RunsFilter/nFlps.js';
 import odcTopologyFullName from '../../../components/Filters/RunsFilter/odcTopologyFullName.js';
@@ -386,7 +385,17 @@ export const runsActiveColumns = {
         visible: true,
         profiles: [profiles.none, 'lhcFill', 'environment', 'home'],
         classes: 'w-10 f6 w-wrapped',
-        filter: environmentIdFilter,
+
+        /**
+         * Environment ids filter component
+         *
+         * @param {RunsOverviewModel} runsOverviewModel the runs overview model
+         * @return {Component} the environment ids filter component
+         */
+        filter: (runsOverviewModel) => rawTextFilter(
+            runsOverviewModel.filteringModel.get('environmentIds'),
+            { classes: ['environment-ids-filter', 'w-100'], placeholder: 'e.g. Dxi029djX, TDI59So3d...' },
+        ),
         format: (id) => id ? frontLink(id, 'env-details', { environmentId: id }) : '-',
     },
     runType: {

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

@@ -65,6 +65,7 @@ export class RunsOverviewModel extends OverviewPageModel {
             o2end: new TimeRangeFilterModel(),
             definitions: new RunDefinitionFilterModel(),
             runDuration: new NumericalComparisonFilterModel({ scale: 60 * 1000 }),
+            environmentIds: new RawTextFilterModel(),
             runTypes: new RunTypesFilterModel(runTypesProvider.items$),
             eorReason: new EorReasonFilterModel(eorReasonTypeProvider.items$),
             magnets: new MagnetsFilteringModel(magnetsCurrentLevelsProvider.items$),
@@ -172,8 +173,6 @@ export class RunsOverviewModel extends OverviewPageModel {
     resetFiltering(fetch = true) {
         this._filteringModel.reset();
 
-        this.environmentIdsFilter = '';
-
         this.runQualitiesFilters = [];
 
         this._triggerValuesFilters = new Set();
@@ -203,7 +202,6 @@ export class RunsOverviewModel extends OverviewPageModel {
      */
     isAnyFilterActive() {
         return this._filteringModel.isAnyFilterActive()
-               || this.environmentIdsFilter !== ''
                || this.runQualitiesFilters.length !== 0
                || this._triggerValuesFilters.size !== 0
                || this.nDetectorsFilter !== null
@@ -247,24 +245,6 @@ export class RunsOverviewModel extends OverviewPageModel {
         this.notify();
     }
 
-    /**
-     * Returns the current environment id(s) filter
-     * @return {String} The current environment id(s) filter
-     */
-    getEnvFilter() {
-        return this.environmentIdsFilter;
-    }
-
-    /**
-     * Sets the environment id(s) filter if no new inputs were detected for 200 milliseconds
-     * @param {string} newEnvironment The environment id(s) to apply to the filter
-     * @return {undefined}
-     */
-    setEnvironmentIdsFilter(newEnvironment) {
-        this.environmentIdsFilter = newEnvironment.trim();
-        this._applyFilters();
-    }
-
     /**
      * States if the given run quality is currently in the run quality filter
      *
@@ -514,9 +494,6 @@ export class RunsOverviewModel extends OverviewPageModel {
      */
     _getFilterQueryParams() {
         return {
-            ...this.environmentIdsFilter && {
-                'filter[environmentIds]': this.environmentIdsFilter,
-            },
             ...this.runQualitiesFilters.length !== 0 && {
                 'filter[runQualities]': this.runQualitiesFilters.join(),
             },

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

@@ -25,7 +25,6 @@ const {
     waitForNavigation,
     expectLink,
     waitForTableLength,
-    getTableContent,
     getPopoverSelector,
     expectRowValues,
 } = require('../defaults.js');
@@ -272,8 +271,12 @@ module.exports = () => {
         await expectInnerText(page, '#mu-inelastic-interaction-rate', '0.009');
     });
 
-    it('can navigate to the flp panel', async () => {
+    it('should show lhc data in normal mode', async () => {
         await goToRunDetails(page, 1);
+        await expectInnerText(page, '#fill-number', 'Fill 5');
+    });
+
+    it('can navigate to the flp panel', async () => {
         await waitForNavigation(page, () => pressElement(page, '#flps-tab'));
         await expectUrlParams(page, {
             page: 'run-detail',
@@ -298,6 +301,31 @@ module.exports = () => {
         );
     });
 
+    it('should successfully navigate to the trigger counters panel', async () => {
+        await waitForNavigation(page, () => pressElement(page, '#ctp-trigger-counters-tab'));
+        expectUrlParams(page, { page: 'run-detail', runNumber: 1, panel: 'ctp-trigger-counters' });
+
+        await waitForTableLength(page, 2);
+        await expectRowValues(
+            page,
+            1,
+            {
+                className: 'FIRST-CLASS-NAME',
+                lmb: '101',
+                lma: '102',
+                l0b: '103',
+                l0a: '104',
+                l1b: '105',
+                l1a: '106',
+            },
+        );
+    });
+
+    it('should successfully navigate to the trigger configuration panel', async () => {
+        await waitForNavigation(page, () => pressElement(page, '#trigger-configuration-tab'));
+        await expectInnerText(page, '#trigger-configuration-pane .panel', 'Raw\nTrigger\nConfiguration');
+    });
+
     it('can navigate to the logs panel', async () => {
         await pressElement(page, '#logs-tab');
         await page.waitForSelector('#logs-tab.active');
@@ -315,27 +343,6 @@ module.exports = () => {
         expectUrlParams(page, { page: 'log-detail', id: 1 });
     });
 
-    it('should successfully navigate to the trigger counters panel', async () => {
-        await goToRunDetails(page, 1);
-
-        await pressElement(page, '#ctp-trigger-counters-tab');
-        await waitForTableLength(page, 2);
-        expectUrlParams(page, { page: 'run-detail', runNumber: 1, panel: 'ctp-trigger-counters' });
-        expect(await getTableContent(page)).to.deep.eql([
-            ['FIRST-CLASS-NAME', '101', '102', '103', '104', '105', '106'],
-            ['SECOND-CLASS-NAME', '2,001', '2,002', '2,003', '2,004', '2,005', '2,006'],
-        ]);
-    });
-
-    it('should successfully navigate to the trigger configuration panel', async () => {
-        await pressElement(page, '#trigger-configuration-tab');
-        await expectInnerText(page, '#trigger-configuration-pane .panel', 'Raw\nTrigger\nConfiguration');
-    });
-
-    it('should show lhc data in normal mode', async () => {
-        await expectInnerText(page, '#fill-number', 'Fill 5');
-    });
-
     it('successfully prevent from editing run quality of not ended runs', async () => {
         await goToRunDetails(page, 105);
 

test/public/runs/detail.test.js

@@ -698,10 +698,10 @@ module.exports = () => {
     it('should successfully filter on a list of environment ids and inform the user about it', async () => {
         await waitForTableLength(page, 8);
 
-        const filterInputSelector = '#environmentIds';
+        const filterInputSelector = '.environment-ids-filter';
         expect(await page.$eval(filterInputSelector, (input) => input.placeholder)).to.equal('e.g. Dxi029djX, TDI59So3d...');
 
-        await fillInput(page, filterInputSelector, 'Dxi029djX, TDI59So3d');
+        await fillInput(page, filterInputSelector, 'Dxi029djX, TDI59So3d', ['change']);
         await waitForTableLength(page, 6);
 
         await pressElement(page, '#reset-filters');