[vtadmin-web] The tiniest possible first implementation of vtadmin-web

.github/CODEOWNERS

@@ -29,3 +29,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

proto/vtadmin.proto

@@ -0,0 +1,103 @@
+/*
+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 package contains the types used by VTAdmin (and later an RPC service).
+
+syntax = "proto3";
+option go_package = "vitess.io/vitess/go/vt/proto/vtadmin";
+
+package vtadmin;
+
+import "topodata.proto";
+
+/* Services */
+
+// VTAdmin is the Vitess Admin API service. It provides RPCs that operate on
+// across a range of Vitess clusters.
+service VTAdmin {
+    // GetGates returns all gates across all the specified clusters.
+    rpc GetGates(GetGatesRequest) returns (GetGatesResponse) {};
+    // GetTablet looks up a tablet by hostname across all clusters and returns
+    // the result.
+    rpc GetTablet(GetTabletRequest) returns (Tablet) {};
+    // GetTablets returns all tablets across all the specified clusters.
+    rpc GetTablets(GetTabletsRequest) returns (GetTabletsResponse) {};
+}
+
+/* Data types */
+
+// Cluster represents information about a Vitess cluster.
+message Cluster {
+    string id = 1;
+    string name = 2;
+}
+
+// Tablet groups the topo information of a tablet together with the Vitess
+// cluster it belongs to.
+message Tablet {
+    Cluster cluster = 1;
+    topodata.Tablet tablet = 2;
+
+    enum ServingState {
+        UNKNOWN = 0;
+        SERVING = 1;
+        NOT_SERVING = 2;
+    }
+
+    ServingState state = 3;
+}
+
+// VTGate represents information about a single VTGate host.
+message VTGate {
+    // Hostname is the shortname of the VTGate.
+    string hostname = 1;
+    // Pool is group the VTGate serves queries for. Some deployments segment
+    // VTGates into groups or pools, based on the workloads they serve queries
+    // for. Use of this field is optional.
+    string pool = 2;
+    // Cell is the topology cell the VTGate is in.
+    string cell = 3;
+    // Cluster is the name of the cluster the VTGate serves.
+    string cluster = 4;
+    // Keyspaces is the list of keyspaces-to-watch for the VTGate.
+    repeated string keyspaces = 5;
+}
+
+/* Request/Response types */
+
+message GetGatesRequest {
+    repeated string cluster_ids = 1;
+}
+
+message GetGatesResponse {
+    repeated VTGate gates = 1;
+}
+
+message GetTabletRequest {
+    string hostname = 1;
+    // ClusterIDs is an optional parameter to narrow the scope of the search, if
+    // the caller knows which cluster the tablet may be in, or, to disamiguate if
+    // multiple clusters have a tablet with the same hostname.
+    repeated string cluster_ids = 2;
+}
+
+message GetTabletsRequest {
+    repeated string cluster_ids = 1;
+}
+
+message GetTabletsResponse {
+    repeated Tablet tablets = 1;
+}

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"