* Upgrade create-react-app to v5
Some other dependencies needs to be upgraded as well, plus some typescript errors fixed.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Use ESM imports for codemirror-promql
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Update FontAwesome to v6
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* rework the target page
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* put back the URL of the endpoint
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* replace old code by the new one and change function style
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* align filter and search bar on the same row
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* remove unnecessary return
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* upgrade kvsearch to v0.3.0
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* fix unit test
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* add missing style on column
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* add placeholder and autofocus
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* put back the previous table design
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* fix issue relative to the position of the tooltip
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* fix health filter
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* fix test on label tooltip
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* simplify filter condition
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* rework service discovery page
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* introduced generic custom infinite scroll component
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* adjust the placeholder in discovery page
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* ignore returning type missing
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* apply fix required by the review
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* index discoveredLabels
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* rework the target page
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* put back the URL of the endpoint
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* replace old code by the new one and change function style
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* align filter and search bar on the same row
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* remove unnecessary return
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* upgrade kvsearch to v0.3.0
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* fix unit test
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* add missing style on column
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* add placeholder and autofocus
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* put back the previous table design
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* fix issue relative to the position of the tooltip
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* fix health filter
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* fix test on label tooltip
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* simplify filter condition
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* 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>
Target errors are rendered as badges. If error text is very long it will expand the table since badges are not allowed to wrap.
Replace badge with a span which is allowed to wrap around.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
Similar to https://github.com/prometheus/prometheus/pull/7902, this could lead
to style bugs for label names that correspond to styled CSS class names.
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* [UI] Add a test for duplicated keys in EndpointLink component
I've noticed that I'm getting warnings about multiple children with the same key on /targets page.
This adds a test that fails when that happens.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* [UI] Fix duplicated keys on /targets page
Since any URI we render on /targets page can have multi-value params we should use both name and value as components keys.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
The React app's assets are now served under /assets, while all old
custom web assets (including the ones for console templates) are now
served from /classic/static.
I tested different combinations of --web.external-url and
--web.route-prefix with proxies in front, and I couldn't find a problem
yet with the routing. Console templates also still work.
While migrating old endpoints to /classic, I noticed that /version was
being treated like a lot of the old UI pages, with readiness check
handler in front of it, etc. I kept it in /version and removed that
readiness wrapper, since it doesn't seem to be needed for that endpoint.
Signed-off-by: Julius Volz <julius.volz@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>
Adding the label name as a CSS class can break styling and other
behavior when the label name has a special meaning in CSS. E.g. the
"container" label was displayed at 100% width because it was interpreted
to be a bootstrap container layout element.
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This fixes an issue where the /new/targets page will not load when there
are jobs with invalid CSS characters in them, such as the
namespace/service/0 form used by the Prometheus Operator.
Signed-off-by: Chris Marchbanks <csmarchbanks@gmail.com>
* React UI: Send cookies on fetch() on older browsers
Fixes https://github.com/prometheus/prometheus/issues/6428
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Fix fetch() tests to expect new options
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This fixes two TypeScript errors. Not sure why we didn't catch the
breakage in the PR CI tests... also, updating TypeScript just for good
measure.
Signed-off-by: Julius Volz <julius.volz@gmail.com>
