850dbda5c3
* 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>
|
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .eslintrc.json | ||
| .gitignore | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| yarn.lock | ||
Working with the React UI
This file explains how to work with the React-based Prometheus UI.
Introduction
The React-based Prometheus UI was bootstrapped using Create React App, a popular toolkit for generating React application setups. You can find general information about Create React App on their documentation site.
Instead of plain JavaScript, we use TypeScript to ensure typed code.
Development environment
To work with the React UI code, you will need to have the following tools installed:
- The Node.js JavaScript runtime.
- The Yarn package manager.
- Recommended: An editor with TypeScript, React, and ESLint linting support. See e.g. Create React App's editor setup instructions. If you are not sure which editor to use, we recommend using Visual Studio Code. Make sure that the editor uses the project's TypeScript version rather than its own.
NOTE: When using Visual Studio Code, be sure to open the web/ui/react-app directory in the editor instead of the root of the repository. This way, the right ESLint and TypeScript configuration will be picked up from the React workspace.
Installing npm dependencies
The React UI depends on a large number of npm packages. These are not checked in, so you will need to download and install them locally via the Yarn package manager:
yarn
Yarn consults the package.json and yarn.lock files for dependencies to install. It creates a node_modules directory with all installed dependencies.
NOTE: Remember to change directory to web/ui/react-app before running this command and the following commands.
Running a local development server
You can start a development server for the React UI outside of a running Prometheus server by running:
yarn start
This will open a browser window with the React app running on http://localhost:3000/. The page will reload if you make edits to the source code. You will also see any lint errors in the console.
Due to a "proxy": "http://localhost:9090" setting in the package.json file, any API requests from the React UI are proxied to localhost on port 9090 by the development server. This allows you to run a normal Prometheus server to handle API requests, while iterating separately on the UI.
[browser] ----> [localhost:3000 (dev server)] --(proxy API requests)--> [localhost:9090 (Prometheus)]
Running tests
Create React App uses the Jest framework for running tests. To run tests in interactive watch mode:
yarn test
To generate an HTML-based test coverage report, run:
CI=true yarn test --coverage
This creates a coverage subdirectory with the generated report. Open coverage/lcov-report/index.html in the browser to view it.
The CI=true environment variable prevents the tests from being run in interactive / watching mode.
See the Create React App documentation for more information about running tests.
Linting
We define linting rules for the ESLint linter. We recommend integrating automated linting and fixing into your editor (e.g. upon save), but you can also run the linter separately from the command-line.
To detect and automatically fix lint errors, run:
yarn lint
This is also available via the react-app-lint-fix target in the main Prometheus Makefile.
Building the app for production
To build a production-optimized version of the React app to a build subdirectory, run:
yarn build
NOTE: You will likely not need to do this directly. Instead, this is taken care of by the build target in the main Prometheus Makefile when building the full binary.
Integration into Prometheus
To build a Prometheus binary that includes a compiled-in version of the production build of the React app, change to the root of the repository and run:
make build
This installs npm dependencies via Yarn, builds a production build of the React app, and then finally compiles in all web assets into the Prometheus binary.