Files
graylog2-server/graylog2-web-interface
Jan Heise a823e50067 Adding slicing capability for the open source Events/Alerts table (#24958)
* adding slicing capability for the open source Events/Alerts table

* adding slicing capability

* fix mapping

* Do not provide sort info from slicing section to backend.

* Cleanup parameters provided to backend when fetching slices.

* Move slices renderers outside of component.

* Make usage of `parseFilters` easier to read.

* Cleanup

* Consider slices when fetching data for entity table.

* Show empty slices for event priority and type column.

* Update tests

* result cleanup, add mapping function

* remove obsolete class

* Fixing error when fetching security events.

* Enable slice by action for columns in paginated entity table only when a slices fetch function has been provided.

* fix default parameters

* Cleanup naming

* Use background color to highlight active slice, since font weight does not always apply to custom slices renderer.

* Disable filters which are conflicting with active slice.

* Update `EntityDataTable` test.

* adding tests

* Add full-backend integration tests for events slices endpoint

Adds EventsResourceSlicesIT with ES fixtures covering all slice columns
(priority, alert, event_definition_id, event_definition_type, key) and
filter combinations for the POST /events/slices endpoint.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fixing test, adding waiting method for index

* adding changelog

* Disable linter hint

* adding convenience method for MongoDB sanity checks after fixture imports

* reverting include_all to false as this is the use case we're going for now

* Use stati width for slices section.

* Do not use text overflow ellipses for count badge.

* Improve naming

* Add close button for slice section.

* Add max-height for slices list

* Make sure to not remove filter when slicing by column.

* Cleanup query param handling

* Enable batching for updating query params, to fix edge cases.

* Display slices badges in readable format.

* Fix type casting

* improved changelog

* Fixing tests by adding `DefaultQueryParamProvider` where require. In a follow-up PR we will render `DefaultQueryParamProvider` for tests by default.

* Fixing linter hint

* Format code

* Simplify slicing test

---------

Co-authored-by: Linus Pahl <linus.pahl@graylog.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-27 10:51:12 +01:00
..
2026-01-29 10:11:44 +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