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 new file mode 100644 index 0000000000..3ce7b67c87 --- /dev/null +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs @@ -0,0 +1,148 @@ + +
+
+

+ {{chain.ServiceName}} Router + + Use routers to intercept traffic using L7 criteria such as path prefixes or http headers. + +

+
+
+ {{#each routes as |item|}} + + {{/each}} +
+
+
+
+

+ Splitters + + Splitters are configured to split incoming requests across different services or subsets of a single service. + +

+
+
+ {{#each (sort-by 'Name' splitters) as |item|}} + + {{/each}} +
+
+
+
+

+ Resolvers + + Resolvers are used to define which instances of a service should satisfy discovery requests. + +

+
+
+ {{#each (sort-by 'Name' resolvers) as |item|}} + + {{/each}} +
+
+ + {{#each routes as |item|}} + {{#let (dom-position (concat '#' item.ID)) as |src|}} + {{#let (dom-position (concat '#' item.NextNode)) as |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)) as |src|}} + {{#each splitter.Splits as |item index|}} + {{#let (dom-position (concat '#' item.NextNode)) 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" + data-percentage={{or item.Weight 0}} + 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}} + {{/each}} + {{/let}} + {{/each}} + + + {{#each routes as |item|}} + {{#if (starts-with 'resolver:' item.NextNode) }} + {{#let (dom-position (concat '#' item.NextNode)) as |dest|}} + + {{/let}} + {{/if}} + {{/each}} + {{#each splitters as |item|}} + {{#each item.Splits as |item|}} + {{#let (dom-position (concat '#' item.NextNode)) as |dest|}} + + {{/let}} + {{/each}} + {{/each}} + + + {{#each routes as |item|}} + {{#if (starts-with 'splitter:' item.NextNode) }} + {{#let (dom-position (concat '#' item.NextNode)) as |dest|}} + + {{/let}} + {{/if}} + {{/each}} + +
+ {{round tooltip decimals=2}}% +
diff --git a/ui/packages/consul-ui/app/components/discovery-chain/index.js b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js similarity index 90% rename from ui/packages/consul-ui/app/components/discovery-chain/index.js rename to ui/packages/consul-ui/app/components/consul/discovery-chain/index.js index d9099e7888..d7fa3142e7 100644 --- a/ui/packages/consul-ui/app/components/discovery-chain/index.js +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js @@ -20,22 +20,6 @@ export default Component.extend({ init: function() { this._super(...arguments); this._listeners = this.dom.listeners(); - this._viewportlistener = this.dom.listeners(); - }, - didInsertElement: function() { - this._super(...arguments); - this._viewportlistener.add( - this.dom.isInViewport(this.element, bool => { - if (get(this, 'isDisplayed') !== bool) { - set(this, 'isDisplayed', bool); - if (this.isDisplayed) { - this.addPathListeners(); - } else { - this.ticker.destroy(this); - } - } - }) - ); }, didReceiveAttrs: function() { this._super(...arguments); @@ -46,7 +30,6 @@ export default Component.extend({ willDestroyElement: function() { this._super(...arguments); this._listeners.remove(); - this._viewportlistener.remove(); this.ticker.destroy(this); }, splitters: computed('chain.Nodes', function() { @@ -133,10 +116,10 @@ export default Component.extend({ edges: edges.map(item => `#${CSS.escape(item)}`), }; }), - width: computed('isDisplayed', 'chain.{Nodes,Targets}', function() { + width: computed('chain.{Nodes,Targets}', function() { return this.element.offsetWidth; }), - height: computed('isDisplayed', 'chain.{Nodes,Targets}', function() { + height: computed('chain.{Nodes,Targets}', function() { return this.element.offsetHeight; }), // TODO(octane): ember has trouble adding mouse events to svg elements whilst giving diff --git a/ui/packages/consul-ui/app/styles/components/discovery-chain.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.scss similarity index 56% rename from ui/packages/consul-ui/app/styles/components/discovery-chain.scss rename to ui/packages/consul-ui/app/components/consul/discovery-chain/index.scss index ab2c2eeb10..787cd7ffc2 100644 --- a/ui/packages/consul-ui/app/styles/components/discovery-chain.scss +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.scss @@ -1,4 +1,5 @@ -@import './discovery-chain/index'; +@import './skin'; +@import './layout'; .discovery-chain { @extend %discovery-chain; } diff --git a/ui/packages/consul-ui/app/styles/components/discovery-chain/layout.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss similarity index 100% rename from ui/packages/consul-ui/app/styles/components/discovery-chain/layout.scss rename to ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss diff --git a/ui/packages/consul-ui/app/components/resolver-card/index.hbs b/ui/packages/consul-ui/app/components/consul/discovery-chain/resolver-card/index.hbs similarity index 75% rename from ui/packages/consul-ui/app/components/resolver-card/index.hbs rename to ui/packages/consul-ui/app/components/consul/discovery-chain/resolver-card/index.hbs index 190852b259..b8d61a539e 100644 --- a/ui/packages/consul-ui/app/components/resolver-card/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/resolver-card/index.hbs @@ -1,13 +1,18 @@ -
-
+
+
-

{{item.Name}}

+

{{@item.Name}}

{{#if item.Failover}}
-
{{concat item.Failover.Type ' failover'}}
+
+ {{concat @item.Failover.Type ' failover'}} +
    - {{#each item.Failover.Targets as |item|}} + {{#each @item.Failover.Targets as |item|}}
  1. {{item}}
    2. @@ -18,10 +23,10 @@ {{/if}}
-{{#if (gt item.Children.length 0)}} +{{#if (gt @item.Children.length 0)}}