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

ui: Rearrange Service detail page to load Topology and Routing tabs separately (#9401)

This commit is contained in:
John Cowen 2020-12-16 09:18:29 +00:00 committed by GitHub
parent a907922ddb
commit 78ed71b2c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 184 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/packages/consul-ui/app/controllers/dc/services/show.js
View File

@ -1,12 +1,10 @@
import { inject as service } from '@ember/service';
import { alias } from '@ember/object/computed';
import Controller from '@ember/controller';
import { get, action } from '@ember/object';
export default class ShowController extends Controller {
@service('flashMessages') notify;
@alias('items.firstObject') item;
@action
error(e) {
if (e.target.readyState === 1) {
@ -19,14 +17,7 @@ export default class ShowController extends Controller {
action: 'update',
});
}
[
e.target,
this.intentions,
this.chain,
this.proxies,
this.gatewayServices,
this.topology,
].forEach(function(item) {
[e.target, this.proxies].forEach(function(item) {
if (item && typeof item.close === 'function') {
item.close();
}

69
ui/packages/consul-ui/app/routes/dc.js
View File

@ -1,6 +1,5 @@
import { inject as service } from '@ember/service';
import Route from 'consul-ui/routing/route';
import { hash, Promise } from 'rsvp';
import { get, action } from '@ember/object';
// TODO: We should potentially move all these nspace related things
@ -24,49 +23,35 @@ const findActiveNspace = function(nspaces, nspace) {
return found;
};
export default class DcRoute extends Route {
@service('repository/dc')
repo;
@service('repository/dc') repo;
@service('repository/nspace/disabled') nspacesRepo;
@service('settings') settingsRepo;
@service('repository/nspace/disabled')
nspacesRepo;
@service('settings')
settingsRepo;
model(params) {
async model(params) {
const app = this.modelFor('application');
return hash({
nspace: this.nspacesRepo.getActive(),
token: this.settingsRepo.findBySlug('token'),
dc: this.repo.findBySlug(params.dc, app.dcs),
})
.then(function(model) {
return hash({
...model,
...{
// if there is only 1 namespace then use that
// otherwise find the namespace object that corresponds
// to the active one
nspace:
app.nspaces.length > 1
? findActiveNspace(app.nspaces, model.nspace)
: app.nspaces.firstObject,
},
});
})
.then(model => {
if (get(model, 'token.SecretID')) {
return hash({
...model,
...{
// When disabled nspaces is [], so nspace is undefined
permissions: this.nspacesRepo.authorize(params.dc, get(model, 'nspace.Name')),
},
});
} else {
return model;
}
});
let [token, nspace, dc] = await Promise.all([
this.settingsRepo.findBySlug('token'),
this.nspacesRepo.getActive(),
this.repo.findBySlug(params.dc, app.dcs),
]);
// if there is only 1 namespace then use that
// otherwise find the namespace object that corresponds
// to the active one
nspace =
app.nspaces.length > 1 ? findActiveNspace(app.nspaces, nspace) : app.nspaces.firstObject;
let permissions;
if (get(token, 'SecretID')) {
// When disabled nspaces is [], so nspace is undefined
permissions = await this.nspacesRepo.authorize(params.dc, get(nspace || {}, 'Name'));
}
return {
dc,
nspace,
token,
permissions,
};
}
setupController(controller, model) {

55
ui/packages/consul-ui/app/routes/dc/services/show.js
View File

@ -1,68 +1,51 @@
import { inject as service } from '@ember/service';
import Route from 'consul-ui/routing/route';
import { get } from '@ember/object';
import { action } from '@ember/object';
export default class ShowRoute extends Route {
@service('data-source/service') data;
@service('repository/intention') repo;
@service('ui-config') config;
@action
async createIntention(source, destination) {
const model = this.repo.create({
Datacenter: source.Datacenter,
SourceName: source.Name,
SourceNS: source.Namespace || 'default',
DestinationName: destination.Name,
DestinationNS: destination.Namespace || 'default',
Action: 'allow',
});
await this.repo.persist(model);
this.refresh();
}
async model(params, transition) {
const dc = this.modelFor('dc').dc.Name;
const dc = this.modelFor('dc').dc;
const nspace = this.modelFor('nspace').nspace.substr(1);
const slug = params.name;
let chain = null;
let topology = null;
let proxies = [];
const urls = this.config.get().dashboard_url_templates;
const items = await this.data.source(
uri => uri`/${nspace}/${dc}/service-instances/for-service/${params.name}`
uri => uri`/${nspace}/${dc.Name}/service-instances/for-service/${params.name}`
);
const item = get(items, 'firstObject');
if (get(item, 'IsOrigin')) {
chain = await this.data.source(uri => uri`/${nspace}/${dc}/discovery-chain/${params.name}`);
proxies = await this.data.source(
uri => uri`/${nspace}/${dc}/proxies/for-service/${params.name}`
proxies = this.data.source(
uri => uri`/${nspace}/${dc.Name}/proxies/for-service/${params.name}`
);
if (get(item, 'IsMeshOrigin')) {
let kind = get(item, 'Service.Kind');
if (typeof kind === 'undefined') {
kind = '';
}
topology = await this.data.source(
uri => uri`/${nspace}/${dc}/topology/${params.name}/${kind}`
);
}
// TODO: Temporary ping to see if a dc is MeshEnabled which we use in
// order to decide whether to show certain tabs in the template. This is
// a bit of a weird place to do this but we are trying to avoid wasting
// HTTP requests and as disco chain is the most likely to be reused, we
// use that endpoint here. Eventually if we have an endpoint specific to
// a dc that gives us more DC specific info we can use that instead
// higher up the routing hierarchy instead.
let chain = this.data.source(
uri => uri`/${nspace}/${dc.Name}/discovery-chain/${params.name}`
);
[chain, proxies] = await Promise.all([chain, proxies]);
// we close the chain for now, if you enter the routing tab before the
// EventSource comes around to request again, this one will just be
// reopened and reused
chain.close();
}
return {
dc,
nspace,
slug,
items,
urls,
chain,
proxies,
topology,
};
}

14
ui/packages/consul-ui/app/routes/dc/services/show/index.js
View File

@ -2,21 +2,20 @@ import Route from '@ember/routing/route';
import { get } from '@ember/object';
export default class IndexRoute extends Route {
afterModel(model, transition) {
async afterModel(model, transition) {
const parent = this.routeName
.split('.')
.slice(0, -1)
.join('.');
// the default selected tab depends on whether you have any healthchecks or not
// so check the length here.
let to = 'topology';
const parentModel = this.modelFor(parent);
const hasProxy = get(parentModel, 'proxies.length') !== 0;
const kind = get(parentModel, 'items.firstObject.Service.Kind');
const item = get(parentModel, 'items.firstObject');
const kind = get(item, 'Service.Kind');
const hasTopology = get(parentModel, 'dc.MeshEnabled') && get(item, 'IsMeshOrigin');
switch (kind) {
case 'ingress-gateway':
if (!get(parentModel, 'topology.Datacenter')) {
if (!hasTopology) {
to = 'upstreams';
}
break;
@ -27,11 +26,10 @@ export default class IndexRoute extends Route {
to = 'instances';
break;
default:
if (!hasProxy || !get(parentModel, 'topology.Datacenter')) {
if (!hasProxy || !hasTopology) {
to = 'instances';
}
}
this.replaceWith(`${parent}.${to}`, parentModel);
}
}

2
ui/packages/consul-ui/app/routes/dc/services/show/instances.js
View File

@ -15,7 +15,7 @@ export default class InstancesRoute extends Route {
},
};
model() {
async model() {
const parent = this.routeName
.split('.')
.slice(0, -1)

15
ui/packages/consul-ui/app/routes/dc/services/show/routing.js
View File

@ -1,16 +1,25 @@
import Route from 'consul-ui/routing/route';
import { inject as service } from '@ember/service';
import { get } from '@ember/object';
export default class RoutingRoute extends Route {
model() {
@service('data-source/service') data;
async model(params, transition) {
const parent = this.routeName
.split('.')
.slice(0, -1)
.join('.');
return this.modelFor(parent);
const model = this.modelFor(parent);
return {
...model,
chain: await this.data.source(
uri => uri`/${model.nspace}/${model.dc.Name}/discovery-chain/${model.slug}`
),
};
}
afterModel(model, transition) {
async afterModel(model, transition) {
if (!get(model, 'chain')) {
const parent = this.routeName
.split('.')

34
ui/packages/consul-ui/app/routes/dc/services/show/topology.js
View File

@ -1,18 +1,48 @@
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { get, action } from '@ember/object';
export default class TopologyRoute extends Route {
@service('ui-config') config;
@service('env') env;
@service('data-source/service') data;
@service('repository/intention') repo;
model() {
@action
async createIntention(source, destination) {
const model = this.repo.create({
Datacenter: source.Datacenter,
SourceName: source.Name,
SourceNS: source.Namespace || 'default',
DestinationName: destination.Name,
DestinationNS: destination.Namespace || 'default',
Action: 'allow',
});
await this.repo.persist(model);
this.refresh();
}
async model() {
const parent = this.routeName
.split('.')
.slice(0, -1)
.join('.');
const model = this.modelFor(parent);
const dc = get(model, 'dc');
const nspace = get(model, 'nspace');
const item = get(model, 'items.firstObject');
if (get(item, 'IsMeshOrigin')) {
let kind = get(item, 'Service.Kind');
if (typeof kind === 'undefined') {
kind = '';
}
model.topology = await this.data.source(
uri => uri`/${nspace}/${dc.Name}/topology/${model.slug}/${kind}`
);
}
return {
...this.modelFor(parent),
...model,
hasMetricsProvider: !!this.config.get().metrics_provider,
isRemoteDC: this.env.var('CONSUL_DATACENTER_LOCAL') !== this.modelFor('dc').dc.Name,
};

25
ui/packages/consul-ui/app/services/repository/dc.js
View File

@ -12,18 +12,16 @@ export default class DcService extends RepositoryService {
return modelName;
}
findAll() {
async findAll() {
return this.store.query(this.getModelName(), {});
}
findBySlug(name, items) {
async findBySlug(name, items) {
if (name != null) {
const item = items.findBy('Name', name);
if (item) {
return this.settings.persist({ dc: get(item, 'Name') }).then(function() {
// TODO: create a model
return { Name: get(item, 'Name') };
});
const item = await items.findBy('Name', name);
if (typeof item !== 'undefined') {
await this.settings.persist({ dc: get(item, 'Name') });
return item;
}
}
const e = new Error('Page not found');
@ -31,22 +29,21 @@ export default class DcService extends RepositoryService {
return Promise.reject({ errors: [e] });
}
getActive(name, items) {
const settings = this.settings;
return Promise.all([name || settings.findBySlug('dc'), items || this.findAll()]).then(
async getActive(name, items) {
return Promise.all([name || this.settings.findBySlug('dc'), items || this.findAll()]).then(
([name, items]) => {
return this.findBySlug(name, items).catch(e => {
return this.findBySlug(name, items).catch(async e => {
const item =
items.findBy('Name', this.env.var('CONSUL_DATACENTER_LOCAL')) ||
get(items, 'firstObject');
settings.persist({ dc: get(item, 'Name') });
await this.settings.persist({ dc: get(item, 'Name') });
return item;
});
}
);
}
clearActive() {
async clearActive() {
return this.settings.delete('dc');
}
}

142
ui/packages/consul-ui/app/templates/dc/services/show.hbs
View File

@ -1,75 +1,73 @@
<EventSource @src={{items}} @onerror={{action "error"}} />
<EventSource @src={{chain}} />
<EventSource @src={{intentions}} />
<EventSource @src={{proxies}} />
<EventSource @src={{gatewayServices}} />
<EventSource @src={{topology}} />
{{page-title item.Service.Service}}
<AppView>
<BlockSlot @name="notification" as |status type|>
<Consul::Service::Notifications
@type={{type}}
@status={{status}}
/>
</BlockSlot>
<BlockSlot @name="breadcrumbs">
<ol>
<li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
</ol>
</BlockSlot>
<BlockSlot @name="header">
<h1>
{{item.Service.Service}}
</h1>
<Consul::ExternalSource @item={{item.Service}} />
<Consul::Kind @item={{item.Service}} @withInfo={{true}} />
</BlockSlot>
<BlockSlot @name="nav">
{{#if (not-eq item.Service.Kind 'mesh-gateway')}}
<TabNav @items={{
compact
(array
(if (and topology.Datacenter (or (gt proxies.length 0) (eq item.Service.Kind 'ingress-gateway')))
(hash label="Topology" href=(href-to "dc.services.show.topology") selected=(is-href "dc.services.show.topology"))
'')
(if (eq item.Service.Kind 'terminating-gateway')
(hash label="Linked Services" href=(href-to "dc.services.show.services") selected=(is-href "dc.services.show.services"))
'')
(if (eq item.Service.Kind 'ingress-gateway')
(hash label="Upstreams" href=(href-to "dc.services.show.upstreams") selected=(is-href "dc.services.show.upstreams"))
'')
(hash label="Instances" href=(href-to "dc.services.show.instances") selected=(is-href "dc.services.show.instances"))
(if (not-eq item.Service.Kind 'terminating-gateway')
(hash label="Intentions" href=(href-to "dc.services.show.intentions") selected=(is-href "dc.services.show.intentions"))
'')
(if chain.Chain
(hash label="Routing" href=(href-to "dc.services.show.routing") selected=(is-href "dc.services.show.routing"))
'')
(if (not item.Service.Kind)
(hash label="Tags" href=(href-to "dc.services.show.tags") selected=(is-href "dc.services.show.tags"))
'')
)
}}/>
{{/if}}
</BlockSlot>
<BlockSlot @name="actions">
{{#if urls.service}}
<a href={{render-template urls.service (hash
Datacenter=dc
Service=(hash Name=item.Service.Service)
)}}
target="_blank"
rel="noopener noreferrer"
data-test-dashboard-anchor>
Open Dashboard
</a>
{{#let items.firstObject as |item|}}
{{page-title item.Service.Service}}
<AppView>
<BlockSlot @name="notification" as |status type|>
<Consul::Service::Notifications
@type={{type}}
@status={{status}}
/>
</BlockSlot>
<BlockSlot @name="breadcrumbs">
<ol>
<li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
</ol>
</BlockSlot>
<BlockSlot @name="header">
<h1>
{{item.Service.Service}}
</h1>
<Consul::ExternalSource @item={{item.Service}} />
<Consul::Kind @item={{item.Service}} @withInfo={{true}} />
</BlockSlot>
<BlockSlot @name="nav">
{{#if (not-eq item.Service.Kind 'mesh-gateway')}}
<TabNav @items={{
compact
(array
(if (and dc.MeshEnabled item.IsMeshOrigin (or (gt proxies.length 0) (eq item.Service.Kind 'ingress-gateway')))
(hash label="Topology" href=(href-to "dc.services.show.topology") selected=(is-href "dc.services.show.topology"))
'')
(if (eq item.Service.Kind 'terminating-gateway')
(hash label="Linked Services" href=(href-to "dc.services.show.services") selected=(is-href "dc.services.show.services"))
'')
(if (eq item.Service.Kind 'ingress-gateway')
(hash label="Upstreams" href=(href-to "dc.services.show.upstreams") selected=(is-href "dc.services.show.upstreams"))
'')
(hash label="Instances" href=(href-to "dc.services.show.instances") selected=(is-href "dc.services.show.instances"))
(if (not-eq item.Service.Kind 'terminating-gateway')
(hash label="Intentions" href=(href-to "dc.services.show.intentions") selected=(is-href "dc.services.show.intentions"))
'')
(if (and dc.MeshEnabled item.IsOrigin)
(hash label="Routing" href=(href-to "dc.services.show.routing") selected=(is-href "dc.services.show.routing"))
'')
(if (not item.Service.Kind)
(hash label="Tags" href=(href-to "dc.services.show.tags") selected=(is-href "dc.services.show.tags"))
'')
)
}}/>
{{/if}}
</BlockSlot>
<BlockSlot @name="content">
<Outlet
@name={{routeName}}
as |o|>
{{outlet}}
</Outlet>
</BlockSlot>
</AppView>
</BlockSlot>
<BlockSlot @name="actions">
{{#if urls.service}}
<a href={{render-template urls.service (hash
Datacenter=dc.Name
Service=(hash Name=item.Service.Service)
)}}
target="_blank"
rel="noopener noreferrer"
data-test-dashboard-anchor>
Open Dashboard
</a>
{{/if}}
</BlockSlot>
<BlockSlot @name="content">
<Outlet
@name={{routeName}}
as |o|>
{{outlet}}
</Outlet>
</BlockSlot>
</AppView>
{{/let}}

1
ui/packages/consul-ui/app/templates/dc/services/show/routing.hbs
View File

@ -1,3 +1,4 @@
<EventSource @src={{chain}} />
<div id="routing" class="tab-section">
<div role="tabpanel">
<Consul::DiscoveryChain

5
ui/packages/consul-ui/app/templates/dc/services/show/topology.hbs
View File

@ -1,3 +1,4 @@
<EventSource @src={{topology}} />
<div id="topology" class="tab-section">
<div role="tabpanel">
{{#if topology.FilteredByACLs}}
@ -6,11 +7,11 @@
{{#if topology}}
<TopologyMetrics
@nspace={{nspace}}
@dc={{dc}}
@dc={{dc.Name}}
@service={{items.firstObject}}
@topology={{topology}}
@metricsHref={{render-template urls.service (hash
Datacenter=dc
Datacenter=dc.Name
Service=items.firstObject
)}}
@isRemoteDC={{isRemoteDC}}