ui: Refactor topology components (#9339)

* Refactor Stats and Series components

* Refactor metrics error message for ingress-gateway

* Fix upLines icon positioning

* Remove unused variable from being passed down to Stats

ui/packages/consul-ui/app/components/topology-metrics/card.hbs

@@ -48,25 +48,5 @@
     </dl>
 {{/if}}
   </div>
-  {{#if (and @hasMetricsProvider (not-eq @service.Kind 'ingress-gateway'))}}
+  {{yield}}
-    {{#if (eq @type 'upstream')}}
-      <TopologyMetrics::Stats
-        @nspace={{or @item.Namespace 'default'}}
-        @dc={{@item.Datacenter}}
-        @endpoint='upstream-summary-for-service'
-        @service={{@service.Service}}
-        @item={{@item.Name}}
-        @noMetricsReason={{@noMetricsReason}}
-      />
-    {{else}}
-      <TopologyMetrics::Stats
-        @nspace={{or @item.Namespace 'default'}}
-        @dc={{@item.Datacenter}}
-        @endpoint='downstream-summary-for-service'
-        @service={{@service.Service}}
-        @item={{@item.Name}}
-        @noMetricsReason={{@noMetricsReason}}
-      />
-    {{/if}}
-  {{/if}}
 </a>

ui/packages/consul-ui/app/components/topology-metrics/index.hbs

@@ -21,9 +21,19 @@
       @dc={{@dc}}
       @service={{@service.Service}}
       @item={{item}}
-      @hasMetricsProvider={{this.hasMetricsProvider}}
+      @hasMetricsProvider={{@hasMetricsProvider}}
       @noMetricsReason={{this.noMetricsReason}}
-    />
+    >
+    {{#if (and @hasMetricsProvider (not-eq @service.Service.Kind 'ingress-gateway'))}}
+      <TopologyMetrics::Stats
+        @nspace={{or item.Namespace 'default'}}
+        @dc={{item.Datacenter}}
+        @endpoint='downstream-summary-for-service'
+        @service={{@service.Service.Service}}
+        @noMetricsReason={{this.noMetricsReason}}
+      />
+    {{/if}}
+    </TopologyMetrics::Card>
   {{/each}}
   </div>
 {{/if}}
@@ -31,7 +41,7 @@
     <div class="metrics-header">
       {{@service.Service.Service}}
     </div>
-    {{#if this.hasMetricsProvider }}
+    {{#if @hasMetricsProvider }}
       <TopologyMetrics::Series
         @nspace={{or @service.Service.Namespace 'default'}}
         @dc={{@dc}}
@@ -76,14 +86,20 @@
       <p>{{dc}}</p>
     {{#each upstreams as |item|}}
       <TopologyMetrics::Card
-        @nspace={{@nspace}}
         @dc={{@dc}}
         @item={{item}}
         @service={{@service.Service}}
-        @type='upstream'
+      >
-        @hasMetricsProvider={{this.hasMetricsProvider}}
+      {{#if (and @hasMetricsProvider (not-eq @service.Service.Kind 'ingress-gateway'))}}
-        @noMetricsReason={{this.noMetricsReason}}
+        <TopologyMetrics::Stats
-      />
+          @nspace={{or item.Namespace 'default'}}
+          @dc={{item.Datacenter}}
+          @endpoint='upstream-summary-for-service'
+          @service={{@service.Service.Service}}
+          @noMetricsReason={{this.noMetricsReason}}
+        />
+      {{/if}}
+      </TopologyMetrics::Card>
     {{/each}}
     </div>
   {{/each-in}}

ui/packages/consul-ui/app/components/topology-metrics/index.js

@@ -1,38 +1,15 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
 
 export default class TopologyMetrics extends Component {
-  @service('ui-config') cfg;
-  @service('env') env;
-
   // =attributes
   @tracked centerDimensions;
   @tracked downView;
   @tracked downLines = [];
   @tracked upView;
   @tracked upLines = [];
-  @tracked hasMetricsProvider = false;
+  @tracked noMetricsReason;
-  @tracked noMetricsReason = null;
-
-  constructor(owner, args) {
-    super(owner, args);
-    this.hasMetricsProvider = !!this.cfg.get().metrics_provider;
-
-    // Disable metrics fetching if we are not in the local DC since we don't
-    // currently support that for all providers.
-    //
-    // TODO we can make the configurable even before we have a full solution for
-    // multi-DC forwarding for Prometheus so providers that are global for all
-    // DCs like an external managed APM can still load in all DCs.
-    if (
-      this.env.var('CONSUL_DATACENTER_LOCAL') !== this.args.topology.get('Datacenter') ||
-      this.args.service.Service.Kind === 'ingress-gateway'
-    ) {
-      this.noMetricsReason = 'Unable to fetch metrics for a remote datacenter';
-    }
-  }
 
   // =methods
   drawDownLines(items) {
@@ -92,6 +69,14 @@ export default class TopologyMetrics extends Component {
   // =actions
   @action
   calculate() {
+    if (this.args.isRemoteDC) {
+      this.noMetricsReason = 'Unable to fetch metrics for a remote datacenter';
+    } else if (this.args.service.Service.Kind === 'ingress-gateway') {
+      this.noMetricsReason = 'Unable to fetch metrics for a ingress gateway';
+    } else {
+      this.noMetricsReason = null;
+    }
+
     // Calculate viewBox dimensions
     this.downView = document.querySelector('#downstream-lines').getBoundingClientRect();
     this.upView = document.querySelector('#upstream-lines').getBoundingClientRect();

ui/packages/consul-ui/app/components/topology-metrics/series/index.hbs

@@ -1,12 +1,13 @@
-{{#unless @noMetricsReason}}
+{{#if (not @noMetricsReason)}}
   <DataSource
     @src={{uri @nspace @dc 'metrics' 'summary-for-service' @service @protocol}}
     @onchange={{action 'change'}}
     @onerror={{action (mut error) value="error"}}
   />
-{{/unless}}
+{{/if}}
 
 {{on-window 'resize' (action 'redraw')}}
+{{did-insert (action 'redraw')}}
 
 {{#if (not empty)}}
   {{#if data.labels}}

ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs

@@ -1,10 +1,10 @@
-{{#unless @noMetricsReason}}
+{{#if (not @noMetricsReason)}}
   <DataSource
     @src={{uri @nspace @dc 'metrics' @endpoint @service @protocol}}
     @onchange={{action 'statsUpdate'}}
     @onerror={{action (mut error) value="error"}}
   />
-{{/unless}}
+{{/if}}
 
 <div class="stats">
   {{#if hasLoaded }}

ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js

@@ -8,6 +8,7 @@ export default class TopologyMetricsUpLines extends Component {
   @action
   getIconPositions() {
     const center = this.args.center;
+    const view = this.args.view;
     const lines = [...document.querySelectorAll('#upstream-lines path')];
 
     this.iconPositions = lines.map(item => {
@@ -16,7 +17,7 @@ export default class TopologyMetricsUpLines extends Component {
       return {
         id: item.id,
         x: Math.round(partLen.x - center.x),
-        y: Math.round(partLen.y - center.y * 0.81),
+        y: Math.round(partLen.y - view.y),
       };
     });
   }

ui/packages/consul-ui/app/routes/dc/services/show/topology.js

@@ -1,12 +1,21 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
 export default class TopologyRoute extends Route {
+  @service('ui-config') config;
+  @service('env') env;
+
   model() {
     const parent = this.routeName
       .split('.')
       .slice(0, -1)
       .join('.');
-    return this.modelFor(parent);
+
+    return {
+      ...this.modelFor(parent),
+      hasMetricsProvider: !!this.config.get().metrics_provider,
+      isRemoteDC: this.env.var('CONSUL_DATACENTER_LOCAL') !== this.modelFor('dc').dc.Name,
+    };
   }
 
   setupController(controller, model) {

ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs

@@ -13,7 +13,8 @@
         Datacenter=dc
         Service=items.firstObject
       )}}
-
+      @isRemoteDC={{isRemoteDC}}
+      @hasMetricsProvider={{hasMetricsProvider}}
       @oncreate={{route-action 'createIntention'}}
     />
   {{else}}