From 9277ecd2b766479097ec66d27ac6f5f98839e54e Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Mon, 22 Feb 2021 17:47:18 -0800
Subject: [PATCH] Convert ScaleEventsChart into a glimmer component

---
 ui/app/components/scale-events-chart.js       | 25 ++++++++-----------
 .../components/scale-events-chart-test.js     | 10 ++++----
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/ui/app/components/scale-events-chart.js b/ui/app/components/scale-events-chart.js
index dadcc821c..f45509319 100644
--- a/ui/app/components/scale-events-chart.js
+++ b/ui/app/components/scale-events-chart.js
@@ -1,19 +1,17 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { get } from '@ember/object';
 import { copy } from 'ember-copy';
-import { computed, get } from '@ember/object';
-import { tagName } from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
 
-@classic
-@tagName('')
 export default class ScaleEventsChart extends Component {
-  events = [];
+  /** Args
+    events = []
+  */
 
-  activeEvent = null;
+  @tracked activeEvent = null;
 
-  @computed('annotations', 'events.[]')
   get data() {
-    const data = this.events.filterBy('hasCount').sortBy('time');
+    const data = this.args.events.filterBy('hasCount').sortBy('time');
 
     // Extend the domain of the chart to the current time
     data.push({
@@ -33,9 +31,8 @@ export default class ScaleEventsChart extends Component {
     return data;
   }
 
-  @computed('events.[]')
   get annotations() {
-    return this.events.rejectBy('hasCount').map(ev => ({
+    return this.args.events.rejectBy('hasCount').map(ev => ({
       type: ev.error ? 'error' : 'info',
       time: ev.time,
       event: copy(ev),
@@ -46,11 +43,11 @@ export default class ScaleEventsChart extends Component {
     if (this.activeEvent && get(this.activeEvent, 'event.uid') === get(ev, 'event.uid')) {
       this.closeEventDetails();
     } else {
-      this.set('activeEvent', ev);
+      this.activeEvent = ev;
     }
   }
 
   closeEventDetails() {
-    this.set('activeEvent', null);
+    this.activeEvent = null;
   }
 }
diff --git a/ui/tests/unit/components/scale-events-chart-test.js b/ui/tests/unit/components/scale-events-chart-test.js
index e52b23e33..e0b55c952 100644
--- a/ui/tests/unit/components/scale-events-chart-test.js
+++ b/ui/tests/unit/components/scale-events-chart-test.js
@@ -1,9 +1,11 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'ember-qunit';
 import sinon from 'sinon';
+import setupGlimmerComponentFactory from 'nomad-ui/tests/helpers/glimmer-factory';
 
 module('Unit | Component | scale-events-chart', function(hooks) {
   setupTest(hooks);
+  setupGlimmerComponentFactory(hooks, 'scale-events-chart');
 
   hooks.beforeEach(function() {
     this.refTime = new Date();
@@ -16,13 +18,12 @@ module('Unit | Component | scale-events-chart', function(hooks) {
   });
 
   test('the current date is appended as a datum for the line chart to render', function(assert) {
-    const chart = this.owner.factoryFor('component:scale-events-chart').create();
     const events = [
       { time: new Date('2020-08-02T04:06:00'), count: 2, hasCount: true },
       { time: new Date('2020-08-01T04:06:00'), count: 2, hasCount: true },
     ];
 
-    chart.set('events', events);
+    const chart = this.createComponent({ events });
 
     assert.equal(chart.data.length, events.length + 1);
     assert.deepEqual(chart.data.slice(0, events.length), events.sortBy('time'));
@@ -33,7 +34,6 @@ module('Unit | Component | scale-events-chart', function(hooks) {
   });
 
   test('if the earliest annotation is outside the domain of the events, the earliest annotation time is added as a datum for the line chart to render', function(assert) {
-    const chart = this.owner.factoryFor('component:scale-events-chart').create();
     const annotationOutside = [
       { time: new Date('2020-08-01T04:06:00'), hasCount: false, error: true },
       { time: new Date('2020-08-02T04:06:00'), count: 2, hasCount: true },
@@ -45,7 +45,7 @@ module('Unit | Component | scale-events-chart', function(hooks) {
       { time: new Date('2020-08-03T04:06:00'), count: 2, hasCount: true },
     ];
 
-    chart.set('events', annotationOutside);
+    const chart = this.createComponent({ events: annotationOutside });
 
     assert.equal(chart.data.length, annotationOutside.length + 1);
     assert.deepEqual(
@@ -57,7 +57,7 @@ module('Unit | Component | scale-events-chart', function(hooks) {
     assert.equal(appendedDatum.count, annotationOutside[1].count);
     assert.equal(+appendedDatum.time, +annotationOutside[0].time);
 
-    chart.set('events', annotationInside);
+    chart.args.events = annotationInside;
 
     assert.equal(chart.data.length, annotationOutside.length);
     assert.deepEqual(