From f36048c1d6e6c0742b1bdca0fe73feb689e40cd5 Mon Sep 17 00:00:00 2001
From: Jamie White <jamie@jgwhite.co.uk>
Date: Mon, 19 Jul 2021 23:48:10 +0200
Subject: [PATCH] ui: incorporate push status into build detail page

---
 .../workspace/projects/project/app/build.ts   | 25 ++++--
 .../workspace/projects/project/app/build.hbs  | 78 ++++++++-----------
 2 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/ui/app/routes/workspace/projects/project/app/build.ts b/ui/app/routes/workspace/projects/project/app/build.ts
index 35acaeb30d4..de597dad4a5 100644
--- a/ui/app/routes/workspace/projects/project/app/build.ts
+++ b/ui/app/routes/workspace/projects/project/app/build.ts
@@ -1,12 +1,19 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import ApiService from 'waypoint/services/api';
-import { Ref, GetBuildRequest } from 'waypoint-pb';
+import { Ref, GetBuildRequest, Build, PushedArtifact } from 'waypoint-pb';
 import { Model as AppRouteModel } from '../app';
 
 interface BuildModelParams {
   sequence: number;
 }
+
+interface WithPushedArtifact {
+  pushedArtifact?: PushedArtifact.AsObject;
+}
+
+type BuildWithArtifact = Build.AsObject & WithPushedArtifact;
+
 export default class BuildDetail extends Route {
   @service api!: ApiService;
 
@@ -28,15 +35,23 @@ export default class BuildDetail extends Route {
 
   async model(params: BuildModelParams) {
     // Setup the build request
-    let { builds } = this.modelFor('workspace.projects.project.app');
-    let { id: build_id } = builds.find((obj) => obj.sequence === Number(params.sequence));
+    let { builds } = this.modelFor('workspace.projects.project.app') as AppRouteModel;
+    let buildFromAppRoute = builds.find((obj) => obj.sequence === Number(params.sequence));
+
+    if (!buildFromAppRoute) {
+      throw new Error('Build not found');
+    }
 
     let ref = new Ref.Operation();
-    ref.setId(build_id);
+    ref.setId(buildFromAppRoute.id);
     let req = new GetBuildRequest();
     req.setRef(ref);
 
     let build = await this.api.client.getBuild(req, this.api.WithMeta());
-    return build.toObject();
+    let result: BuildWithArtifact = build.toObject();
+
+    result.pushedArtifact = buildFromAppRoute.pushedArtifact;
+
+    return result;
   }
 }
diff --git a/ui/app/templates/workspace/projects/project/app/build.hbs b/ui/app/templates/workspace/projects/project/app/build.hbs
index 2a2605baaa5..fb9652d25c6 100644
--- a/ui/app/templates/workspace/projects/project/app/build.hbs
+++ b/ui/app/templates/workspace/projects/project/app/build.hbs
@@ -1,49 +1,37 @@
-<PageHeader @iconName="build">
-  <div class="title">
-    <h2>
-      <b class="badge badge--version">v{{@model.sequence}}</b>
-    </h2>
-    <small>
-      <Pds::Icon @type={{icon-for-component @model.component.name}} class="icon" />
-      <span>{{if (eq @model.status.state 1) 'Building' 'Built'}} with
-        <b>{{titleize @model.component.name}}</b>
-        {{#if (eq @model.status.state 1)}}
-        (Started {{date-format-distance-to-now @model.status.startTime.seconds }})
-        {{else}}
-        {{date-format-distance-to-now @model.status.completeTime.seconds }}
-        {{/if}}
-      </span>
-    </small>
-  </div>
-  <div class="actions">
-    <Actions::Deploy @sequence={{@model.sequence}} />
-  </div>
-</PageHeader>
+{{#let (or @model.pushedArtifact @model) as |operation|}}
+  <PageHeader @iconName="build">
+    <div class="title">
+      <h2>
+        <b class="badge badge--version">v{{@model.sequence}}</b>
+      </h2>
+      <small>
+        <Pds::Icon
+          @type={{icon-for-component operation.component.name}}
+          class="icon"
+        />
+
+        <span>
+          {{t
+            (concat
+              "build_status"
+              ".type-" operation.component.type
+              ".state-" operation.status.state
+            )
+          }}
+          <b>{{component-name operation.component.name}}</b>
+        </span>
+      </small>
+    </div>
+    <div class="actions">
+      <Actions::Deploy @sequence={{@model.sequence}} />
+    </div>
+  </PageHeader>
 
-<div class="status-row">
-  <div class="item">
-    {{#if (eq @model.status.state 1)}}
-    <b class="badge">
-      <Pds::Icon @type="clock-outline" class="icon" />
-      <span>Build running...</span>
-    </b>
-    {{else if (eq @model.status.state 2)}}
-    <b class="badge badge--success">
-      <Pds::Icon @type="check-plain" class="icon" />
-      <span>Built in {{date-format-distance @model.status.startTime.seconds @model.status.completeTime.seconds }}</span>
-    </b>
-    {{else if (eq @model.status.state 3)}}
-    <b class="badge badge--error">
-      <Pds::Icon @type="alert-triangle" class="icon" />
-      <span>
-        Build failed
-        {{#if @model.status.error.message}}
-          : {{@model.status.error.message}}
-        {{/if}}
-      </span>
-    </b>
-    {{/if}}
+  <div class="status-row">
+    <div class="item">
+      <OperationStatusIndicator @status={{operation.status}} />
+    </div>
   </div>
-</div>
+{{/let}}
 
 <OperationLogs @jobId={{@model.jobId}} />