From cc02c91fecf5d78504a436d6652ac21fb063722e Mon Sep 17 00:00:00 2001 From: Sabrina Ko Date: Wed, 5 Jan 2022 09:59:33 -0500 Subject: [PATCH] ui: updated the ui of list items on deployments tab --- ui/app/components/app-item/deployment.hbs | 75 ++++++++++++++----- .../operation-status-indicator/deployment.hbs | 11 --- ui/app/helpers/clean-up-url.ts | 8 ++ ui/app/styles/_variables.scss | 1 + ui/app/styles/components/app-item.scss | 75 ++++++++++++++----- ui/mirage/factories/deployment.ts | 1 + ui/tests/acceptance/deployments-list-test.ts | 22 +++++- .../integration/helpers/clean-up-url-test.ts | 24 ++++++ ui/translations/en-us.yaml | 12 ++- 9 files changed, 170 insertions(+), 59 deletions(-) delete mode 100644 ui/app/components/operation-status-indicator/deployment.hbs create mode 100644 ui/app/helpers/clean-up-url.ts create mode 100644 ui/tests/integration/helpers/clean-up-url-test.ts diff --git a/ui/app/components/app-item/deployment.hbs b/ui/app/components/app-item/deployment.hbs index d39be3886b7..6db64e07bb7 100644 --- a/ui/app/components/app-item/deployment.hbs +++ b/ui/app/components/app-item/deployment.hbs @@ -7,29 +7,66 @@
v{{@deployment.sequence}} - - <:small-text> - {{#if (not-eq @latest.id @deployment.id)}} - - {{t "page.deployments.replaced_label"}}v{{@latest.sequence}} +
+ {{!-- ROW: status report + deployment url --}} + {{#if @deployment.statusReport.health}} + {{#let (hash + deploymentHealth=@deployment.statusReport.health.healthStatus + urlOrStatus=(or + (clean-up-url @deployment.preload.deployUrl) + (t (concat "status_report_indicator.label." + (downcase @deployment.statusReport.health.healthStatus)) + ) + ) + ) as |vars|}} + + + {{vars.urlOrStatus}} + + {{/let}} + {{/if}} + {{!-- ROW: operation status --}} + {{#let @deployment.status as |status|}} + + + {{t (concat "page.deployments.status_prefix." status.state)}} + {{#if (eq status.state 1)}} {{!-- RUNNING --}} + {{t "page.deployments.started_time_prefix"}} {{date-format-distance-to-now status.startTime.seconds}} + {{else}} + {{date-format-distance-to-now status.completeTime.seconds}} + {{/if}} - {{/if}} - - <:badge> - {{#if (eq @deployment.state 4)}} - -   {{t "page.deployments.destroyed_label"}} - - {{/if}} - - + {{/let}} + {{!-- ROW: git commit information --}} + {{#if @deployment.preload.jobDataSourceRef.git.commit}} + {{#let @deployment.preload.jobDataSourceRef.git.commit as |commit|}} + {{!-- TODO: change to if statement- if user profile picture available, use that. else use flight icon --}} + + + + {{truncate-commit commit}} + + {{!-- TODO: when commit message available, add to this --}} + + {{/let}} + {{/if}} +
diff --git a/ui/app/components/operation-status-indicator/deployment.hbs b/ui/app/components/operation-status-indicator/deployment.hbs deleted file mode 100644 index 7f65154a803..00000000000 --- a/ui/app/components/operation-status-indicator/deployment.hbs +++ /dev/null @@ -1,11 +0,0 @@ - - <:status-text> - {{t (concat "page.deployments.status_prefix." @operation.status.state)}} - - <:small-text> - {{yield to="small-text"}} - - <:badge> - {{yield to="badge"}} - - diff --git a/ui/app/helpers/clean-up-url.ts b/ui/app/helpers/clean-up-url.ts new file mode 100644 index 00000000000..e6895884579 --- /dev/null +++ b/ui/app/helpers/clean-up-url.ts @@ -0,0 +1,8 @@ +import { helper } from '@ember/component/helper'; + +export function cleanUpUrl([str]: string[]) { + let cleanStr = str.replace('https://', '').replace('http://', '').replace('www.', ''); + return cleanStr; +} + +export default helper(cleanUpUrl); diff --git a/ui/app/styles/_variables.scss b/ui/app/styles/_variables.scss index e41ca8e8e24..1e01525b587 100644 --- a/ui/app/styles/_variables.scss +++ b/ui/app/styles/_variables.scss @@ -16,6 +16,7 @@ $button-shadow: 0 3px 2px rgba(var(--shadow), 0.2); --brand: #{dehex($brand-color)}; --background: #{dehex(color.$white)}; --text: #{dehex(color.$black)}; + --text-deploy-url: #{dehex(color.$ui-gray-800)}; --text-muted: #{dehex(color.$ui-cool-gray-600)}; --text-subtle: #{dehex(color.$ui-cool-gray-400)}; --link: #{dehex(color.$blue-500)}; diff --git a/ui/app/styles/components/app-item.scss b/ui/app/styles/components/app-item.scss index f3eed5f5abd..84ad3327796 100644 --- a/ui/app/styles/components/app-item.scss +++ b/ui/app/styles/components/app-item.scss @@ -4,6 +4,7 @@ margin-right: scale.$sm-2; width: 100%; border-radius: 5px; + @include Typography.Interface(M); hr { border: 0; @@ -33,23 +34,10 @@ font-size: 1rem; } - &.app-item--destroyed code { - color: rgb(var(--text-muted)); - } - .badge--version { margin-right: scale.$sm-2; } - .badge--destroyed { - margin-left: auto; - - @media (prefers-color-scheme: light) { - background: color.$ui-cool-gray-200; - color: color.$ui-cool-gray-800; - } - } - .button { max-width: 100%; margin-left: scale.$base; @@ -61,13 +49,6 @@ } } - .replacement-info { - @include Typography.Interface(S); - b { - text-transform: inherit; - } - } - .timestamp__label { @include Typography.Interface(S); } @@ -76,6 +57,60 @@ background: rgb(var(--panel)); } + &__deployment-state { + display: grid; + align-items: center; + grid-template-columns: max-content 92%; + column-gap: scale.$sm--3; + row-gap: scale.$sm--3; + + span { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .deploy-url { + color: rgb(var(--text-deploy-url)); + + &__status { + width: scale.$sm--2; + height: scale.$sm--2; + border-radius: 50%; + background: color.$black; + justify-self: center; + + &--alive { + background: color.$green-500; + animation: pulse 2s infinite; + @media (prefers-reduced-motion: reduce) { + animation: none; + } + } + + &--ready { + background: color.$green-500; + } + + &--down { + background: color.$red-500; + @media (prefers-color-scheme: dark) { + background: color.$red-400; + } + } + + &--partial { + background: color.$orange-500; + } + } + } + + .deployment-state { + color: rgb(var(--text-muted)); + } + } + .operation-status-indicator { display: inline-flex; flex-direction: row; diff --git a/ui/mirage/factories/deployment.ts b/ui/mirage/factories/deployment.ts index bdbb5e5d4c2..ffc13f6d078 100644 --- a/ui/mirage/factories/deployment.ts +++ b/ui/mirage/factories/deployment.ts @@ -47,6 +47,7 @@ export default Factory.extend({ 'common/vcs-ref-path': 'https://github.com/hashicorp/waypoint/commit/', }), gitCommitRef: '0d56a9f8456b088dd0e4a7b689b842876fd47352', + statusReport: association('alive'), afterCreate(deployment) { let url = `https://wildly-intent-honeybee--v${deployment.sequence}.waypoint.run`; diff --git a/ui/tests/acceptance/deployments-list-test.ts b/ui/tests/acceptance/deployments-list-test.ts index eac97b0e296..77de78d63ff 100644 --- a/ui/tests/acceptance/deployments-list-test.ts +++ b/ui/tests/acceptance/deployments-list-test.ts @@ -12,9 +12,12 @@ const redirectUrl = '/default/microchip/app/wp-bandwidth/deployment/seq/'; // co const page = create({ visit: visitable(url), - destroyedBadges: collection('[data-test-destroyed-badge]'), showDestroyed: clickable('[data-test-display-destroyed-button]'), linkList: collection('[data-test-deployment-list-item]'), + statusIndicators: collection('[data-test-health-status="alive"]'), + deployUrls: collection('.deploy-url'), + operationStatuses: collection('[data-test-operation-status]'), + gitCommits: collection('[data-test-git-commit]'), }); module('Acceptance | deployments list', function (hooks) { @@ -22,6 +25,22 @@ module('Acceptance | deployments list', function (hooks) { setupMirage(hooks); setupSession(hooks); + test('happy path', async function (assert) { + let project = this.server.create('project', { name: 'microchip' }); + let application = this.server.create('application', { name: 'wp-bandwidth', project }); + this.server.createList('deployment', 4, 'random', { application }); + + await page.visit(); + + assert.equal(page.linkList.length, 4); + assert.equal(currentURL(), redirectUrl + '4'); + assert.equal(page.statusIndicators.length, 4); + assert.equal(page.operationStatuses.length, 4); + assert.equal(page.gitCommits.length, 4); + // random list item url check + assert.equal(page.deployUrls[2].text, `wildly-intent-honeybee--v2.waypoint.run`); + }); + test('visiting deployments page redirects to latest', async function (assert) { let project = this.server.create('project', { name: 'microchip' }); let application = this.server.create('application', { name: 'wp-bandwidth', project }); @@ -107,6 +126,5 @@ module('Acceptance | deployments list', function (hooks) { await page.showDestroyed(); assert.equal(page.linkList.length, 5); - assert.equal(page.destroyedBadges.length, 1); }); }); diff --git a/ui/tests/integration/helpers/clean-up-url-test.ts b/ui/tests/integration/helpers/clean-up-url-test.ts new file mode 100644 index 00000000000..7c280037f21 --- /dev/null +++ b/ui/tests/integration/helpers/clean-up-url-test.ts @@ -0,0 +1,24 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Helper | clean-up-url', function(hooks) { + setupRenderingTest(hooks); + + test('it removes https:// from input', async function (assert) { + this.set('inputValue', 'https://wildly-intent-honeybee.waypoint.run'); + + await render(hbs`{{clean-up-url this.inputValue}}`); + + assert.equal(this.element.textContent?.trim(), 'wildly-intent-honeybee.waypoint.run'); + }); + + test('it removes http:// from input', async function (assert) { + this.set('inputValue', 'http://wildly-intent-honeybee.waypoint.run'); + + await render(hbs`{{clean-up-url this.inputValue}}`); + + assert.equal(this.element.textContent?.trim(), 'wildly-intent-honeybee.waypoint.run'); + }); +}); diff --git a/ui/translations/en-us.yaml b/ui/translations/en-us.yaml index 29e5c0bfdac..53a12e4cbe8 100644 --- a/ui/translations/en-us.yaml +++ b/ui/translations/en-us.yaml @@ -42,15 +42,13 @@ page: heading: Build Logs deployments: title: 'Deployments' - destroyed_label: 'Destroyed' - replaced_label: 'Replaced by ' - destroyed_and_hidden_state: 'Some deployments have been destroyed and are hidden' display_destroyed: 'Show destroyed deployments' + started_time_prefix: 'started' status_prefix: - 0: 'Deploying by ' # UNKNOWN - 1: 'Deploying by ' # RUNNING - 2: 'Deployed by ' # SUCCESS - 3: 'Failed to deploy by ' # ERROR + 0: 'Deploying...' # UNKNOWN + 1: 'Deploying...' # RUNNING + 2: 'Deployed' # SUCCESS + 3: 'Failed to deploy' # ERROR deployment: title: 'Deployment' resources: