[O2B-1490] Add filtering by env ids to the environment filtering panel

lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js

@@ -24,6 +24,7 @@ import { environmentStatusHistoryLegendComponent } from '../../../components/env
 import { infoTooltip } from '../../../components/common/popover/infoTooltip.js';
 import { aliEcsEnvironmentLinkComponent } from '../../../components/common/externalLinks/aliEcsEnvironmentLinkComponent.js';
 import { StatusAcronym } from '../../../domain/enums/statusAcronym.mjs';
+import { rawTextFilter } from '../../../components/Filters/common/filters/rawTextFilter.js';
 
 /**
  * List of active columns for a generic Environments component
@@ -53,6 +54,17 @@ export const environmentsActiveColumns = {
             ],
             '125px',
         ),
+
+        /**
+         * Environment IDs filter component
+         *
+         * @param {EnvironmentOverviewModel} environmentOverviewModel the environment overview model
+         * @return {Component} the filter component
+         */
+        filter: (environmentOverviewModel) => rawTextFilter(
+            environmentOverviewModel.filteringModel.get('ids'),
+            { classes: ['w-100'], placeholder: 'e.g. CmCvjNbg, TDI59So3d...' },
+        ),
     },
     runs: {
         name: 'Runs',

lib/public/views/Environments/Overview/EnvironmentOverviewModel.js

@@ -14,6 +14,7 @@
 import { buildUrl } from '/js/src/index.js';
 import { FilteringModel } from '../../../components/Filters/common/FilteringModel.js';
 import { OverviewPageModel } from '../../../models/OverviewModel.js';
+import { RawTextFilterModel } from '../../../components/Filters/common/filters/RawTextFilterModel.js';
 import { debounce } from '../../../utilities/debounce.js';
 
 /**
@@ -28,6 +29,7 @@ export class EnvironmentOverviewModel extends OverviewPageModel {
         super();
 
         this._filteringModel = new FilteringModel({
+            ids: new RawTextFilterModel(),
         });
 
         this._filteringModel.observe(() => this._applyFilters(true));

test/public/envs/overview.test.js

@@ -26,6 +26,9 @@ const {
     getPopoverSelector,
     goToPage,
     openFilteringPanel,
+    fillInput,
+    expectAttributeValue,
+    resetFilters,
 } = require('../defaults.js');
 const dateAndTime = require('date-and-time');
 const { resetDatabaseContent } = require('../../utilities/resetDatabaseContent.js');
@@ -290,4 +293,31 @@ module.exports = () => {
         await openFilteringPanel(page);
         await page.waitForSelector(filterPanelSelector, { visible: true });
     });
+
+    it('should successfully filter environments by their IDs', async () => {
+        /**
+         * This is the sequence to test filtering the environments on IDs.
+         *
+         * @param {string} selector the filter input selector
+         * @param {string} inputValue the value to type in the filter input
+         * @param {string[]} expectedIds the list of expected environment IDs after filtering
+         * @return {void}
+         */
+        const filterOnID = async (selector, inputValue, expectedIds) => {
+            await fillInput(page, selector, inputValue, ['change']);
+            await waitForTableLength(page, expectedIds.length);
+            expect(await page.$$eval('tbody tr', (rows) => rows.map((row) => row.id))).to.eql(expectedIds.map(id => `row${id}`));
+        };
+
+        await expectAttributeValue(page, '.id-filter input', 'placeholder', 'e.g. CmCvjNbg, TDI59So3d...');
+
+        await filterOnID('.id-filter input', 'CmCvjNbg', ['CmCvjNbg']);
+        await resetFilters(page);
+
+        await filterOnID('.id-filter input', 'CmCvjNbg, TDI59So3d', ['CmCvjNbg', 'TDI59So3d']);
+        await resetFilters(page);
+
+        await filterOnID('.id-filter input', 'j', ['CmCvjNbg', 'GIDO1jdkD', '8E4aZTjY', 'Dxi029djX']);
+        await resetFilters(page);
+    });
 };