Commit graph

15 commits

Author SHA1 Message Date
James Ranson 1cffda5de7
react updates for pathPrefix (#7979)
* dynamically determine path prefix

Signed-off-by: James Ranson <james_ranson@cable.comcast.com>

* minor changes per PR review

Signed-off-by: James Ranson <james_ranson@cable.comcast.com>

* use Context for apiPath and pathPrefix

Signed-off-by: James Ranson <james_ranson@cable.comcast.com>

* remove unhandled "/version" path

Signed-off-by: James Ranson <james_ranson@cable.comcast.com>

* only process index once instead of on every req

Signed-off-by: James Ranson <james_ranson@cable.comcast.com>

* remove unneeded tag fragment

Signed-off-by: James Ranson <james_ranson@cable.comcast.com>

* switch api path to const

Signed-off-by: James Ranson <james_ranson@cable.comcast.com>

* revert

Signed-off-by: James Ranson <james_ranson@cable.comcast.com>

* update tests

Signed-off-by: James Ranson <james_ranson@cable.comcast.com>

* linter updates

Signed-off-by: James Ranson <james_ranson@cable.comcast.com>

* simplify

Signed-off-by: James Ranson <james_ranson@cable.comcast.com>

* updates per peer review

Signed-off-by: James Ranson <james_ranson@cable.comcast.com>
2020-10-22 17:22:32 +02:00
Drumil Patel 687a962bd1 Add conditional rendering of Navlink for Consoles (#6761)
* Add conditional rendering of Navlink for Consoles

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Replacing if else with only if conditional rendering

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Add tests and removing global declaration in Navbar

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Correct Navbar Testcases and add types for ConsolesLink

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Change names for Console link as per-naming convention

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>

* Change prop names to AppProps and NavbarProps respectively

Signed-off-by: Drumil Patel <drumilpatel720@gmail.com>
2020-02-08 11:00:47 +01:00
Boyko 8c2bc2f57a
Unify react fetcher components (#6629)
* set useFetch loading flag to be true initially

Signed-off-by: blalov <boiskila@gmail.com>

* make extended props optional

Signed-off-by: blalov <boiskila@gmail.com>

* add status indicator to targets page

Signed-off-by: blalov <boiskila@gmail.com>

* add status indicator to tsdb status page

Signed-off-by: blalov <boiskila@gmail.com>

* spread response in Alerts

Signed-off-by: blalov <boiskila@gmail.com>

* disable eslint func retun type rule

Signed-off-by: blalov <boiskila@gmail.com>

* add status indicator to Service Discovery page

Signed-off-by: blalov <boiskila@gmail.com>

* refactor PanelList

Signed-off-by: blalov <boiskila@gmail.com>

* test fix

Signed-off-by: blalov <boiskila@gmail.com>

* use local storage hook in PanelList

Signed-off-by: blalov <boiskila@gmail.com>

* use 'useFetch' for fetching metrics

Signed-off-by: blalov <boiskila@gmail.com>

* left-overs

Signed-off-by: blalov <boiskila@gmail.com>

* remove targets page custom error message

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* adding components displayName

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* display more user friendly error messages

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* update status page snapshot

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* pr review changes

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* fix broken tests

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* fix typos

Signed-off-by: Boyko Lalov <boiskila@gmail.com>
2020-02-03 15:14:25 +01:00
Boyko bab47b58f5 ReactUI: folder re-organization (#6601)
* remove redundant sanitizeHTML abstraction

Signed-off-by: blalov <boiskila@gmail.com>

* organize folders

Signed-off-by: blalov <boiskila@gmail.com>

* move hooks outside common folder

Signed-off-by: blalov <boiskila@gmail.com>

* move PathPrefix interface in types

Signed-off-by: blalov <boiskila@gmail.com>

* remove config folder

Signed-off-by: blalov <boiskila@gmail.com>

* remove redundant snapshots

Signed-off-by: blalov <boiskila@gmail.com>

* rename common folder

Signed-off-by: blalov <boiskila@gmail.com>

* merge utils files

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* sync with master

Signed-off-by: blalov <boiskila@gmail.com>
2020-01-14 19:34:48 +01:00
Julius Volz d2cb05846b
React UI: Add /tsdb-status to React-handled routes (#6313)
Signed-off-by: Julius Volz <julius.volz@gmail.com>
2019-11-20 15:50:52 +01:00
Sharad Gaur a85e7aac0e Adding TSDB Stats Page in React UI (#6281)
Signed-off-by: Sharad Gaur <sgaur@splunk.com>
2019-11-12 11:15:20 +01:00
Julius Volz 95554074d8
React UI: Support custom path prefixes (#6264)
* React UI: Support custom path prefixes

The challenge was that the path prefix can be set dynamically as a flag
on Prometheus, but the React app bundle is statically compiled in to
expect a given path prefix. By adding a placeholder value to the React
app's index.html and replacing it in Prometheus with the right path
prefix during serving, this injects Prometheus's path prefix into the
React app via a global const.

Threading the path prefix into the different React components could have
been done with React's Contexts (https://reactjs.org/docs/context.html),
but I found the consumer side of context values to be a bit cumbersome
(wrapping entire components in context consumers), so I ended up
preferring direct threading of the path prefix values to components that
needed them. Also, using contexts in tests is more verbose than just
passing in path prefix values directly.

Fixes https://github.com/prometheus/prometheus/issues/6163

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Review feedback

Signed-off-by: Julius Volz <julius.volz@gmail.com>
2019-11-04 09:17:50 +01:00
Boyko cb7cbad5f9 WIP: status page - API and UI (#6243)
* status page initial commit

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
Signed-off-by: blalov <boyko.lalov@tick42.com>

* refactor useFetch

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
Signed-off-by: blalov <boyko.lalov@tick42.com>

* refactoring

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
Signed-off-by: blalov <boyko.lalov@tick42.com>

* adding tests

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
Signed-off-by: blalov <boyko.lalov@tick42.com>

* snapshot testing

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
Signed-off-by: blalov <boyko.lalov@tick42.com>

* fix wrong go files formatting

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
Signed-off-by: blalov <boyko.lalov@tick42.com>

* change the snapshot library

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
Signed-off-by: blalov <boyko.lalov@tick42.com>

* update api paths

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
Signed-off-by: blalov <boyko.lalov@tick42.com>

* move test folder outside src

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
Signed-off-by: blalov <boyko.lalov@tick42.com>

* useFetches tests

Signed-off-by: blalov <boyko.lalov@tick42.com>

* sticky navbar

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
Signed-off-by: blalov <boyko.lalov@tick42.com>

* handle runtimeInfo error on Gather() and add json tags to RuntimeInfo struct

Signed-off-by: blalov <boyko.lalov@tick42.com>

* refactor alert managers section

Signed-off-by: blalov <boyko.lalov@tick42.com>
2019-11-02 16:53:32 +01:00
CSTDev 3b39f6ae45 WIP: React UI Linting rules (#6206)
* Initial react-ui linting rules

Signed-off-by: cstdev <pietomb00@hotmail.com>

* Add react linting to build process

Move eslint config to its own file to keep package.json clearer.

Signed-off-by: cstdev <pietomb00@hotmail.com>

* Linting changes from master

Signed-off-by: cstdev <pietomb00@hotmail.com>

* Move CI linting to makefile and travis

Also add trailing comma to multiline imports.

Signed-off-by: cstdev <pietomb00@hotmail.com>

* Add lint fix target to makefile

Signed-off-by: cstdev <pietomb00@hotmail.com>

* Lint latest master

Signed-off-by: cstdev <pietomb00@hotmail.com>
2019-10-28 15:02:42 +01:00
Julius Volz e8027ba515
React UI: Serve React UI under /new (#6229)
This makes React UI URLs look nicer than the previous
/static/graph-new/app.html, but internally still serves all React UI
files from the compiled-in static assets directory.

Also, to allow future usage of the React / Reach router, we need to
serve the main React app's index.html on certain sub-paths that
correspond to current Prometheus's UI pages, instead of trying to serve
actual files that match the provided path name.

Signed-off-by: Julius Volz <julius.volz@gmail.com>
2019-10-28 10:45:53 +01:00
Boyko 8afa8452fd reach router integration initial commit (#6232)
Signed-off-by: blalov <boyko.lalov@tick42.com>
2019-10-27 22:03:39 +01:00
Boyko e235af9c47 migrate query history (#6193)
* migrate query history

Signed-off-by: blalov <boyko.lalov@tick42.com>

* update lock file

Signed-off-by: blalov <boyko.lalov@tick42.com>

* set expression input height when item is selected

Signed-off-by: blalov <boyko.lalov@tick42.com>

* pr review changes

Signed-off-by: blalov <boyko.lalov@tick42.com>
2019-10-23 22:18:41 +02:00
Julius Volz 1c238ac086
Add links between classic and new UIs (#6191)
The links preserve the graph settings between the two UIs.

Fixes https://github.com/prometheus/prometheus/issues/6162

Signed-off-by: Julius Volz <julius.volz@gmail.com>
2019-10-21 20:18:47 +02:00
Julius Volz ccac71ca5a
Update all React app node modules (#6153)
* Update all React app node modules

I ran "yarn upgrade --latest" and then fixed items that caused errors
with new linter settings in the React UI source.

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fix more React UI lint errors that fail CI

Signed-off-by: Julius Volz <julius.volz@gmail.com>
2019-10-17 16:34:02 +02:00
Julius Volz bca6e90ea6
Integrate beginning of React UI (#5694)
* Initial commit from Create React App

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Initial Prometheus expression browser code

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Grpahing, try out echarts

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Switch to flot

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add metrics fetching and stuff

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Autosuggest and graph improvements

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Start implementing graph controls, add loading spinner

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* So many new features and fixes

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fixed and built more features

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Make datetimepicker clear work

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Don't abort when executing empty expression

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove TabPaneAlert

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Split components into separate files

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add table time input

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Move first files to TypeScript!

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* More TypeScript conversions

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* More TS conversions

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* More TS conversions

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* More TS conversions

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* More TS conversions

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* More TS fixes

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Convert Graph to TS

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Changes

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Resize detector, start building legend, axis font colors

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Make graph legend work

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add URL params support and much more

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Put panel state into panel list, write URL options

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Change order of Graph and Table tabs

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Generalize time input naming more

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Work on history functionality

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* npm updates

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Move loading indicator into "Execute" button

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fix typo

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Revert "Move loading indicator into "Execute" button"

This reverts commit ce7daee1f1af35da6c0d8b5517272839285ccfec.

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Improve error message when failing to fetch server time

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Move all code to Prometheus repo target dir

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add react-app Makefile step and check in generated assets

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add preliminary npm packages notice to NOTICE file

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Update React app's favicon and metadata

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove RP server refs, cleanups

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Use CircleCI image that includes NodeJS

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add some missing React output assets

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Preserve CRLF in generated React files

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Switch from npm to yarn for React UI

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Save npm licenses and include them in release tarball

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Install npm on Travis

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove npm license tarball from source

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove React graph bundle from source

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Don't check in any compiled web assets

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Update README.md with node/yarn/React UI info

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fix asset build step on CircleCI promu crossbuild

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Try to fix multi-arch go generate

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove check_assets from Travis CI build

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Prevent rebuilding of unchanged React app parts

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fix npm license tarball path for promu

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Simplify Makefile

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Clarify build instructions in README.md

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Make minimal JS test pass

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Integrate React app tests into Makefile

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Separate react-app-tests target, but run it from CI

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fix working directory for React app tests

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* 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 <julius.volz@gmail.com>

* Depend on node_modules path for npm_licenses target

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Simplify tarball/docker/build Makefile targets

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Include React tests in "test" target

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove reference to removed "check_assets" target

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Do initial resize of expression input field

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add React app proxying to local Prometheus in dev mode

Signed-off-by: Julius Volz <julius.volz@gmail.com>
2019-10-17 14:38:09 +02:00