ui: adapted the new React UI to Thanos

Signed-off-by: Prem Kumar <prmsrswt@gmail.com>

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/ui/bucket.go

@@ -53,10 +53,10 @@ func (b *Bucket) Register(r *route.Router, ins extpromhttp.InstrumentationMiddle
 	// with the "RedirectTrailingSlash" option (https://godoc.org/github.com/julienschmidt/httprouter#Router.RedirectTrailingSlash),
 	// and which breaks users with a --web.route-prefix that deviates from the path derived
 	// from the external URL.
-	r.Get("/new", func(w http.ResponseWriter, r *http.Request) {
+	r.WithPrefix(b.externalPrefix).Get("/new", func(w http.ResponseWriter, r *http.Request) {
 		http.Redirect(w, r, path.Join(GetWebPrefix(b.logger, b.externalPrefix, b.prefixHeader, r), "new")+"/", http.StatusFound)
 	})
-	r.Get("/new/*filepath", instrf("react-static", b.serveReactUI))
+	r.WithPrefix(b.externalPrefix).Get("/new/*filepath", instrf("react-static", b.serveReactUI))
 }
 
 // Handle / of bucket UIs.

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.
 
@@ -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 Query)]
 
 ## Running tests
 
@@ -62,20 +62,20 @@ 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 `build` 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 installs npm dependencies via Yarn, builds a production build of the React app, and then finally compiles in all web assets into the Thanos binary.

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/ExpressionInput.tsx

@@ -77,36 +77,39 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
     const { autocompleteSections } = this.props;
     let index = 0;
     const sections = inputValue!.length
-      ? Object.entries(autocompleteSections).reduce((acc, [title, items]) => {
-          const matches = this.getSearchMatches(inputValue!, items);
-          return !matches.length
-            ? acc
-            : [
-                ...acc,
-                <ul className="autosuggest-dropdown-list" key={title}>
-                  <li className="autosuggest-dropdown-header">{title}</li>
-                  {matches
-                    .slice(0, 100) // Limit DOM rendering to 100 results, as DOM rendering is sloooow.
-                    .map(({ original, string: text }) => {
-                      const itemProps = downshift.getItemProps({
-                        key: original,
-                        index,
-                        item: original,
-                        style: {
-                          backgroundColor: highlightedIndex === index++ ? 'lightgray' : 'white',
-                        },
-                      });
-                      return (
-                        <li
-                          key={title}
-                          {...itemProps}
-                          dangerouslySetInnerHTML={{ __html: sanitizeHTML(text, { allowedTags: ['strong'] }) }}
-                        />
-                      );
-                    })}
-                </ul>,
-              ];
-        }, [] as JSX.Element[])
+      ? Object.entries(autocompleteSections).reduce(
+          (acc, [title, items]) => {
+            const matches = this.getSearchMatches(inputValue!, items);
+            return !matches.length
+              ? acc
+              : [
+                  ...acc,
+                  <ul className="autosuggest-dropdown-list" key={title}>
+                    <li className="autosuggest-dropdown-header">{title}</li>
+                    {matches
+                      .slice(0, 100) // Limit DOM rendering to 100 results, as DOM rendering is sloooow.
+                      .map(({ original, string: text }) => {
+                        const itemProps = downshift.getItemProps({
+                          key: original,
+                          index,
+                          item: original,
+                          style: {
+                            backgroundColor: highlightedIndex === index++ ? 'lightgray' : 'white',
+                          },
+                        });
+                        return (
+                          <li
+                            key={title}
+                            {...itemProps}
+                            dangerouslySetInnerHTML={{ __html: sanitizeHTML(text, { allowedTags: ['strong'] }) }}
+                          />
+                        );
+                      })}
+                  </ul>,
+                ];
+          },
+          [] as JSX.Element[]
+        )
       : [];
 
     if (!sections.length) {

pkg/ui/react-app/src/pages/graph/Graph.test.tsx

@@ -226,10 +226,7 @@ describe('Graph', () => {
               resolution: 28,
             },
             data: {
-              result: [
-                { values: [], metric: {} },
-                { values: [], metric: {} },
-              ],
+              result: [{ values: [], metric: {} }, { values: [], metric: {} }],
             },
           } as any)}
         />
@@ -257,10 +254,7 @@ describe('Graph', () => {
               resolution: 28,
             },
             data: {
-              result: [
-                { values: [], metric: {} },
-                { values: [], metric: {} },
-              ],
+              result: [{ values: [], metric: {} }, { values: [], metric: {} }],
             },
           } as any)}
         />

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