Merge branch 'main' into feature/O2B-1492/Add-filtering-by-the-status-history-to-the-envs-filtering-panel

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
@@ -30,6 +33,13 @@ export class EnvironmentOverviewModel extends OverviewPageModel {
 
         this._filteringModel = new FilteringModel({
             statusHistory: new RawTextFilterModel(),
+            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

@@ -318,7 +318,36 @@ module.exports = () => {
         await resetFilters(page);
 
         await filterOnStatusHistory('.historyItems-filter input', 'D-E', ['KGIS12DS']);
-        await resetFilters(page);   
+        await resetFilters(page);
+    });
+
+    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 () => {