* Fix no-restricted-imports: replace lodash with native alternatives and fix import paths
Replace lodash/get with optional chaining, lodash/defaultTo with nullish
coalescing (??), lodash/max with Math.max, and swap react-router-dom Link
imports to use the project's router wrapper. Add eslint-disable for files
that are the wrapper implementations themselves.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Fix jsx-a11y/control-has-associated-label: add aria-label to controls
Add descriptive aria-label attributes to buttons, table cells, and other
interactive controls that were missing accessible labels.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Fix react/jsx-key: add missing key props to elements in iterators
Add stable key props to JSX elements inside .map() callbacks using
item IDs and unique property names as keys.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Fix no-param-reassign: avoid mutating function parameters
Replace reduce accumulator mutations with Object.fromEntries or spread
syntax. Use eslint-disable for browser API patterns (beforeunload).
Create new objects instead of mutating request/response parameters.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Fix misc TypeScript/ESLint rules: require-imports, unsafe Function type, nested ternaries, triple-slash refs, unused props/vars
- Add eslint-disable for require() in .d.ts and jest.isolateModules
- Add eslint-disable for Function type in reflux .d.ts, remove redundant
Function annotations in tests
- Refactor nested ternaries in SortUtils to if/else
- Convert triple-slash references to side-effect imports
- Fix unused prop type declarations in Timestamp and Section
- Rename catch variable e to _error in useIsLocalNode
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Fix testing-library/no-node-access: replace DOM traversal with TL queries
Replace .querySelector(), .firstChild, and .getElementsByClassName() with
Testing Library queries (getByRole, getByText, findByTitle, within) in
test files. Add eslint-disable where DOM access is unavoidable (Leaflet
map containers, custom text matchers).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Fix no-restricted-properties and prefer-user-event in tests
Replace fireEvent.submit with userEvent.click on submit buttons and
fireEvent.change with userEvent.selectOptions in ContentPackEditParameter
tests. Add submit button to ContentPackEditParameter component to enable
the userEvent.click pattern. Use eslint-disable for fireEvent.change in
InputSetupWizard test where userEvent.type causes waitFor timeouts.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Fix jest/expect-expect and jest/no-done-callback in tests
Add eslint-disable for it.each tests where assertions are in callback
functions that ESLint cannot statically detect. Add explicit assertion
to PivotHandler type-check test. Convert GlobalThroughputStore tests
from done-callback pattern to async/await with Promises.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Fix Link import path after router.tsx was removed in d4b1262
Update Button.tsx and MenuItem.tsx to import Link from
components/common/Link (the new dedicated wrapper) instead of the
deleted components/common/router.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Type reflux StoreDefinition generically and remove eslint-disable for Function type
Make StoreDefinition<T> generic so init is typed as () => void and
getInitialState as () => T. Make fields optional in 4 store state types
(ContentPacksStore, IndicesConfigurationStore, InputTypesStore,
CollectorsStore) whose getInitialState returns a subset of the full state.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Revert ContentPackEditParameter component changes and fix ESLint hints in test only
Replace fireEvent.change with userEvent.selectOptions and extract a
submitForm helper with a single eslint-disable to avoid duplicating
the disable comment across all fireEvent.submit call sites. The
component has no submit button and jsdom doesn't support implicit
form submission, so fireEvent.submit remains necessary.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Use part string as React key instead of array index in RuleBlockDisplay
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Running `prettier`.
* Address PR #25171 review feedback
- Revert aria-label additions on td/th elements; increase
jsx-a11y/control-has-associated-label depth to 3 instead
- Use screen.findByRole in Autocomplete test instead of waitFor+getByRole
- Add default value for optional field prop in Timestamp component
- Rename test helpers to expectIsDeepEqual/expectIsNumericString to
satisfy jest/expect-expect without eslint-disable
- Replace require() with jest.isolateModulesAsync + dynamic import()
in DocsHelper tests
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Remove unused findValidationState from TabKeywordTimeRange test
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Fix control-has-associated-label lint errors and SelectedGrantee test
Ignore td/th elements in control-has-associated-label rule (false
positives), add aria-label to backlog checkbox, and rename
checkCurrentState to expectCurrentState to remove eslint-disable.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* Replace type casts with proper types in UseCreateViewForEvent
Type function parameters for getSummaryAggregation and WidgetsGenerator
so reduce() accepts generic type parameters, removing all `as` casts.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Graylog Web Interface
Requirements
Note: NPM v5 changed completely the way it builds local modules, breaking the Graylog web interface build. Please use Yarn instead of NPM v5.
Development Setup
- Install the requirements listed above
- Run
yarn install - Run
yarn startto build the project for development and start the development server. You can exclude any Graylog frontend plugins from the build by runningdisable_plugins=true npm startinstead - Open http://localhost:8080 in your browser to access the Graylog web interface
The yarn start (or disable_plugins=true yarn start) command will run an Express web server which is configured to do a full page reload in your browser every time that you save a file. This ensures that you will always use the latest version of your code.
Run development server in a different host and port
You can start the development server in any other host and port that you like:
- Use the
--host=<hostname>option to change the default host the development server uses. The default host is127.0.0.1 - Use the
--port=<port>option to change the default port number the development server uses. The default value is8080. The server will pick a random port if the port you try to use is already in use
E.g. yarn start --host=0.0.0.0 --port=8000 will start the development server in all available network interfaces using the port 8000.
Contributing
Please have a look at the CONTRIBUTING.md for an overview of our conventions, best practices and tips.
Frontend documentation and component gallery
There's an online version of the frontend documentation and component gallery at:
https://graylog2.github.io/frontend-documentation/
The online version is automatically deployed and reflects the current state of the master branch in this repository.
Run documentation locally
You may also run the documentation locally to contribute to it or see a different version than the current master:
- Change to
docsfolder:cd docs - Run
yarn install - Run
yarn run docs:server - Go to http://localhost:6060 on your favourite browser to see the local documentation
Configure your editor
We mainly develop using IntelliJ or WebStorm. If you also decide to use them to work in Graylog, enable React JSX as Javascript language version to support the JSX language extension. This setting was called JSX harmony before, and it is available in one or the other form since IntelliJ 14 and WebStorm 9.
Update Javascript dependencies
-
Update a single dependency
- Run
yarn upgrade <package>@<version> - Commit any changes in both
package.jsonandyarn.lockfiles - Do any changes required to adapt the code to the upgraded modules
- Run
-
Update many dependencies
- It may be dangerous updating many dependencies at the same time, so be sure you checked the upgrade notes of all modules before getting started. Once you are ready to upgrade the modules, Yarn provides a few options to do it:
- You can pass all packages you want to upgrade to Yarn:
yarn upgrade <package1> <package2>... - Yarn also supports upgrading packages matching a pattern, so you can execute
yarn upgrade --pattern <pattern> - You could execute
yarn upgradeif you really want to upgrade all packages
- You can pass all packages you want to upgrade to Yarn:
- After doing the upgrade, remember to commit both the
package.jsonandyarn.lockfiles
- It may be dangerous updating many dependencies at the same time, so be sure you checked the upgrade notes of all modules before getting started. Once you are ready to upgrade the modules, Yarn provides a few options to do it: