[ui] Service job status panel

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

@@ -1,9 +1,8 @@
 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 {
@@ -12,21 +11,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,17 @@
+<div
+  class="allocation-status-block {{unless this.countToShow "rest-only"}}"
+  style={{html-safe (concat "width: " @width "%")}}
+>
+  {{#if this.countToShow}}
+    <div class="ungrouped-allocs">
+      {{#each (range 0 this.countToShow)}}
+        <span class="represented-allocation {{@status}}" />
+      {{/each}}
+    </div>
+  {{/if}}
+  {{#if this.remaining}}
+    <span class="represented-allocation rest {{@status}}">
+      {{#if this.countToShow}}+{{/if}}{{this.remaining}}
+    </span>
+  {{/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,22 @@
+{{#if this.showSummaries}}
+  <div class="alloc-status-summaries"
+    {{did-insert this.captureElement}}
+    {{window-resize this.reflow}}
+  >
+    {{#each-in @allocBlocks as |status allocs|}}
+      {{#if (gt allocs.length 0)}}
+        <JobStatus::AllocationStatusBlock @status={{status}} @count={{allocs.length}} @width={{compute (action this.calcPerc) allocs.length}} />
+      {{/if}}
+    {{/each-in}}
+  </div>
+{{else}}
+  <div class="ungrouped-allocs">
+    {{#each-in @allocBlocks as |status allocs|}}
+      {{#if (gt allocs.length 0)}}
+        {{#each (range 0 allocs.length)}}
+          <span class="represented-allocation {{status}}"></span>
+        {{/each}}
+      {{/if}}
+    {{/each-in}}
+  </div>
+{{/if}}

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

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+const UNGROUPED_ALLOCS_THRESHOLD = 50;
+
+export default class JobStatusAllocationStatusRowComponent extends Component {
+  @tracked width = 0;
+
+  get allocBlockSlots() {
+    return Object.values(this.args.allocBlocks).reduce(
+      (m, n) => m + n.length,
+      0
+    );
+  }
+
+  get showSummaries() {
+    return this.allocBlockSlots > UNGROUPED_ALLOCS_THRESHOLD;
+  }
+
+  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/panel.hbs

@@ -0,0 +1,53 @@
+<div class="job-status-panel boxed-section" data-test-job-status-panel data-test-status-mode={{this.mode}}>
+  <div class="boxed-section-head">
+    <h2>Status</h2>
+    <div class="select-mode">
+      <button type="button"
+        data-test-status-mode-current
+        class="button is-small is-borderless {{if (eq this.mode "current") "is-active"}}"
+        {{on "click" (action (mut this.mode) "current")}}
+      >
+        Current
+      </button>
+      <button type="button"
+        data-test-status-mode-historical
+        class="button is-small is-borderless {{if (eq this.mode "historical") "is-active"}}"
+        {{on "click" (action (mut this.mode) "historical")}}>
+        Historical
+      </button>
+    </div>
+  </div>
+  <div class="boxed-section-body">
+    {{#if (eq this.mode "current")}}
+      <h3 class="title is-4 running-allocs-title"><strong>{{@job.runningAllocs}}/{{this.totalAllocs}}</strong> Allocations Running</h3>
+
+      <JobStatus::AllocationStatusRow @allocBlocks={{this.allocBlocks}} />
+
+      <footer>
+        <legend>
+          {{#each this.allocTypes as |type|}}
+            <span class="legend-item {{if (eq (get (get this.allocBlocks type.label) "length") 0) "faded"}}">
+              <span class="represented-allocation {{type.label}}"></span>
+              {{get (get this.allocBlocks type.label) "length"}} {{capitalize type.label}}
+            </span>
+          {{/each}}
+        </legend>
+
+        <section class="versions">
+          <h4>Versions</h4>
+          <ul>
+            {{#each-in this.versions as |version allocs|}}
+              <li>
+                <Hds::Badge @text={{version}} />
+                <Hds::BadgeCount @text={{allocs.length}} @type="inverted" />
+              </li>
+            {{/each-in}}
+          </ul>
+        </section>
+      </footer>
+    {{/if}}
+    {{#if (eq this.mode "historical")}}
+      <JobPage::Parts::SummaryChart @job={{@job}} />
+    {{/if}}
+  </div>
+</div>

ui/app/components/job-status/panel.js

@@ -0,0 +1,81 @@
+// @ts-check
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class JobStatusPanelComponent extends Component {
+  // Build note: allocTypes order matters! We will fill up to 100% of totalAllocs in this order.
+  allocTypes = [
+    'running',
+    'pending',
+    'failed',
+    // 'unknown',
+    // 'lost',
+    // 'queued',
+    // 'complete',
+    'unplaced',
+  ].map((type) => {
+    return {
+      label: type,
+      property: `${type}Allocs`,
+    };
+  });
+
+  get allocBlocks() {
+    let availableSlotsToFill = this.totalAllocs;
+    // Only fill up to 100% of totalAllocs. Once we've filled up, we can stop counting.
+    let allocationsOfShowableType = this.allocTypes.reduce((blocks, type) => {
+      const jobAllocsOfType = this.args.job.allocations.filterBy(
+        'clientStatus',
+        type.label
+      );
+      if (availableSlotsToFill > 0) {
+        blocks[type.label] = Array(
+          Math.min(availableSlotsToFill, jobAllocsOfType.length)
+        )
+          .fill()
+          .map((_, i) => {
+            return jobAllocsOfType[i];
+          });
+        availableSlotsToFill -= blocks[type.label].length;
+      } else {
+        blocks[type.label] = [];
+      }
+      return blocks;
+    }, {});
+    if (availableSlotsToFill > 0) {
+      allocationsOfShowableType['unplaced'] = Array(availableSlotsToFill)
+        .fill()
+        .map(() => {
+          return { clientStatus: 'unplaced' };
+        });
+    }
+    return allocationsOfShowableType;
+  }
+
+  /**
+   * @type {('current'|'historical')}
+   */
+  @tracked mode = 'current'; // can be either "current" or "historical"
+
+  // TODO: eventually we will want this from a new property on a job.
+  get totalAllocs() {
+    // v----- Experimental method: Count all allocs. Good for testing but not a realistic representation of "Desired"
+    // return this.allocTypes.reduce((sum, type) => sum + this.args.job[type.property], 0);
+
+    // v----- Realistic method: Tally a job's task groups' "count" property
+    return this.args.job.taskGroups.reduce((sum, tg) => sum + tg.count, 0);
+  }
+
+  get versions() {
+    return Object.values(this.allocBlocks)
+      .flat()
+      .map((a) => (!isNaN(a?.jobVersion) ? `v${a.jobVersion}` : 'pending')) // "starting" allocs, and possibly others, do not yet have a jobVersion
+      .reduce(
+        (result, item) => ({
+          ...result,
+          [item]: [...(result[item] || []), item],
+        }),
+        []
+      );
+  }
+}

ui/app/styles/components.scss

@@ -53,3 +53,4 @@
 @import './components/authorization';
 @import './components/policies';
 @import './components/metadata-editor';
+@import './components/job-status-panel';