ui: Refactor tomography graph component to glimmer and remove deprecation (#9219)

* ui: Refactor tomograph graph component to glimmer and remove deprecation

* Avoid ember-data deprecation error

ui/packages/consul-ui/app/components/consul/tomography/graph/index.hbs

@@ -1,35 +1,46 @@
-<svg width="{{size}}" height="{{size}}">
+<div
-    <g class="tomography" transform="translate({{div size 2}}, {{div size 2}})">
+  class="tomography-graph"
+  ...attributes
+>
+  <svg width={{this.size}} height={{this.size}}>
+      <g transform="translate({{div this.size 2}}, {{div this.size 2}})">
           <g>
-            <circle class="background" r="{{circle.[0]}}"/>
+              <circle class="background" r={{this.circle.[0]}} />
-            <circle class="axis" r="{{circle.[1]}}"/>
+              <circle class="axis" r={{this.circle.[1]}} />
-            <circle class="axis" r="{{circle.[2]}}"/>
+              <circle class="axis" r={{this.circle.[2]}} />
-            <circle class="axis" r="{{circle.[3]}}"/>
+              <circle class="axis" r={{this.circle.[3]}} />
-            <circle class="border" r="{{circle.[4]}}"/>
+              <circle class="border" r={{this.circle.[4]}} />
           </g>
           <g class="lines">
-    {{#each distances as |item|}}
+      {{#each this.distances as |item|}}
-        <line transform="rotate({{item.rotate}})" y2="{{item.y2}}" data-node="{{item.d}}" data-distance="{{item.distance}}" data-segment="{{item.segment}}"/>
+          <line
+            transform="rotate({{item.rotate}})"
+            y2={{item.y2}}
+            data-node={{item.d}}
+            data-distance={{item.distance}}
+            data-segment={{item.segment}}
+          />
       {{/each}}
           </g>
           <g class="labels">
               <circle class="point" r="5" />
-            <g class="tick" transform="translate(0, {{labels.[0]}})">
+              <g class="tick" transform="translate(0, {{this.labels.[0]}})">
                   <line x2="70" />
-                <text x="75" y="0" dy=".32em">{{format-number milliseconds.[0] maximumFractionDigits=2}}ms</text>
+                  <text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[0] maximumFractionDigits=2}}ms</text>
               </g>
-            <g class="tick" transform="translate(0, {{labels.[1]}})">
+              <g class="tick" transform="translate(0, {{this.labels.[1]}})">
                   <line x2="70" />
-                <text x="75" y="0" dy=".32em">{{format-number milliseconds.[1] maximumFractionDigits=2}}ms</text>
+                  <text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[1] maximumFractionDigits=2}}ms</text>
               </g>
-            <g class="tick" transform="translate(0, {{labels.[2]}})">
+              <g class="tick" transform="translate(0, {{this.labels.[2]}})">
                   <line x2="70" />
-                <text x="75" y="0" dy=".32em">{{format-number milliseconds.[2] maximumFractionDigits=2}}ms</text>
+                  <text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[2] maximumFractionDigits=2}}ms</text>
               </g>
-            <g class="tick" transform="translate(0, {{labels.[3]}})">
+              <g class="tick" transform="translate(0, {{this.labels.[3]}})">
                   <line x2="70" />
-                <text x="75" y="0" dy=".32em">{{format-number milliseconds.[3] maximumFractionDigits=2}}ms</text>
+                  <text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[3] maximumFractionDigits=2}}ms</text>
               </g>
           </g>
       </g>
   </svg>
+</div>

ui/packages/consul-ui/app/components/consul/tomography/graph/index.js

@@ -1,5 +1,5 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
-import { computed, set, get } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 const size = 336;
 const insetSize = size / 2 - 8;
@@ -9,52 +9,39 @@ const inset = function(num) {
 const milliseconds = function(num, max) {
   return max > 0 ? parseInt(max * num) / 100 : 0;
 };
-export default Component.extend({
+export default class TomographyGraph extends Component {
-  size: size,
+  @tracked max = -999999999;
-  tomography: 0,
+  size = size;
-  max: -999999999,
+
-  init: function() {
+  circle = [inset(1), inset(0.25), inset(0.5), inset(0.75), inset(1)];
-    this._super(...arguments);
+  labels = [inset(-0.25), inset(-0.5), inset(-0.75), inset(-1)];
-    this.circle = [inset(1), inset(0.25), inset(0.5), inset(0.75), inset(1)];
+
-    this.labels = [inset(-0.25), inset(-0.5), inset(-0.75), inset(-1)];
+  get milliseconds() {
-  },
+    const distances = this.args.distances || [];
-  milliseconds: computed('distances', 'max', function() {
+    const max = distances.reduce((prev, d) => Math.max(prev, d.distance), this.max);
-    const max = get(this, 'max');
+    return [25, 50, 75, 100].map(item => milliseconds(item, max));
-    return [
-      milliseconds(25, max),
-      milliseconds(50, max),
-      milliseconds(75, max),
-      milliseconds(100, max),
-    ];
-  }),
-  distances: computed('tomography', function() {
-    const tomography = get(this, 'tomography');
-    let distances = get(tomography, 'distances') || [];
-    // TODO: This should probably be moved into the milliseconds computedProperty
-    /*eslint ember/no-side-effects: "warn"*/
-    distances.forEach((d, i) => {
-      if (d.distance > get(this, 'max')) {
-        set(this, 'max', d.distance);
   }
-    });
+
-    let n = get(distances, 'length');
+  get distances() {
-    if (n > 360) {
+    const distances = this.args.distances || [];
+    const max = distances.reduce((prev, d) => Math.max(prev, d.distance), this.max);
+    const len = distances.length;
+    if (len > 360) {
       // We have more nodes than we want to show, take a random sampling to keep
       // the number around 360.
-      const sampling = 360 / n;
+      const sampling = 360 / len;
       distances = distances.filter(function(_, i) {
-        return i == 0 || i == n - 1 || Math.random() < sampling;
+        return i == 0 || i == len - 1 || Math.random() < sampling;
       });
-      n = get(distances, 'length');
     }
     return distances.map((d, i) => {
       return {
-        rotate: (i * 360) / n,
+        rotate: (i * 360) / distances.length,
-        y2: -insetSize * (d.distance / get(this, 'max')),
+        y2: -insetSize * (d.distance / max),
         node: d.node,
         distance: d.distance,
         segment: d.segment,
       };
     });
-  }),
+  }
-});
+}

ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss

@@ -0,0 +1,33 @@
+.tomography-graph {
+  .background {
+    fill: $gray-050;
+  }
+  .axis {
+    fill: none;
+    stroke: $gray-300;
+    stroke-dasharray: 4 4;
+  }
+  .border {
+    fill: none;
+    stroke: $gray-300;
+  }
+  .point {
+    stroke: $gray-400;
+    fill: $magenta-600;
+  }
+  .lines line {
+    stroke: $magenta-600;
+  }
+  .lines line:hover {
+    stroke: $gray-300;
+    stroke-width: 2px;
+  }
+  .tick line {
+    stroke: $gray-300;
+  }
+  .tick text {
+    font-size: $typo-size-600;
+    text-anchor: start;
+    color: $gray-900;
+  }
+}

ui/packages/consul-ui/app/services/repository/coordinate.js

@@ -30,7 +30,7 @@ export default class CoordinateService extends RepositoryService {
       if (get(coordinates, 'length') > 1) {
         results = tomography(
           node,
-          coordinates.map(item => get(item, 'data'))
+          coordinates
         );
       }
       results.meta = get(coordinates, 'meta');

ui/packages/consul-ui/app/styles/components.scss

@@ -22,7 +22,6 @@
 @import './components/healthcheck-output';
 @import './components/freetext-filter';
 @import './components/filter-bar';
-@import './components/tomography-graph';
 @import './components/flash-message';
 @import './components/code-editor';
 @import './components/confirmation-dialog';
@@ -55,6 +54,7 @@
 @import 'consul-ui/components/notice';
 @import 'consul-ui/components/modal-dialog';
 
+@import 'consul-ui/components/consul/tomography/graph';
 @import 'consul-ui/components/consul/discovery-chain';
 @import 'consul-ui/components/consul/upstream-instance/list';
 @import 'consul-ui/components/consul/exposed-path/list';

ui/packages/consul-ui/app/styles/components/tomography-graph.scss

@@ -1,31 +0,0 @@
-.tomography .background {
-  fill: $gray-050;
-}
-.tomography .axis {
-  fill: none;
-  stroke: $gray-300;
-  stroke-dasharray: 4 4;
-}
-.tomography .border {
-  fill: none;
-  stroke: $gray-300;
-}
-.tomography .point {
-  stroke: $gray-400;
-  fill: $magenta-600;
-}
-.tomography .lines line {
-  stroke: $magenta-600;
-}
-.tomography .lines line:hover {
-  stroke: $gray-300;
-  stroke-width: 2px;
-}
-.tomography .tick line {
-  stroke: $gray-300;
-}
-.tomography .tick text {
-  font-size: $typo-size-600;
-  text-anchor: start;
-  color: $gray-900;
-}

ui/packages/consul-ui/app/templates/dc/nodes/show/rtt.hbs

@@ -22,7 +22,7 @@
           </dd>
       </dl>
     </div>
-    <Consul::Tomography::Graph @tomography={{tomography}} />
+    <Consul::Tomography::Graph @distances={{tomography.distances}} />
   </div>
 </div>