[O2B-1492] Add status history filter to environments overview

Introduces a status history filter to the environments overview page.

Includes special handling for status histories ending with 'X'.

Adds tests to verify correct filtering behaviour.

Additionally colourises the status history legend to make easier to compare.

Author: isaachilly

lib/public/components/environments/environmentStatusHistoryComponent.js

@@ -25,8 +25,8 @@ export const environmentStatusHistoryLegendComponent = () =>
         h('h5', 'Status History Legend'),
         Object.keys(StatusAcronym).map((status) =>
             h('.flex-row.justify-between', [
-                h('', status),
-                h('', StatusAcronym[status]),
+                coloredEnvironmentStatusComponent(status),
+                h('', coloredEnvironmentStatusComponent(status, StatusAcronym[status])),
             ])),
     ]);
 

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
@@ -95,5 +96,16 @@ export const environmentsActiveColumns = {
                 coloredEnvironmentStatusComponent(status, StatusAcronym[status]),
             ]).slice(1),
         balloon: true,
+
+        /**
+         * Status history filter component
+         *
+         * @param {EnvironmentOverviewModel} environmentOverviewModel the environment overview model
+         * @return {Component} the filter component
+         */
+        filter: (environmentOverviewModel) => rawTextFilter(
+            environmentOverviewModel.filteringModel.get('statusHistory'),
+            { classes: ['w-100'], placeholder: 'e.g. D-R-X' },
+        ),
     },
 };

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({
+            statusHistory: new RawTextFilterModel(),
         });
 
         this._filteringModel.observe(() => this._applyFilters(true));

lib/usecases/environment/GetAllEnvironmentsUseCase.js

@@ -126,8 +126,10 @@ class GetAllEnvironmentsUseCase {
             }
 
             if (statusHistory) {
-                // Split the string into separate characters
-                const historyItems = statusHistory.split('');
+                // Check if status history ends with 'X' and remove it if present to handle the special case later
+                const containsX = statusHistory.endsWith('X');
+                const cleanedStatusHistory = containsX ? statusHistory.slice(0, -1) : statusHistory;
+                const historyItems = cleanedStatusHistory.split('');
 
                 // Swap the acronyms with the status (=acronym -> status)
                 const acronymToStatus = {};
@@ -145,17 +147,38 @@ class GetAllEnvironmentsUseCase {
                     }
                 }
 
-                // Filter the environments by status history using the subquery
-                filterQueryBuilder.literalWhere(
-                    `${ENVIRONMENT_STATUS_HISTORY_SUBQUERY} = :statusFilters`,
-                    // Create a string of the status filters separated by a comma
-                    { statusFilters: statusFilters.join(',') },
-                );
+                if (containsX) {
+                    const statusFiltersWithDestroyed = [...statusFilters, 'DESTROYED'].join(',');
+                    const statusFiltersWithDone = [...statusFilters, 'DONE'].join(',');
+
+                    /*
+                     * Use OR condition to match subsequences ending with either DESTROYED or DONE
+                     * Filter the environments by using LIKE for subsequence matching
+                     */
+                    filterQueryBuilder.literalWhere(
+                        `(${ENVIRONMENT_STATUS_HISTORY_SUBQUERY} LIKE :statusFiltersWithDestroyed OR ` +
+                        `${ENVIRONMENT_STATUS_HISTORY_SUBQUERY} LIKE :statusFiltersWithDone)`,
+                        {
+                            statusFiltersWithDestroyed: `%${statusFiltersWithDestroyed}`,
+                            statusFiltersWithDone: `%${statusFiltersWithDone}`,
+                        },
+                    );
 
-                filterQueryBuilder.includeAttribute({
-                    query: ENVIRONMENT_STATUS_HISTORY_SUBQUERY,
-                    alias: 'statusHistory',
-                });
+                    filterQueryBuilder.includeAttribute({
+                        query: ENVIRONMENT_STATUS_HISTORY_SUBQUERY,
+                        alias: 'statusHistory',
+                    });
+                } else {
+                    filterQueryBuilder.literalWhere(
+                        `${ENVIRONMENT_STATUS_HISTORY_SUBQUERY} LIKE :statusFilters`,
+                        { statusFilters: `%${statusFilters.join(',')}%` },
+                    );
+
+                    filterQueryBuilder.includeAttribute({
+                        query: ENVIRONMENT_STATUS_HISTORY_SUBQUERY,
+                        alias: 'statusHistory',
+                    });
+                }
             }
 
             if (runNumbersExpression) {

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 status history', async () => {
+        /**
+         * This is the sequence to test filtering the environments on their status history.
+         * 
+         * @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 filterOnStatusHistory = 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, '.historyItems-filter input', 'placeholder', 'e.g. D-R-X');
+
+        await filterOnStatusHistory('.historyItems-filter input', 'C-R-D-X', ['TDI59So3d']);
+        await resetFilters(page);
+
+        await filterOnStatusHistory('.historyItems-filter input', 'S-E', ['EIDO13i3D', '8E4aZTjY']);
+        await resetFilters(page);
+
+        await filterOnStatusHistory('.historyItems-filter input', 'D-E', ['KGIS12DS']);
+        await resetFilters(page);   
+    });
 };