Commit Graph

14 Commits (a6b085ee5abea79d61e915c4bfb6fbc5e5e3e2ee)

Author SHA1 Message Date
cui fliter 484a9e4071
fix some typos (#12498)
Signed-off-by: cui fliter <imcusg@gmail.com>
2023-06-29 12:28:13 +02:00
Levi Harrison 3b4cbf8da4
Inject readiness state through context (#11617)
Signed-off-by: Levi Harrison <git@leviharrison.dev>

Signed-off-by: Levi Harrison <git@leviharrison.dev>
2023-01-09 00:04:00 +01:00
Augustin Husson 4af2fc8bc2
Fix serving of Prometheus logo, move it into 'src/images' (#10236)
* add prometheus logo in the list of file that should be served at the root

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>

* move prometheus logo to src/images

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
2022-02-02 14:53:30 +01:00
Augustin Husson 68bfd226fb
Add Prometheus Logo (#10233)
* Add Prometheus logo in react UI

Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>

* Use REM

Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>

* increase the margin top of the navbar-brand

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>

Co-authored-by: Julien Pivotto <roidelapluie@inuits.eu>
2022-02-01 15:39:35 +01:00
Julien Pivotto c78fcd29ba
Adapt UI for Prometheus Agent (#9851)
* 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>
2021-11-30 11:21:07 +01:00
Julien Pivotto b40e254f25
Agent: Add a boolean to the index to indicate agent mode. (#9649)
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>
2021-11-03 03:47:14 +00:00
Łukasz Mierzwa 850dbda5c3
Add a dark theme (#8604)
* 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>
2021-04-15 18:14:07 +02:00
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
Stefan Büringer d30f202c08
Fix Experimental UI for cookie based authentication (#7827)
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>
2020-08-27 22:50:32 +02:00
Julien Pivotto a3ac9fa5f5
Add custom title to React UI (#7607)
* 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>
2020-07-21 10:48:29 +02:00
Julius Volz 0a8acb654e
React UI: Use null value for determining consoles link display (#6790)
Signed-off-by: Julius Volz <julius.volz@gmail.com>
2020-02-09 13:39:44 +01: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
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
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