cryostat-web
Web front-end for Cryostat, providing a graphical user interface for managing JFR on remote JVMs.
Based on Patternfly React Seed.
SEE ALSO
-
cryostat-core for the core library providing a convenience wrapper and headless stubs for use of JFR using JDK Mission Control internals.
-
cryostat-operator for an OpenShift Operator facilitating easy setup of Cryostat in your OpenShift cluster as well as exposing the Cryostat API as Kubernetes Custom Resources.
-
cryostat for the JFR management service.
REQUIREMENTS
- Node v20+
- Yarn v3.3.0+
BUILD
Setup dependencies
$ yarn install --immutable
Run a production build
$ yarn build
# or without tests
$ yarn build:notests
DEVELOPMENT SERVER
Development environment supports hot reload with Webpack’s Hot Module Replacement.
With Cryostat
First, launch a Cryostat instance:
$ cd /path/to/cryostat
$ bash smoketest.bash
Then, run:
# To configure the URL pointing to Cryostat, set CRYOSTAT_PROXY_URL
# By default, CRYOSTAT_PROXY_URL is set to https://localhost:8443
$ yarn start:dev
# or without TLS
$ CRYOSTAT_PROXY_URL=http://localhost:8080 yarn start:dev
The dev server will proxy API requests to Cryostat and Grafana.
Without Cryostat
To quickly preview changes without launching a Cryostat instance, run:
$ yarn start:dev:preview
In this case, API requests are intercepted and handled by Mirage JS.
TEST
Run the unit tests
$ yarn test
Run the integration tests
$ yarn itest:preview
Refer to TESTING.md for more details about tests.
Run the linter
ESLint is a linter that checks for code quality and style. Configuration can be found in .eslintrc.
The ESLint job runs on every pull request, and will fail if there are any ESLint errors. Warnings will not fail the job.
To fix this, run:
$ yarn eslint:apply
You can also run yarn eslint:check to see if there are any ESLint issues without applying the fixes.
To run a development server with ESLint enabled in hot-reload mode, run:
$ yarn start:dev:lint
With this command, ESLint will run on every file change, and will show ESLint errors/warnings in the terminal.
Run the code formatter
Prettier is a code formatter that makes sure that all code is formatted the same way. Configuration can be found in .prettierrc. There is a prettierignore file that tells Prettier to ignore certain files.
The license header checking job makes sure that all files have the correct license header. The npm package can be found here. The license header can be found in LICENSE. The license-check-and-add configuration can be found in license-config.json.
The Format job runs on every pull request, and will fail if the code is not formatted correctly, or if some licenses have not been added to some files.
To fix this, format the code:
$ yarn format:apply
You can also run yarn format:check to see if there are any formatting issues without applying the formatting.
Inspect the bundle size
$ yarn bundle-profile:analyze
LOCALIZATION
To generate translation entries for texts in the app, run:
$ yarn localize
The extraction tool is i18next-parser, which statically finds and exports translation entries, meaning i18next-parser does not run code and requires explicit values. See more details.
To workaround this, specify static values in i18n.ts file under any top-level directory below src/app. For example, src/app/Settings/i18n.ts.
Refer to LOCALIZATION.md for more details about our localization framework.
CONTRIBUTING
Code consistency
[*].types.ts(x): Define type definitions, including types and enums.[*].utils.ts(x): Define utility functions. These might contain constants (usually tightly coupled with the utility functions).[*].const.ts: Define constants. These constants are purely for UI rendering.[*].context.tsx: Define React contexts. These can be defined in util files.
Code contribution
See CONTRIBUTING.md.