Refactored multi-series allocation variant of the primary metric component

ui/app/components/primary-metric/allocation.hbs

@@ -0,0 +1,42 @@
+<div class="primary-metric" ...attributes
+  {{did-insert this.start}}
+  {{did-update this.start}}>
+  <h4 data-test-primary-metric-title class="title is-5">
+    {{#if (eq this.metric "cpu")}} CPU
+    {{else if (eq this.metric "memory")}} Memory
+    {{else}} {{this.metric}} {{/if}}
+  </h4>
+  <div class="primary-graphic">
+    <StatsTimeSeries @data={{this.series}} @dataProp="data" @useDefaults={{false}}>
+      <:svg as |c|>
+        {{#each (reverse this.series) as |series idx|}}
+          <c.Area @data={{series.data}} @colorScale={{this.colorScale}} @index={{idx}} />
+        {{/each}}
+      </:svg>
+      <:after as |c|>
+        <c.Tooltip class="is-snappy" as |series datum idx|>
+          <li>
+            <span class="label"><span class="color-swatch swatch-{{this.colorScale}} swatch-{{this.colorScale}}-{{idx}}" />{{series.name}}</span>
+            {{#if (eq this.metric "cpu")}}
+              <span class="value">{{datum.datum.used}} MHz</span>
+            {{else if (eq this.metric "memory")}}
+              <span class="value">{{format-bytes datum.datum.used}}</span>
+            {{else}}
+              <span class="value">{{datum.formatttedY}}</span>
+            {{/if}}
+          </li>
+        </c.Tooltip>
+      </:after>
+    </StatsTimeSeries>
+  </div>
+  <PrimaryMetric::CurrentValue @chartClass={{this.chartClass}} @percent={{this.data.lastObject.percent}} />
+  <div class="annotation" data-test-absolute-value>
+    {{#if (eq this.metric "cpu")}}
+      <strong>{{this.data.lastObject.used}} MHz</strong> / {{this.reservedAmount}} MHz Total
+    {{else if (eq this.metric "memory")}}
+      <strong>{{format-bytes this.data.lastObject.used}}</strong> / {{this.reservedAmount}} MiB Total
+    {{else}}
+      <strong>{{this.data.lastObject.used}}</strong> / {{this.reservedAmount}} Total
+    {{/if}}
+  </div>
+</div>

ui/app/components/primary-metric/allocation.js

@@ -0,0 +1,75 @@
+import Ember from 'ember';
+import Component from '@glimmer/component';
+import { task, timeout } from 'ember-concurrency';
+import { assert } from '@ember/debug';
+import { inject as service } from '@ember/service';
+import { action, get } from '@ember/object';
+
+export default class NodePrimaryMetric extends Component {
+  @service token;
+  @service('stats-trackers-registry') statsTrackersRegistry;
+
+  /** Args
+    allocation = null;
+    metric null; (one of 'cpu' or 'memory'
+  */
+
+  get metric() {
+    assert('metric is a required argument', this.args.metric);
+    return this.args.metric;
+  }
+
+  get tracker() {
+    return this.statsTrackersRegistry.getTracker(this.args.allocation);
+  }
+
+  get data() {
+    if (!this.tracker) return [];
+    return get(this, `tracker.${this.metric}`);
+  }
+
+  get series() {
+    const ret = this.tracker.tasks
+      .map(task => ({
+        name: task.task,
+        data: task[this.metric],
+      }))
+      .reverse();
+
+    return ret;
+  }
+
+  get reservedAmount() {
+    return this.metric === 'cpu' ? this.tracker.reservedCPU : this.tracker.reservedMemory;
+  }
+
+  get chartClass() {
+    if (this.metric === 'cpu') return 'is-info';
+    if (this.metric === 'memory') return 'is-danger';
+    return 'is-primary';
+  }
+
+  get colorScale() {
+    if (this.metric === 'cpu') return 'blues';
+    if (this.metric === 'memory') return 'reds';
+    return 'ordinal';
+  }
+
+  @task(function*() {
+    do {
+      this.tracker.poll.perform();
+      yield timeout(100);
+    } while (!Ember.testing);
+  })
+  poller;
+
+  @action
+  start() {
+    if (this.tracker) this.poller.perform();
+  }
+
+  willDestroy() {
+    this.poller.cancelAll();
+    this.tracker.signalPause.perform();
+  }
+}