Integrate beginning of React UI (prometheus#5694)

* Initial commit from Create React App Signed-off-by: Julius Volz <[email protected]> * Initial Prometheus expression browser code Signed-off-by: Julius Volz <[email protected]> * Grpahing, try out echarts Signed-off-by: Julius Volz <[email protected]> * Switch to flot Signed-off-by: Julius Volz <[email protected]> * Add metrics fetching and stuff Signed-off-by: Julius Volz <[email protected]> * Autosuggest and graph improvements Signed-off-by: Julius Volz <[email protected]> * Start implementing graph controls, add loading spinner Signed-off-by: Julius Volz <[email protected]> * So many new features and fixes Signed-off-by: Julius Volz <[email protected]> * Fixed and built more features Signed-off-by: Julius Volz <[email protected]> * Make datetimepicker clear work Signed-off-by: Julius Volz <[email protected]> * Don't abort when executing empty expression Signed-off-by: Julius Volz <[email protected]> * Remove TabPaneAlert Signed-off-by: Julius Volz <[email protected]> * Split components into separate files Signed-off-by: Julius Volz <[email protected]> * Add table time input Signed-off-by: Julius Volz <[email protected]> * Move first files to TypeScript! Signed-off-by: Julius Volz <[email protected]> * More TypeScript conversions Signed-off-by: Julius Volz <[email protected]> * More TS conversions Signed-off-by: Julius Volz <[email protected]> * More TS conversions Signed-off-by: Julius Volz <[email protected]> * More TS conversions Signed-off-by: Julius Volz <[email protected]> * More TS conversions Signed-off-by: Julius Volz <[email protected]> * More TS fixes Signed-off-by: Julius Volz <[email protected]> * Convert Graph to TS Signed-off-by: Julius Volz <[email protected]> * Changes Signed-off-by: Julius Volz <[email protected]> * Resize detector, start building legend, axis font colors Signed-off-by: Julius Volz <[email protected]> * Make graph legend work Signed-off-by: Julius Volz <[email protected]> * Add URL params support and much more Signed-off-by: Julius Volz <[email protected]> * Put panel state into panel list, write URL options Signed-off-by: Julius Volz <[email protected]> * Change order of Graph and Table tabs Signed-off-by: Julius Volz <[email protected]> * Generalize time input naming more Signed-off-by: Julius Volz <[email protected]> * Work on history functionality Signed-off-by: Julius Volz <[email protected]> * npm updates Signed-off-by: Julius Volz <[email protected]> * Move loading indicator into "Execute" button Signed-off-by: Julius Volz <[email protected]> * Fix typo Signed-off-by: Julius Volz <[email protected]> * Revert "Move loading indicator into "Execute" button" This reverts commit ce7daee1f1af35da6c0d8b5517272839285ccfec. Signed-off-by: Julius Volz <[email protected]> * Improve error message when failing to fetch server time Signed-off-by: Julius Volz <[email protected]> * Move all code to Prometheus repo target dir Signed-off-by: Julius Volz <[email protected]> * Add react-app Makefile step and check in generated assets Signed-off-by: Julius Volz <[email protected]> * Add preliminary npm packages notice to NOTICE file Signed-off-by: Julius Volz <[email protected]> * Update React app's favicon and metadata Signed-off-by: Julius Volz <[email protected]> * Remove RP server refs, cleanups Signed-off-by: Julius Volz <[email protected]> * Use CircleCI image that includes NodeJS Signed-off-by: Julius Volz <[email protected]> * Add some missing React output assets Signed-off-by: Julius Volz <[email protected]> * Preserve CRLF in generated React files Signed-off-by: Julius Volz <[email protected]> * Switch from npm to yarn for React UI Signed-off-by: Julius Volz <[email protected]> * Save npm licenses and include them in release tarball Signed-off-by: Julius Volz <[email protected]> * Install npm on Travis Signed-off-by: Julius Volz <[email protected]> * Remove npm license tarball from source Signed-off-by: Julius Volz <[email protected]> * Remove React graph bundle from source Signed-off-by: Julius Volz <[email protected]> * Don't check in any compiled web assets Signed-off-by: Julius Volz <[email protected]> * Update README.md with node/yarn/React UI info Signed-off-by: Julius Volz <[email protected]> * Fix asset build step on CircleCI promu crossbuild Signed-off-by: Julius Volz <[email protected]> * Try to fix multi-arch go generate Signed-off-by: Julius Volz <[email protected]> * Remove check_assets from Travis CI build Signed-off-by: Julius Volz <[email protected]> * Prevent rebuilding of unchanged React app parts Signed-off-by: Julius Volz <[email protected]> * Fix npm license tarball path for promu Signed-off-by: Julius Volz <[email protected]> * Simplify Makefile Signed-off-by: Julius Volz <[email protected]> * Clarify build instructions in README.md Signed-off-by: Julius Volz <[email protected]> * Make minimal JS test pass Signed-off-by: Julius Volz <[email protected]> * Integrate React app tests into Makefile Signed-off-by: Julius Volz <[email protected]> * Separate react-app-tests target, but run it from CI Signed-off-by: Julius Volz <[email protected]> * Fix working directory for React app tests Signed-off-by: Julius Volz <[email protected]> * Remove local modifications to Makefile.common This means that CircleCI will not run the React app tests, but at least Travis still will... Signed-off-by: Julius Volz <[email protected]> * Depend on node_modules path for npm_licenses target Signed-off-by: Julius Volz <[email protected]> * Simplify tarball/docker/build Makefile targets Signed-off-by: Julius Volz <[email protected]> * Include React tests in "test" target Signed-off-by: Julius Volz <[email protected]> * Remove reference to removed "check_assets" target Signed-off-by: Julius Volz <[email protected]> * Do initial resize of expression input field Signed-off-by: Julius Volz <[email protected]> * Add React app proxying to local Prometheus in dev mode Signed-off-by: Julius Volz <[email protected]>
liguozhong · Oct 17, 2019 · bca6e90 · bca6e90
1 parent 16370e6
commit bca6e90
Show file tree

Hide file tree

Showing 40 changed files with 12,807 additions and 1,076 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -9,7 +9,7 @@ executors:
   # should also be updated.
   golang:
     docker:
-    - image: circleci/golang:1.13
+    - image: circleci/golang:1.13-node
 
   fuzzit:
     docker:

diff --git a/.gitignore b/.gitignore
@@ -16,3 +16,7 @@ benchmark.txt
 !/.golangci.yml
 /documentation/examples/remote_storage/remote_storage_adapter/remote_storage_adapter
 /documentation/examples/remote_storage/example_write_adapter/example_writer_adapter
+
+npm_licenses.tar.bz2
+/web/ui/static/graph-new
+/web/ui/assets_vfsdata.go
diff --git a/.promu.yml b/.promu.yml
@@ -12,7 +12,7 @@ build:
           path: ./cmd/promtool
         - name: tsdb
           path: ./tsdb/cmd/tsdb
-    flags: -mod=vendor -a -tags netgo
+    flags: -mod=vendor -a -tags netgo,builtinassets
     ldflags: |
         -X github.com/prometheus/common/version.Version={{.Version}}
         -X github.com/prometheus/common/version.Revision={{.Revision}}
@@ -26,6 +26,7 @@ tarball:
         - documentation/examples/prometheus.yml
         - LICENSE
         - NOTICE
+        - npm_licenses.tar.bz2
 crossbuild:
     platforms:
         - linux/amd64

diff --git a/.travis.yml b/.travis.yml
@@ -12,8 +12,11 @@ go_import_path: github.com/prometheus/prometheus
 # random issues on Travis.
 before_install:
 - travis_retry make deps
+- . $HOME/.nvm/nvm.sh
+- nvm install stable
+- nvm use stable
 - if [[ "$TRAVIS_OS_NAME" == "windows" ]]; then choco install make; fi
 
 script:
-- make check_license style unused test lint check_assets
+- make check_license style unused test lint
 - git diff --exit-code
diff --git a/Dockerfile b/Dockerfile
@@ -10,6 +10,9 @@ COPY .build/${OS}-${ARCH}/promtool          /bin/promtool
 COPY documentation/examples/prometheus.yml  /etc/prometheus/prometheus.yml
 COPY console_libraries/                     /usr/share/prometheus/console_libraries/
 COPY consoles/                              /usr/share/prometheus/consoles/
+COPY LICENSE                                /LICENSE
+COPY NOTICE                                 /NOTICE
+COPY npm_licenses.tar.bz2                   /npm_licenses.tar.bz2
 
 RUN ln -s /usr/share/prometheus/console_libraries /usr/share/prometheus/consoles/ /etc/prometheus/
 RUN mkdir -p /prometheus && \

diff --git a/Makefile b/Makefile
@@ -14,33 +14,61 @@
 # Needs to be defined before including Makefile.common to auto-generate targets
 DOCKER_ARCHS ?= amd64 armv7 arm64
 
+REACT_APP_PATH = web/ui/react-app
+REACT_APP_SOURCE_FILES = $(wildcard $(REACT_APP_PATH)/public/* $(REACT_APP_PATH)/src/* $(REACT_APP_PATH)/tsconfig.json)
+REACT_APP_OUTPUT_DIR = web/ui/static/graph-new
+REACT_APP_NODE_MODULES_PATH = $(REACT_APP_PATH)/node_modules
+REACT_APP_NPM_LICENSES_TARBALL = "npm_licenses.tar.bz2"
+
 TSDB_PROJECT_DIR = "./tsdb"
 TSDB_CLI_DIR="$(TSDB_PROJECT_DIR)/cmd/tsdb"
 TSDB_BIN = "$(TSDB_CLI_DIR)/tsdb"
 TSDB_BENCHMARK_NUM_METRICS ?= 1000
 TSDB_BENCHMARK_DATASET ?= "$(TSDB_PROJECT_DIR)/testdata/20kseries.json"
 TSDB_BENCHMARK_OUTPUT_DIR ?= "$(TSDB_CLI_DIR)/benchout"
 
-.PHONY: all
-all: common-all check_assets
-
 include Makefile.common
 
 DOCKER_IMAGE_NAME       ?= prometheus
 
+$(REACT_APP_NODE_MODULES_PATH): $(REACT_APP_PATH)/package.json $(REACT_APP_PATH)/yarn.lock
+	cd $(REACT_APP_PATH) && yarn --frozen-lockfile
+
+$(REACT_APP_OUTPUT_DIR): $(REACT_APP_NODE_MODULES_PATH) $(REACT_APP_SOURCE_FILES)
+	@echo ">> building React app"
+	@./scripts/build_react_app.sh
+
 .PHONY: assets
-assets:
+assets: $(REACT_APP_OUTPUT_DIR)
 	@echo ">> writing assets"
-	cd $(PREFIX)/web/ui && GO111MODULE=$(GO111MODULE) $(GO) generate -x -v $(GOOPTS)
+	# Un-setting GOOS and GOARCH here because the generated Go code is always the same,
+	# but the cached object code is incompatible between architectures and OSes (which
+	# breaks cross-building for different combinations on CI in the same container).
+	cd web/ui && GO111MODULE=$(GO111MODULE) GOOS= GOARCH= $(GO) generate -x -v $(GOOPTS)
 	@$(GOFMT) -w ./web/ui
 
-.PHONY: check_assets
-check_assets: assets
-	@echo ">> checking that assets are up-to-date"
-	@if ! (cd $(PREFIX)/web/ui && git diff --exit-code); then \
-		echo "Run 'make assets' and commit the changes to fix the error."; \
-		exit 1; \
-	fi
+.PHONY: react-app-test
+react-app-test: $(REACT_APP_NODE_MODULES_PATH)
+	@echo ">> running React app tests"
+	cd $(REACT_APP_PATH) && yarn test --no-watch
+
+.PHONY: test
+test: common-test react-app-test
+
+.PHONY: npm_licenses
+npm_licenses: $(REACT_APP_NODE_MODULES_PATH)
+	@echo ">> bundling npm licenses"
+	rm -f $(REACT_APP_NPM_LICENSES_TARBALL)
+	find $(REACT_APP_NODE_MODULES_PATH) -iname "license*" | tar cfj $(REACT_APP_NPM_LICENSES_TARBALL) --transform 's/^/npm_licenses\//' --files-from=-
+
+.PHONY: tarball
+tarball: npm_licenses common-tarball
+
+.PHONY: docker
+docker: npm_licenses common-docker
+
+.PHONY: build
+build: assets common-build
 
 .PHONY: build_tsdb
 build_tsdb:

diff --git a/NOTICE b/NOTICE
@@ -85,3 +85,9 @@ go-zookeeper - Native ZooKeeper client for Go
 https://github.com/samuel/go-zookeeper
 Copyright (c) 2013, Samuel Stauffer <[email protected]>
 See https://github.com/samuel/go-zookeeper/blob/master/LICENSE for license details.
+
+We also use code from a large number of npm packages. For details, see:
+- https://github.com/prometheus/prometheus/blob/master/web/ui/react-app/package.json
+- https://github.com/prometheus/prometheus/blob/master/web/ui/react-app/package-lock.json
+- The individual package licenses as copied from the node_modules directory can be found in
+  the npm_licenses.tar.bz2 archive in release tarballs and Docker images.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Prometheus 
+# Prometheus
 
 [![Build Status](https://travis-ci.org/prometheus/prometheus.svg)][travis]
 [![CircleCI](https://circleci.com/gh/prometheus/prometheus/tree/master.svg?style=shield)][circleci]
@@ -60,14 +60,23 @@ Prometheus will now be reachable at http://localhost:9090/.
 
 To build Prometheus from the source code yourself you need to have a working
 Go environment with [version 1.13 or greater installed](https://golang.org/doc/install).
+You will also need to have [Node.js](https://nodejs.org/) and [Yarn](https://yarnpkg.com/)
+installed in order to build the frontend assets.
 
 You can directly use the `go` tool to download and install the `prometheus`
 and `promtool` binaries into your `GOPATH`:
 
     $ go get github.com/prometheus/prometheus/cmd/...
     $ prometheus --config.file=your_config.yml
 
-You can also clone the repository yourself and build using `make`:
+*However*, when using `go get` to build Prometheus, Prometheus will expect to be able to
+read its web assets from local filesystem directories under `web/ui/static` and
+`web/ui/templates`. In order for these assets to be found, you will have to run Prometheus
+from the root of the cloned repository. Note also that these directories do not include the
+new experimental React UI unless it has been built explicitly using `make assets` or `make build`.
+
+You can also clone the repository yourself and build using `make build`, which will compile in
+the web assets so that Prometheus can be run from anywhere:
 
     $ mkdir -p $GOPATH/src/github.com/prometheus
     $ cd $GOPATH/src/github.com/prometheus
@@ -78,12 +87,11 @@ You can also clone the repository yourself and build using `make`:
 
 The Makefile provides several targets:
 
-  * *build*: build the `prometheus` and `promtool` binaries
+  * *build*: build the `prometheus` and `promtool` binaries (includes building and compiling in web assets)
   * *test*: run the tests
   * *test-short*: run the short tests
   * *format*: format the source code
   * *vet*: check the source code for common errors
-  * *assets*: rebuild the static assets
   * *docker*: build a docker container for the current `HEAD`
 
 ## More information

diff --git a/scripts/build_react_app.sh b/scripts/build_react_app.sh
@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+#
+# Build React web UI.
+# Run from repository root.
+set -e
+set -u
+
+if ! [[ "$0" =~ "scripts/build_react_app.sh" ]]; then
+	echo "must be run from repository root"
+	exit 255
+fi
+
+cd web/ui/react-app
+
+echo "building React app"
+PUBLIC_URL=. yarn build
+rm -rf ../static/graph-new
+mv build ../static/graph-new
+# Prevent bad redirect due to Go HTTP router treating index.html specially.
+mv ../static/graph-new/index.html ../static/graph-new/app.html
diff --git a/web/ui/README.md b/web/ui/README.md
@@ -4,7 +4,8 @@ using the vfsgen library (c.f. Makefile).
 
 During development it is more convenient to always use the files on disk to
 directly see changes without recompiling.
-To make this work, add `-tags dev` to the `flags` entry in `.promu.yml`, and then `make build`.
+To make this work, remove the `builtinassets` build tag in the `flags` entry
+in `.promu.yml`, and then `make build`.
 
 This will serve all files from your local filesystem.
 This is for development purposes only.

diff --git a/web/ui/assets_generate.go b/web/ui/assets_generate.go
@@ -29,7 +29,7 @@ func main() {
 	fs := modtimevfs.New(ui.Assets, time.Unix(1, 0))
 	err := vfsgen.Generate(fs, vfsgen.Options{
 		PackageName:  "ui",
-		BuildTags:    "!dev",
+		BuildTags:    "builtinassets",
 		VariableName: "Assets",
 	})
 	if err != nil {
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ executors: @@
       # should also be updated.
       golang:
         docker:
-        - image: circleci/golang:1.13
+        - image: circleci/golang:1.13-node
       fuzzit:
         docker:
@@ Expand Down @@