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

ui: Adds the dump router dumping function only in dev mode (#9666)

This commit is contained in:
John Cowen 2021-02-01 17:29:43 +00:00 committed by GitHub
parent ebfe7ce675
commit 30d8ee056e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 83 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/packages/consul-ui/README.md
View File

@ -9,6 +9,7 @@
- [Yarn Commands](#yarn-commands)
- [Running / Development](#running--development)
- [Browser 'Environment' Variables](#browser-environment-variables)
- [Browser 'Debug Utility' Functions](#browser-debug-utility-functions)
- [Code Generators](#code-generators)
- [Running Tests](#running-tests)
- [Linting](#linting)
@ -127,9 +128,23 @@ token/secret.
| `CONSUL_EXPOSED_COUNT` | (random) | Configure the number of exposed paths that the API returns. |
| `CONSUL_CHECK_COUNT` | (random) | Configure the number of health checks that the API returns. |
| `CONSUL_OIDC_PROVIDER_COUNT` | (random) | Configure the number of OIDC providers that the API returns. |
| `DEBUG_ROUTES_ENDPOINT` | undefined | When using the window.Routes() debug
utility ([see utility functions](#browser-debug-utility-functions)), use a URL to pass the route DSL to. %s in the URL will be replaced
with the route DSL - http://url.com?routes=%s |
See `./mock-api` for more details.
### Browser 'Debug Utility' Functions
We currently have one 'debug utility', that only exists during development (they
are removed from the production build using Embers `runInDebug`). You can call
these either straight from the console in WebInspector, or by using javascript
URLs i.e. `javascript:Routes()`
| Variable | Arguments | Description |
| -------- | --------- | ----------- |
| `Routes(url)` | url: The url to pass the DSL to, if left `undefined` just use a blank tab | Provides a way to easily print out Embers Route DSL for the application or to pass it straight to any third party utility such as ember-diagonal |
### Code Generators
Many classes used in the UI can be generated with ember generators, try `ember help generate` for more details

23
ui/packages/consul-ui/app/router.js
View File

@ -1,6 +1,7 @@
import EmberRouter from '@ember/routing/router';
import { runInDebug } from '@ember/debug';
import { env } from 'consul-ui/env';
import walk from 'consul-ui/utils/routing/walk';
import walk, { dump } from 'consul-ui/utils/routing/walk';
export const routes = {
// Our parent datacenter resource sets the namespace
@ -184,3 +185,23 @@ export default class Router extends EmberRouter {
}
Router.map(walk(routes));
// To print the Ember route DSL use `Routes()` in Web Inspectors console
// or `javascript:Routes()` in the location bar of your browser
runInDebug(() => {
window.Routes = (endpoint = env('DEBUG_ROUTES_ENDPOINT')) => {
if (!endpoint) {
endpoint = 'data:,%s';
}
let win;
const str = dump(routes);
if (endpoint.startsWith('data:,')) {
win = window.open('', '_blank');
win.document.write(`<body><pre>${str}</pre></body>`);
} else {
win = window.open(endpoint.replace('%s', encodeURIComponent(str)), '_blank');
}
win.focus();
return;
};
});

88
ui/packages/consul-ui/app/utils/routing/walk.js
View File

@ -1,3 +1,5 @@
import { runInDebug } from '@ember/debug';
export const walk = function(routes) {
const keys = Object.keys(routes);
keys.forEach((item, i) => {
@ -35,46 +37,48 @@ export default function(routes) {
};
}
// The following code is purposefully commented out to prevent it from ending up
// in the production codebase. In future it would be good to figure out how to do this
// without having to use comments.
export let dump = () => {};
// const indent = function(num) {
// return Array(num).fill(' ', 0, num).join('')
// }
// /**
// * String dumper to produce Router.map code
// * Uses { walk } to recursively walk through a JSON object of routes
// * to produce the code necessary to define your routes for your ember application
// *
// * @param {object} routes - JSON representation of routes
// * @example `console.log(dump(routes));`
// */
// export const dump = function(routes) {
// let level = 2;
// const obj = {
// out: '',
// route: function(name, options, cb) {
// this.out += `${indent(level)}this.route('${name}', ${JSON.stringify(options)}`;
// if(cb) {
// level ++;
// this.out += `, function() {
// `;
// cb.apply(this, []);
// level --;
// this.out += `${indent(level)}});
// `;
// } else {
// this.out += ');';
// }
// this.out += `
// `;
// }
// };
// walk.apply(obj, [routes])
// return `Router.map(
// function() {
// ${obj.out}
// }
// );`;
// }
runInDebug(() => {
const indent = function(num) {
return Array(num)
.fill(' ', 0, num)
.join('');
};
/**
* String dumper to produce Router.map code
* Uses { walk } to recursively walk through a JSON object of routes
* to produce the code necessary to define your routes for your ember application
*
* @param {object} routes - JSON representation of routes
* @example `console.log(dump(routes));`
*/
dump = function(routes) {
let level = 2;
const obj = {
out: '',
route: function(name, options, cb) {
this.out += `${indent(level)}this.route('${name}', ${JSON.stringify(options)}`;
if (cb) {
level++;
this.out += `, function() {
`;
cb.apply(this, []);
level--;
this.out += `${indent(level)}});
`;
} else {
this.out += ');';
}
this.out += `
`;
},
};
walk.apply(obj, [routes]);
return `Router.map(
function() {
${obj.out}
}
);`;
};
});