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

72 lines
2.3 KiB
Handlebars

{{on-window 'resize' (action this.calculate)}}
<div {{did-insert (action this.calculate)}} {{did-update (action this.calculate) @upstreams @downstreams}} class="topology-container">
{{#if (gt @downstreams.length 0)}}
<div id="downstream-container">
<div>
<p>{{@dc}}</p>
<span>
<Tooltip>
Only showing downstreams within the current datacenter for {{@service.Service.Service}}.
</Tooltip>
</span>
</div>
<TopologyMetrics::Card
@items={{@downstreams}}
@service={{@service.Service.Service}}
@dc={{@dc}}
@hasMetricsProvider={{this.hasMetricsProvider}}
/>
</div>
{{/if}}
<div id="metrics-container">
<div class="metrics-header">
{{@service.Service.Service}}
</div>
{{#if this.hasMetricsProvider }}
<TopologyMetrics::Series @service={{@service.Service.Service}} @protocol={{@protocol}} />
<TopologyMetrics::Stats @endpoint='summary-for-service' @service={{@service.Service.Service}} @protocol={{@protocol}} />
{{/if}}
<div class="link">
{{#if @metricsHref}}
<a class="metrics-link" href={{@metricsHref}} target="_blank" rel="noopener noreferrer" data-test-dashboard-anchor>Open metrics Dashboard</a>
{{else}}
<a class="config-link" href="{{env 'CONSUL_DOCS_URL'}}/agent/options.html#ui_config" target="_blank" rel="noopener noreferrer">Configure metrics dashboard</a>
{{/if}}
</div>
</div>
<div id="downstream-lines">
<TopologyMetrics::DownLines
@type='downstream'
@view={{this.downView}}
@center={{this.centerDimensions}}
@lines={{this.downLines}}
@items={{@downstreams}}
/>
</div>
{{#if (gt @upstreams.length 0)}}
<div id="upstream-column">
{{#each-in (group-by "Datacenter" @upstreams) as |dc upstreams|}}
<div id="upstream-container">
<p>{{dc}}</p>
<TopologyMetrics::Card
@items={{upstreams}}
@service={{@service.Service.Service}}
@dc={{@dc}}
@type='upstream'
@hasMetricsProvider={{this.hasMetricsProvider}}
/>
</div>
{{/each-in}}
</div>
{{/if}}
<div id="upstream-lines">
<TopologyMetrics::UpLines
@type='upstream'
@view={{this.upView}}
@center={{this.centerDimensions}}
@lines={{this.upLines}}
@items={{@upstreams}}
/>
</div>
</div>