[ui, feature] Job Page Redesign

.changelog/16932.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Job status and deployment redesign
+```

ui/app/components/conditional-link-to.hbs

@@ -0,0 +1,9 @@
+{{#if @condition}}
+  <LinkTo @route={{@route}} @model={{@model}} @query={{this.query}} class={{@class}} aria-label={{@label}}>
+    {{yield}}
+  </LinkTo>
+{{else}}
+  <span class={{@class}}>
+    {{yield}}
+  </span>
+{{/if}}

ui/app/components/conditional-link-to.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class ConditionalLinkToComponent extends Component {
+  get query() {
+    return this.args.query || {};
+  }
+}

ui/app/components/job-page/parts/summary-chart.js

@@ -0,0 +1,24 @@
+// @ts-check
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { camelize } from '@ember/string';
+import { inject as service } from '@ember/service';
+
+export default class JobPagePartsSummaryChartComponent extends Component {
+  @service router;
+
+  @action
+  gotoAllocations(status) {
+    this.router.transitionTo('jobs.job.allocations', this.args.job, {
+      queryParams: {
+        status: JSON.stringify(status),
+        namespace: this.args.job.get('namespace.name'),
+      },
+    });
+  }
+
+  @action
+  onSliceClick(ev, slice) {
+    this.gotoAllocations([camelize(slice.label)]);
+  }
+}

ui/app/components/job-page/parts/summary.js

@@ -4,11 +4,10 @@
  */
 
 import Component from '@ember/component';
-import { action, computed } from '@ember/object';
+import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { classNames } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
-import { camelize } from '@ember/string';
 @classic
 @classNames('boxed-section')
 export default class Summary extends Component {
@@ -17,21 +16,6 @@ export default class Summary extends Component {
   job = null;
   forceCollapsed = false;
 
-  @action
-  gotoAllocations(status) {
-    this.router.transitionTo('jobs.job.allocations', this.job, {
-      queryParams: {
-        status: JSON.stringify(status),
-        namespace: this.job.get('namespace.name'),
-      },
-    });
-  }
-
-  @action
-  onSliceClick(ev, slice) {
-    this.gotoAllocations([camelize(slice.label)]);
-  }
-
   @computed('forceCollapsed')
   get isExpanded() {
     if (this.forceCollapsed) return false;

ui/app/components/job-status/allocation-status-block.hbs

@@ -0,0 +1,58 @@
+<div
+  class="allocation-status-block {{unless this.countToShow "rest-only"}}"
+  style={{html-safe (concat "width: " @width "px")}}
+>
+  {{#if this.countToShow}}
+    <div class="ungrouped-allocs">
+      {{#each (range 0 this.countToShow) as |i|}}
+        <ConditionalLinkTo
+          @condition={{not (eq @status "unplaced")}}
+          @route="allocations.allocation"
+          @model={{get @allocs i}}
+          @class="represented-allocation {{@status}} {{@health}} {{@canary}}"
+          @label="View allocation"
+        >
+          {{#if (and (eq @status "running") (not @steady))}}
+            {{#if (eq @canary "canary")}}
+              <span class="alloc-canary-indicator" />
+            {{/if}}
+            <span class="alloc-health-indicator">
+              {{#if (eq @health "healthy")}}
+                <FlightIcon @name="check" @color="white" />
+              {{else}}
+                <FlightIcon @name="running" @color="white" />
+              {{/if}}
+            </span>
+          {{/if}}
+        </ConditionalLinkTo>
+      {{/each}}
+    </div>
+  {{/if}}
+  {{#if this.remaining}}
+
+    <ConditionalLinkTo
+      @condition={{not (eq @status "unplaced")}}
+      @route="jobs.job.allocations"
+      @model={{@allocs.0.job}}
+      @query={{hash status=(concat '["' @status '"]') version=(concat '[' @allocs.0.jobVersion ']')}}
+      @class="represented-allocation rest {{@status}} {{@health}} {{@canary}}"
+      @label="View all {{@status}} allocations"
+    >
+      <span class="rest-count">{{#if this.countToShow}}+{{/if}}{{this.remaining}}</span>
+      {{#unless @steady}}
+        {{#if (eq @canary "canary")}}
+          <span class="alloc-canary-indicator" />
+        {{/if}}
+        {{#if (eq @status "running")}}
+          <span class="alloc-health-indicator">
+            {{#if (eq @health "healthy")}}
+              <FlightIcon @name="check" @color="#25ba81" />
+            {{else}}
+              <FlightIcon @name="running" @color="black" />
+            {{/if}}
+          </span>
+        {{/if}}
+      {{/unless}}
+    </ConditionalLinkTo>
+  {{/if}}
+</div>

ui/app/components/job-status/allocation-status-block.js

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+
+export default class JobStatusAllocationStatusBlockComponent extends Component {
+  get countToShow() {
+    const restWidth = 50;
+    const restGap = 10;
+    let cts = Math.floor((this.args.width - (restWidth + restGap)) / 42);
+    // Either show 3+ or show only a single/remaining box
+    return cts > 3 ? cts : 0;
+  }
+
+  get remaining() {
+    return this.args.count - this.countToShow;
+  }
+}

ui/app/components/job-status/allocation-status-row.hbs

@@ -0,0 +1,64 @@
+<div class="allocation-status-row">
+  {{#if this.showSummaries}}
+    <div class="alloc-status-summaries"
+      {{did-insert this.captureElement}}
+      {{window-resize this.reflow}}
+    >
+      {{#each-in @allocBlocks as |status allocsByStatus|}}
+        {{#each-in allocsByStatus as |health allocsByHealth|}}
+          {{#each-in allocsByHealth as |canary allocsByCanary|}}
+            {{#if (gt allocsByCanary.length 0)}}
+              <JobStatus::AllocationStatusBlock
+                @status={{status}}
+                @health={{health}}
+                @canary={{canary}}
+                @steady={{@steady}}
+                @count={{allocsByCanary.length}}
+                @width={{compute (action this.calcPerc) allocsByCanary.length}}
+                @allocs={{allocsByCanary}} />
+            {{/if}}
+          {{/each-in}}
+        {{/each-in}}
+      {{/each-in}}
+    </div>
+  {{else}}
+    <div class="ungrouped-allocs"
+      {{did-insert this.captureElement}}
+      {{window-resize this.reflow}}
+    >
+      {{#each-in @allocBlocks as |status allocsByStatus|}}
+        {{#each-in allocsByStatus as |health allocsByHealth|}}
+          {{#each-in allocsByHealth as |canary allocsByCanary|}}
+            {{#if (gt allocsByCanary.length 0)}}
+              {{#each (range 0 allocsByCanary.length) as |i|}}
+                <ConditionalLinkTo
+                  @condition={{not (eq status "unplaced")}}
+                  @route="allocations.allocation"
+                  @model={{get allocsByCanary i}}
+                  @class="represented-allocation {{status}} {{health}} {{canary}}"
+                  @label="View allocation"
+                >
+                  {{#unless @steady}}
+                    {{#if (eq canary "canary")}}
+                      <span class="alloc-canary-indicator" />
+                    {{/if}}
+                    {{#if (eq status "running")}}
+                      <span class="alloc-health-indicator">
+                        {{#if (eq health "healthy")}}
+                          <FlightIcon @name="check" @color="white" />
+                        {{else}}
+                          <FlightIcon @name="running" @color="white" />
+                        {{/if}}
+                      </span>
+                    {{/if}}
+                  {{/unless}}
+                </ConditionalLinkTo>
+              {{/each}}
+            {{/if}}
+          {{/each-in}}
+        {{/each-in}}
+      {{/each-in}}
+    </div>
+  {{/if}}
+</div>
+

ui/app/components/job-status/allocation-status-row.js

@@ -0,0 +1,43 @@
+// @ts-check
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+const ALLOC_BLOCK_WIDTH = 32;
+const ALLOC_BLOCK_GAP = 10;
+
+export default class JobStatusAllocationStatusRowComponent extends Component {
+  @tracked width = 0;
+
+  get allocBlockSlots() {
+    return Object.values(this.args.allocBlocks)
+      .flatMap((statusObj) => Object.values(statusObj))
+      .flatMap((healthObj) => Object.values(healthObj))
+      .reduce(
+        (totalSlots, allocsByCanary) =>
+          totalSlots + (allocsByCanary ? allocsByCanary.length : 0),
+        0
+      );
+  }
+
+  get showSummaries() {
+    return (
+      this.allocBlockSlots * (ALLOC_BLOCK_WIDTH + ALLOC_BLOCK_GAP) -
+        ALLOC_BLOCK_GAP >
+      this.width
+    );
+  }
+
+  calcPerc(count) {
+    return (count / this.allocBlockSlots) * this.width;
+  }
+
+  @action reflow(element) {
+    this.width = element.clientWidth;
+  }
+
+  @action
+  captureElement(element) {
+    this.width = element.clientWidth;
+  }
+}

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

@@ -0,0 +1,53 @@
+<div class="deployment-history">
+  <header>
+    <h4 class="title is-5">Deployment History</h4>
+    <SearchBox
+      data-test-history-search
+      @searchTerm={{mut this.searchTerm}}
+      @placeholder="Search events..."
+    />
+  </header>
+  <ol class="timeline">
+    {{#each this.history as |deployment-log|}}
+      <li class="timeline-object {{if (eq deployment-log.exitCode 1) "error"}}">
+        <div class="boxed-section-head is-light">
+          <LinkTo @route="allocations.allocation" @model={{deployment-log.state.allocation}} class="allocation-reference">{{deployment-log.state.allocation.shortId}}</LinkTo>
+          <span><strong>{{deployment-log.type}}:</strong> {{deployment-log.message}}</span>
+          <span class="pull-right">
+            {{format-ts deployment-log.time}}
+          </span>
+        </div>
+      </li>
+    {{else}}
+      {{#if this.errorState}}
+        <li class="timeline-object">
+          <div class="boxed-section-head is-light">
+            <span>Error loading deployment history</span>
+          </div>
+        </li>
+      {{else}}
+        {{#if this.deploymentAllocations.length}}
+          {{#if this.searchTerm}}
+            <li class="timeline-object" data-test-history-search-no-match>
+              <div class="boxed-section-head is-light">
+                <span>No events match {{this.searchTerm}}</span>
+              </div>
+            </li>
+          {{else}}
+            <li class="timeline-object">
+              <div class="boxed-section-head is-light">
+                <span>No deployment events yet</span>
+              </div>
+            </li>
+          {{/if}}
+        {{else}}
+          <li class="timeline-object">
+            <div class="boxed-section-head is-light">
+              <span>Loading deployment events</span>
+            </div>
+          </li>
+        {{/if}}
+      {{/if}}
+    {{/each}}
+  </ol>
+</div>