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

4 years ago · 3aef5cde20
parent e889f7dbcd
commit 3aef5cde20
3 changed files with 83 additions and 43 deletions
--- 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
--- 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;
  };
 });
--- 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
+export let dump = () => {};
 // in the production codebase. In future it would be good to figure out how to do this
 // without having to use comments.
-// const indent = function(num) {
+runInDebug(() => {
-//   return Array(num).fill('  ', 0, num).join('')
+  const indent = function(num) {
-// }
+    return Array(num)
-// /**
+      .fill('  ', 0, num)
-//  * String dumper to produce Router.map code
+      .join('');
-//  * Uses { walk } to recursively walk through a JSON object of routes
+  };
-//  * to produce the code necessary to define your routes for your ember application
+  /**
-//  *
+   * String dumper to produce Router.map code
-//  * @param {object} routes - JSON representation of routes
+   * Uses { walk } to recursively walk through a JSON object of routes
-//  * @example `console.log(dump(routes));`
+   * to produce the code necessary to define your routes for your ember application
-//  */
+   *
-// export const dump = function(routes) {
+   * @param {object} routes - JSON representation of routes
-//   let level = 2;
+   * @example `console.log(dump(routes));`
-//   const obj = {
+   */
-//     out: '',
+  dump = function(routes) {
-//     route: function(name, options, cb) {
+    let level = 2;
-//       this.out += `${indent(level)}this.route('${name}', ${JSON.stringify(options)}`;
+    const obj = {
-//       if(cb) {
+      out: '',
-//         level ++;
+      route: function(name, options, cb) {
-//         this.out += `, function() {
+        this.out += `${indent(level)}this.route('${name}', ${JSON.stringify(options)}`;
-// `;
+        if (cb) {
-//         cb.apply(this, []);
+          level++;
-//         level --;
+          this.out += `, function() {
-//         this.out += `${indent(level)}});
+`;
-// `;
+          cb.apply(this, []);
-//       } else {
+          level--;
-//         this.out += ');';
+          this.out += `${indent(level)}});
-//       }
+`;
-//       this.out += `
+        } else {
-// `;
+          this.out += ');';
-//     }
+        }
-//   };
+        this.out += `
-//   walk.apply(obj, [routes])
+`;
-//   return `Router.map(
+      },
-//   function() {
+    };
-// ${obj.out}
+    walk.apply(obj, [routes]);
-//   }
+    return `Router.map(
-// );`;
+  function() {
-// }
+${obj.out}
  }
 );`;
  };
 });