ui: incorporate push status into build detail page

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;
  }
 }

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}} />