[02B-1480] Env-Overview Page Improvements

lib/public/components/common/selection/infoLoggerButtonGroup/buttonLinkWithDropdown.js

@@ -22,13 +22,17 @@ import { DropdownComponent, h } from '/js/src/index.js';
  * @param {string} page the target page of the link
  * @param {Object} parameters the url parameters of the link
  * @param {Component} dropdownBody the body of the dropdown
+ * @param {string} textMinWidth minimum width of the link text (e.g. '100px')
  * @returns {Component} the link with dropdown component
  */
-export const buttonLinkWithDropdown = (linkContent, page, parameters, dropdownBody) =>
+export const buttonLinkWithDropdown = (linkContent, page, parameters, dropdownBody, textMinWidth) =>
     h(
         '.flex-row.items-center.btn-group',
         [
-            frontLink(linkContent, page, parameters, { class: 'btn btn-primary white' }),
+            frontLink(linkContent, page, parameters, {
+                class: 'btn btn-primary white',
+                style: textMinWidth ? `min-width: ${textMinWidth};` : '',
+            }),
             DropdownComponent(
                 h('.btn.btn-group-item.last-item', iconCaretBottom()),
                 h(

lib/public/views/Environments/ActiveColumns/environmentsActiveColumns.js

@@ -12,11 +12,13 @@
  */
 
 import { CopyToClipboardComponent, h } from '/js/src/index.js';
+import { iconPlus } from '/js/src/icons.js';
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 import { formatRunsList } from '../../Runs/format/formatRunsList.js';
 import { displayEnvironmentStatus } from '../format/displayEnvironmentStatus.js';
 import { buttonLinkWithDropdown } from '../../../components/common/selection/infoLoggerButtonGroup/buttonLinkWithDropdown.js';
 import { infologgerLinksComponents } from '../../../components/common/externalLinks/infologgerLinksComponents.js';
+import { frontLink } from '../../../components/common/navigation/frontLink.js';;
 import { coloredEnvironmentStatusComponent } from '../ColoredEnvironmentStatusComponent.js';
 import { environmentStatusHistoryLegendComponent } from '../../../components/environments/environmentStatusHistoryComponent.js';
 import { infoTooltip } from '../../../components/common/popover/infoTooltip.js';
@@ -32,7 +34,7 @@ export const environmentsActiveColumns = {
         size: 'w-10 f6 w-wrapped',
         visible: true,
         primary: true,
-        format: (environmentId, { status }) => buttonLinkWithDropdown(
+        format: (environmentId, { status, runs }) => buttonLinkWithDropdown(
             environmentId,
             'env-details',
             { environmentId },
@@ -42,7 +44,14 @@ export const environmentsActiveColumns = {
                 status === 'RUNNING'
                     ? aliEcsEnvironmentLinkComponent(environmentId)
                     : null,
+                frontLink(
+                    h('span.flex-row.items-center.g1', [iconPlus(), 'Add log']),
+                    'log-create',
+                    { environmentIds: [environmentId], ...runs.length > 0 && { runNumbers: runs.map((run) => run.runNumber) } },
+                    { id: 'add-log-link', class: 'btn btn-primary h2' },
+                ),
             ],
+            '125px',
         ),
     },
     runs: {
@@ -54,15 +63,15 @@ export const environmentsActiveColumns = {
         balloon: true,
     },
     updatedAt: {
-        name: 'Updated At',
+        name: 'Last Update',
         visible: true,
         sortable: false,
         size: 'w-10',
         format: (timestamp) => formatTimestamp(timestamp, false),
     },
     createdAt: {
         name: 'Created At',
-        visible: true,
+        visible: false,
         sortable: false,
         size: 'w-10',
         format: (timestamp) => formatTimestamp(timestamp, false),

lib/public/views/Environments/ColoredEnvironmentStatusComponent.js

@@ -32,6 +32,11 @@ export const coloredEnvironmentStatusComponent = (status, content) => {
 const statusToCssClassMapping = {
     RUNNING: 'success',
     ERROR: 'danger',
-    CONFIGURED: 'warning',
+    CONFIGURED: 'primary',
     UNKNOWN: 'gray-dark',
+    PENDING: 'gray-dark',
+    STANDBY: 'gray-dark',
+    DEPLOYED: 'gray-dark',
+    DONE: 'black',
+    DESTROYED: 'black',
 };

lib/public/views/Environments/Overview/environmentOverviewComponent.js

@@ -36,18 +36,8 @@ export const environmentOverviewComponent = (pagination, envs) => {
     return [
         h('.w-100.flex-column', [
             h('.header-container.pv2'),
-            table(envs, environmentsActiveColumns, { classes: getRowsClasses }),
+            table(envs, environmentsActiveColumns, { classes: 'table-sm' }),
             paginationComponent(pagination),
         ]),
     ];
 };
-
-/**
- * Takes an environment, checks it's status and status history and returns the relevant css class.
- * @param {Environment} environment the environment to be formatted
- * @returns {string} CSS class
- */
-const getRowsClasses = (environment) => {
-    const hasOrHadError = environment.status === 'ERROR' || environment.historyItems.some((item) => item.status === 'ERROR');
-    return `.table-sm${hasOrHadError ? '.danger' : ''}`;
-};

lib/public/views/Environments/format/displayEnvironmentStatus.js

@@ -23,9 +23,13 @@ import { tooltip } from '../../../components/common/popover/tooltip.js';
  */
 export const displayEnvironmentStatus = ({ status: currentStatus, historyItems }) => {
     if (historyItems.some(({ status }) => status === 'ERROR')) {
+        const statusColorClass = currentStatus === 'ERROR' ? '.danger' : '';
         return h(
             '.flex-row.g2.items-center',
-            [currentStatus, tooltip(iconWarning(), h('.black', 'Environment has been in ERROR state'))],
+            [
+                h(`span${statusColorClass}`, currentStatus),
+                tooltip(h('span.danger', iconWarning()), h('.black', 'Environment has been in ERROR state')),
+            ],
         );
     }
 

test/public/envs/overview.test.js

@@ -68,7 +68,6 @@ module.exports = () => {
         const tableDataValidators = {
             id: (id) => /[A-Za-z0-9]+/.test(id),
             runs: (runs) => runs === '-' || runs.split(',').every((run) => !isNaN(run)),
-            createdAt: checkDate,
             updatedAt: checkDate,
             status: (currentStatus) => statusNames.has(currentStatus),
             historyItems: (history) => history.split('-').every((statusAcronym) => STATUS_ACRONYMS.includes(statusAcronym)),
@@ -84,7 +83,7 @@ module.exports = () => {
 
     it('Should have balloon on runs column', async () => {
         await checkColumnBalloon(page, 1, 2);
-        await checkColumnBalloon(page, 1, 6);
+        await checkColumnBalloon(page, 1, 5);
     });
 
     it('Should have correct status color in the overview page', async () => {
@@ -108,15 +107,35 @@ module.exports = () => {
                     await page.waitForSelector(`${cellSelector}.danger`);
                     break;
                 case 'CONFIGURED':
-                    await page.waitForSelector(`${cellSelector}.warning`);
+                    await page.waitForSelector(`${cellSelector}.primary`);
+                    break;
+                case 'DONE':
+                    await page.waitForSelector(`${cellSelector}.black`);
+                    break;
+                case 'DESTROYED':
+                    await page.waitForSelector(`${cellSelector}.black`);
+                    break;
+                case 'DEPLOYED':
+                    await page.waitForSelector(`${cellSelector}.gray`);
+                    break;
+                case 'PENDING':
+                    await page.waitForSelector(`${cellSelector}.gray`);
+                    break;
+                case 'STANDBY':
+                    await page.waitForSelector(`${cellSelector}.gray`);
+                    break;
+                case 'UNKNOWN':
+                    await page.waitForSelector(`${cellSelector}.gray-dark`);
                     break;
             }
+
         };
 
-        await checkEnvironmentStatusColor(1, 4);
-        await checkEnvironmentStatusColor(2, 4);
-        await checkEnvironmentStatusColor(3, 4);
-        await checkEnvironmentStatusColor(4, 4);
+        await checkEnvironmentStatusColor(1, 3);
+        await checkEnvironmentStatusColor(2, 3);
+        await checkEnvironmentStatusColor(3, 3);
+        await checkEnvironmentStatusColor(6, 3);
+        await checkEnvironmentStatusColor(9, 3);
     });
 
     it('can set how many environments are available per page', async () => {
@@ -175,33 +194,44 @@ module.exports = () => {
     });
 
     it('should successfully display dropdown links', async () => {
-        let envId = 'CmCvjNbg';
-
         await waitForNavigation(page, () => pressElement(page, 'a#env-overview'));
 
         // Running env
+        let envId = 'CmCvjNbg';
         await pressElement(page, `tr[id='row${envId}'] .popover-trigger`, true);
         let popover = await getPopoverSelector(await page.waitForSelector(`tr[id='row${envId}'] .popover-trigger`));
 
-        await expectLink(page, `${popover} a:nth-of-type(1)`, {
+        await expectLink(page, `${popover} :nth-child(1 of .external-link)`, {
             href: 'http://localhost:8081/?q={%22partition%22:{%22match%22:%22CmCvjNbg%22},%22severity%22:{%22in%22:%22W%20E%20F%22}}',
             innerText: 'Infologger FLP',
         });
 
-        await expectLink(page, `${popover} a:nth-of-type(2)`, {
+        await expectLink(page, `${popover} :nth-child(2 of .external-link)`, {
             href: 'http://localhost:8080/?page=environment&id=CmCvjNbg',
             innerText: 'ECS',
         });
 
+        await expectLink(page, `${popover} #add-log-link`, {
+            href: 'http://localhost:4000/?page=log-create&environmentIds=CmCvjNbg',
+            innerText: 'Add log',
+        });
+
         // Not running env
         envId = 'EIDO13i3D';
         await pressElement(page, `tr[id='row${envId}'] .popover-trigger`);
         popover = await getPopoverSelector(await page.waitForSelector(`tr[id='row${envId}'] .popover-trigger`));
-        await expectLink(page, `${popover} a:nth-of-type(1)`, {
+
+        await expectLink(page, `${popover} :nth-child(1 of .external-link)`, {
             href: 'http://localhost:8081/?q={%22partition%22:{%22match%22:%22EIDO13i3D%22},%22severity%22:{%22in%22:%22W%20E%20F%22}}',
             innerText: 'Infologger FLP',
         });
 
-        await page.waitForSelector(`${popover} a:nth-of-type(2)`, { hidden: true });
+        // ECS link should not be present
+        await page.waitForSelector(`${popover} :nth-child(2 of .external-link)`, { hidden: true });
+
+        await expectLink(page, `${popover} #add-log-link`, {
+            href: 'http://localhost:4000/?page=log-create&environmentIds=EIDO13i3D&runNumbers=94,95,96',
+            innerText: 'Add log',
+        });
     });
 };