Skip to content

Commit f32b16c

Browse files
isaachillyisaachilly
authored
[02B-1480] Env-Overview Page Improvements (#2012)
* Remove 'createdAt' column from environments table * Test indices and validators have also been adjusted to reflect this change. * Rename 'Updated At' column to 'Last Update' * Update environment status color mappings and table row classes * Added mappings for PENDING, STANDBY, DEPLOYED, and DONE statuses and changed CONFIGURED. * Removed whole table row, colour class assignment. * Add 'Add log' button to environment dropdown * Fix environment status color mapping and update tests * Introduces a new textMinWidth parameter allowing the minimum width of the link text to be set via inline style.
1 parent 229467d commit f32b16c

6 files changed

Lines changed: 73 additions & 31 deletions

File tree

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,17 @@ import { DropdownComponent, h } from '/js/src/index.js';
2222
* @param {string} page the target page of the link
2323
* @param {Object} parameters the url parameters of the link
2424
* @param {Component} dropdownBody the body of the dropdown
25+
* @param {string} textMinWidth minimum width of the link text (e.g. '100px')
2526
* @returns {Component} the link with dropdown component
2627
*/
27-
export const buttonLinkWithDropdown = (linkContent, page, parameters, dropdownBody) =>
28+
export const buttonLinkWithDropdown = (linkContent, page, parameters, dropdownBody, textMinWidth) =>
2829
h(
2930
'.flex-row.items-center.btn-group',
3031
[
31-
frontLink(linkContent, page, parameters, { class: 'btn btn-primary white' }),
32+
frontLink(linkContent, page, parameters, {
33+
class: 'btn btn-primary white',
34+
style: textMinWidth ? `min-width: ${textMinWidth};` : '',
35+
}),
3236
DropdownComponent(
3337
h('.btn.btn-group-item.last-item', iconCaretBottom()),
3438
h(

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@
1212
*/
1313

1414
import { CopyToClipboardComponent, h } from '/js/src/index.js';
15+
import { iconPlus } from '/js/src/icons.js';
1516
import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
1617
import { formatRunsList } from '../../Runs/format/formatRunsList.js';
1718
import { displayEnvironmentStatus } from '../format/displayEnvironmentStatus.js';
1819
import { buttonLinkWithDropdown } from '../../../components/common/selection/infoLoggerButtonGroup/buttonLinkWithDropdown.js';
1920
import { infologgerLinksComponents } from '../../../components/common/externalLinks/infologgerLinksComponents.js';
21+
import { frontLink } from '../../../components/common/navigation/frontLink.js';;
2022
import { coloredEnvironmentStatusComponent } from '../ColoredEnvironmentStatusComponent.js';
2123
import { environmentStatusHistoryLegendComponent } from '../../../components/environments/environmentStatusHistoryComponent.js';
2224
import { infoTooltip } from '../../../components/common/popover/infoTooltip.js';
@@ -32,7 +34,7 @@ export const environmentsActiveColumns = {
3234
size: 'w-10 f6 w-wrapped',
3335
visible: true,
3436
primary: true,
35-
format: (environmentId, { status }) => buttonLinkWithDropdown(
37+
format: (environmentId, { status, runs }) => buttonLinkWithDropdown(
3638
environmentId,
3739
'env-details',
3840
{ environmentId },
@@ -42,7 +44,14 @@ export const environmentsActiveColumns = {
4244
status === 'RUNNING'
4345
? aliEcsEnvironmentLinkComponent(environmentId)
4446
: null,
47+
frontLink(
48+
h('span.flex-row.items-center.g1', [iconPlus(), 'Add log']),
49+
'log-create',
50+
{ environmentIds: [environmentId], ...runs.length > 0 && { runNumbers: runs.map((run) => run.runNumber) } },
51+
{ id: 'add-log-link', class: 'btn btn-primary h2' },
52+
),
4553
],
54+
'125px',
4655
),
4756
},
4857
runs: {
@@ -54,15 +63,15 @@ export const environmentsActiveColumns = {
5463
balloon: true,
5564
},
5665
updatedAt: {
57-
name: 'Updated At',
66+
name: 'Last Update',
5867
visible: true,
5968
sortable: false,
6069
size: 'w-10',
6170
format: (timestamp) => formatTimestamp(timestamp, false),
6271
},
6372
createdAt: {
6473
name: 'Created At',
65-
visible: true,
74+
visible: false,
6675
sortable: false,
6776
size: 'w-10',
6877
format: (timestamp) => formatTimestamp(timestamp, false),

‎lib/public/views/Environments/ColoredEnvironmentStatusComponent.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ export const coloredEnvironmentStatusComponent = (status, content) => {
3232
const statusToCssClassMapping = {
3333
RUNNING: 'success',
3434
ERROR: 'danger',
35-
CONFIGURED: 'warning',
35+
CONFIGURED: 'primary',
3636
UNKNOWN: 'gray-dark',
37+
PENDING: 'gray-dark',
38+
STANDBY: 'gray-dark',
39+
DEPLOYED: 'gray-dark',
40+
DONE: 'black',
41+
DESTROYED: 'black',
3742
};

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

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,8 @@ export const environmentOverviewComponent = (pagination, envs) => {
3636
return [
3737
h('.w-100.flex-column', [
3838
h('.header-container.pv2'),
39-
table(envs, environmentsActiveColumns, { classes: getRowsClasses }),
39+
table(envs, environmentsActiveColumns, { classes: 'table-sm' }),
4040
paginationComponent(pagination),
4141
]),
4242
];
4343
};
44-
45-
/**
46-
* Takes an environment, checks it's status and status history and returns the relevant css class.
47-
* @param {Environment} environment the environment to be formatted
48-
* @returns {string} CSS class
49-
*/
50-
const getRowsClasses = (environment) => {
51-
const hasOrHadError = environment.status === 'ERROR' || environment.historyItems.some((item) => item.status === 'ERROR');
52-
return `.table-sm${hasOrHadError ? '.danger' : ''}`;
53-
};

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,13 @@ import { tooltip } from '../../../components/common/popover/tooltip.js';
2323
*/
2424
export const displayEnvironmentStatus = ({ status: currentStatus, historyItems }) => {
2525
if (historyItems.some(({ status }) => status === 'ERROR')) {
26+
const statusColorClass = currentStatus === 'ERROR' ? '.danger' : '';
2627
return h(
2728
'.flex-row.g2.items-center',
28-
[currentStatus, tooltip(iconWarning(), h('.black', 'Environment has been in ERROR state'))],
29+
[
30+
h(`span${statusColorClass}`, currentStatus),
31+
tooltip(h('span.danger', iconWarning()), h('.black', 'Environment has been in ERROR state')),
32+
],
2933
);
3034
}
3135

‎test/public/envs/overview.test.js‎

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@ module.exports = () => {
6868
const tableDataValidators = {
6969
id: (id) => /[A-Za-z0-9]+/.test(id),
7070
runs: (runs) => runs === '-' || runs.split(',').every((run) => !isNaN(run)),
71-
createdAt: checkDate,
7271
updatedAt: checkDate,
7372
status: (currentStatus) => statusNames.has(currentStatus),
7473
historyItems: (history) => history.split('-').every((statusAcronym) => STATUS_ACRONYMS.includes(statusAcronym)),
@@ -84,7 +83,7 @@ module.exports = () => {
8483

8584
it('Should have balloon on runs column', async () => {
8685
await checkColumnBalloon(page, 1, 2);
87-
await checkColumnBalloon(page, 1, 6);
86+
await checkColumnBalloon(page, 1, 5);
8887
});
8988

9089
it('Should have correct status color in the overview page', async () => {
@@ -108,15 +107,35 @@ module.exports = () => {
108107
await page.waitForSelector(`${cellSelector}.danger`);
109108
break;
110109
case 'CONFIGURED':
111-
await page.waitForSelector(`${cellSelector}.warning`);
110+
await page.waitForSelector(`${cellSelector}.primary`);
111+
break;
112+
case 'DONE':
113+
await page.waitForSelector(`${cellSelector}.black`);
114+
break;
115+
case 'DESTROYED':
116+
await page.waitForSelector(`${cellSelector}.black`);
117+
break;
118+
case 'DEPLOYED':
119+
await page.waitForSelector(`${cellSelector}.gray`);
120+
break;
121+
case 'PENDING':
122+
await page.waitForSelector(`${cellSelector}.gray`);
123+
break;
124+
case 'STANDBY':
125+
await page.waitForSelector(`${cellSelector}.gray`);
126+
break;
127+
case 'UNKNOWN':
128+
await page.waitForSelector(`${cellSelector}.gray-dark`);
112129
break;
113130
}
131+
114132
};
115133

116-
await checkEnvironmentStatusColor(1, 4);
117-
await checkEnvironmentStatusColor(2, 4);
118-
await checkEnvironmentStatusColor(3, 4);
119-
await checkEnvironmentStatusColor(4, 4);
134+
await checkEnvironmentStatusColor(1, 3);
135+
await checkEnvironmentStatusColor(2, 3);
136+
await checkEnvironmentStatusColor(3, 3);
137+
await checkEnvironmentStatusColor(6, 3);
138+
await checkEnvironmentStatusColor(9, 3);
120139
});
121140

122141
it('can set how many environments are available per page', async () => {
@@ -175,33 +194,44 @@ module.exports = () => {
175194
});
176195

177196
it('should successfully display dropdown links', async () => {
178-
let envId = 'CmCvjNbg';
179-
180197
await waitForNavigation(page, () => pressElement(page, 'a#env-overview'));
181198

182199
// Running env
200+
let envId = 'CmCvjNbg';
183201
await pressElement(page, `tr[id='row${envId}'] .popover-trigger`, true);
184202
let popover = await getPopoverSelector(await page.waitForSelector(`tr[id='row${envId}'] .popover-trigger`));
185203

186-
await expectLink(page, `${popover} a:nth-of-type(1)`, {
204+
await expectLink(page, `${popover} :nth-child(1 of .external-link)`, {
187205
href: 'http://localhost:8081/?q={%22partition%22:{%22match%22:%22CmCvjNbg%22},%22severity%22:{%22in%22:%22W%20E%20F%22}}',
188206
innerText: 'Infologger FLP',
189207
});
190208

191-
await expectLink(page, `${popover} a:nth-of-type(2)`, {
209+
await expectLink(page, `${popover} :nth-child(2 of .external-link)`, {
192210
href: 'http://localhost:8080/?page=environment&id=CmCvjNbg',
193211
innerText: 'ECS',
194212
});
195213

214+
await expectLink(page, `${popover} #add-log-link`, {
215+
href: 'http://localhost:4000/?page=log-create&environmentIds=CmCvjNbg',
216+
innerText: 'Add log',
217+
});
218+
196219
// Not running env
197220
envId = 'EIDO13i3D';
198221
await pressElement(page, `tr[id='row${envId}'] .popover-trigger`);
199222
popover = await getPopoverSelector(await page.waitForSelector(`tr[id='row${envId}'] .popover-trigger`));
200-
await expectLink(page, `${popover} a:nth-of-type(1)`, {
223+
224+
await expectLink(page, `${popover} :nth-child(1 of .external-link)`, {
201225
href: 'http://localhost:8081/?q={%22partition%22:{%22match%22:%22EIDO13i3D%22},%22severity%22:{%22in%22:%22W%20E%20F%22}}',
202226
innerText: 'Infologger FLP',
203227
});
204228

205-
await page.waitForSelector(`${popover} a:nth-of-type(2)`, { hidden: true });
229+
// ECS link should not be present
230+
await page.waitForSelector(`${popover} :nth-child(2 of .external-link)`, { hidden: true });
231+
232+
await expectLink(page, `${popover} #add-log-link`, {
233+
href: 'http://localhost:4000/?page=log-create&environmentIds=EIDO13i3D&runNumbers=94,95,96',
234+
innerText: 'Add log',
235+
});
206236
});
207237
};

0 commit comments

Comments
 (0)