diff --git a/lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js b/lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js index c570931869..716bdd0e1d 100644 --- a/lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js +++ b/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', diff --git a/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js b/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js index 1d701b4a27..b071801a26 100644 --- a/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js +++ b/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)); diff --git a/test/public/envs/overview.test.js b/test/public/envs/overview.test.js index ae673ef4e0..cddf1396cd 100644 --- a/test/public/envs/overview.test.js +++ b/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); + }); };