* 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>
* React UI: Improve styling of autocomplete sections
I removed the Card-related components and went back to normal <ul>/<li>,
since the style that Cards added just got in the way (like adding extra
borders and rounding, etc.), and from the examples at
https://getbootstrap.com/docs/4.3/components/card/, it doesn't seem like
multiple Cards are meant to be used as part of a larger list
(style-wise).
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Address review feedback
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* React UI: More conversions to Function Components
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Address chat feedback over Riot
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Implement the /flags page in react
Signed-off-by: Chris Marchbanks <csmarchbanks@gmail.com>
* Use custom react hook for calling api
Signed-off-by: Chris Marchbanks <csmarchbanks@gmail.com>
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>
* Use root relative font size rather than px to avoid hidpi issues.
* Darken to 50% saturation of base font color.
Signed-off-by: Ben Kochie <superq@gmail.com>
The metric names only get loaded once initially, so there is no reason
to mix them up with the handling of ongoing query history.
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Adds the query stats to UI
Adds the query load time, resolution and total number of time series,
as the current UI has
Signed-off-by: cstdev <pietomb00@hotmail.com>
* Implement unit test for QueryStats
Signed-off-by: cstdev <pietomb00@hotmail.com>
* Tidy Query Stats component
Rename it and expose a interface for the values it displays
Make it a functional component as it has no state or lifecycle
Better null/undefined checks
Only render if needed, decided by the panel
Remove old stats if the next errors
Signed-off-by: cstdev <pietomb00@hotmail.com>
* make expression input controlled
Signed-off-by: blalov <boyko.lalov@tick42.com>
* close menu explicitly when autosuggestion dropdown is hidden
Signed-off-by: blalov <boyko.lalov@tick42.com>
* Add component to sanitize html
Signed-off-by: Ritesh Shrivastav <ritesh.conf@gmail.com>
* Use SanitizeHTML component to allow only supported elements
Signed-off-by: Ritesh Shrivastav <ritesh.conf@gmail.com>
* Add allowedTags props in SanitizeHTML component
Signed-off-by: Ritesh Shrivastav <ritesh.conf@gmail.com>
* 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>
* 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>
