Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: Adds a Routes() router DSL dumping function only in dev mode #9666

Merged
merged 1 commit into from
Feb 1, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions ui/packages/consul-ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand Down
23 changes: 22 additions & 1 deletion ui/packages/consul-ui/app/router.js
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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 changes: 46 additions & 42 deletions ui/packages/consul-ui/app/utils/routing/walk.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { runInDebug } from '@ember/debug';

export const walk = function(routes) {
const keys = Object.keys(routes);
keys.forEach((item, i) => {
Expand Down Expand Up @@ -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}
}
);`;
};
});