Two separate bugfixes. (#1120)

* Two separate bugfixes.
1. Bugfix goToTrace not triggering on other pages than default, creating a malformed url.
2. webpack devproxy only targeted default-page locally, and got resources from upstream api if you attached an external dev-server. The external zipkin-server can now be configured with an environment-variable.

* update readme with proxy backend-info

zipkin-ui/README.md

@@ -6,7 +6,7 @@ When looking at a trace, the browser is sent to the path `/traces/{id}`. For the
 app to serve that route, the server needs to forward the request to `index.html`. The same
 forwarding applies to `/dependencies` and any other routes the UI controls. 
 
-Under the scenes the JavaScript code looks at `window.location` to figure out what the
+Behind the scenes the JavaScript code looks at `window.location` to figure out what the
 UI should do. This is handled by a route api defined in the crossroads library.
 
 The suggested logic for serving the assets of Zipkin-UI is as follows:
@@ -27,3 +27,7 @@ Since many Zipkin servers are Java-based, it's convenient to distribute the UI a
 Gradle build tool. A `.jar` file is really only a `.zip` file, and can be treated as such. It can be opened by any
 program that can extract zip files.
 
+## How do I run against a proxy zipkin-backend?
+
+By specifying the `proxy` environment variable, you can point the zipkin-ui to a different backend, allowing you to access real data while developing locally.
+An example to run with npm would be `proxy=http://myzipkininstance.com:9411 npm run dev`. (note that prefixing with http:// and suffixing the port is mandatory)

zipkin-ui/js/page/common.js

@@ -2,11 +2,13 @@ import {component} from 'flightjs';
 import EnvironmentUI from '../component_ui/environment';
 import NavbarUI from '../component_ui/navbar';
 import {layoutTemplate} from '../templates';
+import GoToTraceUI from '../component_ui/goToTrace';
 
 export default component(function CommonUI() {
   this.after('initialize', function() {
     this.$node.html(layoutTemplate());
     NavbarUI.attachTo('#navbar');
     EnvironmentUI.attachTo('#environment', {config: this.attr.config});
+    GoToTraceUI.attachTo('#traceIdQueryForm');
   });
 });

zipkin-ui/js/page/default.js

@@ -13,7 +13,6 @@ import TraceFiltersUI from '../component_ui/traceFilters';
 import TracesUI from '../component_ui/traces';
 import TimeStampUI from '../component_ui/timeStamp';
 import BackToTop from '../component_ui/backToTop';
-import GoToTraceUI from '../component_ui/goToTrace';
 import {defaultTemplate} from '../templates';
 
 const DefaultPageComponent = component(function DefaultPage() {
@@ -54,7 +53,6 @@ const DefaultPageComponent = component(function DefaultPage() {
       TimeStampUI.attachTo('#end-ts');
       TimeStampUI.attachTo('#start-ts');
       BackToTop.attachTo('#backToTop');
-      GoToTraceUI.attachTo('#traceIdQueryForm');
 
       $('.timeago').timeago();
     });

zipkin-ui/webpack.config.js

@@ -3,6 +3,9 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 
+var proxyURL = process.env.proxy || "http://localhost:8080/";
+console.log("API requests are forwarded to " + proxyURL);
+
 module.exports = {
     entry: [
         __dirname + '/js/main.js',
@@ -45,9 +48,11 @@ module.exports = {
         ])
     ],
     devServer: {
+        historyApiFallback: true,
         port: 9090,
         proxy: {
-            "*": "http://localhost:8080"
+            "/api/*": proxyURL,
+            "/config.json": proxyURL
         }
     }
 };