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

<div
  {{on-resize this.calculate}}
  class="topology-container consul-topology-metrics"
>
{{#if (gt @topology.Downstreams.length 0)}}
  <div
    id="downstream-container"
    {{did-insert this.setHeight 'downstream-lines'}}
    {{did-update this.setHeight 'downstream-lines' @topology.Downstreams}}
  >
    <div>
      <p>{{@dc}}</p>
      <span>
        <Tooltip>
          Only showing downstreams within the current datacenter for {{@service.Service.Service}}.
        </Tooltip>
      </span>
    </div>
  {{#each @topology.Downstreams as |item|}}
    <TopologyMetrics::Card
      @nspace={{@nspace}}
      @dc={{@dc}}
      @service={{@service.Service}}
      @item={{item}}
      @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}}
        @item={{item.Name}}
        @noMetricsReason={{this.noMetricsReason}}
      />
    {{/if}}
    </TopologyMetrics::Card>
  {{/each}}
  </div>
{{/if}}
  <div id="metrics-container">
    <div class="metrics-header">
      {{@service.Service.Service}}
    </div>
    {{#if @hasMetricsProvider }}
      <TopologyMetrics::Series
        @nspace={{or @service.Service.Namespace 'default'}}
        @dc={{@dc}}
        @service={{@service.Service.Service}}
        @protocol={{@topology.Protocol}}
        @noMetricsReason={{this.noMetricsReason}}
      />
      {{#if (not-eq @service.Service.Kind 'ingress-gateway')}}
      <TopologyMetrics::Stats
        @nspace={{or @service.Service.Namespace 'default'}}
        @dc={{@dc}}
        @endpoint='summary-for-service'
        @service={{@service.Service.Service}}
        @protocol={{@topology.Protocol}}
        @noMetricsReason={{this.noMetricsReason}}
      />
      {{/if}}
    {{/if}}
    <div class="link">
     {{#if @metricsHref}}
      <a class="metrics-link" href={{@metricsHref}} target="_blank" rel="noopener noreferrer" data-test-metrics-anchor>Open metrics Dashboard</a>
    {{else}}
      <a class="config-link" href="{{env 'CONSUL_DOCS_URL'}}/connect/observability/ui-visualization" target="_blank" rel="noopener noreferrer">Configure metrics dashboard</a>
    {{/if}}
    </div>
  </div>
  <div id="downstream-lines">
    <TopologyMetrics::DownLines
      @type='downstream'
      @service={{@service}}
      @view={{this.downView}}
      @center={{this.centerDimensions}}
      @lines={{this.downLines}}
      @items={{@topology.Downstreams}}
      @oncreate={{action @oncreate}}
    />
  </div>
{{#if (gt @topology.Upstreams.length 0)}}
  <div id="upstream-column">
  {{#each-in (group-by "Datacenter" @topology.Upstreams) as |dc upstreams|}}
    <div
      id="upstream-container"
      {{did-insert this.setHeight 'upstream-lines'}}
      {{did-update this.setHeight 'upstream-lines' @topology.Upstreams}}
    >
      <p>{{dc}}</p>
    {{#each upstreams as |item|}}
      <TopologyMetrics::Card
        @dc={{@dc}}
        @item={{item}}
        @service={{@service.Service}}
      >
      {{#if (and @hasMetricsProvider (not-eq @service.Service.Kind 'ingress-gateway'))}}
        <TopologyMetrics::Stats
          @nspace={{or item.Namespace 'default'}}
          @dc={{item.Datacenter}}
          @endpoint='upstream-summary-for-service'
          @service={{@service.Service.Service}}
          @item={{item.Name}}
          @noMetricsReason={{this.noMetricsReason}}
        />
      {{/if}}
      </TopologyMetrics::Card>
    {{/each}}
    </div>
  {{/each-in}}
  </div>
{{/if}}
  <div id="upstream-lines">
    <TopologyMetrics::UpLines
      @type='upstream'
      @service={{@service}}
      @view={{this.upView}}
      @center={{this.centerDimensions}}
      @lines={{this.upLines}}
      @items={{@topology.Upstreams}}
      @oncreate={{action @oncreate}}
    />
  </div>
</div>