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: