ui: updated the ui of list items on deployments tab

.changelog/2879.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Updated list items UI on deployments tab
+```

ui/app/components/app-item/deployment.hbs

@@ -7,29 +7,60 @@
  <hr>
  <LinkTo
  data-test-deployment-list-item
- title={{ concat
- "v" @deployment.sequence ": "
- (t (concat "page.deployments.status_prefix." @deployment.status.state))
- (component-name @deployment.component.name)}}
+ title={{concat (t "page.deployment.title") " v" @deployment.sequence }}
  @route="workspace.projects.project.app.deployment.deployment-seq"
  @models={{array @deployment.sequence}}
  >
  <b class="badge badge--version">v{{@deployment.sequence}}</b>
- <OperationStatusIndicator::Deployment @operation={{@deployment}}>
- <:small-text>
- {{#if (not-eq @latest.id @deployment.id)}}
- <span class="replacement-info">
- {{t "page.deployments.replaced_label"}}<b class="badge badge--version">v{{@latest.sequence}}</b>
+ <div class="app-item__deployment-state">
+ {{!-- ROW: health check + deployment URL --}}
+ {{#if @deployment.statusReport.health}}
+ {{#let @deployment.statusReport.health.healthStatus as |deploymentHealth|}}
+ <span
+ data-test-health-status={{downcase deploymentHealth}}
+ class="health-check health-check--{{downcase deploymentHealth}}"
+ />
+ <span class="health-check--text-description">
+ {{#if (eq (downcase deploymentHealth) "ready") }}
+ {{clean-up-url @deployment.preload.deployUrl}}
+ {{else}}
+ {{t (concat "status_report_indicator.label." (downcase @deployment.statusReport.health.healthStatus))}}
+ {{/if}}
+ </span>
+ {{/let}}
+ {{/if}}
+ {{!-- ROW: operation status --}}
+ {{#let @deployment.status as |status|}}
+ <FlightIcon
+ data-test-time-icon
+ @name={{or
+ (and (eq status.state 0) "help")
+ (and (eq status.state 1) "clock")
+ (and (eq status.state 2) "check")
+ (and (eq status.state 3) "alert-triangle")
+ }}
+ @size="16"
+ />
+ <span data-test-operation-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}}
  </span>
- {{/if}}
- </:small-text>
- <:badge>
- {{#if (eq @deployment.state 4)}}
- <b data-test-destroyed-badge class="badge badge--destroyed">
- <FlightIcon @name="trash" class="icon" />&nbsp; {{t "page.deployments.destroyed_label"}}
- </b>
- {{/if}}
- </:badge>
- </OperationStatusIndicator::Deployment>
+ {{/let}}
+ {{!-- ROW: git commit information --}}
+ {{#if @deployment.preload.jobDataSourceRef.git.commit}}
+ {{#let @deployment.preload.jobDataSourceRef.git.commit as |commit|}}
+ <FlightIcon @name="git-commit"/>
+ <span data-test-git-commit class="git-commit" title="Triggered by commit: {{commit}}">
+ <CopyButton @clipboardText={{commit}}>
+ <span class="git-commit__sha">{{truncate-commit commit}}</span>
+ </CopyButton>
+ </span>
+ {{/let}}
+ {{/if}}
+ </div>
  </LinkTo>
 </li>

ui/app/helpers/clean-up-url.ts

@@ -0,0 +1,8 @@
+import { helper } from '@ember/component/helper';
+
+export function cleanUpUrl([str]: string[]): string {
+ let cleanStr = str.replace('https://', '').replace('http://', '').replace('www.', '');
+ return cleanStr;
+}
+
+export default helper(cleanUpUrl);

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)};
@@ -51,6 +52,7 @@ $button-shadow: 0 3px 2px rgba(var(--shadow), 0.2);
  --brand: #{dehex($brand-color)};
  --background: #{dehex(color.$black)};
  --text: #{dehex(color.$ui-gray-100)};
+ --text-deploy-url: #{dehex(color.$ui-gray-050)};
  --text-muted: #{dehex(color.$ui-gray-400)};
  --text-subtle: #{dehex(color.$ui-gray-600)};
  --link: #{dehex(color.$blue-400)};

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;
+ }
+
+ .health-check {
+ width: scale.$sm--2;
+ height: scale.$sm--2;
+ border-radius: 50%;
+ background: color.$black;
+ justify-self: center;
+
+ &--text-description {
+ color: rgb(var(--text-deploy-url));
+ }
+
+ &--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;

ui/tests/acceptance/deployments-list-test.ts

@@ -12,16 +12,37 @@ 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]'),
+ aliveStatusIndicators: collection('[data-test-health-status="alive"]'),
+ healthCheckOrDeployUrls: collection('.health-check--text-description'),
+ operationStatuses: collection('[data-test-operation-status]'),
+ gitCommits: collection('[data-test-git-commit]'),
 });
 
 module('Acceptance | deployments list', function (hooks) {
  setupApplicationTest(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 });
+ let deployments = this.server.createList('deployment', 3, 'random', { application });
+ this.server.create('status-report', 'alive', { application, target: deployments[0] });
+ this.server.create('status-report', 'ready', { application, target: deployments[1] });
+
+ await page.visit();
+
+ assert.equal(page.linkList.length, 3);
+ assert.equal(currentURL(), redirectUrl + '3');
+ assert.equal(page.aliveStatusIndicators.length, 1);
+ assert.equal(page.operationStatuses.length, 3);
+ assert.equal(page.gitCommits.length, 3);
+ assert.equal(page.healthCheckOrDeployUrls[1].text, 'Starting…');
+ assert.equal(page.healthCheckOrDeployUrls[0].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 +128,5 @@ module('Acceptance | deployments list', function (hooks) {
  await page.showDestroyed();
 
  assert.equal(page.linkList.length, 5);
- assert.equal(page.destroyedBadges.length, 1);
  });
 });

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');
+ });
+});

ui/translations/en-us.yaml

@@ -51,15 +51,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: