diff --git a/lib/domain/enums/StatusAcronyms.js b/lib/domain/enums/StatusAcronyms.js index f29ae1b56c..d70f7c8752 100644 --- a/lib/domain/enums/StatusAcronyms.js +++ b/lib/domain/enums/StatusAcronyms.js @@ -19,6 +19,7 @@ const statusAcronyms = Object.freeze({ RUNNING: 'R', ERROR: 'E', DESTROYED: 'X', + DONE: 'X', }); exports.statusAcronyms = statusAcronyms; diff --git a/lib/public/domain/enums/statusAcronym.mjs b/lib/public/domain/enums/statusAcronym.mjs index 3564005608..6ce0acaca6 100644 --- a/lib/public/domain/enums/statusAcronym.mjs +++ b/lib/public/domain/enums/statusAcronym.mjs @@ -18,7 +18,6 @@ export const StatusAcronym = Object.freeze({ CONFIGURED: 'C', RUNNING: 'R', ERROR: 'E', - MIXED: 'M', DESTROYED: 'X', DONE: 'X', }); diff --git a/lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js b/lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js index 716bdd0e1d..0641c16b64 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 { checkboxes } from '../../../components/Filters/common/filters/checkboxFilter.js'; import { rawTextFilter } from '../../../components/Filters/common/filters/rawTextFilter.js'; /** @@ -95,6 +96,14 @@ export const environmentsActiveColumns = { size: 'w-10', noEllipsis: true, format: (_, environment) => displayEnvironmentStatus(environment), + + /** + * Status filter component + * + * @param {EnvironmentOverviewModel} environmentOverviewModel the environment overview model + * @return {Component} the filter component + */ + filter: (environmentOverviewModel) => checkboxes(environmentOverviewModel.filteringModel.get('currentStatus').selectionModel), }, historyItems: { name: h('.flex-row.g2.items-center', ['Status History', infoTooltip(environmentStatusHistoryLegendComponent())]), diff --git a/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js b/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js index b071801a26..94a5563a63 100644 --- a/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js +++ b/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js @@ -14,8 +14,11 @@ import { buildUrl } from '/js/src/index.js'; import { FilteringModel } from '../../../components/Filters/common/FilteringModel.js'; import { OverviewPageModel } from '../../../models/OverviewModel.js'; +import { SelectionFilterModel } from '../../../components/Filters/common/filters/SelectionFilterModel.js'; import { RawTextFilterModel } from '../../../components/Filters/common/filters/RawTextFilterModel.js'; import { debounce } from '../../../utilities/debounce.js'; +import { coloredEnvironmentStatusComponent } from '../ColoredEnvironmentStatusComponent.js'; +import { StatusAcronym } from '../../../domain/enums/statusAcronym.mjs'; /** * Environment overview page model @@ -29,6 +32,13 @@ export class EnvironmentOverviewModel extends OverviewPageModel { super(); this._filteringModel = new FilteringModel({ + currentStatus: new SelectionFilterModel({ + availableOptions: Object.keys(StatusAcronym).map((status) => ({ + value: status, + label: coloredEnvironmentStatusComponent(status), + rawLabel: status, + })), + }), ids: new RawTextFilterModel(), }); diff --git a/test/public/envs/overview.test.js b/test/public/envs/overview.test.js index cddf1396cd..b6e9183798 100644 --- a/test/public/envs/overview.test.js +++ b/test/public/envs/overview.test.js @@ -294,6 +294,35 @@ module.exports = () => { await page.waitForSelector(filterPanelSelector, { visible: true }); }); + it('should successfully filter environments by their current status', async () => { + /** + * Checks that all the rows of the given table have a valid current status + * + * @param {string[]} authorizedCurrentStatuses the list of valid current statuses + * @return {void} + */ + const checkTableCurrentStatuses = async (authorizedCurrentStatuses) => { + const rows = await page.$$('tbody tr'); + for (const row of rows) { + expect(await row.evaluate((rowItem) => { + const rowId = rowItem.id; + return document.querySelector(`#${rowId}-status-text`).innerText; + })).to.be.oneOf(authorizedCurrentStatuses); + } + }; + + const currentStatusSelectorPrefix = '.status-filter #checkboxes-checkbox-'; + const getCurrentStatusCheckboxSelector = (statusName) => `${currentStatusSelectorPrefix}${statusName}`; + + await page.$eval(getCurrentStatusCheckboxSelector("RUNNING"), (element) => element.click()); + await waitForTableLength(page, 2); + await checkTableCurrentStatuses(["RUNNING"]); + + await page.$eval(getCurrentStatusCheckboxSelector("DEPLOYED"), (element) => element.click()); + await waitForTableLength(page, 3); + await checkTableCurrentStatuses(["RUNNING", "DEPLOYED"]); + }); + it('should successfully filter environments by their IDs', async () => { /** * This is the sequence to test filtering the environments on IDs.