[ui, deployments] Show a "Latest Deployment Status" cell within the Job Status panel on steady service jobs

ui/app/components/job-status/failed-or-lost.hbs

@@ -1,36 +1,41 @@
 <section class="failed-or-lost">
-  <h4>
-    {{@title}}
-    <span
-      class="tooltip multiline text-center"
-      role="tooltip"
-      aria-label={{@description}}
-    >
-      <FlightIcon @name="info" />
-    </span>
-  </h4>
-  {{#if (eq @title "Rescheduled")}}
+  <h4>Replaced Allocations</h4>
+  {{#if @supportsRescheduling}}
     <ConditionalLinkTo
-      @condition={{this.shouldLinkToAllocations}}
+      @condition={{@rescheduledAllocs.length}}
       @route="jobs.job.allocations"
       @model={{@job}}
       @query={{hash scheduling='["has-been-rescheduled"]' version=(concat '[' @job.latestDeployment.versionNumber ']')}}
       @label="View Allocations"
       @class="failed-or-lost-link"
     >
-      {{@allocs.length}}
+      <span
+        class="tooltip multiline text-center"
+        role="tooltip"
+        aria-label="Allocations that have been rescheduled, on another node if possible, due to failure"
+      >
+        <FlightIcon @name="info" />
+      </span>
+      {{@rescheduledAllocs.length}} Rescheduled
     </ConditionalLinkTo>
   {{/if}}
-  {{#if (eq @title "Restarted")}}
-    <ConditionalLinkTo
-      @condition={{this.shouldLinkToAllocations}}
-      @route="jobs.job.allocations"
-      @model={{@job}}
-      @query={{hash scheduling='["has-been-restarted"]' version=(concat '[' @job.latestDeployment.versionNumber ']')}}
-      @label="View Allocations"
-      @class="failed-or-lost-link"
+
+  <ConditionalLinkTo
+    @condition={{@restartedAllocs.length}}
+    @route="jobs.job.allocations"
+    @model={{@job}}
+    @query={{hash scheduling='["has-been-restarted"]' version=(concat '[' @job.latestDeployment.versionNumber ']')}}
+    @label="View Allocations"
+    @class="failed-or-lost-link"
+  >
+    <span
+      class="tooltip multiline text-center"
+      role="tooltip"
+      aria-label="Allocations that have been restarted in-place due to a task failure"
     >
-      {{@allocs.length}}
-    </ConditionalLinkTo>
-  {{/if}}
+      <FlightIcon @name="info" />
+    </span>
+    {{@restartedAllocs.length}} Restarted
+  </ConditionalLinkTo>
+
 </section>

ui/app/components/job-status/latest-deployment.hbs

@@ -0,0 +1,10 @@
+<section class="latest-deployment">
+  <LinkTo @route="jobs.job.deployments" @model={{@job}}>
+    <h4>
+      Latest Deployment
+      <FlightIcon @name="arrow-right" />
+    </h4>
+  </LinkTo>
+  <Hds::Badge @text={{this.status}} @size="small" @color={{this.statusColor}} @type="filled" />
+  <p>{{this.healthyAllocs}}/{{this.desiredTotal}} healthy</p>
+</section>

ui/app/components/job-status/latest-deployment.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import { alias } from '@ember/object/computed';
+
+export default class JobStatusLatestDeploymentComponent extends Component {
+  @alias('args.job.latestDeployment') deployment;
+  @alias('deployment.status') status;
+
+  get healthyAllocs() {
+    return this.deployment
+      .get('taskGroupSummaries')
+      .mapBy('healthyAllocs')
+      .reduce((sum, count) => sum + count, 0);
+  }
+  get desiredTotal() {
+    return this.deployment
+      .get('taskGroupSummaries')
+      .mapBy('desiredTotal')
+      .reduce((sum, count) => sum + count, 0);
+  }
+
+  get statusColor() {
+    switch (this.status) {
+      case 'successful':
+        return 'success';
+      case 'failed':
+        return 'critical';
+      default:
+        return 'neutral';
+    }
+  }
+}

ui/app/components/job-status/panel/steady.hbs

@@ -41,7 +41,7 @@
       </h3>
       <JobStatus::AllocationStatusRow @allocBlocks={{this.allocBlocks}} @steady={{true}} />
 
-      <div class="legend-and-summary">
+      <div class="legend-and-summary {{if @job.latestDeployment "has-latest-deployment"}}">
         <legend>
           {{#each this.allocTypes as |type|}}
             <ConditionalLinkTo
@@ -58,20 +58,12 @@
           {{/each}}
         </legend>
 
-        {{#if this.supportsRescheduling}}
-          <JobStatus::FailedOrLost
-            @allocs={{this.rescheduledAllocs}}
-            @job={{@job}}
-            @title="Rescheduled"
-            @description="Allocations that have been rescheduled, on another node if possible, due to failure"
-          />
-        {{/if}}
 
         <JobStatus::FailedOrLost
-          @allocs={{this.restartedAllocs}}
+          @rescheduledAllocs={{this.rescheduledAllocs}}
+          @restartedAllocs={{this.restartedAllocs}}
           @job={{@job}}
-          @title="Restarted"
-          @description="Allocations that have been restarted in-place due to a task failure"
+          @supportsRescheduling={{this.supportsRescheduling}}
         />
 
         <section class="versions">
@@ -92,6 +84,10 @@
           </ul>
         </section>
 
+        {{#if @job.latestDeployment}}
+          <JobStatus::LatestDeployment @job={{@job}} />
+        {{/if}}
+
       </div>
 
       <div class="history-and-params">

ui/app/styles/components/job-status-panel.scss

@@ -49,7 +49,10 @@
     // TODO: may revisit this grid-area later, but is currently used in 2 competing ways
     display: grid;
     gap: 0.5rem;
-    grid-template-columns: 55% 15% 15% 15%;
+    grid-template-columns: 50% 25% 25%;
+    &.has-latest-deployment {
+      grid-template-columns: 50% 15% 15% 20%;
+    }
 
     & > section > h4,
     & > legend > h4 {
@@ -76,12 +79,23 @@
         }
       }
     }
+    .latest-deployment {
+      border-left: 1px solid $grey-blue;
+      padding: 0 0.5rem;
+      h4 svg {
+        position: relative;
+        top: 3px;
+      }
+    }
 
     .failed-or-lost {
       .failed-or-lost-link {
         display: block;
-        font-size: 1.5rem;
-        font-weight: bold;
+        line-height: 100%;
+        margin-bottom: 3px;
+        .tooltip {
+          top: 3px;
+        }
       }
     }
   }