Fix dashboard + proxy incompatibility (#441)

* dashboard: dev guide

* fix dashboard + proxy issue

* dashboard: move to hash router

* [dashboard] Add comments about routes and proxying

dashboard/backend/handler/api_handler.go

@@ -61,7 +61,20 @@ func CreateHTTPAPIHandler(client client.ClientManager) (http.Handler, error) {
 
 	apiV1Ws := new(restful.WebService)
 
-	apiV1Ws.Path("/api").
+	// Issue was figuring out which part of the url corresponded to the application itself, and which parts were related to the proxying.
+	// If we have this url with kubectl proxy + ambassador:
+	// `127.0.0.1:8001/api/v1/namespaces/kubeflow/services/ambassador:80/proxy/tfjobs/ui/`
+	// Proxy parts are:
+	// `127.0.0.1:8001/api/v1/namespaces/kubeflow/services/ambassador:80/proxy`
+	// Application parts are (depending on how the rewrite is configured in ambassador):
+	// `/tfjobs/ui/`
+	// So the way the application handles it, is finding the first occurence of tfjobs in the url and appending /api/ to reach the backend.
+	// Finally, by rewriting in ambassador to `/tfjobs/` and not `/` and by having the backend listening on
+	// `/tfjobs/ui` and `/tfjobs/api` we ensure that the logic won't break when not using ambassador, i.e:
+	// When using a dev server: `127.0.0.1:3000/tfjobs/ui`
+	// When proxying directly on the dashboard service:
+	// `http://127.0.0.1:8001/api/v1/namespaces/kubeflow/services/tf-job-dashboard:80/proxy/tfjobs/ui/#/`
+	apiV1Ws.Path("/tfjobs/api").
 		Consumes(restful.MIME_JSON).
 		Produces(restful.MIME_JSON)
 

dashboard/backend/main.go

@@ -20,11 +20,11 @@ func main() {
 		log.Fatalf("Error while creating the API Handler: %v", err)
 	}
 
-	http.Handle("/api/", apiHandler)
-	http.Handle("/", http.StripPrefix("/", http.FileServer(http.Dir("/opt/tensorflow_k8s/dashboard/frontend/build/"))))
+	http.Handle("/tfjobs/ui/", http.StripPrefix("/tfjobs/ui/", http.FileServer(http.Dir("/opt/tensorflow_k8s/dashboard/frontend/build/"))))
+	http.Handle("/tfjobs/api/", apiHandler)
 
 	p := ":8080"
-	log.Println("Listening on", p)
+	log.Println("Dashboard available at /tfjobs/ui/ on port", p)
 
 	http.ListenAndServe(p, nil)
 

dashboard/frontend/package.json

@@ -2,6 +2,13 @@
   "name": "tensorflowk8s-dashboard",
   "version": "0.1.0",
   "description": "Dashboard for kubeflow/tf-operator.",
+  "//": [
+    "Homepage defines where the frontend will query for the static assets.",
+    "If not specified the static assets will be queried at the root, i.e: 127.0.0.1:8001/static which breaks.",
+    "'.' means that we query at the path where the application is served. ",
+    "i.e: http://127.0.0.1:8001/api/v1/namespaces/kubeflow/services/ambassador:80/proxy/tfjobs/ui/static"
+  ],
+  "homepage": ".",
   "private": true,
   "dependencies": {
     "lodash": "^4.17.4",

dashboard/frontend/src/components/App.js

@@ -2,7 +2,18 @@ import React from "react";
 import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
 import getMuiTheme from "material-ui/styles/getMuiTheme";
 import FlatButton from "material-ui/FlatButton";
-import { BrowserRouter as Router, Link } from "react-router-dom";
+
+// BrowserRouter is a traditional router, If I currently am at the root `/` and I navigate to `/new`
+// the resulting route will be: `${baseroute}/new`. However this breaks with ambassador:
+// If I am at `/api/v1/namespaces/kubeflow/services/ambassador:80/proxy/tfjobs/ui/` and I navigate to `/new` I still end up on `/new`
+// And we also can't just figure out the proxy part of the url and preprend it to each link
+// such as: `/api/v1/namespaces/kubeflow/services/ambassador:80/proxy/tfjobs/ui/new` since the go backend
+// is configured to only handle `/tfjobs/ui` and not `/api/v1/...`
+// So instead we can use the HashRouter, which will only use the part of the url located after a # to infer it's current state
+// So `/api/v1/namespaces/kubeflow/services/ambassador:80/proxy/tfjobs/ui/#`
+// will become `/api/v1/namespaces/kubeflow/services/ambassador:80/proxy/tfjobs/ui/#/new.`
+// This works regardless of how the dashboard is accessed. This is also how the k8s dashboard works
+import { HashRouter as Router, Link } from "react-router-dom";
 import { orange700, orange400 } from "material-ui/styles/colors";
 import ContentAdd from "material-ui/svg-icons/content/add";
 

dashboard/frontend/src/services.js

@@ -1,5 +1,6 @@
-//let host = "http://localhost:8080";
-let host = "";
+import { getHost } from "./utils";
+
+const host = getHost();
 
 export function getTFJobListService(namespace) {
   return fetch(`${host}/api/tfjob/${namespace}`).then(r => r.json());

dashboard/frontend/src/utils.js

@@ -0,0 +1,8 @@
+export function getHost() {
+  const prefix = "/tfjobs";
+  const pLen = prefix.length;
+
+  const fullPath = window.location.pathname;
+  const keepLen = fullPath.indexOf(prefix) + pLen;
+  return fullPath.substr(0, keepLen);
+}