Files
graylog2-server/graylog2-web-interface
Dennis Oelkers 90a797f8ff Bulk-fixing linter hints. (#25171)
* 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>
2026-03-11 14:25:11 +01:00
..
2026-01-29 10:11:44 +01:00
2024-10-15 08:49:36 +02:00
2026-03-11 14:25:11 +01:00

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 start to build the project for development and start the development server. You can exclude any Graylog frontend plugins from the build by running disable_plugins=true npm start instead
  • 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 is 127.0.0.1
  • Use the --port=<port> option to change the default port number the development server uses. The default value is 8080. 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.

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:

  1. Change to docs folder: cd docs
  2. Run yarn install
  3. Run yarn run docs:server
  4. 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

  1. Update a single dependency

    • Run yarn upgrade <package>@<version>
    • Commit any changes in both package.json and yarn.lock files
    • Do any changes required to adapt the code to the upgraded modules
  2. 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 upgrade if you really want to upgrade all packages
    • After doing the upgrade, remember to commit both the package.json and yarn.lock files