luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Discovery chain improvements (#7222) 

* ui: remove the default word when describing routes

* ui: Avoid mutating the chain and look for the default edges more safely

* ui: Use not null check instead of a truthy check for showing disco-chain

* ui: Upgrade consul-api-double for better disco-chain mocks/fixtures
This commit is contained in:
John Cowen 2020-02-06 12:06:48 +00:00 committed by GitHub
parent 1d26be2415
commit 1fdf60234c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 95 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
ui-v2/app/components/discovery-chain.js
View File

@ -31,11 +31,13 @@ export default Component.extend({
this._super(...arguments); this._super(...arguments);
this._viewportlistener.add( this._viewportlistener.add(
this.dom.isInViewport(this.element, bool => { this.dom.isInViewport(this.element, bool => {
set(this, 'isDisplayed', bool); if (get(this, 'isDisplayed') !== bool) {
if (this.isDisplayed) { set(this, 'isDisplayed', bool);
this.addPathListeners(); if (this.isDisplayed) {
} else { this.addPathListeners();
this.ticker.destroy(this); } else {
this.ticker.destroy(this);
}
} }
}) })
); );
@ -63,24 +65,29 @@ export default Component.extend({
!routes.find(item => get(item, 'Definition.Match.HTTP.PathPrefix') === '/') && !routes.find(item => get(item, 'Definition.Match.HTTP.PathPrefix') === '/') &&
!routes.find(item => typeof item.Definition === 'undefined') !routes.find(item => typeof item.Definition === 'undefined')
) { ) {
let nextNode = `resolver:${this.chain.ServiceName}.${this.chain.Namespace}.${this.chain.Datacenter}`; let nextNode;
const splitterID = `splitter:${this.chain.ServiceName}`; const resolverID = `resolver:${this.chain.ServiceName}.${this.chain.Namespace}.${this.chain.Datacenter}`;
if (typeof this.chain.Nodes[splitterID] !== 'undefined') { const splitterID = `splitter:${this.chain.ServiceName}.${this.chain.Namespace}`;
if (typeof this.chain.Nodes[resolverID] !== 'undefined') {
nextNode = resolverID;
} else if (typeof this.chain.Nodes[splitterID] !== 'undefined') {
nextNode = splitterID; nextNode = splitterID;
} }
routes.push({ if (typeof nextNode !== 'undefined') {
Default: true, routes.push({
ID: `route:${this.chain.ServiceName}`, Default: true,
Name: this.chain.ServiceName, ID: `route:${this.chain.ServiceName}`,
Definition: { Name: this.chain.ServiceName,
Match: { Definition: {
HTTP: { Match: {
PathPrefix: '/', HTTP: {
PathPrefix: '/',
},
}, },
}, },
}, NextNode: nextNode,
NextNode: nextNode, });
}); }
} }
return routes; return routes;
}), }),
@ -92,23 +99,17 @@ export default Component.extend({
get(this, 'chain.Nodes') get(this, 'chain.Nodes')
); );
}), }),
graph: computed('chain.Nodes', function() { graph: computed('splitters', 'routes', function() {
const graph = this.dataStructs.graph(); const graph = this.dataStructs.graph();
const router = this.chain.ServiceName; const router = this.chain.ServiceName;
Object.entries(get(this, 'chain.Nodes')).forEach(([key, item]) => { this.splitters.forEach(item => {
switch (item.Type) { item.Splits.forEach(splitter => {
case 'splitter': graph.addLink(item.ID, splitter.NextNode);
item.Splits.forEach(splitter => { });
graph.addLink(item.ID, splitter.NextNode); });
}); this.routes.forEach((route, i) => {
break; route = createRoute(route, router, this.dom.guid);
case 'router': graph.addLink(route.ID, route.NextNode);
item.Routes.forEach((route, i) => {
route = createRoute(route, router, this.dom.guid);
graph.addLink(route.ID, route.NextNode);
});
break;
}
}); });
return graph; return graph;
}), }),

6
ui-v2/app/components/route-card.js
View File

@ -4,12 +4,6 @@ import { get, computed } from '@ember/object';
export default Component.extend({ export default Component.extend({
tagName: '', tagName: '',
path: computed('item', function() { path: computed('item', function() {
if (get(this, 'item.Default')) {
return {
type: 'Default',
value: '/',
};
}
return Object.entries(get(this, 'item.Definition.Match.HTTP') || {}).reduce( return Object.entries(get(this, 'item.Definition.Match.HTTP') || {}).reduce(
function(prev, [key, value]) { function(prev, [key, value]) {
if (key.toLowerCase().startsWith('path')) { if (key.toLowerCase().startsWith('path')) {

2
ui-v2/app/templates/components/route-card.hbs
View File

@ -12,9 +12,7 @@
{{path.type}} {{path.type}}
</dt> </dt>
<dd> <dd>
{{#if (not-eq path.type 'Default')}}
{{path.value}} {{path.value}}
{{/if}}
</dd> </dd>
</dl> </dl>
</header> </header>

104
ui-v2/app/templates/dc/services/show.hbs
View File

@ -1,59 +1,59 @@
{{title item.Service.Service}} {{title item.Service.Service}}
{{#app-view class="service show"}} {{#app-view class="service show"}}
{{#block-slot name='notification' as |status type|}} {{#block-slot name='notification' as |status type|}}
{{partial 'dc/services/notifications'}} {{partial 'dc/services/notifications'}}
{{/block-slot}} {{/block-slot}}
{{#block-slot name='breadcrumbs'}} {{#block-slot name='breadcrumbs'}}
<ol> <ol>
<li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li> <li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
</ol> </ol>
{{/block-slot}} {{/block-slot}}
{{#block-slot name='header'}} {{#block-slot name='header'}}
<h1> <h1>
{{ item.Service.Service }} {{item.Service.Service}}
{{#with (service/external-source item.Service) as |externalSource| }} {{#with (service/external-source item.Service) as |externalSource|}}
{{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg| }} {{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg|}}
{{#if (not-eq bg 'none') }} {{#if (not-eq bg 'none')}}
<span data-test-external-source="{{externalSource}}" style={{{ concat 'background-image:' bg }}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span> <span data-test-external-source={{externalSource}} style={{{concat 'background-image:' bg}}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
{{/if}} {{/if}}
{{/with}} {{/with}}
{{/with}} {{/with}}
{{#if (eq item.Service.Kind 'connect-proxy')}} {{#if (eq item.Service.Kind 'connect-proxy')}}
<span class="kind-proxy">Proxy</span> <span class="kind-proxy">Proxy</span>
{{else if (eq item.Service.Kind 'mesh-gateway')}} {{else if (eq item.Service.Kind 'mesh-gateway')}}
<span class="kind-proxy">Mesh Gateway</span> <span class="kind-proxy">Mesh Gateway</span>
{{/if}} {{/if}}
</h1> </h1>
<label for="toolbar-toggle"></label> <label for="toolbar-toggle"></label>
{{tab-nav {{tab-nav
items=(compact items=(compact
(array (array
'Instances' 'Instances'
(if chain 'Routing' '') (if (not-eq chain null) 'Routing' '')
'Tags' 'Tags'
) )
) )
selected=selectedTab selected=selectedTab
}} }}
{{/block-slot}} {{/block-slot}}
{{#block-slot name='actions'}} {{#block-slot name='actions'}}
{{#if urls.service}} {{#if urls.service}}
{{#templated-anchor data-test-dashboard-anchor href=urls.service vars=(hash Datacenter=dc Service=(hash Name=item.Service.Service)) rel="external"}}Open Dashboard{{/templated-anchor}} {{#templated-anchor data-test-dashboard-anchor href=urls.service vars=(hash Datacenter=dc Service=(hash Name=item.Service.Service)) rel="external"}}Open Dashboard{{/templated-anchor}}
{{/if}} {{/if}}
{{/block-slot}} {{/block-slot}}
{{#block-slot name='content'}} {{#block-slot name='content'}}
{{#each {{#each
(compact (compact
(array (array
(hash id=(slugify 'Instances') partial='dc/services/instances') (hash id=(slugify 'Instances') partial='dc/services/instances')
(if chain (hash id=(slugify 'Routing') partial='dc/services/routing') '') (if (not-eq chain null) (hash id=(slugify 'Routing') partial='dc/services/routing') '')
(hash id=(slugify 'Tags') partial='dc/services/tags') (hash id=(slugify 'Tags') partial='dc/services/tags')
) )
) as |panel| ) as |panel|
}} }}
{{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action "change")}} {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action 'change')}}
{{partial panel.partial}} {{partial panel.partial}}
{{/tab-section}} {{/tab-section}}
{{/each}} {{/each}}
{{/block-slot}} {{/block-slot}}
{{/app-view}} {{/app-view}}

8
ui-v2/app/utils/components/discovery-chain/index.js
View File

@ -37,7 +37,6 @@ export const getAlternateServices = function(targets, a) {
export const getSplitters = function(nodes) { export const getSplitters = function(nodes) {
return getNodesByType(nodes, 'splitter').map(function(item) { return getNodesByType(nodes, 'splitter').map(function(item) {
// Splitters need IDs adding so we can find them in the DOM later // Splitters need IDs adding so we can find them in the DOM later
item.ID = `splitter:${item.Name}`;
// splitters have a service.nspace as a name // splitters have a service.nspace as a name
// do the reverse dance to ensure we don't mess up any // do the reverse dance to ensure we don't mess up any
// serivice names with dots in them // serivice names with dots in them
@ -45,8 +44,11 @@ export const getSplitters = function(nodes) {
temp.reverse(); temp.reverse();
temp.shift(); temp.shift();
temp.reverse(); temp.reverse();
item.Name = temp.join('.'); return {
return item; ...item,
ID: `splitter:${item.Name}`,
Name: temp.join('.'),
};
}); });
}; };
export const getRoutes = function(nodes, uid) { export const getRoutes = function(nodes, uid) {

6
ui-v2/yarn.lock
View File

@ -992,9 +992,9 @@
js-yaml "^3.13.1" js-yaml "^3.13.1"
"@hashicorp/consul-api-double@^2.6.2": "@hashicorp/consul-api-double@^2.6.2":
version "2.11.0" version "2.12.0"
resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.11.0.tgz#0b833893ccc5cfb9546b1513127d5e92d30f2262" resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.12.0.tgz#725078f770bbd0ef75a5f2498968c5c8891f90a2"
integrity sha512-2MO1jiwuJyPlSGQ4AeFtLKJWmLSj0msoiaRHPtj6YPjm69ZkY/t4U4SU3cfpVn2Dx7wHzXe//9GvNHI1gRxAzg== integrity sha512-8OcgesUjWQ8AjaXzbz3tGJQn1kM0sN6pLidGM7isNPUyYmIjIEXQzaeUQYzsfv0N2Ko9ZuOXYUsaBl8IK1KGow==
"@hashicorp/ember-cli-api-double@^2.0.0": "@hashicorp/ember-cli-api-double@^2.0.0":
version "2.0.0" version "2.0.0"