Merge pull request #4727 from hashicorp/f-ui-improved-stats-charts

UI: Improved stats charts

ui/app/components/allocation-row.js

@@ -2,12 +2,15 @@ import Ember from 'ember';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { alias } from '@ember/object/computed';
 import { run } from '@ember/runloop';
-import { lazyClick } from '../helpers/lazy-click';
 import { task, timeout } from 'ember-concurrency';
+import { lazyClick } from '../helpers/lazy-click';
+import AllocationStatsTracker from 'nomad-ui/utils/classes/allocation-stats-tracker';
 
 export default Component.extend({
   store: service(),
+  token: service(),
 
   tagName: 'tr',
 
@@ -18,14 +21,21 @@ export default Component.extend({
   // Used to determine whether the row should mention the node or the job
   context: null,
 
-  backoffSequence: computed(() => [500, 800, 1300, 2100, 3400, 5500]),
-
   // Internal state
-  stats: null,
   statsError: false,
 
   enablePolling: computed(() => !Ember.testing),
 
+  stats: computed('allocation', function() {
+    return AllocationStatsTracker.create({
+      fetch: url => this.get('token').authorizedRequest(url),
+      allocation: this.get('allocation'),
+    });
+  }),
+
+  cpu: alias('stats.cpu.lastObject'),
+  memory: alias('stats.memory.lastObject'),
+
   onClick() {},
 
   click(event) {
@@ -39,31 +49,26 @@ export default Component.extend({
       run.scheduleOnce('afterRender', this, qualifyAllocation);
     } else {
       this.get('fetchStats').cancelAll();
-      this.set('stats', null);
     }
   },
 
-  fetchStats: task(function*(allocation) {
-    const backoffSequence = this.get('backoffSequence').slice();
-    const maxTiming = backoffSequence.pop();
-
+  fetchStats: task(function*() {
     do {
       try {
-        const stats = yield allocation.fetchStats();
-        this.set('stats', stats);
+        yield this.get('stats.poll').perform();
         this.set('statsError', false);
       } catch (error) {
         this.set('statsError', true);
       }
-      yield timeout(backoffSequence.shift() || maxTiming);
+      yield timeout(500);
     } while (this.get('enablePolling'));
   }).drop(),
 });
 
 function qualifyAllocation() {
   const allocation = this.get('allocation');
   return allocation.reload().then(() => {
-    this.get('fetchStats').perform(allocation);
+    this.get('fetchStats').perform();
 
     // Make sure that the job record in the store for this allocation
     // is complete and not a partial from the list endpoint

ui/app/components/freestyle/sg-line-chart.js

@@ -0,0 +1,76 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import d3TimeFormat from 'd3-time-format';
+
+export default Component.extend({
+  timerTicks: 0,
+
+  startTimer: function() {
+    this.set(
+      'timer',
+      setInterval(() => {
+        this.incrementProperty('timerTicks');
+
+        const ref = this.get('lineChartLive');
+        ref.addObject({ ts: Date.now(), val: Math.random() * 30 + 20 });
+        if (ref.length > 60) {
+          ref.splice(0, ref.length - 60);
+        }
+      }, 500)
+    );
+  }.on('init'),
+
+  willDestroy() {
+    clearInterval(this.get('timer'));
+  },
+
+  lineChartData: computed(() => {
+    return [
+      { year: 2010, value: 10 },
+      { year: 2011, value: 10 },
+      { year: 2012, value: 20 },
+      { year: 2013, value: 30 },
+      { year: 2014, value: 50 },
+      { year: 2015, value: 80 },
+      { year: 2016, value: 130 },
+      { year: 2017, value: 210 },
+      { year: 2018, value: 340 },
+    ];
+  }),
+
+  lineChartMild: computed(() => {
+    return [
+      { year: 2010, value: 100 },
+      { year: 2011, value: 90 },
+      { year: 2012, value: 120 },
+      { year: 2013, value: 130 },
+      { year: 2014, value: 115 },
+      { year: 2015, value: 105 },
+      { year: 2016, value: 90 },
+      { year: 2017, value: 85 },
+      { year: 2018, value: 90 },
+    ];
+  }),
+
+  lineChartGapData: computed(() => {
+    return [
+      { year: 2010, value: 10 },
+      { year: 2011, value: 10 },
+      { year: 2012, value: null },
+      { year: 2013, value: 30 },
+      { year: 2014, value: 50 },
+      { year: 2015, value: 80 },
+      { year: 2016, value: null },
+      { year: 2017, value: 210 },
+      { year: 2018, value: 340 },
+    ];
+  }),
+
+  lineChartLive: computed(() => {
+    return [];
+  }),
+
+  secondsFormat() {
+    return d3TimeFormat.timeFormat('%H:%M:%S');
+  },
+});

ui/app/components/freestyle/sg-stats-time-series.js

@@ -0,0 +1,76 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import d3TimeFormat from 'd3-time-format';
+import moment from 'moment';
+
+export default Component.extend({
+  timerTicks: 0,
+
+  startTimer: function() {
+    this.set(
+      'timer',
+      setInterval(() => {
+        const metricsHigh = this.get('metricsHigh');
+        const prev = metricsHigh.length ? metricsHigh[metricsHigh.length - 1].value : 0.9;
+        this.appendTSValue(
+          metricsHigh,
+          Math.min(Math.max(prev + Math.random() * 0.05 - 0.025, 0.5), 1)
+        );
+
+        const metricsLow = this.get('metricsLow');
+        const prev2 = metricsLow.length ? metricsLow[metricsLow.length - 1].value : 0.1;
+        this.appendTSValue(
+          metricsLow,
+          Math.min(Math.max(prev2 + Math.random() * 0.05 - 0.025, 0), 0.5)
+        );
+      }, 1000)
+    );
+  }.on('init'),
+
+  appendTSValue(array, value, maxLength = 300) {
+    array.addObject({
+      timestamp: Date.now(),
+      value,
+    });
+
+    if (array.length > maxLength) {
+      array.splice(0, array.length - maxLength);
+    }
+  },
+
+  willDestroy() {
+    clearInterval(this.get('timer'));
+  },
+
+  metricsHigh: computed(() => {
+    return [];
+  }),
+
+  metricsLow: computed(() => {
+    return [];
+  }),
+
+  staticMetrics: computed(() => {
+    const ts = offset =>
+      moment()
+        .subtract(offset, 'm')
+        .toDate();
+    return [
+      { timestamp: ts(20), value: 0.5 },
+      { timestamp: ts(18), value: 0.5 },
+      { timestamp: ts(16), value: 0.4 },
+      { timestamp: ts(14), value: 0.3 },
+      { timestamp: ts(12), value: 0.9 },
+      { timestamp: ts(10), value: 0.3 },
+      { timestamp: ts(8), value: 0.3 },
+      { timestamp: ts(6), value: 0.4 },
+      { timestamp: ts(4), value: 0.5 },
+      { timestamp: ts(2), value: 0.6 },
+      { timestamp: ts(0), value: 0.6 },
+    ];
+  }),
+
+  secondsFormat() {
+    return d3TimeFormat.timeFormat('%H:%M:%S');
+  },
+});