Screen to allow management of streamed audit event filtering

Release notes

Problem to solve

Full context in overarching epic

Users currently can filter streaming audit events using the API, but this is time-consuming and error prone. It also requires technical skills that not everyone has.

Proposal

Provide a graphical experience to allow users to filter the audit events that are sent to a given streaming destination.

  • This should build on top of the MVC APIs that were created

Open question: Will be able to have the list of all events for a user to select form or will we require them to upload a text list of events?

A user should be able to:

  • Select an event to include in the data sent to the destination
  • Deselect an event to include in the data sent to the destination

Optionally:

  • Convenience buttons should be available for "select all"/"deselect all"

Note: Grouping of events will be a large task and is broken out as part of this issue.

Designs

MVC

Note: We suggest implementing the design using GlFormCheckboxTree. See #344846 (comment 1152729150).

image

Accordion

Note: The following designs include follow-up features like grouped options and a search.

List (Filter badge) Collasped filters Extended filters
image image image
Follow-up design once the new widget component is ready
Follow-up

Once available, we can repalce the Accordion with the new Widget component. This can be done in a follow-up.

Collasped filters Extended filters
image image

Note: using a dropdown to display the options was considered but not chosen, see &7059 (comment 1068827881).

Intended users

Implementation plan

frontend 3️⃣

  1. Get the list of eventTypeFilters from the updated GraphQl query #344845 (closed).
  2. Add a GlAccordion with the title Show filters that's collapsed by default to stream_destination_editor's form.
  3. Create a new stream_filters component in ee/app/assets/javascripts/audit_events/components/stream:
    • Note: It should accept the list of eventTypeFilters
    • Note: It should emit a change event with the updated eventTypeFilters.
  4. Inside the new component render a GlFormCheckboxTree where the options are the eventTypeFilters.
    • Note: The tree should have the enabled options pre-selected.
    • Note: For the first iteration the tree should only be 1 level deep, ie no branches / grouped options.
    • Note: Set selectAllLabel & unselectAllLabel to translated strings, else it will always render in english.
  5. Render the new stream_filters component in stream_destination_editor.
    • Note: Pass the eventTypeFilters from the query to the component.
    • Note: Listen for change events.
  6. Update the mutation in stream_destination_editor to include the eventTypeFilters which should be the picked options.
  7. Add specs for the new component and create / update related specs in stream_destination_editor.
  8. Update the audit event streaming documentation if required.

Feature Usage Metrics

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.

Edited by Jiaan Louw