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

hashicorp · Feb 1, 2021 · 3aef5cd · 3aef5cd
1 parent e889f7d
commit 3aef5cd
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 43 deletions.
diff --git 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
@@ -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;
+  };
+});
diff --git 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}
+  }
+);`;
+  };
+});