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

179 lines
4.4 KiB
Handlebars
Raw Normal View History

<style>
{{#if selected.nodes }}
{{selected.nodes}} {
opacity: 1 !important;
background-color: var(--tone-gray-000);
border: var(--decor-border-100);
border-radius: var(--decor-radius-200);
border-color: rgb(var(--tone-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
2020-11-30 16:52:13 +00:00
<span
{{tooltip 'Use routers to intercept traffic using Layer 7 criteria such as path prefixes or http headers.'}}
2020-11-30 16:52:13 +00:00
>
</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
2020-11-30 16:52:13 +00:00
<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}}
2020-11-30 16:52:13 +00:00
<svg class="edges"
{{did-insert (set this 'edges')}}
2020-11-30 16:52:13 +00:00
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>