diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs index 7b6dda497f..a0b0beacd0 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs @@ -16,6 +16,7 @@ } {{/if}} +

@@ -29,12 +30,14 @@
{{#each routes as |item|}} {{/each}}

+

@@ -48,102 +51,126 @@
{{#each (sort-by 'Name' splitters) as |item|}} {{/each}}

+

Resolvers - +

{{#each (sort-by 'Name' resolvers) as |item|}} {{/each}}
+ +{{nodes}} + {{#each routes as |item|}} - {{#let (dom-position (concat '#' item.ID) '.edges') as |src|}} - {{#let (dom-position (concat '#' item.NextNode) '.edges') as |destRect|}} + {{#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|}} - ' item.NextNode}} - d={{ - svg-curve (hash - x=dest.x - y=dest.y - ) src=(hash - x=(add src.x src.width) - y=(add src.y (div src.height 2)) - )}} /> - {{/let}} - {{/let}} - {{/let}} - {{/each}} - {{#each splitters as |splitter|}} - {{#let (dom-position (concat '#' splitter.ID) '.edges') as |src|}} - {{#each splitter.Splits as |item index|}} - {{#let (dom-position (concat '#' item.NextNode) '.edges') as |destRect|}} - {{#let (tween-to (hash - x=destRect.x - y=(add destRect.y (div destRect.height 2)) - ) (concat splitter.ID '-' index)) as |dest|}} + ' item.NextNode}} - class="split" + id={{concat item.ID '>' item.NextNode}} d={{ svg-curve (hash x=dest.x - y=dest.y + y=(sub dest.y 0) ) src=(hash - x=(add src.x src.width) + x=src.right y=(add src.y (div src.height 2)) - )}} /> - {{/let}} + )}} + /> + {{/let}} - {{/each}} - {{/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|}} + + ' 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}} + - + + {{#each routes as |item|}} {{#if (string-starts-with item.NextNode 'resolver:') }} - {{#let (dom-position (concat '#' item.NextNode) '.edges') as |dest|}} + {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}} {{/let}} {{/if}} {{/each}} {{#each splitters as |item|}} {{#each item.Splits as |item|}} - {{#let (dom-position (concat '#' item.NextNode) '.edges') as |dest|}} + {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}} {{/let}} {{/each}} {{/each}} - + + {{#each routes as |item|}} {{#if (string-starts-with item.NextNode 'splitter:') }} - {{#let (dom-position (concat '#' item.NextNode) '.edges') as |dest|}} + {{#let (or item.NextItem.rect (hash y=0 height=0)) as |dest|}} {{/let}} {{/if}} diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js index 07e19b9533..a4947c683f 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js @@ -73,6 +73,37 @@ export default Component.extend({ } return routes; }), + nodes: computed('routes', 'splitters', 'resolvers', function() { + let nodes = this.resolvers.reduce((prev, item) => { + prev[`resolver:${item.ID}`] = item; + item.Children.reduce((prev, item) => { + prev[`resolver:${item.ID}`] = item; + return prev; + }, prev); + return prev; + }, {}); + nodes = this.splitters.reduce((prev, item) => { + prev[item.ID] = item; + return prev; + }, nodes); + nodes = this.routes.reduce((prev, item) => { + prev[item.ID] = item; + return prev; + }, nodes); + Object.entries(nodes).forEach(([key, value]) => { + if (typeof value.NextNode !== 'undefined') { + value.NextItem = nodes[value.NextNode]; + } + if (typeof value.Splits !== 'undefined') { + value.Splits.forEach(item => { + if (typeof item.NextNode !== 'undefined') { + item.NextItem = nodes[item.NextNode]; + } + }); + } + }); + return ''; + }), resolvers: computed('chain.{Nodes,Targets}', function() { return getResolvers( this.chain.Datacenter, @@ -117,12 +148,6 @@ export default Component.extend({ edges: edges.map(item => `#${CSS.escape(item)}`), }; }), - width: computed('chain.{Nodes,Targets}', function() { - return this.element.offsetWidth; - }), - height: computed('chain.{Nodes,Targets}', function() { - return this.element.offsetHeight; - }), actions: { click: function(e) { const id = e.currentTarget.getAttribute('id'); diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/resolver-card/index.hbs b/ui/packages/consul-ui/app/components/consul/discovery-chain/resolver-card/index.hbs index 479726a66a..46124d079d 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/resolver-card/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/resolver-card/index.hbs @@ -1,8 +1,9 @@
-
+

{{@item.Name}}

{{#if item.Failover}} @@ -28,7 +29,11 @@ {{#if (gt @item.Children.length 0)}}