mirror of https://github.com/status-im/consul.git
ui: Adds the dump router dumping function only in dev mode (#9666)
This commit is contained in:
John Cowen
GitHub
parent
e889f7dbcd
commit
3aef5cde20
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
}
|
||||
);`;
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue