ui: display deployment status reports

hashicorp · Jun 2, 2021 · 533146a · 533146a
1 parent f4b86ea
commit 533146a
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 39 deletions.
diff --git a/ui/app/components/app-card/deployment.hbs b/ui/app/components/app-card/deployment.hbs
@@ -4,19 +4,6 @@
     <p>
       <b class="badge badge--version">v{{@model.sequence}}</b>
       <code>{{truncate @model.id 8 false}}</code>
-      {{#if (eq @model.status.state 1)}}
-        <b class="badge">
-          <Pds::Icon @type="clock-outline" class="icon" />
-        </b>
-        {{else if (eq @model.status.state 2)}}
-        <b class="badge badge--success">
-          <Pds::Icon @type="check-plain" class="icon" />
-        </b>
-        {{else if (eq @model.status.state 3)}}
-        <b class="badge badge--error">
-          <Pds::Icon @type="alert-triangle" class="icon" />
-        </b>
-      {{/if}}
     </p>
     <small>
       <Pds::Icon @type={{icon-for-component @model.component.name}} class="icon" />
@@ -30,6 +17,15 @@
       </span>
     </small>
   </LinkTo>
+  {{#if @model.statusReport}}
+    {{#let @model.statusReport.health as |health|}}
+      <StatusBadge
+        @state={{health.healthStatus}}
+        @message={{health.healthMessage}}
+        @iconOnly={{true}}
+      />
+    {{/let}}
+  {{/if}}
   {{#if @model.preload.deployUrl}}
   <ExternalLink
     href="https://{{@model.preload.deployUrl}}"
@@ -51,21 +47,30 @@
       <Pds::Icon @type={{icon-for-component @model.component.name}} class="icon" />
       <span>
         {{#if (eq @model.status.state 1)}}
-        Started {{date-format-distance-to-now @model.status.startTime.seconds }}
+          Started {{date-format-distance-to-now @model.status.startTime.seconds }}
         {{else}}
-        {{date-format-distance-to-now @model.status.completeTime.seconds }}
+          {{date-format-distance-to-now @model.status.completeTime.seconds }}
         {{/if}}
       </span>
     </small>
+    {{#if @model.statusReport}}
+      {{#let @model.statusReport.health as |health|}}
+        <StatusBadge
+          @state={{health.healthStatus}}
+          @message={{health.healthMessage}}
+          @iconOnly={{true}}
+        />
+      {{/let}}
+    {{/if}}
   </LinkTo>
   {{#if @model.preload.deployUrl}}
-  <ExternalLink
-    href="https://{{@model.preload.deployUrl}}"
-    title="https://{{@model.preload.deployUrl}}"
-    class="button button--secondary button--compact"
-  >
-    <Pds::Icon @type="exit" class="icon" />
-  </ExternalLink>
+    <ExternalLink
+      href="https://{{@model.preload.deployUrl}}"
+      title="https://{{@model.preload.deployUrl}}"
+      class="button button--secondary button--compact"
+    >
+      <Pds::Icon @type="exit" class="icon" />
+    </ExternalLink>
   {{/if}}
 </li>
 {{/if}}
diff --git a/ui/app/components/app-item/deployment.hbs b/ui/app/components/app-item/deployment.hbs
@@ -3,11 +3,6 @@
     <p>
       <b class="badge badge--version">v{{@deployment.sequence}}</b>
       <code>{{@deployment.id}}</code>
-      {{#if (eq @deployment.state 4)}}
-        <b class="badge badge--destroyed">
-          <Pds::Icon @type="trash" class="icon" />&nbsp;Destroyed
-        </b>
-      {{/if}}
     </p>
     <small>
       <Pds::Icon @type={{icon-for-component @deployment.component.name}} class="icon" />
@@ -21,6 +16,14 @@
       </span>
     </small>
   </LinkTo>
+  {{#if @deployment.statusReport}}
+    {{#let @deployment.statusReport.health as |health|}}
+      <StatusBadge
+        @state={{health.healthStatus}}
+        @message={{health.healthMessage}}
+      />
+    {{/let}}
+  {{/if}}
   {{#if (and @deployment.preload.deployUrl (not-eq @deployment.state 4))}}
     <ExternalLink href="https://{{@deployment.preload.deployUrl}}" class="button button--secondary button--external-link">
       <span>{{lowercase @deployment.preload.deployUrl}}</span>

diff --git a/ui/app/routes/workspace/projects/project/app.ts b/ui/app/routes/workspace/projects/project/app.ts
@@ -1,7 +1,7 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 import ApiService from 'waypoint/services/api';
-import { Ref, Deployment, Build, Release, Project } from 'waypoint-pb';
+import { Ref, Deployment, Build, Release, Project, StatusReport } from 'waypoint-pb';
 import PollModelService from 'waypoint/services/poll-model';
 import ObjectProxy from '@ember/object/proxy';
 import PromiseProxyMixin from '@ember/object/promise-proxy-mixin';
@@ -16,6 +16,19 @@ export interface AppRouteModel {
   deployments: Promise<Deployment.AsObject[]>;
   releases: Promise<Release.AsObject[]>;
   builds: Promise<Build.AsObject[]>;
+  statusReports: Promise<StatusReport.AsObject[]>;
+}
+
+interface WithStatusReport {
+  statusReport: StatusReport.AsObject;
+}
+
+interface ResolvedModel {
+  application: Ref.Application.AsObject;
+  deployments: (Deployment.AsObject & WithStatusReport)[];
+  releases: (Release.AsObject & WithStatusReport)[];
+  builds: (Build.AsObject & WithStatusReport)[];
+  statusReports: StatusReport.AsObject[];
 }
 
 export default class App extends Route {
@@ -58,10 +71,35 @@ export default class App extends Route {
       builds: ObjectPromiseProxy.create({
         promise: resolve(this.api.listBuilds(wsRef, appRef)),
       }),
+      statusReports: ObjectPromiseProxy.create({
+        promise: resolve(this.api.listStatusReports(wsRef, appRef)),
+      }),
+      latestStatusReport: ObjectPromiseProxy.create({
+        promise: resolve(this.api.getLatestStatusReport(wsRef, appRef)),
+      }),
     });
   }
 
-  afterModel() {
+  afterModel(model: ResolvedModel): void {
+    injectStatusReports(model);
     this.pollModel.setup(this);
   }
 }
+
+function injectStatusReports(model: ResolvedModel): void {
+  let { deployments, releases, statusReports } = model;
+
+  for (let statusReport of statusReports) {
+    if (statusReport.deploymentId) {
+      let deployment = deployments.find((d) => d.id === statusReport.deploymentId);
+      if (deployment) {
+        deployment.statusReport = statusReport;
+      }
+    } else if (statusReport.releaseId) {
+      let release = releases.find((d) => d.id === statusReport.releaseId);
+      if (release) {
+        release.statusReport = statusReport;
+      }
+    }
+  }
+}
diff --git a/ui/app/services/api.ts b/ui/app/services/api.ts
@@ -15,6 +15,10 @@ import {
   Release,
   ListReleasesRequest,
   ListReleasesResponse,
+  StatusReport,
+  ListStatusReportsRequest,
+  ListStatusReportsResponse,
+  GetLatestStatusReportRequest,
 } from 'waypoint-pb';
 import config from 'waypoint/config/environment';
 
@@ -94,6 +98,32 @@ export default class ApiService extends Service {
 
     return resp.getReleasesList().map((d) => d.toObject());
   }
+
+  async listStatusReports(wsRef: Ref.Workspace, appRef: Ref.Application): Promise<StatusReport.AsObject[]> {
+    let req = new ListStatusReportsRequest();
+    req.setWorkspace(wsRef);
+    req.setApplication(appRef);
+
+    let order = new OperationOrder();
+    order.setDesc(true);
+    req.setOrder(order);
+
+    let resp: ListStatusReportsResponse = await this.client.listStatusReports(req, this.WithMeta());
+
+    return resp.getStatusReportsList().map((d) => d.toObject());
+  }
+
+  async getLatestStatusReport(wsRef: Ref.Workspace, appRef: Ref.Application): Promise<StatusReport|undefined>{
+    let req = new GetLatestStatusReportRequest();
+    req.setApplication(appRef);
+    // We have to try/catch to avoid failing the hash request because the api errors if no statusReport is available
+    try {
+      let resp: StatusReport = await this.client.getLatestStatusReport(req, this.WithMeta());
+      return resp.toObject();
+    } catch {
+      return;
+    }
+  }
 }
 
 // DO NOT DELETE: this is how TypeScript knows how to look up your services.

diff --git a/ui/app/styles/_app-card.scss b/ui/app/styles/_app-card.scss
@@ -105,7 +105,7 @@ li.app-card-item {
 
   .button {
     flex-grow: 0;
-    margin-left: scale.$sm-2;
+    margin-left: scale.$sm--1;
   }
 }
 
@@ -124,9 +124,14 @@ div.app-card-item {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    flex-grow: 1;
   }
 
   .button {
+    margin-left: scale.$sm--1;
+  }
+
+  .badge-status {
     margin-left: auto;
   }
 }
diff --git a/ui/app/styles/_app-item.scss b/ui/app/styles/_app-item.scss
@@ -26,7 +26,7 @@
     font-size: 1rem;
   }
 
-  &.app-item--destroyed code{
+  &.app-item--destroyed code {
     color: rgb(var(--text-muted));
   }
 
@@ -55,6 +55,11 @@
     }
   }
 
+  .badge-status {
+    margin-left: auto;
+    margin-right: scale.$lg--2;
+  }
+
   .button {
     max-width: 100%;
 

diff --git a/ui/app/templates/workspace/projects/project/app/deployment.hbs b/ui/app/templates/workspace/projects/project/app/deployment.hbs
@@ -20,7 +20,8 @@
 
 <div class="item-row">
   <div class="item">
-    {{#if (eq @model.status.state 1)}}
+    <StatusBadge @state={{@model.statusReport.resourcesHealth.0.healthStatus}}/>
+    {{!-- {{#if (eq @model.status.state 1)}}
     <b class="badge">{{t 'state.deployment.pending'}}</b>
     {{else if (eq @model.status.state 2)}}
     <b class="badge badge--success">{{t 'state.deployment.success'}}</b>
@@ -31,7 +32,7 @@
         : {{@model.status.error.message}}
       {{/if}}
     </b>
-    {{/if}}
+    {{/if}} --}}
   </div>
 
   {{#if @model.build}}

diff --git a/ui/app/templates/workspace/projects/project/app/release.hbs b/ui/app/templates/workspace/projects/project/app/release.hbs
@@ -19,7 +19,8 @@
 
 <div class="item-row">
   <div class="item">
-    {{#if (eq @model.state 1)}}
+    <StatusBadge @state={{@model.status.state}}/>
+    {{!-- {{#if (eq @model.state 1)}}
     <b class="badge">{{t 'state.release.pending'}}</b>
     {{else if (eq @model.status.state 2)}}
     <b class="badge badge--success">{{t 'state.release.success'}}</b>
@@ -30,17 +31,17 @@
         : {{@model.status.error.message}}
       {{/if}}
     </b>
-    {{/if}}
+    {{/if}} --}}
   </div>
 
   {{!-- todo(pearkes): API doesn't return this object but just a string of it, so wait for that to be fixed --}}
-  {{#if @model.deployment }}
+  {{#if @model.deploymentId }}
   <div class="item">
     <small>
       Released deployment <LinkTo @route="workspace.projects.project.app.deployment"
-        @models={{array @model.deployment.id}}>
-        <b class="badge badge--version">v{{@model.deployment.sequence}}</b>
-        <code>{{@model.deployment.id}}</code>
+        @models={{array @model.deploymentId}}>
+        {{!-- <b class="badge badge--version">v{{@model.deployment.sequence}}</b> --}}
+        <code>{{@model.deploymentId}}</code>
       </LinkTo>
     </small>
   </div>