From 811703c302b5f5f150e1fe024a0d4f8f0e1955ed Mon Sep 17 00:00:00 2001 From: Kenia <19161242+kaxcode@users.noreply.github.com> Date: Tue, 8 Dec 2020 10:47:55 -0500 Subject: [PATCH] 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 --- .../app/components/topology-metrics/card.hbs | 22 +------------ .../app/components/topology-metrics/index.hbs | 32 +++++++++++++----- .../app/components/topology-metrics/index.js | 33 +++++-------------- .../topology-metrics/series/index.hbs | 5 +-- .../topology-metrics/stats/index.hbs | 4 +-- .../topology-metrics/up-lines/index.js | 3 +- .../app/routes/dc/services/show/topology.js | 11 ++++++- .../templates/dc/services/show/topology.hbs | 3 +- 8 files changed, 53 insertions(+), 60 deletions(-) diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card.hbs b/ui/packages/consul-ui/app/components/topology-metrics/card.hbs index 3a946e3aa..4d36f93e2 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/card.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/card.hbs @@ -48,25 +48,5 @@ {{/if}} - {{#if (and @hasMetricsProvider (not-eq @service.Kind 'ingress-gateway'))}} - {{#if (eq @type 'upstream')}} - - {{else}} - - {{/if}} - {{/if}} + {{yield}} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/index.hbs index 26484e753..d9c704fc2 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/index.hbs +++ b/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'))}} + + {{/if}} + {{/each}} {{/if}} @@ -31,7 +41,7 @@
{{@service.Service.Service}}
- {{#if this.hasMetricsProvider }} + {{#if @hasMetricsProvider }} {{dc}}

{{#each upstreams as |item|}} + > + {{#if (and @hasMetricsProvider (not-eq @service.Service.Kind 'ingress-gateway'))}} + + {{/if}} + {{/each}} {{/each-in}} diff --git a/ui/packages/consul-ui/app/components/topology-metrics/index.js b/ui/packages/consul-ui/app/components/topology-metrics/index.js index cb2846e27..67868a164 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/index.js +++ b/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 = 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'; - } - } + @tracked noMetricsReason; // =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(); diff --git a/ui/packages/consul-ui/app/components/topology-metrics/series/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/series/index.hbs index fda4fdeef..2253cefde 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/series/index.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/series/index.hbs @@ -1,12 +1,13 @@ -{{#unless @noMetricsReason}} +{{#if (not @noMetricsReason)}} -{{/unless}} +{{/if}} {{on-window 'resize' (action 'redraw')}} +{{did-insert (action 'redraw')}} {{#if (not empty)}} {{#if data.labels}} diff --git a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs index ed6b75f49..a5ee66112 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs @@ -1,10 +1,10 @@ -{{#unless @noMetricsReason}} +{{#if (not @noMetricsReason)}} -{{/unless}} +{{/if}}
{{#if hasLoaded }} diff --git a/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js b/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js index d726dd3aa..b90b73f32 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js +++ b/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), }; }); } diff --git a/ui/packages/consul-ui/app/routes/dc/services/show/topology.js b/ui/packages/consul-ui/app/routes/dc/services/show/topology.js index b5c644e52..30fa001c0 100644 --- a/ui/packages/consul-ui/app/routes/dc/services/show/topology.js +++ b/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) { diff --git a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs b/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs index e44d6d812..869479206 100644 --- a/ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs +++ b/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}}