Merge pull request #7218 from tinyspeck/sarabee-vtadmin-web-hello-world

The tiniest possible first implementation of vtadmin-web

.github/CODEOWNERS

@@ -31,3 +31,4 @@
 /proto/vtctldata.proto @ajm188 @doeg
 /proto/vtctlservice.proto @ajm188 @doeg
 /web/vtctld2 @rohit-nayak-ps
+/web/vtadmin @ajm188 @doeg

Makefile

@@ -313,3 +313,12 @@ web_build: web_bootstrap
 # 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
+
+vtadmin_web_install: 
+	cd web/vtadmin && npm install
+
+# Generate JavaScript/TypeScript bindings for vtadmin-web from the Vitess .proto files.
+# Eventually, we'll want to call this target as part of the standard `make proto` target.
+# While vtadmin-web is new and unstable, however, we can keep it out of the critical build path.
+vtadmin_web_proto_types: vtadmin_web_install
+	./web/vtadmin/bin/generate-proto-types.sh

web/vtadmin/.eslintignore

@@ -0,0 +1,2 @@
+src/proto/*.ts
+src/proto/*.js

web/vtadmin/.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.eslintcache

web/vtadmin/.prettiercc

@@ -0,0 +1,14 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "useTabs": false,
+    "bracketSpacing": true,
+    "endOfLine": "auto",
+    "jsxSingleQuote": false,
+    "jsxBracketSameLine": false,
+    "quoteProps": "as-needed",
+    "htmlWhitespaceSensitivity": "css",
+    "printWidth": 120
+}

web/vtadmin/.stylelintrc

@@ -0,0 +1,3 @@
+{
+	"extends": "stylelint-config-standard"
+}

web/vtadmin/README.md

@@ -0,0 +1,87 @@
+# VTAdmin
+
+## Getting started
+
+1. Install node v.14.15.3. (Using a Node version manager like [nvm](https://github.com/nvm-sh/nvm) is highly recommended.)
+1. From the `vitess/web/vtadmin/` directory, install dependencies with `npm install`.
+1. Run `npm start` to start vtadmin-web on [http://localhost:3000](http://localhost:3000) 
+
+Have fun! 🎉
+
+# Developer guide
+
+This section contains notes for those that want to build and run vtadmin-web locally.
+
+## Available scripts
+
+Scripts for common and not-so-common tasks. These are always run from the `vitess/web/vtadmin` directory (although some of them have counterparts in `vitess/Makefile`):
+
+| Command | Description |
+|---|---|
+| `npm start` | Start vtadmin-web on [http://localhost:3000](http://localhost:3000) with the development server. Changes you make will be automatically picked up in the browser, no need to refresh. |
+| `npm run test` | Launches the test runner in the interactive watch mode. See the create-react-app documentation about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. |
+| `npm run lint` | Run all of the linters and formatters. The `package.json` file defines a bunch more scripts to run individual linters, if you prefer, like `npm run lint:eslint`. |
+| `npm run lint:fix` | Run all of the linters and fix errors (where possible) in place. Note that this will overwrite your files so you may want to consider committing your work beforehand! |
+| `npm run build` | Generates a build of vtadmin-web for production and outputs the files to the `vitess/web/vtadmin/build` folder. In most cases, you won't need to run this locally, but it _can_ be useful for debugging production-specific issues. See the create-react-app documentation about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. |
+
+## Toolchain
+
+- [React](https://reactjs.org/)
+- [create-react-app](https://create-react-app.dev/) (generated with v.4.0.1)
+- [TypeScript](http://typescriptlang.org/)
+- [protobufjs](https://github.com/protobufjs)
+
+## Configuring your editor
+
+### VS Code
+
+To set up automatic formatting on save:
+
+1. Install the [Prettier VS Code plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).
+2. Add the following to your VS Code workspace:
+
+```js
+{
+	// ... other workspace config ...
+
+	"settings": {
+		// ... other settings ..
+
+		"prettier.useEditorConfig": false,
+
+		// You may have to adjust this depending on which folder is the root of your workspace.
+		// By default, this configuration assumes that you have your workspace settings 
+		// at `vitess/.vscode/settings.json`. 
+		"prettier.configPath": "web/vtadmin/.prettiercc",
+
+		"[typescriptreact]": {
+			"editor.defaultFormatter": "esbenp.prettier-vscode",
+			"editor.formatOnSave": true,
+		},
+
+		"[typescript]": {
+			"editor.defaultFormatter": "esbenp.prettier-vscode",
+			"editor.formatOnSave": true,
+		},
+
+		"[javascript]": {
+			"editor.defaultFormatter": "esbenp.prettier-vscode",
+			"editor.formatOnSave": true,
+		},
+
+		"[css]": {
+			"editor.codeActionsOnSave": {
+				"source.fixAll.stylelint": true
+			}
+		},
+
+		"[scss]": {
+			"editor.codeActionsOnSave": {
+				"source.fixAll.stylelint": true
+			}
+		}
+	}
+}
+```
+
+For more, check out ["Setting Up Your Editor"](https://create-react-app.dev/docs/setting-up-your-editor/) in the create-react-app docs.

web/vtadmin/bin/generate-proto-types.sh

@@ -0,0 +1,44 @@
+#!/bin/bash
+
+# Copyright 2020 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 generates JavaScript/TypeScript bindings from
+# the Vitess .proto files.
+
+set -e
+
+vtadmin_root="$VTROOT/web/vtadmin"
+vitess_proto_root="$VTROOT/proto"
+
+pbjs_bin="$vtadmin_root/node_modules/.bin/pbjs"
+pbts_bin="$vtadmin_root/node_modules/.bin/pbts"
+
+proto_targets="vtadmin.proto"
+output_filename="vtadmin"
+output_dir="$vtadmin_root/src/proto"
+
+mkdir -p "$output_dir"
+
+$pbjs_bin \
+	--keep-case \
+	-p "$vitess_proto_root" \
+	-t static-module \
+	-w commonjs \
+	-o "$output_dir/$output_filename.js" \
+	"$proto_targets"
+
+$pbts_bin \
+ 	-o "$output_dir/$output_filename.d.ts" \
+ 	"$output_dir/$output_filename.js"