* Adapt UI for Prometheus Agent
UI is not my strongest skill, but I'd like to have something minimal for
the initial release of the agent.
Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>
* Address review comments
Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>
* Add tests
Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>
* Add tests, serve only current mode paths
Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>
* Update js style, add agent test
Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>
I would like to avoid extra API call's to determine if we are running in
Agent Mode, so I think we could use this approach.
This is a bootstrap of #9612
Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>
* Upgrade bootstrap and reactstrap to the latest version
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add SASS support
node-sass is needed for cra to handle SCSS files instead of pure CSS.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme
This adds a dark theme and UI controls to switch between themes.
Dark theme will require some CSS changes that will follow in future commits.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a margin to Prometheus brand
There is no space between 'Prometheus' brand text and the toggle button when using mobile device.
This adds a margin to the button that's only rendered on mobile
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for CollapsibleAlertPanel
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for RulesContent
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for Config
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Use bootstrap classes for margins
We can override margins via bootstrap css classes instead of loading custom css module.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for QueryStatsView
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for MetricsExplorer
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for 'Clear time' button
This button had some custom css based on light bootstrap theme so it needs to be adjusted for dark theme.
This change re-uses bootstrap styles used for input components instead of copying color values
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add dark theme for Graph panel input
This makes the whole input group look consistent in dark mode as the old styles were made to blend it with the default bootstrap theme.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for CME expression input
This change splits current CME theme into 3:
1 - base theme used for both light and dark mode
2 - light mode specific theme that overrides base
3 - dark mode specific theme that overrides base
To make it all work we also need to move theme to dynamic config, so when theme value
in ThemeContext changes CME input will apply a new theme.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add a dark theme for /graph page tabs
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Fix metrics explorer modal scroll
bootstrap-dark breaks scrolling on the metrics modal, so we need an extra rule to fix that.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Move App.css rules to themes/_shared.scss
This completes splitting styles into light and dark theme.
It also fixes some small issues with themes as now all styles from App.css are applied correctly.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Move html{} styles to a dedicated file
html block is root document so styles for it cannot be nested under theme classes.
Move it out and add a bit of documentation to explain what which file does.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Fix reboot styles overriding other FontAwesome classes
Both bootstrap themes we use import reboot classes (https://getbootstrap.com/docs/4.6/content/reboot/) which has the side effect of overriding other classes. We need reboot to be applied as defaults for the browser, so it needs to be moved out of theme class selectors. But because reboot requires scss variables we need to feed it something, for that we use the default light theme, so it gets imported there and browser will use style of the default theme to reset default (unthemed) styles.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Move codicon font to app.scss
This needs to be applied globally, not per theme.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* 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>
We're using Prometheus behind a reverse proxy which authenticates everything based on cookies.
Without this attribute the cookie is not send with the request for the manifest.json
Signed-off-by: Stefan Bueringer <sbueringer@gmail.com>
* Backport custom title to React UI
Backports #4841 into the new UI.
Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>
* Fix typo
Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>
* 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>
* 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>
* 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>
Julien Pivotto
Łukasz Mierzwa
James Ranson
Stefan Büringer
Julius Volz
Drumil Patel