[O2B-1491] Add current status filtering for environments (#2031)

* Allow users to filter by an environment's current status now, including environments with an unknown status.
* The user is prompted with a list of checkboxes to choose from

Author: isaachilly

lib/domain/enums/StatusAcronyms.js

@@ -19,6 +19,7 @@ const statusAcronyms = Object.freeze({
     RUNNING: 'R',
     ERROR: 'E',
     DESTROYED: 'X',
+    DONE: 'X',
 });
 
 exports.statusAcronyms = statusAcronyms;

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',
 });

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())]),

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(),
         });
 

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.