diff --git a/ui/packages/consul-ui/README.md b/ui/packages/consul-ui/README.md index b97ebe4a55..1fb5fbeae7 100644 --- a/ui/packages/consul-ui/README.md +++ b/ui/packages/consul-ui/README.md @@ -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 diff --git a/ui/packages/consul-ui/app/router.js b/ui/packages/consul-ui/app/router.js index 25bd36bfdc..a85c772475 100644 --- a/ui/packages/consul-ui/app/router.js +++ b/ui/packages/consul-ui/app/router.js @@ -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(`
${str}
`); + } else { + win = window.open(endpoint.replace('%s', encodeURIComponent(str)), '_blank'); + } + win.focus(); + return; + }; +}); diff --git a/ui/packages/consul-ui/app/utils/routing/walk.js b/ui/packages/consul-ui/app/utils/routing/walk.js index a902e8c35c..82bccb5065 100644 --- a/ui/packages/consul-ui/app/utils/routing/walk.js +++ b/ui/packages/consul-ui/app/utils/routing/walk.js @@ -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} + } +);`; + }; +});