[O2B-1491] Add current status filtering for environments

Introduces a filter for the environment's current status.

Make backend filtering logic handle unknown statuses and to handle known 'MIXED' and 'DONE' statuses.

Updates tests to verify filtering functionality.

Author: isaachilly

lib/domain/enums/StatusAcronyms.js

@@ -18,7 +18,9 @@ const statusAcronyms = Object.freeze({
     CONFIGURED: 'C',
     RUNNING: 'R',
     ERROR: 'E',
+    MIXED: 'M',
     DESTROYED: 'X',
+    DONE: 'X',
 });
 
 exports.statusAcronyms = statusAcronyms;

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';
 
 /**
  * List of active columns for a generic Environments component
@@ -83,6 +84,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,7 +14,10 @@
 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 { debounce } from '../../../utilities/debounce.js';
+import { coloredEnvironmentStatusComponent } from '../ColoredEnvironmentStatusComponent.js';
+import { StatusAcronym } from '../../../domain/enums/statusAcronym.mjs';
 
 /**
  * Environment overview page model
@@ -28,6 +31,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,
+                })).concat({ value: 'UNKNOWN', label: coloredEnvironmentStatusComponent('UNKNOWN'), rawLabel: 'UNKNOWN' }),
+            }),
         });
 
         this._filteringModel.observe(() => this._applyFilters(true));

lib/usecases/environment/GetAllEnvironmentsUseCase.js

@@ -27,17 +27,21 @@ const { statusAcronyms } = require('../../domain/enums/StatusAcronyms.js');
  * It orders the history items by updatedAt DESC and selects to have the latests
  * history item on top. Then it limits the result to 1, so only
  * the latest history item is selected.
+ * the latest history item is selected. If the environment has no history
+ * items, it returns 'UNKNOWN' to indicate the environment has never had a status.
  *
  * Environment refers to the current environment in the main query,
  * because this query is a sub query that is executed for every environment.
  */
 const ENVIRONMENT_LATEST_HISTORY_ITEM_SUBQUERY = `
-(SELECT h.status
-    FROM environments_history_items AS h
-    WHERE h.environment_id = Environment.id
-    ORDER BY h.updated_at DESC
-    LIMIT 1
-)`;
+(CASE 
+    WHEN EXISTS(SELECT 1 FROM environments_history_items AS h WHERE h.environment_id = Environment.id) THEN 
+        (SELECT h.status
+        FROM environments_history_items AS h WHERE h.environment_id = Environment.id
+        ORDER BY h.updated_at DESC
+        LIMIT 1)
+    ELSE 'UNKNOWN'
+END)`;
 
 /**
  * Subquery to select the status history for each environment.

test/public/envs/overview.test.js

@@ -290,4 +290,33 @@ module.exports = () => {
         await openFilteringPanel(page);
         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"]);
+    });
 };