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:
parent
1d26be2415
commit
1fdf60234c
|
@ -31,11 +31,13 @@ export default Component.extend({
|
|||
this._super(...arguments);
|
||||
this._viewportlistener.add(
|
||||
this.dom.isInViewport(this.element, bool => {
|
||||
set(this, 'isDisplayed', bool);
|
||||
if (this.isDisplayed) {
|
||||
this.addPathListeners();
|
||||
} else {
|
||||
this.ticker.destroy(this);
|
||||
if (get(this, 'isDisplayed') !== bool) {
|
||||
set(this, 'isDisplayed', bool);
|
||||
if (this.isDisplayed) {
|
||||
this.addPathListeners();
|
||||
} 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 => typeof item.Definition === 'undefined')
|
||||
) {
|
||||
let nextNode = `resolver:${this.chain.ServiceName}.${this.chain.Namespace}.${this.chain.Datacenter}`;
|
||||
const splitterID = `splitter:${this.chain.ServiceName}`;
|
||||
if (typeof this.chain.Nodes[splitterID] !== 'undefined') {
|
||||
let nextNode;
|
||||
const resolverID = `resolver:${this.chain.ServiceName}.${this.chain.Namespace}.${this.chain.Datacenter}`;
|
||||
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;
|
||||
}
|
||||
routes.push({
|
||||
Default: true,
|
||||
ID: `route:${this.chain.ServiceName}`,
|
||||
Name: this.chain.ServiceName,
|
||||
Definition: {
|
||||
Match: {
|
||||
HTTP: {
|
||||
PathPrefix: '/',
|
||||
if (typeof nextNode !== 'undefined') {
|
||||
routes.push({
|
||||
Default: true,
|
||||
ID: `route:${this.chain.ServiceName}`,
|
||||
Name: this.chain.ServiceName,
|
||||
Definition: {
|
||||
Match: {
|
||||
HTTP: {
|
||||
PathPrefix: '/',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
NextNode: nextNode,
|
||||
});
|
||||
NextNode: nextNode,
|
||||
});
|
||||
}
|
||||
}
|
||||
return routes;
|
||||
}),
|
||||
|
@ -92,23 +99,17 @@ export default Component.extend({
|
|||
get(this, 'chain.Nodes')
|
||||
);
|
||||
}),
|
||||
graph: computed('chain.Nodes', function() {
|
||||
graph: computed('splitters', 'routes', function() {
|
||||
const graph = this.dataStructs.graph();
|
||||
const router = this.chain.ServiceName;
|
||||
Object.entries(get(this, 'chain.Nodes')).forEach(([key, item]) => {
|
||||
switch (item.Type) {
|
||||
case 'splitter':
|
||||
item.Splits.forEach(splitter => {
|
||||
graph.addLink(item.ID, splitter.NextNode);
|
||||
});
|
||||
break;
|
||||
case 'router':
|
||||
item.Routes.forEach((route, i) => {
|
||||
route = createRoute(route, router, this.dom.guid);
|
||||
graph.addLink(route.ID, route.NextNode);
|
||||
});
|
||||
break;
|
||||
}
|
||||
this.splitters.forEach(item => {
|
||||
item.Splits.forEach(splitter => {
|
||||
graph.addLink(item.ID, splitter.NextNode);
|
||||
});
|
||||
});
|
||||
this.routes.forEach((route, i) => {
|
||||
route = createRoute(route, router, this.dom.guid);
|
||||
graph.addLink(route.ID, route.NextNode);
|
||||
});
|
||||
return graph;
|
||||
}),
|
||||
|
|
|
@ -4,12 +4,6 @@ import { get, computed } from '@ember/object';
|
|||
export default Component.extend({
|
||||
tagName: '',
|
||||
path: computed('item', function() {
|
||||
if (get(this, 'item.Default')) {
|
||||
return {
|
||||
type: 'Default',
|
||||
value: '/',
|
||||
};
|
||||
}
|
||||
return Object.entries(get(this, 'item.Definition.Match.HTTP') || {}).reduce(
|
||||
function(prev, [key, value]) {
|
||||
if (key.toLowerCase().startsWith('path')) {
|
||||
|
|
|
@ -12,9 +12,7 @@
|
|||
{{path.type}}
|
||||
</dt>
|
||||
<dd>
|
||||
{{#if (not-eq path.type 'Default')}}
|
||||
{{path.value}}
|
||||
{{/if}}
|
||||
</dd>
|
||||
</dl>
|
||||
</header>
|
||||
|
|
|
@ -1,59 +1,59 @@
|
|||
{{title item.Service.Service}}
|
||||
{{#app-view class="service show"}}
|
||||
{{#block-slot name='notification' as |status type|}}
|
||||
{{partial 'dc/services/notifications'}}
|
||||
{{/block-slot}}
|
||||
{{#block-slot name='breadcrumbs'}}
|
||||
<ol>
|
||||
<li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
|
||||
</ol>
|
||||
{{/block-slot}}
|
||||
{{#block-slot name='header'}}
|
||||
<h1>
|
||||
{{ item.Service.Service }}
|
||||
{{#with (service/external-source item.Service) as |externalSource| }}
|
||||
{{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg| }}
|
||||
{{#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>
|
||||
{{/if}}
|
||||
{{/with}}
|
||||
{{#block-slot name='notification' as |status type|}}
|
||||
{{partial 'dc/services/notifications'}}
|
||||
{{/block-slot}}
|
||||
{{#block-slot name='breadcrumbs'}}
|
||||
<ol>
|
||||
<li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
|
||||
</ol>
|
||||
{{/block-slot}}
|
||||
{{#block-slot name='header'}}
|
||||
<h1>
|
||||
{{item.Service.Service}}
|
||||
{{#with (service/external-source item.Service) as |externalSource|}}
|
||||
{{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg|}}
|
||||
{{#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>
|
||||
{{/if}}
|
||||
{{/with}}
|
||||
{{/with}}
|
||||
{{#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')}}
|
||||
<span class="kind-proxy">Mesh Gateway</span>
|
||||
<span class="kind-proxy">Mesh Gateway</span>
|
||||
{{/if}}
|
||||
</h1>
|
||||
<label for="toolbar-toggle"></label>
|
||||
{{tab-nav
|
||||
items=(compact
|
||||
(array
|
||||
'Instances'
|
||||
(if chain 'Routing' '')
|
||||
'Tags'
|
||||
)
|
||||
)
|
||||
selected=selectedTab
|
||||
}}
|
||||
{{/block-slot}}
|
||||
{{#block-slot name='actions'}}
|
||||
{{#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}}
|
||||
{{/if}}
|
||||
{{/block-slot}}
|
||||
{{#block-slot name='content'}}
|
||||
{{#each
|
||||
(compact
|
||||
(array
|
||||
(hash id=(slugify 'Instances') partial='dc/services/instances')
|
||||
(if chain (hash id=(slugify 'Routing') partial='dc/services/routing') '')
|
||||
(hash id=(slugify 'Tags') partial='dc/services/tags')
|
||||
)
|
||||
) as |panel|
|
||||
}}
|
||||
{{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action "change")}}
|
||||
{{partial panel.partial}}
|
||||
{{/tab-section}}
|
||||
{{/each}}
|
||||
{{/block-slot}}
|
||||
</h1>
|
||||
<label for="toolbar-toggle"></label>
|
||||
{{tab-nav
|
||||
items=(compact
|
||||
(array
|
||||
'Instances'
|
||||
(if (not-eq chain null) 'Routing' '')
|
||||
'Tags'
|
||||
)
|
||||
)
|
||||
selected=selectedTab
|
||||
}}
|
||||
{{/block-slot}}
|
||||
{{#block-slot name='actions'}}
|
||||
{{#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}}
|
||||
{{/if}}
|
||||
{{/block-slot}}
|
||||
{{#block-slot name='content'}}
|
||||
{{#each
|
||||
(compact
|
||||
(array
|
||||
(hash id=(slugify 'Instances') partial='dc/services/instances')
|
||||
(if (not-eq chain null) (hash id=(slugify 'Routing') partial='dc/services/routing') '')
|
||||
(hash id=(slugify 'Tags') partial='dc/services/tags')
|
||||
)
|
||||
) as |panel|
|
||||
}}
|
||||
{{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action 'change')}}
|
||||
{{partial panel.partial}}
|
||||
{{/tab-section}}
|
||||
{{/each}}
|
||||
{{/block-slot}}
|
||||
{{/app-view}}
|
||||
|
|
|
@ -37,7 +37,6 @@ export const getAlternateServices = function(targets, a) {
|
|||
export const getSplitters = function(nodes) {
|
||||
return getNodesByType(nodes, 'splitter').map(function(item) {
|
||||
// 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
|
||||
// do the reverse dance to ensure we don't mess up any
|
||||
// serivice names with dots in them
|
||||
|
@ -45,8 +44,11 @@ export const getSplitters = function(nodes) {
|
|||
temp.reverse();
|
||||
temp.shift();
|
||||
temp.reverse();
|
||||
item.Name = temp.join('.');
|
||||
return item;
|
||||
return {
|
||||
...item,
|
||||
ID: `splitter:${item.Name}`,
|
||||
Name: temp.join('.'),
|
||||
};
|
||||
});
|
||||
};
|
||||
export const getRoutes = function(nodes, uid) {
|
||||
|
|
|
@ -992,9 +992,9 @@
|
|||
js-yaml "^3.13.1"
|
||||
|
||||
"@hashicorp/consul-api-double@^2.6.2":
|
||||
version "2.11.0"
|
||||
resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.11.0.tgz#0b833893ccc5cfb9546b1513127d5e92d30f2262"
|
||||
integrity sha512-2MO1jiwuJyPlSGQ4AeFtLKJWmLSj0msoiaRHPtj6YPjm69ZkY/t4U4SU3cfpVn2Dx7wHzXe//9GvNHI1gRxAzg==
|
||||
version "2.12.0"
|
||||
resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.12.0.tgz#725078f770bbd0ef75a5f2498968c5c8891f90a2"
|
||||
integrity sha512-8OcgesUjWQ8AjaXzbz3tGJQn1kM0sN6pLidGM7isNPUyYmIjIEXQzaeUQYzsfv0N2Ko9ZuOXYUsaBl8IK1KGow==
|
||||
|
||||
"@hashicorp/ember-cli-api-double@^2.0.0":
|
||||
version "2.0.0"
|
||||
|
|
Loading…
Reference in New Issue