* Tweak colors in the dark theme to improve contrast
Some colors from the dark theme used in the query editor have a very low
contrast ratio with the background.
Signed-off-by: Jorge Luis Betancourt Gonzalez <jorge-luis.betancourt@trivago.com>
* Avoid duplicated function call when in dark mode
Co-authored-by: Julius Volz <julius.volz@gmail.com>
Signed-off-by: Jorge Luis Betancourt Gonzalez <jorge-luis.betancourt@trivago.com>
* Apply styles for the matching bracket when focused in dark mode
Signed-off-by: Jorge Luis Betancourt Gonzalez <jorge-luis.betancourt@trivago.com>
* Improve style of the matching brackets when focused
Signed-off-by: Jorge Luis Betancourt Gonzalez <jorge-luis.betancourt@trivago.com>
Co-authored-by: Julius Volz <julius.volz@gmail.com>
* Allow formatting PromQL expressions in the UI
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Improve error handling, also catch HTTP errors
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Remove now-unneeded async property
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Disable format button when already formatted
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Disable format button when there are linter errors
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Remove disabling of format button again for linter errors
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* bump codemirror to v0.20.x and lezer to v.0.16.x
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* bump codemirror to v6 and lezer to v1
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* stop treating warning as error for UI
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* Fix DataTable tests and missing value key warning
Fixes issues introduced in https://github.com/prometheus/prometheus/pull/10376
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Fix more DataTable brokenness
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Add a tooltip for unix times (ISO strings)
Signed-off-by: Ondrej Kokes <ondrej.kokes@gmail.com>
* Leverage useLocalTime to adjust ISO string tooltips
Signed-off-by: Ondrej Kokes <ondrej.kokes@gmail.com>
* revert pre styling removal
Signed-off-by: Ondrej Kokes <ondrej.kokes@gmail.com>
* 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>
* Fix bug that sets the range input to the resolution
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Address review comments
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This updates React, TypeScript, and some other node packages (but not
everything).
A couple of notes:
- `enzyme-adapter-react-16` does not have a React 17 equivalent yet, so I
switched to the fork `@wojtekmaj/enzyme-adapter-react-17`
- A bunch of tests are still failing because I think in the enzyme testing
environment, a browser API (`ResizeObserver`) is missing, and maybe for other
reasons. This needs to be explored + fixed.
- The TypeScript update introduced more stringent rules, which required fixing
up a bunch of pieces of code a bit.
- The `use-media` package doesn't work with React 17 yet, so I just built our
own minimal `useMedia` hook instead (just a couple of lines).
- I commented out part of the code in `withStartingIndicator.tsx` because it
fails the now-stricter lint checks. It needs to be fixed (and not commented
out).
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This updates React, TypeScript, and some other node packages (but not
everything).
A couple of notes:
- `enzyme-adapter-react-16` does not have a React 17 equivalent yet, so I
switched to the fork `@wojtekmaj/enzyme-adapter-react-17`
- A bunch of tests are still failing because I think in the enzyme testing
environment, a browser API (`ResizeObserver`) is missing, and maybe for other
reasons. This needs to be explored + fixed.
- The TypeScript update introduced more stringent rules, which required fixing
up a bunch of pieces of code a bit.
- The `use-media` package doesn't work with React 17 yet, so I just built our
own minimal `useMedia` hook instead (just a couple of lines).
- I commented out part of the code in `withStartingIndicator.tsx` because it
fails the now-stricter lint checks. It needs to be fixed (and not commented
out).
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Add sorting and filtering to flags page
Signed-off-by: Dustin Hooten <dustinhooten@gmail.com>
* Make filter understand
Signed-off-by: Dustin Hooten <dustinhooten@gmail.com>
* split big state object into smaller ones
Signed-off-by: Dustin Hooten <dustinhooten@gmail.com>
* use fuzzy match and sanitize html for search results
Signed-off-by: Dustin Hooten <dustinhooten@gmail.com>
* use fuzzy.filter
Signed-off-by: Dustin Hooten <dustinhooten@gmail.com>
* replace fuzzy lib by @nexucis/fuzzy + fix flags issues
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* replace fuzzy by @nexucis/fuzzy in ExpressionInput.tsx
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* remove fuzzy lib from package.json
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* fix flags test
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* simplify the input in the fuzzy search
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* cleanup html to be easily compatible with the dark theme
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* fix filtering when there is no result
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* use id to fix the test
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
Co-authored-by: Dustin Hooten <dustinhooten@gmail.com>
* Added selection flot plugin
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Added time selection
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Added tests
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Removed irrelevant line in license header
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Improve graph info tooltip for series and exemplars
It now shows more clearly what the label sets are about (series vs. exemplar +
associated series) and also shows the metric name for both label sets when it
is present.
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Fix up inconsistent title casing
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Explicitly indicate empty labelsets in hover tooltip
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Adjust tests to new hover detail
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Added exemplar support
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Modified tests
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fix eslint suggestions
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Address review comments
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed undefined data property error
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Added series label section to tooltip
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed spacing
Signed-off-by: GitHub <noreply@github.com>
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed tests
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Added exemplar info
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Changed exemplar symbol
Signed-off-by: Levi Harrison <git@leviharrison.dev>
Co-authored-by: Julius Volz <julius.volz@gmail.com>
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Hide selected exemplar info when 'Show Exemplars' is unchecked
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Include series labels in exemplar info
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* De-densify exemplars
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Moved showExemplars to per-panel control
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Eslint fixes
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Address review comments
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed tests
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fix state bug
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Removed unused object
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fix eslint
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Encoded 'show_exemplars' in url
Signed-off-by: Levi Harrison <git@leviharrison.dev>
Co-authored-by: Julius Volz <julius.volz@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>
* bump cm-promql to v0.14.1
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* enhancement a bit the way to build the codemirror PromQL extension
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
* Added 16w and 26w time range steps
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed indentation
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Add new codemirror-promql-based expression editor
This adds advanced autocompletion, syntax highlighting, and linting
for PromQL.
Fixes https://github.com/prometheus/prometheus/issues/6160
Fixes https://github.com/prometheus/prometheus/issues/5421
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Group new editor options and float them left
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Improve history autocompletion handling
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Only show info tooltips for unabbreviated completion items
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Rename "new editor" to "experimental editor"
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Add path prefix support
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Revert accidental check-in of go.sum changes
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Remove spurious console.log
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Fix completion item type icon styling
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Checkbox should use onChange, not onClick
This fixes react console errors:
You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Correctly pass key in metrics exporer
Instead of passing metric variable we pass 'metric' string, which causes console errors due to duplicated keys.
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Update tests
Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>
* Add expression explorer
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Add final new line to all files
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Rename expression to metric
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Pass dedicated metrics array to metrics explorer
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Fix styling of button
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Use append instead of prepend
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Update max width of modal
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Fix code style
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Fix inconsistent variable naming
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Fix modal title
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Fix tests
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Prevent request from being cached
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Remove timestamp from request
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Update button selector in test
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Refactor passing down metric names and query history
Signed-off-by: Lucas Hild <git@lucas-hild.de>
* Fix code style
Signed-off-by: Lucas Hild <git@lucas-hild.de>
- First, it is currently not only removing "metric" autocomplete, but
also "query history autocomplete", so the checkbox is confusing.
- Then, in the future, we will want also "functions" autocomplete.
Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>
