mirror of
https://github.com/status-im/consul.git
synced 2025-02-22 18:38:19 +00:00
8b12d0d09d
We use a `<DataSource @src={{url}} />` component throughout our UI for when we want to load data from within our components. The URL specified as the `@src` is used to map/lookup what is used in to retrieve data, for example we mostly use our repository methods wrapped with our Promise backed `EventSource` implementation, but DataSource URLs can also be mapped to EventTarget backed `EventSource`s and native `EventSource`s or `WebSockets` if we ever need to use those (for example these are options for potential streaming support with the Consul backend).
The URL to function/method mapping previous to this PR used a very naive humongous `switch` statement which was a temporary 'this is fine for the moment' solution, although we'd always wanted to replace with something more manageable.
Here we add `wayfarer` as a dependency - a very small (1kb), very fast, radix trie based router, and use that to perform the URL to function/method mapping.
This essentially turns every `DataSource` into a very small SPA - change its URL and the view of data changes. When the data itself changes, either the yielded view of data changes or the `onchange` event is fired with the changed data, making the externally sourced view of data completely reactive.
```javascript
// use the new decorator a service somewhere to annotate/decorate
// a method with the URL that can be used to access this method
@dataSource('/:ns/:dc/services')
async findAllByDatacenter(params) {
// get the data
}
// can use with JS in a route somewhere
async model() {
return this.data.source(uri => uri`/${nspace}/${dc}/services`)
}
```
```hbs
{{!-- or just straight in a template using the component --}}
<DataSource @src="/default/dc1/services" @onchange="" />
```
This also uses a new `container` Service to automatically execute/import certain services yet not execute them. This new service also provides a lookup that supports both standard ember DI lookup plus Class based lookup or these specific services. Lastly we also provide another debug function called DataSourceRoutes() which can be called from console which gives you a list of URLs and their mappings.
100 lines
3.3 KiB
JavaScript
100 lines
3.3 KiB
JavaScript
import { inject as service } from '@ember/service';
|
|
import Route from 'consul-ui/routing/route';
|
|
import { get, action } from '@ember/object';
|
|
|
|
// TODO: We should potentially move all these nspace related things
|
|
// up a level to application.js
|
|
|
|
const findActiveNspace = function(nspaces, nspace) {
|
|
let found = nspaces.find(function(item) {
|
|
return item.Name === nspace.Name;
|
|
});
|
|
if (typeof found === 'undefined') {
|
|
// if we can't find the nspace that was saved
|
|
// try default
|
|
found = nspaces.find(function(item) {
|
|
return item.Name === 'default';
|
|
});
|
|
// if there is no default just choose the first
|
|
if (typeof found === 'undefined') {
|
|
found = nspaces.firstObject;
|
|
}
|
|
}
|
|
return found;
|
|
};
|
|
export default class DcRoute extends Route {
|
|
@service('repository/dc') repo;
|
|
@service('repository/permission') permissionsRepo;
|
|
@service('repository/nspace/disabled') nspacesRepo;
|
|
@service('settings') settingsRepo;
|
|
|
|
async model(params) {
|
|
const app = this.modelFor('application');
|
|
|
|
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;
|
|
|
|
// When disabled nspaces is [], so nspace is undefined
|
|
const permissions = await this.permissionsRepo.findAll({
|
|
dc: params.dc,
|
|
nspace: get(nspace || {}, 'Name'),
|
|
});
|
|
return {
|
|
dc,
|
|
nspace,
|
|
token,
|
|
permissions,
|
|
};
|
|
}
|
|
|
|
setupController(controller, model) {
|
|
super.setupController(...arguments);
|
|
// the model here is actually required for the entire application
|
|
// but we need to wait until we are in this route so we know what the dc
|
|
// and or nspace is if the below changes please revists the comments
|
|
// in routes/application:model
|
|
this.controllerFor('application').setProperties(model);
|
|
}
|
|
|
|
// TODO: This will eventually be deprecated please see
|
|
// https://deprecations.emberjs.com/v3.x/#toc_deprecate-router-events
|
|
@action
|
|
willTransition(transition) {
|
|
if (
|
|
typeof transition !== 'undefined' &&
|
|
(transition.from.name.endsWith('nspaces.create') ||
|
|
transition.from.name.startsWith('nspace.dc.acls.tokens'))
|
|
) {
|
|
// Only when we create, reload the nspaces in the main menu to update them
|
|
// as we don't block for those
|
|
// And also when we [Use] a token reload the nspaces that you are able to see,
|
|
// including your permissions for being able to manage namespaces
|
|
// Potentially we should just do this on every single transition
|
|
// but then we would need to check to see if nspaces are enabled
|
|
const controller = this.controllerFor('application');
|
|
Promise.all([
|
|
this.nspacesRepo.findAll(),
|
|
this.permissionsRepo.findAll({
|
|
dc: get(controller, 'dc.Name'),
|
|
nspace: get(controller, 'nspace.Name'),
|
|
}),
|
|
]).then(([nspaces, permissions]) => {
|
|
if (typeof controller !== 'undefined') {
|
|
controller.setProperties({
|
|
nspaces: nspaces,
|
|
permissions: permissions,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|