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 @@
- {{#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}}