{{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 cb2846e27b..67868a1645 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 fda4fdeef3..2253cefdef 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 ed6b75f49b..a5ee66112e 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 d726dd3aa6..b90b73f32a 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 b5c644e522..30fa001c04 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 e44d6d8128..8694792069 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}}