From e1d97713815e56a841319cebb02530818a4de28e Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 11 Nov 2020 14:43:37 +0000 Subject: [PATCH] ui: Move discovery chain component (#9154) --- .../consul/discovery-chain/index.hbs | 148 ++++++++++++++++++ .../{ => consul}/discovery-chain/index.js | 21 +-- .../consul/discovery-chain/index.scss} | 3 +- .../consul}/discovery-chain/layout.scss | 0 .../discovery-chain}/resolver-card/index.hbs | 21 ++- .../discovery-chain}/route-card/index.hbs | 24 +-- .../discovery-chain}/route-card/index.js | 15 +- .../consul}/discovery-chain/skin.scss | 0 .../discovery-chain/splitter-card/index.hbs | 13 ++ .../{ => consul}/discovery-chain/utils.js | 0 .../app/components/discovery-chain/index.hbs | 141 ----------------- .../app/components/resolver-card/index.js | 5 - .../app/components/splitter-card/index.hbs | 5 - .../app/components/splitter-card/index.js | 3 - .../consul-ui/app/styles/components.scss | 2 +- .../components/discovery-chain/index.scss | 2 - .../templates/dc/services/show/routing.hbs | 4 +- .../{ => consul}/discovery-chain-test.js | 0 .../get-alternate-services-test.js | 4 +- .../discovery-chain/get-resolvers-test.js | 4 +- .../discovery-chain/get-splitters-test.js | 4 +- 21 files changed, 209 insertions(+), 210 deletions(-) create mode 100644 ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs rename ui/packages/consul-ui/app/components/{ => consul}/discovery-chain/index.js (90%) rename ui/packages/consul-ui/app/{styles/components/discovery-chain.scss => components/consul/discovery-chain/index.scss} (56%) rename ui/packages/consul-ui/app/{styles/components => components/consul}/discovery-chain/layout.scss (100%) rename ui/packages/consul-ui/app/components/{ => consul/discovery-chain}/resolver-card/index.hbs (75%) rename ui/packages/consul-ui/app/components/{ => consul/discovery-chain}/route-card/index.hbs (56%) rename ui/packages/consul-ui/app/components/{ => consul/discovery-chain}/route-card/index.js (52%) rename ui/packages/consul-ui/app/{styles/components => components/consul}/discovery-chain/skin.scss (100%) create mode 100644 ui/packages/consul-ui/app/components/consul/discovery-chain/splitter-card/index.hbs rename ui/packages/consul-ui/app/components/{ => consul}/discovery-chain/utils.js (100%) delete mode 100644 ui/packages/consul-ui/app/components/discovery-chain/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/resolver-card/index.js delete mode 100644 ui/packages/consul-ui/app/components/splitter-card/index.hbs delete mode 100644 ui/packages/consul-ui/app/components/splitter-card/index.js delete mode 100644 ui/packages/consul-ui/app/styles/components/discovery-chain/index.scss rename ui/packages/consul-ui/tests/integration/components/{ => consul}/discovery-chain-test.js (100%) rename ui/packages/consul-ui/tests/unit/components/{ => consul}/discovery-chain/get-alternate-services-test.js (90%) rename ui/packages/consul-ui/tests/unit/components/{ => consul}/discovery-chain/get-resolvers-test.js (98%) rename ui/packages/consul-ui/tests/unit/components/{ => consul}/discovery-chain/get-splitters-test.js (87%) 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)}}