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>
* Fix/removed forwarding
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Added global 'wasReady' and 'wasUnexpected'
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Eslint fixes
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Added withStartingIndicator wrapper
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed condition
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Removed unused import
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Moved withStartingIndicator calls to pages index
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed withStartingIndicator tests
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed eslint (maybe?)
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Trailing comma
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Added prettier ignore
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fix eslint (pt. 2)
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Added walreplay API endpoint
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Added starting page to react-ui
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Documented the new endpoint
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed typos
Signed-off-by: Levi Harrison <git@leviharrison.dev>
Co-authored-by: Julius Volz <julius.volz@gmail.com>
* Removed logo
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Changed isResponding to isUnexpected
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Changed width of progress bar
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Changed width of progress bar
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Added DB stats object
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Updated starting page to work with new fields
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Passing nil
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Passing nil (pt. 2)
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Passing nil (pt. 3)
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Passing nil (and also implementing a method this time) (pt. 4)
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Passing nil (and also implementing a method this time) (pt. 5)
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Changed const to let
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Passing nil (pt. 6)
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Remove SetStats method
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Added comma
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Changed api
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Changed to triple equals
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed data response types
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Don't return pointer
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Changed version
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed interface issue
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed pointer
Signed-off-by: Levi Harrison <git@leviharrison.dev>
* Fixed copying lock value error
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>
* 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>
* 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>
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>
* 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>
