Add front-end build tooling + fix build error

Makefile

@@ -22,7 +22,7 @@ export REWRITER=go/vt/sqlparser/rewriter.go
 # Since we are not using this Makefile for compilation, limiting parallelism will not increase build time.
 .NOTPARALLEL:
 
-.PHONY: all build build_web install test clean unit_test unit_test_cover unit_test_race integration_test proto proto_banner site_test site_integration_test docker_bootstrap docker_test docker_unit_test java_test reshard_tests e2e_test e2e_test_race minimaltools tools
+.PHONY: all build install test clean unit_test unit_test_cover unit_test_race integration_test proto proto_banner site_test site_integration_test docker_bootstrap docker_test docker_unit_test java_test reshard_tests e2e_test e2e_test_race minimaltools tools web_bootstrap web_build web_start
 
 all: build
 
@@ -37,22 +37,11 @@ ifdef VT_EXTRA_BUILD_FLAGS
 export EXTRA_BUILD_FLAGS := $(VT_EXTRA_BUILD_FLAGS)
 endif
 
-# This target needs to be manually run every time any file within web/vtctld2/app is modified to regenerate rice-box.go
-embed_static: 
-	cd go/vt/vtctld
-	go run github.com/GeertJohan/go.rice/rice embed-go
-	go build .
-
 embed_config:
 	cd go/vt/mysqlctl
 	go run github.com/GeertJohan/go.rice/rice embed-go
 	go build .
 
-build_web:
-	echo $$(date): Building web artifacts
-	cd web/vtctld2 && ng build -prod
-	cp -f web/vtctld2/src/{favicon.ico,plotly-latest.min.js,primeui-ng-all.min.css} web/vtctld2/dist/
-
 build:
 ifndef NOBANNER
 	echo $$(date): Building source tree
@@ -359,3 +348,19 @@ client_go_gen:
 	# Move and cleanup
 	mv vitess.io/vitess/go/vt/topo/k8stopo/client go/vt/topo/k8stopo/
 	rmdir -p vitess.io/vitess/go/vt/topo/k8stopo/
+
+# Check prerequisites and install dependencies
+web_bootstrap:
+	./tools/web_bootstrap.sh
+
+# Do a production build of the vtctld UI.
+# This target needs to be manually run every time any file within web/vtctld2/app 
+# is modified to regenerate rice-box.go
+web_build: web_bootstrap
+	./tools/web_build.sh
+
+# Start a front-end dev server with hot reloading on http://localhost:4200.
+# This expects that you have a vtctld API server running on http://localhost:15000.
+# Following the local Docker install guide is recommended: https://vitess.io/docs/get-started/local-docker/
+web_start: web_bootstrap
+	cd web/vtctld2 && npm run start

tools/web_bootstrap.sh

@@ -0,0 +1,55 @@
+#!/bin/bash
+
+# Copyright 2019 The Vitess Authors.
+# 
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+# 
+#     http://www.apache.org/licenses/LICENSE-2.0
+# 
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# This script is used to check prerequisites and install dependencies 
+# for compiling and running the vtctld2 UI.
+
+set -euo pipefail
+
+web_dir="$VTROOT/web/vtctld2"
+
+TARGET_NODE_VERSION="v8.0.0"
+node_version=$(node -v)
+
+TARGET_NPM_VERSION="5.0.0"
+npm_version=$(npm -v)
+
+if [[ -z ${node_version+x} || -z ${npm_version+x} ]]; then 
+	echo "You must install node@${TARGET_NODE_VERSION} and npm@${TARGET_NPM_VERSION}."
+	echo "Using a node versioning manager like nvm is strongly recommended: https://github.com/nvm-sh/nvm"
+fi
+
+if [[ $node_version != "$TARGET_NODE_VERSION" || $npm_version != "$TARGET_NPM_VERSION" ]]; then
+	if [[ $node_version != "$TARGET_NODE_VERSION" ]]; then
+		echo "node version does not match: version ${TARGET_NODE_VERSION} required, got ${node_version}."
+	fi
+
+	if [[ $npm_version != "$TARGET_NPM_VERSION" ]]; then
+		echo "npm version does not match: version ${TARGET_NPM_VERSION} required, got ${npm_version}."
+	fi
+
+	echo "Using a node versioning manager like nvm is strongly recommended: https://github.com/nvm-sh/nvm"
+	echo "If you already have nvm installed, check your versions with 'nvm list' and switch with 'nvm use 8.0.0'"
+	exit 1
+fi 
+
+echo "⚠️  Warning! This project relies on very out-of-date node dependencies, many with significant security vulnerabilities. Install at your own risk."
+echo "Installing node_modules... this might take awhile..."
+
+# Unfortunately, since we're on such an old version of node, it is expected that we will see a LOT of
+# deprecation, security, and possibly build warnings. It is also likely that the `npm install` step will fail,
+# even if it installs "good enough" to do a build afterwards. So: don't fail this script if the npm install fails.
+(cd "$web_dir" && npm install) || true

tools/web_build.sh

@@ -0,0 +1,36 @@
+#!/bin/bash
+
+# Copyright 2019 The Vitess Authors.
+# 
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+# 
+#     http://www.apache.org/licenses/LICENSE-2.0
+# 
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# This script does a minified production build of the vtctld UI.
+# In production, the vtctld UI is hosted with [go.rice](https://github.com/GeertJohan/go.rice).
+# All front-end assets must be built, minified, and embedded in the executable.
+set -euo pipefail
+
+web_dir="$VTROOT/web/vtctld2"
+web_app_dir="$web_dir/app"
+web_dist_dir="$web_dir/dist"
+rice_dir="$VTROOT/go/vt/vtctld"
+
+(cd "$web_dir" && npm run build:prod)
+cp -f "$web_dir"/src/{favicon.ico,plotly-latest.min.js,primeui-ng-all.min.css} "$web_dist_dir"
+
+# We could probably side-step this rm/cp step by configuring `ng build`
+# to output to `dist/` or, alternatively, map ricebox to read from `dist/`
+# instead of `app/` but... shrug!
+rm -rf "$web_app_dir"
+cp -r "$web_dist_dir" "$web_app_dir"
+
+(cd "$rice_dir" && go run github.com/GeertJohan/go.rice/rice embed-go && go build .)

web/vtctld2/README.md

@@ -2,41 +2,59 @@
 
 This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.11-webpack.2.
 
-## Installation
-Once downloaded, run `npm install` and `bower install` to retrieve dependencies.
+## Local development
 
-Webpack handles bundling of dependencies from the `node_modules` directory,
-but bower dependencies in the `src/assets` folder simply get copied
-into the `dist` folder at build time.
+**⚠️ Warning! This project relies on very out-of-date node dependencies, many with significant security vulnerabilities. Install at your own risk.** 
 
-To add more Polymer elements, install them with bower and import them in `src/index.html`.
+### Prerequisites
 
-## Development server
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+You will need (very old!) installations of npm and node to run the front-end dev server. To check your versions:
 
-## Code scaffolding
+```bash
+node -v # v8.0.0 required
+npm -v # 5.0.0 required
+```
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
+Using a node version manager like [nvm](https://github.com/nvm-sh/nvm) is strongly recommended, as the versions required by this project are several years out of date.
 
-## Build
+1. Install nvm using the [installation guide](https://github.com/nvm-sh/nvm#installing-and-updating).
+1. Install node (and npm): `nvm install 8.0.0`
+1. In the shell you're using for vtctld UI development: `nvm use 8.0.0`
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+### Starting the dev server
 
-## Running unit tests
+From the root `vitess/` directory:
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+1. Run Vitess locally using Docker and start a vtctld API on `http://localhost:15000/`. For more on this, see the guide on [Local Installation via Docker](https://vitess.io/docs/get-started/local-docker/).
 
-## Running end-to-end tests
+	```bash
+	source dev.env
+	make docker_local && ./docker/local/run.sh
+	```
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](https://www.protractortest.org/). 
-Before running the tests make sure you are serving the app via `ng serve`.
+2. Start a local Angular server on `http://localhost:4200`. The UI will automatically refresh every time you save a change. Note that you will _probably_ see build errors and security warnings during the `npm install` step; this is, unfortunately, to be expected due to out-of-date dependencies. :)
 
-## Deploying to Github Pages
+	```bash
+	make web_start
+	```
 
-Run `ng github-pages:deploy` to deploy to Github Pages.
+Note: the local docker install will also start a vtctld admin UI on http://localhost:15000/app. This instance will use the statically embedded files, and will not reflect any changes you make unless you run `make web_build`.
 
-## Further help
+### Building for production
 
-To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+In production, the vtctld UI is hosted with [go.rice](https://github.com/GeertJohan/go.rice). All front-end assets must be built, minified, and embedded in the executable.
 
+If you're ready to open a pull request for your changes, or if you want to do a production build just for fun... :)
 
+```bash
+make web_build
+```
+
+This will regenerate a bunch of files in the `web/vtctld2/dist/` directory, as well as update the embedded files in `rice-box.go`. Make sure you commit these generated files to your branch when opening your pull request.
+
+To verify your changes, run Vitess locally. It is recommended to [use Docker](https://vitess.io/docs/get-started/local-docker/), which will make the vtctld UI accessible at `http://localhost:15000/app`.
+
+
+## Troubleshooting
+
+If you run into issues or have questions, we recommend posting in our [Slack channel](https://vitess.slack.com/). Click the Slack icon in the top right to join.

web/vtctld2/package.json

@@ -4,7 +4,9 @@
   "license": "Apache-2.0",
   "angular-cli": {},
   "scripts": {
-    "start": "ng serve",
+    "start": "ng serve --proxy proxy.conf.json",
+    "build": "ng build",
+    "build:prod": "ng build -prod",
     "lint": "tslint \"src/**/*.ts\"",
     "test": "ng test",
     "pree2e": "webdriver-manager update",

web/vtctld2/proxy.conf.json

@@ -0,0 +1,7 @@
+{
+	"/api": {
+		"target": "http://localhost:15000",
+		"changeOrigin": false,
+		"logLevel": "debug"
+	}
+}

web/vtctld2/src/app/dashboard/shard.component.html

@@ -31,7 +31,7 @@ <h1 class="vt-title">{{keyspaceName}}/{{shardName}}</h1>
     </p-column>
     <p-column header="Status">
       <template let-tab="rowData">
-        <a href="{{tab.url)}}">
+        <a href="{{tab.url}}">
           <button md-button>Status</button>
         </a>
       </template>