ui: [dev] Adds express middleware, removes need to run api dev server (#6750)

* ui: Adds some express middleware, removes need to run api dev server

@hashicorp/api-double comes with a basic express based server to run the
API double. This uses the express based server that ember-cli includes
and uses to run your app instead.

Eventually this will be moved to the @hashicorp/ember-cli-api-double
addon instead.

* Adds `make start-consul` to ease running a dev UI against Consul itself

ui-v2/.ember-cli

@@ -5,6 +5,5 @@
 
     Setting `disableAnalytics` to true will prevent any data from being sent.
   */
-  "disableAnalytics": false,
+  "disableAnalytics": false
-  "proxy": "http://localhost:3000"
 }

ui-v2/GNUmakefile

@@ -29,6 +29,9 @@ build: deps
 start: deps
 	yarn run start
 
+start-consul: deps
+	yarn run start:consul
+
 start-api: deps
 	yarn run start:api
 

ui-v2/README.md

@@ -21,14 +21,11 @@ All tooling scripts below primarily use `make` which in turn call node package s
 
 ## Running / Development
 
-The source code comes with a small server that runs enough of the consul API
+The source code comes with a small development mode that runs enough of the consul API
 as a set of mocks/fixtures to be able to run the UI without having to run
 consul.
 
-* `make start-api` or `yarn start:api` (this starts a Consul API double running
+* `make start` or `yarn start` to start the ember app
-on http://localhost:3000)
-* `make start` or `yarn start` to start the ember app that connects to the
-above API double
 * Visit your app at [http://localhost:4200](http://localhost:4200).
 
 To enable ACLs using the mock API, use Web Inspector to set a cookie as follows:
@@ -51,6 +48,20 @@ CONSUL_NODE_CODE=1000
 
 See `./node_modules/@hashicorp/consul-api-double` for more details.
 
+If you wish to run the UI code against a running consul instance, uncomment the `proxy`
+line in `.ember-cli` to point ember-cli to your consul instance.
+
+You can also run the UI against a normal Consul installation.
+
+`make start-consul` or `yarn run start:consul` will use the `CONSUL_HTTP_ADDR`
+environment variable to locate the Consul installation. If that it not set
+`start-consul` will use `http://localhost:8500`.
+
+Example usage:
+
+```
+CONSUL_HTTP_ADDR=http://10.0.0.1:8500 make start-consul
+```
 
 ### Code Generators
 

ui-v2/lib/startup/index.js

@@ -1,7 +1,36 @@
 /* eslint-env node */
 'use strict';
+//
+const $ = process.env;
+const fs = require('fs');
+const path = require('path');
+const promisify = require('util').promisify;
+const read = promisify(fs.readFile);
+const apiDouble = require('@hashicorp/api-double');
+
+const apiDoubleHeaders = require('@hashicorp/api-double/lib/headers');
+const cookieParser = require('cookie-parser');
+const bodyParser = require('body-parser');
+//
 module.exports = {
   name: 'startup',
+  serverMiddleware: function(server) {
+    // TODO: This should all be moved out into ember-cli-api-double
+    // and we should figure out a way to get to the settings here for
+    // so we can set this path name centrally in config
+    // TODO: undefined here is a possible faker salt that we should be able
+    // to pass in from ember serve/config somehow
+    const dir = path.resolve('./node_modules/@hashicorp/consul-api-double');
+    const controller = apiDouble(undefined, dir, read, $, path.resolve);
+    [
+      apiDoubleHeaders(),
+      cookieParser(),
+      bodyParser.text({ type: '*/*' }),
+      controller().serve,
+    ].reduce(function(app, item) {
+      return app.use(item);
+    }, server.app);
+  },
   contentFor: function(type, config) {
     const vars = {
       appName: config.modulePrefix,

ui-v2/package.json

@@ -19,6 +19,7 @@
     "format:css": "prettier --write \"app/styles/**/*.*\"",
     "start": "ember serve --port=${EMBER_SERVE_PORT:-4200} --live-reload-port=${EMBER_LIVE_RELOAD_PORT:-7020}",
     "start:staging": "ember serve --port=${EMBER_SERVE_PORT:-4200} --live-reload-port=${EMBER_LIVE_RELOAD_PORT:-7020} --environment staging",
+    "start:consul": "ember serve --proxy=${CONSUL_HTTP_ADDR:-http://localhost:8500} --port=${EMBER_SERVE_PORT:-4200} --live-reload-port=${EMBER_LIVE_RELOAD_PORT:-7020}",
     "start:api": "api-double --dir ./node_modules/@hashicorp/consul-api-double",
     "test": "ember test --test-port=${EMBER_TEST_PORT:-7357}",
     "test:parallel": "EMBER_EXAM_PARALLEL=true ember exam --split=4 --parallel",