open-consul/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js

164 lines
5.3 KiB
JavaScript

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { set, get, computed } from '@ember/object';
import { createRoute, getSplitters, getRoutes, getResolvers } from './utils';
export default Component.extend({
dom: service('dom'),
ticker: service('ticker'),
dataStructs: service('data-structs'),
classNames: ['discovery-chain'],
classNameBindings: ['active'],
selectedId: '',
init: function () {
this._super(...arguments);
this._listeners = this.dom.listeners();
},
didInsertElement: function () {
this._listeners.add(this.dom.document(), {
click: (e) => {
// all route/splitter/resolver components currently
// have classes that end in '-card'
if (!this.dom.closest('[class$="-card"]', e.target)) {
set(this, 'active', false);
set(this, 'selectedId', '');
}
},
});
},
willDestroyElement: function () {
this._super(...arguments);
this._listeners.remove();
this.ticker.destroy(this);
},
splitters: computed('chain.Nodes', function () {
return getSplitters(get(this, 'chain.Nodes'));
}),
routes: computed('chain.Nodes', function () {
const routes = getRoutes(get(this, 'chain.Nodes'), this.dom.guid);
// if we have no routes with a PathPrefix of '/' or one with no definition at all
// then add our own 'default catch all'
if (
!routes.find((item) => get(item, 'Definition.Match.HTTP.PathPrefix') === '/') &&
!routes.find((item) => typeof item.Definition === 'undefined')
) {
let nextNode;
const resolverID = `resolver:${this.chain.ServiceName}.${this.chain.Namespace}.${this.chain.Partition}.${this.chain.Datacenter}`;
const splitterID = `splitter:${this.chain.ServiceName}.${this.chain.Namespace}.${this.chain.Partition}`;
// The default router should look for a splitter first,
// if there isn't one try the default resolver
if (typeof this.chain.Nodes[splitterID] !== 'undefined') {
nextNode = splitterID;
} else if (typeof this.chain.Nodes[resolverID] !== 'undefined') {
nextNode = resolverID;
}
if (typeof nextNode !== 'undefined') {
const route = {
Default: true,
ID: `route:${this.chain.ServiceName}`,
Name: this.chain.ServiceName,
Definition: {
Match: {
HTTP: {
PathPrefix: '/',
},
},
},
NextNode: nextNode,
};
routes.push(createRoute(route, this.chain.ServiceName, this.dom.guid));
}
}
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,
this.chain.Partition,
this.chain.Namespace,
get(this, 'chain.Targets'),
get(this, 'chain.Nodes')
);
}),
graph: computed('splitters', 'routes.[]', function () {
const graph = this.dataStructs.graph();
this.splitters.forEach((item) => {
item.Splits.forEach((splitter) => {
graph.addLink(item.ID, splitter.NextNode);
});
});
this.routes.forEach((route, i) => {
graph.addLink(route.ID, route.NextNode);
});
return graph;
}),
selected: computed('selectedId', 'graph', function () {
if (this.selectedId === '' || !this.dom.element(`#${this.selectedId}`)) {
return {};
}
const id = this.selectedId;
const type = id.split(':').shift();
const nodes = [id];
const edges = [];
this.graph.forEachLinkedNode(id, (linkedNode, link) => {
nodes.push(linkedNode.id);
edges.push(`${link.fromId}>${link.toId}`);
this.graph.forEachLinkedNode(linkedNode.id, (linkedNode, link) => {
const nodeType = linkedNode.id.split(':').shift();
if (type !== nodeType && type !== 'splitter' && nodeType !== 'splitter') {
nodes.push(linkedNode.id);
edges.push(`${link.fromId}>${link.toId}`);
}
});
});
return {
nodes: nodes.map((item) => `#${CSS.escape(item)}`),
edges: edges.map((item) => `#${CSS.escape(item)}`),
};
}),
actions: {
click: function (e) {
const id = e.currentTarget.getAttribute('id');
if (id === this.selectedId) {
set(this, 'active', false);
set(this, 'selectedId', '');
} else {
set(this, 'active', true);
set(this, 'selectedId', id);
}
},
},
});