ui: adapted the React UI to Thanos

Signed-off-by: Prem Kumar <[email protected]>

Makefile

@@ -165,7 +165,7 @@ react-app-lint-fix:
 .PHONY: react-app-test
 react-app-test: | $(REACT_APP_NODE_MODULES_PATH) react-app-lint
 	@echo ">> running React app tests"
-	cd $(REACT_APP_PATH) && yarn test --no-watch --coverage
+	cd $(REACT_APP_PATH) && export CI=true && yarn test --no-watch --coverage
 
 .PHONY: react-app-start
 react-app-start: $(REACT_APP_NODE_MODULES_PATH)

pkg/query/api/v1.go

@@ -107,7 +107,7 @@ type API struct {
 	enablePartialResponse                  bool
 	replicaLabels                          []string
 	reg                                    prometheus.Registerer
-	storeSet *query.StoreSet
+	storeSet                               *query.StoreSet
 	defaultInstantQueryMaxSourceResolution time.Duration
 
 	now func() time.Time
@@ -133,7 +133,7 @@ func NewAPI(
 		enablePartialResponse:                  enablePartialResponse,
 		replicaLabels:                          replicaLabels,
 		reg:                                    reg,
-		storeSet: storeSet,
+		storeSet:                               storeSet,
 		defaultInstantQueryMaxSourceResolution: defaultInstantQueryMaxSourceResolution,
 
 		now: time.Now,
@@ -640,4 +640,4 @@ func (api *API) stores(r *http.Request) (interface{}, []error, *ApiError) {
 		statuses[status.StoreType.String()] = append(statuses[status.StoreType.String()], status)
 	}
 	return statuses, nil, nil
-}
+}

pkg/query/storeset.go

@@ -41,13 +41,13 @@ type StoreSpec interface {
 }
 
 type StoreStatus struct {
-	Name      string `json:"name"`
-	LastCheck time.Time `json:"last_check"`
-	LastError error `json:"last_error"`
+	Name      string             `json:"name"`
+	LastCheck time.Time          `json:"last_check"`
+	LastError error              `json:"last_error"`
 	LabelSets []storepb.LabelSet `json:"label_sets"`
 	StoreType component.StoreAPI `json:"store_type"`
-	MinTime   int64 `json:"min_time"`
-	MaxTime   int64 `json:"max_time"`
+	MinTime   int64              `json:"min_time"`
+	MaxTime   int64              `json:"max_time"`
 }
 
 type grpcStoreSpec struct {

pkg/ui/react-app/README.md

@@ -1,10 +1,10 @@
 # Working with the React UI
 
-This file explains how to work with the React-based Prometheus UI.
+This file explains how to work with the React-based Thanos UI.
 
 ## Introduction
 
-The [React-based](https://reactjs.org/) Prometheus UI was was bootstrapped using [Create React App](https://github.com/facebook/create-react-app), a popular toolkit for generating React application setups. You can find general information about Create React App on [their documentation site](https://create-react-app.dev/).
+The [React-based](https://reactjs.org/) Thanos UI was was bootstrapped using [Create React App](https://github.com/facebook/create-react-app), a popular toolkit for generating React application setups. You can find general information about Create React App on [their documentation site](https://create-react-app.dev/).
 
 Instead of plain JavaScript, we use [TypeScript](https://www.typescriptlang.org/) to ensure typed code.
 
@@ -16,7 +16,7 @@ To work with the React UI code, you will need to have the following tools instal
 * The [Yarn](https://yarnpkg.com/) package manager.
 * *Recommended:* An editor with TypeScript, React, and [ESLint](https://eslint.org/) linting support. See e.g. [Create React App's editor setup instructions](https://create-react-app.dev/docs/setting-up-your-editor/). If you are not sure which editor to use, we recommend using [Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript). Make sure that [the editor uses the project's TypeScript version rather than its own](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript).
 
-**NOTE**: When using Visual Studio Code, be sure to open the `web/ui/react-app` directory in the editor instead of the root of the repository. This way, the right ESLint and TypeScript configuration will be picked up from the React workspace.
+**NOTE**: When using Visual Studio Code, be sure to open the `pkg/ui/react-app` directory in the editor instead of the root of the repository. This way, the right ESLint and TypeScript configuration will be picked up from the React workspace.
 
 ## Installing npm dependencies
 
@@ -28,15 +28,15 @@ Yarn consults the `package.json` and `yarn.lock` files for dependencies to insta
 
 ## Running a local development server
 
-You can start a development server for the React UI outside of a running Prometheus server by running:
+You can start a development server for the React UI outside of a running Thanos server by running:
 
     yarn start
 
 This will open a browser window with the React app running on http://localhost:3000/. The page will reload if you make edits to the source code. You will also see any lint errors in the console.
 
-Due to a `"proxy": "http://localhost:9090"` setting in the `package.json` file, any API requests from the React UI are proxied to `localhost` on port `9090` by the development server. This allows you to run a normal Prometheus server to handle API requests, while iterating separately on the UI.
+Due to a `"proxy": "http://localhost:10902"` setting in the `package.json` file, any API requests from the React UI are proxied to `localhost` on port `10902` by the development server. This allows you to run a normal Thanos Query server to handle API requests, while iterating separately on the UI.
 
-    [browser] ----> [localhost:3000 (dev server)] --(proxy API requests)--> [localhost:9090 (Prometheus)]
+    [browser] ----> [localhost:3000 (dev server)] --(proxy API requests)--> [localhost:10902 (Thanos)]
 
 ## Running tests
 
@@ -62,20 +62,22 @@ To detect and automatically fix lint errors, run:
 
     yarn lint
 
-This is also available via the `react-app-lint-fix` target in the main Prometheus `Makefile`.
+This is also available via the `react-app-lint-fix` target in the main Thanos `Makefile`.
 
 ## Building the app for production
 
 To build a production-optimized version of the React app to a `build` subdirectory, run:
 
     yarn build
 
-**NOTE:** You will likely not need to do this directly. Instead, this is taken care of by the `build` target in the main Prometheus `Makefile` when building the full binary.
+**NOTE:** You will likely not need to do this directly. Instead, this is taken care of by the `assets` target in the main Thanos `Makefile` when building the full binary.
 
-## Integration into Prometheus
+## Integration into Thanos
 
-To build a Prometheus binary that includes a compiled-in version of the production build of the React app, change to the root of the repository and run:
+To build a Thanos binary that includes a compiled-in version of the production build of the React app, change to the root of the repository and run:
 
     make build
 
-This installs npm dependencies via Yarn, builds a production build of the React app, and then finally compiles in all web assets into the Prometheus binary.
+This compiles in all web assets into the Thanos binary.
+
+Note that `make build` only compiles static assets using `bindata.go`, if you are working on React UI, make sure you run `make assets` to update `pkg/ui/bindata.go`

pkg/ui/react-app/public/index.html

@@ -31,7 +31,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Prometheus Expression Browser</title>
+    <title>Thanos Expression Browser</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

pkg/ui/react-app/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "Prometheus UI",
-  "name": "Prometheus Server Web Interface",
+  "short_name": "Thanos UI",
+  "name": "Thanos Server Web Interface",
   "icons": [
     {
       "src": "favicon.ico",

pkg/ui/react-app/src/pages/graph/PanelList.tsx

@@ -171,7 +171,7 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
           <strong>Warning: </strong>
           {timeErr && `Unexpected response status when fetching server time: ${timeErr.message}`}
           {delta >= 30 &&
-            `Error fetching server time: Detected ${delta} seconds time difference between your browser and the server. Prometheus relies on accurate time and time drift might cause unexpected query results.`}
+            `Error fetching server time: Detected ${delta} seconds time difference between your browser and the server. Thanos relies on accurate time and time drift might cause unexpected query results.`}
         </Alert>
       )}
       {metricsErr && (

pkg/ui/react-app/src/vendor/flot/jquery.flot.crosshair.js

@@ -1,6 +1,6 @@
 /**
  *
- * THIS FILE WAS COPIED INTO PROMETHEUS FROM GRAFANA'S VENDORED FORK OF FLOT
+ * THIS FILE WAS COPIED INTO THANOS FROM GRAFANA'S VENDORED FORK OF FLOT
  * (LIVING AT https://github.com/grafana/grafana/tree/master/public/vendor/flot),
  * WHICH CONTAINS FIXES FOR DISPLAYING NULL VALUES IN STACKED GRAPHS. THE ORIGINAL
  * FLOT CODE WAS LICENSED UNDER THE MIT LICENSE AS STATED BELOW. ADDITIONAL

pkg/ui/react-app/src/vendor/flot/jquery.flot.js

@@ -1,6 +1,6 @@
 /**
  *
- * THIS FILE WAS COPIED INTO PROMETHEUS FROM GRAFANA'S VENDORED FORK OF FLOT
+ * THIS FILE WAS COPIED INTO THANOS FROM GRAFANA'S VENDORED FORK OF FLOT
  * (LIVING AT https://github.com/grafana/grafana/tree/master/public/vendor/flot),
  * WHICH CONTAINS FIXES FOR DISPLAYING NULL VALUES IN STACKED GRAPHS. THE ORIGINAL
  * FLOT CODE WAS LICENSED UNDER THE MIT LICENSE AS STATED BELOW. ADDITIONAL

pkg/ui/react-app/src/vendor/flot/jquery.flot.stack.js

@@ -1,6 +1,6 @@
 /**
  *
- * THIS FILE WAS COPIED INTO PROMETHEUS FROM GRAFANA'S VENDORED FORK OF FLOT
+ * THIS FILE WAS COPIED INTO THANOS FROM GRAFANA'S VENDORED FORK OF FLOT
  * (LIVING AT https://github.com/grafana/grafana/tree/master/public/vendor/flot),
  * WHICH CONTAINS FIXES FOR DISPLAYING NULL VALUES IN STACKED GRAPHS. THE ORIGINAL
  * FLOT CODE WAS LICENSED UNDER THE MIT LICENSE AS STATED BELOW. ADDITIONAL

pkg/ui/react-app/src/vendor/flot/jquery.flot.time.js

@@ -1,6 +1,6 @@
 /**
  *
- * THIS FILE WAS COPIED INTO PROMETHEUS FROM GRAFANA'S VENDORED FORK OF FLOT
+ * THIS FILE WAS COPIED INTO THANOS FROM GRAFANA'S VENDORED FORK OF FLOT
  * (LIVING AT https://github.com/grafana/grafana/tree/master/public/vendor/flot),
  * WHICH CONTAINS FIXES FOR DISPLAYING NULL VALUES IN STACKED GRAPHS. THE ORIGINAL
  * FLOT CODE WAS LICENSED UNDER THE MIT LICENSE AS STATED BELOW. ADDITIONAL