open-consul/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs

<style>
  {{#if selected.nodes }}
    {{selected.nodes}} {
      opacity: 1 !important;

      background-color: var(--white);
      border: var(--decor-border-100);
      border-radius: var(--decor-radius-200);
      border-color: var(--gray-500);
      box-shadow: var(--decor-elevation-600);
    }
  {{/if}}
  {{#if selected.edges }}
    {{selected.edges}} {
      opacity: 1;
    }
  {{/if}}
</style>

<div class="routes">
  <header>
    <h2>
      {{chain.ServiceName}} Router
      <span
        {{tooltip 'Use routers to intercept traffic using Layer 7 criteria such as path prefixes or http headers.'}}
      >
      </span>
    </h2>
  </header>
  <div role="group">
    {{#each routes as |item|}}
      <Consul::DiscoveryChain::RouteCard
        {{on-resize (dom-position (set item 'rect') from=this.edges)}}
        @item={{item}}
        @onclick={{action "click"}}
      />
    {{/each}}
  </div>
</div>

<div class="splitters">
  <header>
    <h2>
      Splitters
      <span
        {{tooltip 'Splitters are configured to split incoming requests across different services or subsets of a single service.'}}
      >
      </span>
    </h2>
  </header>
  <div role="group">
    {{#each (sort-by 'Name' splitters) as |item|}}
      <Consul::DiscoveryChain::SplitterCard
        {{on-resize (dom-position (set item 'rect') from=this.edges)}}
        @item={{item}}
        @onclick={{action "click"}}
      />
    {{/each}}
  </div>
</div>

<div class="resolvers">
  <header>
    <h2>
      Resolvers
      <span
        {{tooltip "Resolvers are used to define which instances of a service should satisfy discovery requests."}}
      >
      </span>
    </h2>
  </header>
  <div role="group">
    {{#each (sort-by 'Name' resolvers) as |item|}}
      <Consul::DiscoveryChain::ResolverCard
        {{on-resize (dom-position (set item 'rect') from=this.edges)}}
        @item={{item}}
        @edges={{this.edges}}
        @onclick={{action "click"}}
      />
    {{/each}}
  </div>
</div>

{{nodes}}

<svg class="edges"
  {{did-insert (set this 'edges')}}
  width="100%"
  height="100%"
  preserveAspectRatio="none"
>
  {{#each routes as |item|}}
    {{#if item.rect}}
      {{#let item.rect item.NextItem.rect as |src destRect|}}
        {{#let (tween-to (hash
          x=destRect.x
          y=(add destRect.y (div destRect.height 2))
        ) (concat item.ID)) as |dest|}}

    <path
      id={{concat item.ID '>' item.NextNode}}
      d={{
        svg-curve (hash
          x=dest.x
          y=(sub dest.y 0)
        ) src=(hash
          x=src.right
          y=(add src.y (div src.height 2))
      )}}
    />

        {{/let}}
      {{/let}}
    {{/if}}
  {{/each}}

  {{#each splitters as |splitter|}}
    {{#if splitter.rect}}
      {{#let splitter.rect as |src|}}
        {{#each splitter.Splits as |item index|}}
          {{#let item.NextItem.rect as |destRect|}}
            {{#let (tween-to (hash
              x=destRect.x
              y=(add destRect.y (div destRect.height 2))
            ) (concat splitter.ID '-' index)) as |dest|}}

      <path
        {{tooltip
          (concat (round (or item.Weight 0) decimals=2) '%')
          options=(hash followCursor=true)
        }}
        id={{concat 'splitter:' splitter.Name '>' item.NextNode}}
        class="split"
        d={{
          svg-curve (hash
            x=dest.x
            y=dest.y
          ) src=(hash
            x=src.right
            y=(add src.y (div src.height 2))
        )}}
      />

            {{/let}}
          {{/let}}
        {{/each}}
      {{/let}}
    {{/if}}
  {{/each}}

</svg>

<svg class="resolver-inlets" height="100%">
  {{#each routes as |item|}}
    {{#if (string-starts-with item.NextNode 'resolver:') }}
      {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
        <circle r="2.5" cx="5" cy={{add dest.y (div dest.height 2)}} />
      {{/let}}
    {{/if}}
  {{/each}}
  {{#each splitters as |item|}}
      {{#each item.Splits as |item|}}
        {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
          <circle r="2.5" cx="5" cy={{add dest.y (div dest.height 2)}} />
        {{/let}}
      {{/each}}
  {{/each}}
</svg>

<svg class="splitter-inlets" height="100%">
  {{#each routes as |item|}}
    {{#if (string-starts-with item.NextNode 'splitter:') }}
      {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}}
        <circle r="2.5" cx="5" cy={{add dest.y (div dest.height 2)}} />
      {{/let}}
    {{/if}}
  {{/each}}
</svg>