From 5e76ed3f3b1fb006260daf54ba265b75e3f177c6 Mon Sep 17 00:00:00 2001 From: Sara Bee <855595+doeg@users.noreply.github.com> Date: Sat, 25 Jul 2020 15:11:21 -0400 Subject: [PATCH 1/2] Update front-end build tooling and fix build error Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com> --- Makefile | 29 +++++---- tools/web_bootstrap.sh | 55 +++++++++++++++++ tools/web_build.sh | 36 +++++++++++ web/vtctld2/README.md | 60 ++++++++++++------- web/vtctld2/package.json | 4 +- web/vtctld2/proxy.conf.json | 7 +++ .../src/app/dashboard/shard.component.html | 2 +- 7 files changed, 158 insertions(+), 35 deletions(-) create mode 100755 tools/web_bootstrap.sh create mode 100755 tools/web_build.sh create mode 100644 web/vtctld2/proxy.conf.json diff --git a/Makefile b/Makefile index f93099c1fa3..4a04dbe2a12 100644 --- a/Makefile +++ b/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 diff --git a/tools/web_bootstrap.sh b/tools/web_bootstrap.sh new file mode 100755 index 00000000000..cd5b69b7ad1 --- /dev/null +++ b/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 diff --git a/tools/web_build.sh b/tools/web_build.sh new file mode 100755 index 00000000000..05631e3bdf3 --- /dev/null +++ b/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 .) diff --git a/web/vtctld2/README.md b/web/vtctld2/README.md index a5fea7f2606..f996acaa437 100644 --- a/web/vtctld2/README.md +++ b/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/` [1]. 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. +When you're ready to open a pull request for your changes, or you want to do a production build 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. diff --git a/web/vtctld2/package.json b/web/vtctld2/package.json index 8e9c06237f8..39c198fc3b2 100644 --- a/web/vtctld2/package.json +++ b/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", diff --git a/web/vtctld2/proxy.conf.json b/web/vtctld2/proxy.conf.json new file mode 100644 index 00000000000..a0973f456eb --- /dev/null +++ b/web/vtctld2/proxy.conf.json @@ -0,0 +1,7 @@ +{ + "/api": { + "target": "http://localhost:15000", + "changeOrigin": false, + "logLevel": "debug" + } +} diff --git a/web/vtctld2/src/app/dashboard/shard.component.html b/web/vtctld2/src/app/dashboard/shard.component.html index d145b07c02c..e3db24f3177 100644 --- a/web/vtctld2/src/app/dashboard/shard.component.html +++ b/web/vtctld2/src/app/dashboard/shard.component.html @@ -31,7 +31,7 @@

{{keyspaceName}}/{{shardName}}

From 14ee13571faf1ceeaf373c38268fcda597510e8e Mon Sep 17 00:00:00 2001 From: Sara Bee <855595+doeg@users.noreply.github.com> Date: Sun, 26 Jul 2020 11:32:21 -0400 Subject: [PATCH 2/2] README tweaks Signed-off-by: Sara Bee <855595+doeg@users.noreply.github.com> --- web/vtctld2/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/vtctld2/README.md b/web/vtctld2/README.md index f996acaa437..332816a1bd3 100644 --- a/web/vtctld2/README.md +++ b/web/vtctld2/README.md @@ -25,7 +25,7 @@ Using a node version manager like [nvm](https://github.com/nvm-sh/nvm) is strong From the root `vitess/` directory: -1. Run Vitess locally using Docker and start a vtctld API on `http://localhost:15000/` [1]. For more on this, see the guide on [Local Installation via Docker](https://vitess.io/docs/get-started/local-docker/). +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/). ```bash source dev.env @@ -44,7 +44,7 @@ Note: the local docker install will also start a vtctld admin UI on http://local 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. -When you're ready to open a pull request for your changes, or you want to do a production build for fun: +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