System Batch UI, Client Status Bar Chart and Client Tab page view

ui/app/components/client-status-bar.js

@@ -0,0 +1,80 @@
+import { computed } from '@ember/object';
+import DistributionBar from './distribution-bar';
+import classic from 'ember-classic-decorator';
+import { countBy } from 'lodash';
+
+@classic
+export default class ClientStatusBar extends DistributionBar {
+  layoutName = 'components/distribution-bar';
+
+  'data-test-client-status-bar' = true;
+  allocationContainer = null;
+  nodes = null;
+  totalNodes = null;
+
+  @computed('nodes')
+  get data() {
+    const statuses = {
+      queued: 0,
+      'not scheduled': this.totalNodes - this.nodes.length,
+      starting: 0,
+      running: 0,
+      complete: 0,
+      degraded: 0,
+      failed: 0,
+      lost: 0,
+    };
+    for (const node of this.nodes) {
+      const concatenatedAllocationStatuses = [].concat(...Object.values(node));
+      console.log(concatenatedAllocationStatuses);
+      // there is a bug that counts nodes multiple times in this part of the loop
+      for (const status of concatenatedAllocationStatuses) {
+        const val = str => str;
+        const statusCount = countBy(concatenatedAllocationStatuses, val);
+        if (Object.keys(statusCount).length === 1) {
+          if (statusCount.running > 0) {
+            statuses.running++;
+          }
+          if (statusCount.failed > 0) {
+            statuses.failed++;
+          }
+          if (statusCount.lost > 0) {
+            statuses.lost++;
+          }
+          if (statusCount.complete > 0) {
+            statuses.complete++;
+          }
+        } else if (Object.keys(statusCount).length !== 1 && !!statusCount.running) {
+          if (!!statusCount.failed || !!statusCount.lost) {
+            statuses.degraded++;
+          }
+        } else if (Object.keys(statusCount).length !== 1 && !!statusCount.pending) {
+          statuses.starting++;
+        } else {
+          statuses.queued++;
+        }
+      }
+    }
+
+    console.log('statuses\n\n', statuses);
+    return [
+      { label: 'Not Scheduled', value: statuses['not scheduled'], className: 'not-scheduled' },
+      { label: 'Queued', value: statuses.queued, className: 'queued' },
+      {
+        label: 'Starting',
+        value: statuses.starting,
+        className: 'starting',
+        layers: 2,
+      },
+      { label: 'Running', value: statuses.running, className: 'running' },
+      {
+        label: 'Complete',
+        value: statuses.complete,
+        className: 'complete',
+      },
+      { label: 'Degraded', value: statuses.degraded, className: 'degraded' },
+      { label: 'Failed', value: statuses.failed, className: 'failed' },
+      { label: 'Lost', value: statuses.lost, className: 'lost' },
+    ];
+  }
+}

ui/app/controllers/jobs/job/index.js

@@ -1,5 +1,6 @@
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
+import { computed } from '@ember/object';
 import Controller from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 import { action } from '@ember/object';
@@ -8,6 +9,29 @@ import classic from 'ember-classic-decorator';
 @classic
 export default class IndexController extends Controller.extend(WithNamespaceResetting) {
   @service system;
+  @service store;
+
+  @computed('job')
+  get uniqueNodes() {
+    // add datacenter filter
+    const allocs = this.job.allocations;
+    const nodes = allocs.mapBy('node');
+    const uniqueNodes = nodes.uniqBy('id').toArray();
+    return uniqueNodes.map(nodeId => {
+      return {
+        [nodeId.get('id')]: allocs
+          .toArray()
+          .filter(alloc => nodeId.get('id') === alloc.get('node.id'))
+          .map(alloc => alloc.getProperties('clientStatus'))
+          .map(alloc => alloc.clientStatus),
+      };
+    });
+  }
+
+  @computed('node')
+  get totalNodes() {
+    return this.store.peekAll('node').toArray().length;
+  }
 
   queryParams = [
     {

ui/app/routes/jobs/job/index.js

@@ -4,6 +4,12 @@ import { watchRecord, watchRelationship, watchAll } from 'nomad-ui/utils/propert
 import WithWatchers from 'nomad-ui/mixins/with-watchers';
 
 export default class IndexRoute extends Route.extend(WithWatchers) {
+  async model() {
+    // Optimizing future node look ups by preemptively loading everything
+    await this.store.findAll('node');
+    return this.modelFor('jobs.job');
+  }
+
   startWatchers(controller, model) {
     if (!model) {
       return;
@@ -16,6 +22,7 @@ export default class IndexRoute extends Route.extend(WithWatchers) {
       latestDeployment:
         model.get('supportsDeployments') && this.watchLatestDeployment.perform(model),
       list: model.get('hasChildren') && this.watchAll.perform(),
+      nodes: /*model.type === 'sysbatch' && */ this.watchNodes.perform(),
     });
   }
 
@@ -33,6 +40,7 @@ export default class IndexRoute extends Route.extend(WithWatchers) {
 
   @watchRecord('job') watch;
   @watchAll('job') watchAll;
+  @watchAll('node') watchNodes;
   @watchRecord('job-summary') watchSummary;
   @watchRelationship('allocations') watchAllocations;
   @watchRelationship('evaluations') watchEvaluations;
@@ -41,6 +49,7 @@ export default class IndexRoute extends Route.extend(WithWatchers) {
   @collect(
     'watch',
     'watchAll',
+    'watchNodes',
     'watchSummary',
     'watchAllocations',
     'watchEvaluations',

ui/app/styles/charts/colors.scss

@@ -4,6 +4,8 @@ $running: $primary;
 $complete: $nomad-green-dark;
 $failed: $danger;
 $lost: $dark;
+$not-scheduled: $grey-darker;
+$degraded: $warning;
 
 .chart {
   .queued {
@@ -37,6 +39,14 @@ $lost: $dark;
   .lost {
     fill: $lost;
   }
+
+  .not-scheduled {
+    fill: $not-scheduled;
+  }
+
+  .degraded {
+    fill: $degraded;
+  }
 }
 
 .color-swatch {
@@ -102,6 +112,14 @@ $lost: $dark;
     background: $lost;
   }
 
+  &.not-scheduled {
+    fill: $not-scheduled;
+  }
+
+  &.degraded {
+    fill: $degraded;
+  }
+
   @each $name, $pair in $colors {
     $color: nth($pair, 1);
 

ui/app/templates/components/job-page/parts/summary.hbs

@@ -1,4 +1,62 @@
 <ListAccordion data-test-job-summary @source={{array this.job}} @key="id" @startExpanded={{this.isExpanded}} @onToggle={{action this.persist}} as |a|>
+  <a.head @buttonLabel={{if a.isOpen "collapse" "expand"}}>
+    <div class="columns">
+      <div class="column is-minimum nowrap">
+        {{#if a.item.hasChildren}}
+          Children Status
+          <span class="badge {{if a.isOpen "is-white" "is-light"}}">
+            {{a.item.summary.totalChildren}}
+          </span>
+        {{else}}
+          Client Status
+          <span class="badge {{if a.isOpen "is-white" "is-light"}}">
+            {{a.item.summary.totalAllocs}}
+          </span>
+        {{/if}}
+      </div>
+
+      {{#unless a.isOpen}}
+        <div class="column">
+          <div class="inline-chart bumper-left">
+            {{#if a.item.hasChildren}}
+              {{#if (gt a.item.totalChildren 0)}}
+                <ChildrenStatusBar @job={{a.item}} @isNarrow={{true}} />
+              {{else}}
+                <em class="is-faded">No Children</em>
+              {{/if}}
+            {{else}}
+              <ClientStatusBar @nodes={{this.nodes}} @allocationContainer={{a.item}} @isNarrow={{true}} />
+            {{/if}}
+          </div>
+        </div>
+      {{/unless}}
+    </div>
+  </a.head>
+  <a.body>
+    {{#component (if a.item.hasChildren "children-status-bar" "client-status-bar")
+    allocationContainer=a.item.summary
+    job=a.item.summary
+    nodes=this.nodes
+    totalNodes=this.totalNodes
+    class="split-view" as |chart|}}
+    <ol data-test-legend class="legend">
+      {{#each chart.data as |datum index|}}
+        <li class="{{datum.className}} {{if (eq datum.label chart.activeDatum.label) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
+          <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
+          <span class="value" data-test-legend-value="{{datum.className}}">{{datum.value}}</span>
+          <span class="label">
+            {{datum.label}}
+          </span>
+        </li>
+      {{/each}}
+    </ol>
+  {{/component}}
+  </a.body>
+</ListAccordion>
+
+<br/>
+
+<ListAccordion data-test-job-summary @source={{array this.job}} @key="id" @startExpanded={{false}} @onToggle={{action this.persist}} as |a|>
   <a.head @buttonLabel={{if a.isOpen "collapse" "expand"}}>
     <div class="columns">
       <div class="column is-minimum nowrap">

ui/app/templates/components/job-page/service.hbs

@@ -19,7 +19,7 @@
     {{/each}}
   {{/if}}
 
-  <JobPage::Parts::Summary @job={{this.job}} />
+  <JobPage::Parts::Summary @job={{this.job}} @totalNodes={{this.totalNodes}} @nodes={{this.nodes}} />
 
   <JobPage::Parts::PlacementFailures @job={{this.job}} />
 

ui/app/templates/components/job-page/system.hbs

@@ -19,7 +19,7 @@
     {{/each}}
   {{/if}}
 
-  <JobPage::Parts::Summary @job={{this.job}} />
+  <JobPage::Parts::Summary @job={{this.job}} @nodes={{this.nodes}} />
 
   <JobPage::Parts::PlacementFailures @job={{this.job}} />
 

ui/app/templates/jobs/job/index.hbs

@@ -1,6 +1,8 @@
 {{page-title "Job " this.model.name}}
 {{component (concat "job-page/" this.model.templateType)
   job=this.model
+  nodes=this.uniqueNodes
+  totalNodes=this.totalNodes
   sortProperty=this.sortProperty
   sortDescending=this.sortDescending
   currentPage=this.currentPage