ui: add React UI from upstream Prometheus #2121

adrien-f · 2020-02-12T08:55:05Z

I added CHANGELOG entry for this change.
Change is not relevant to the end user.

Changes

Add React UI accesible from the Query only for the moment as only the graph endpoint has been migrated.

I've been putting Thanos related modifications in the ui/react-app/src/thanos directory but there are some modifications in the root files. The goal is to be able to just copy paste the source from upstream and let the Thanos directory do the rest to ease upgrades.

Verification

Signed-off-by: Adrien Fillon <adrien.fillon@gmail.com>

bwplotka · 2020-02-24T09:05:48Z

@adrien-f can you rebase a bit?

@d-ulyanov @geobeau can you help in review?

geobeau

Mostly nitpicking, I couldn't review most of the code as it is:

very big
mostly from Prometheus
I'm not react expert

geobeau · 2020-02-24T12:22:52Z

pkg/ui/react-app/README.md

+
+Yarn consults the `package.json` and `yarn.lock` files for dependencies to install. It creates a `node_modules` directory with all installed dependencies.
+
+## Running a local development server


This part should be adapted for Thanos

geobeau · 2020-02-24T12:23:34Z

pkg/ui/react-app/README.md

+
+**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.
+
+## Integration into Prometheus


Prometheus -> Thanos

geobeau · 2020-02-24T12:24:55Z

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

@@ -0,0 +1,15 @@
+{
+  "short_name": "Prometheus UI",


Prometheus -> Thanos

vankop · 2020-02-25T16:01:32Z

Makefile

+.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


Suggested change

cd $(REACT_APP_PATH) && yarn test --no-watch --coverage

cd $(REACT_APP_PATH) && export CI=true && yarn test --no-watch --coverage

Looks like jest can not understand that it runs in CI, that's why CI did not pass yet.

vankop · 2020-02-25T16:05:49Z

All unit tests passing.. Don't know how to help with review more..

vankop · 2020-02-25T16:08:21Z

Dockerfile.thanos-ci

@@ -1,5 +1,5 @@
 # Available from https://hub.docker.com/r/circleci/golang/
-FROM circleci/golang:1.13.6
+FROM circleci/golang:1.13.6-node


Did not find which Node.js version runs in this image (Could possibly lead to a build problems later). Better to freeze it in package.json to LTS if possible https://docs.npmjs.com/files/package.json#engines

vankop · 2020-02-25T16:21:52Z

pkg/ui/react-app/src/Navbar.tsx

+            </DropdownMenu>
+          </UncontrolledDropdown>
+          <NavItem>
+            <NavLink href="https://prometheus.io/docs/prometheus/latest/getting_started/">Help</NavLink>


Prometheus => Thanos?

vankop · 2020-02-25T16:44:00Z

Could we add typescript check in Makefile and in CI? What do you think @adrien-f ?

package.json

scripts: {"types": "tsc --pretty --noEmit"}

Right now there are several errors

vankop · 2020-02-25T16:53:23Z

pkg/ui/react-app/src/App.test.tsx

+import { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBStatus, PanelList } from './pages';
+
+describe('App', () => {
+  const app = shallow(<App pathPrefix="/path/prefix" />);


missing thanosComponent

vankop · 2020-03-10T08:59:35Z

@bwplotka @adrien-f friendly ping on this 🤗

Are we waiting for more reviewers? or there is other blockers to this PR?

GiedriusS · 2020-03-10T17:50:28Z

@bwplotka @adrien-f friendly ping on this

Are we waiting for more reviewers? or there is other blockers to this PR?

I think this has been postponed for a little bit because in Prometheus this UI code is still very much in flux so we've been recommended to wait for a bit. :-) I guess once it will be moved out of the "experimental" phase we will be able to continue with this. Perhaps @adrien-f knows more information.

stale · 2020-04-09T18:21:30Z

This issue/PR has been automatically marked as stale because it has not had recent activity. Please comment on status otherwise the issue will be closed in a week. Thank you for your contributions.

bwplotka · 2020-04-09T18:25:28Z

Looking for GSoC help here (:

cc @prmsrswt

GiedriusS · 2020-05-11T14:31:53Z

Merged via #2412 :P closing this one. Thank you to everyone for your efforts!

adrien-f force-pushed the feature/react-ui branch 2 times, most recently from d171702 to f013d2e Compare February 12, 2020 08:57

adrien-f mentioned this pull request Feb 12, 2020

React UI migration #2124

Closed

6 tasks

ui: add React UI from upstream Prometheus

19cf55b

Signed-off-by: Adrien Fillon <adrien.fillon@gmail.com>

adrien-f force-pushed the feature/react-ui branch from f013d2e to 19cf55b Compare February 12, 2020 13:10

geobeau mentioned this pull request Feb 22, 2020

Improve Bucket Web UI view: Front-end hero wanted! 💖 #2149

Closed

geobeau reviewed Feb 24, 2020

View reviewed changes

vankop reviewed Feb 25, 2020

View reviewed changes

stale bot added the stale label Apr 9, 2020

stale bot removed the stale label Apr 9, 2020

bwplotka added the GSoC/Community Bridge/LFX label Apr 9, 2020

onprem mentioned this pull request Apr 10, 2020

ui: add new React UI from Prometheus #2412

Merged

2 tasks

GiedriusS closed this May 11, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ui: add React UI from upstream Prometheus #2121

ui: add React UI from upstream Prometheus #2121

adrien-f commented Feb 12, 2020

bwplotka commented Feb 24, 2020

geobeau left a comment •

edited

Loading

geobeau Feb 24, 2020

geobeau Feb 24, 2020

geobeau Feb 24, 2020

vankop Feb 25, 2020

vankop commented Feb 25, 2020

vankop Feb 25, 2020 •

edited

Loading

vankop Feb 25, 2020

vankop commented Feb 25, 2020

vankop Feb 25, 2020

vankop commented Mar 10, 2020

GiedriusS commented Mar 10, 2020

stale bot commented Apr 9, 2020

bwplotka commented Apr 9, 2020

GiedriusS commented May 11, 2020


		Yarn consults the `package.json` and `yarn.lock` files for dependencies to install. It creates a `node_modules` directory with all installed dependencies.

		## Running a local development server


		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.

		## Integration into Prometheus

	cd $(REACT_APP_PATH) && yarn test --no-watch --coverage
	cd $(REACT_APP_PATH) && export CI=true && yarn test --no-watch --coverage

ui: add React UI from upstream Prometheus #2121

ui: add React UI from upstream Prometheus #2121

Conversation

adrien-f commented Feb 12, 2020

Changes

Verification

bwplotka commented Feb 24, 2020

geobeau left a comment • edited Loading

Choose a reason for hiding this comment

geobeau Feb 24, 2020

Choose a reason for hiding this comment

geobeau Feb 24, 2020

Choose a reason for hiding this comment

geobeau Feb 24, 2020

Choose a reason for hiding this comment

vankop Feb 25, 2020

Choose a reason for hiding this comment

vankop commented Feb 25, 2020

vankop Feb 25, 2020 • edited Loading

Choose a reason for hiding this comment

vankop Feb 25, 2020

Choose a reason for hiding this comment

vankop commented Feb 25, 2020

vankop Feb 25, 2020

Choose a reason for hiding this comment

vankop commented Mar 10, 2020

GiedriusS commented Mar 10, 2020

stale bot commented Apr 9, 2020

bwplotka commented Apr 9, 2020

GiedriusS commented May 11, 2020

geobeau left a comment •

edited

Loading

vankop Feb 25, 2020 •

edited

Loading