Add /dashboard prefix (#5)

* Add /dashboard prefix to be unified with PD

Signed-off-by: Breezewish <[email protected]>

* Bump UI version

Signed-off-by: Breezewish <[email protected]>

.github/workflows/release-ui-assets.yaml

@@ -39,15 +39,13 @@ jobs:
           key: ${{ runner.os }}-go-${{ hashFiles('**/go.sum') }}
           restore-keys: |
             ${{ runner.os }}-go-
-      # Skip post-install scripts by `--ignore-scripts` here,
-      # as a malicious script could steal NODE_AUTH_TOKEN.
-      - name: Yarn install from private registry
+      - name: Yarn install from Github package
         run: make yarn_dependencies
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Build UI
         run: |
-          SKIP_YARN_INSTALL=1 DASHBOARD_API="/dashboard" make ui
+          make ui
       - name: Pack UI asset release
         if: github.event_name == 'push'
         working-directory: ui/build

Makefile

@@ -1,7 +1,5 @@
 .PHONY: tidy swagger_spec yarn_dependencies swagger_client ui server run
 
-DASHBOARD_API ?=
-
 BUILD_TAGS ?=
 
 SKIP_YARN_INSTALL ?=
@@ -24,20 +22,16 @@ swagger_spec:
 	scripts/generate_swagger_spec.sh
 
 yarn_dependencies:
-ifneq ($(SKIP_YARN_INSTALL), 1)
-	# Skip post-install scripts by `--ignore-scripts` here,
-	# as a malicious script could steal NODE_AUTH_TOKEN.
 	cd ui &&\
-	yarn install --ignore-scripts
-endif
+	yarn install --frozen-lockfile
 
 swagger_client: swagger_spec yarn_dependencies
 	cd ui &&\
 	npm run build_api_client
 
 ui: swagger_client
 	cd ui &&\
-	REACT_APP_DASHBOARD_API_URL="${DASHBOARD_API}" npm run build
+	REACT_APP_DASHBOARD_API_URL="" npm run build
 
 server:
 ifeq ($(SWAGGER),1)

README.md

@@ -16,6 +16,9 @@ TiDB Dashboard can also live as a standalone binary for development.
 - Optional: [Node.js](https://nodejs.org/) 12+ and [yarn](https://yarnpkg.com/) if you want to build
   the UI.
 
+  **IMPORTANT**: TiDB Dashboard uses packages from GitHub Packages. You need to [configure the `~/.npmrc`](https://github.com/pingcap-incubator/pd-client-js#install)
+  in order to install these packages.
+
 ### Build Standalone Dashboard Server
 
 **NOTE**: Dashboard Server can be integrated into [pd](https://github.com/pingcap/pd), as well as compiled
@@ -38,7 +41,6 @@ make server
 # make run
 ```
 
-
 #### API + Swagger API UI
 
 To build a dashboard server that serves both API and the Swagger API UI:
@@ -48,7 +50,7 @@ make # or more verbose: SWAGGER=1 make server
 # make run
 ```
 
-You can visit the Swagger API UI via http://127.0.0.1:12333/api/swagger.
+You can visit the Swagger API UI via http://127.0.0.1:12333/dashboard/api/swagger.
 
 #### Full Featured Build: API + Swagger API UI + Dashboard UI
 
@@ -57,8 +59,6 @@ You can visit the Swagger API UI via http://127.0.0.1:12333/api/swagger.
 Note: You need Node.js and yarn installed in order to build a full-featured dashboard server. See
 Requirements section for details.
 
-To install the packages from GitHub Packages, you need to config the `~/.npmrc` to set the auth token for GitHub registry, see README from [pd-client-js](https://github.com/pingcap-incubator/pd-client-js#install) for details.
-
 ```sh
 make ui  # Build UI from source
 SWAGGER=1 UI=1 make server
@@ -68,7 +68,7 @@ SWAGGER=1 UI=1 make server
 This will build a production-ready Dashboard server, which includes everything in a single binary.
 You can omit the `make ui` step if the UI part is unchanged.
 
-You can visit the Dashboard UI via http://127.0.0.1:12333.
+You can visit the Dashboard UI via http://127.0.0.1:12333/dashboard.
 
 ## PD Integration
 

cmd/tidb-dashboard/main.go

@@ -26,15 +26,15 @@ import (
 // @version 1.0
 // @license.name Apache 2.0
 // @license.url http://www.apache.org/licenses/LICENSE-2.0.html
-// @BasePath /api
+// @BasePath /dashboard/api
 
 func main() {
 	addr := ":12333"
 
 	mux := http.NewServeMux()
-	mux.Handle("/", uiserver.Handler())
-	mux.Handle("/api/", apiserver.Handler("/api"))
-	mux.Handle("/api/swagger/", swaggerserver.Handler())
+	mux.Handle("/dashboard/", http.StripPrefix("/dashboard", uiserver.Handler()))
+	mux.Handle("/dashboard/api/", apiserver.Handler("/dashboard/api"))
+	mux.Handle("/dashboard/api/swagger/", swaggerserver.Handler())
 
 	log.Println("Dashboard server listen on", addr)
 	log.Fatal(http.ListenAndServe(addr, mux))

ui/.github_release_version

@@ -1,3 +1,3 @@
 # This file contains a version number which will be used to release assets to
 # GitHub. To trigger a new asset release, simply increase this version number.
-20200107_4
+20200108_1

ui/package.json

@@ -27,6 +27,7 @@
     "eject": "react-scripts eject",
     "build_api_client": "openapi-generator generate -i ../docs/swagger.yaml -g typescript-axios -o src/utils/dashboard_client"
   },
+  "homepage": "/dashboard",
   "eslintConfig": {
     "extends": "react-app"
   },

ui/src/utils/client/index.js

@@ -7,7 +7,7 @@ if (process.env.REACT_APP_DASHBOARD_API_URL !== undefined) {
   DASHBOARD_API_URL_PERFIX = process.env.REACT_APP_DASHBOARD_API_URL;
 }
 
-const DASHBOARD_API_URL = `${DASHBOARD_API_URL_PERFIX}/api`;
+const DASHBOARD_API_URL = `${DASHBOARD_API_URL_PERFIX}/dashboard/api`;
 
 console.log(`Dashboard API URL: ${DASHBOARD_API_URL}`);