Feat/14047 sigma rules to event definition wizard UI

[zeeklop]

Implemented the UI to upload/import sigma rules and create an event definition directly.

closes: Graylog2/graylog-plugin-enterprise#14047

/nocl

Description

• Created a plugin to be able to access Sigma import functionality from core
• Updated create event definition workflow to be able to re-use some of the common configuration steps
• Create new Import Sigma workflows using Formik to take advantage of the form context and validations
• Added a UI to the two new Sigma Bulk EPs to create event definitions directly without storing the sigma rule

Motivation and Context

Improve our overall UX

How Has This Been Tested?

Unit test

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have requested a documentation update.
• I have added tests to cover my changes.

For more guidance see our Pull Request Guide in Confluence.

[Copilot]

Pull request overview

Adds Sigma rule import entry points into the Event Definition creation UX, while refactoring the existing Event Definition wizard to share common steps and leverage new data-fetching hooks.

Changes:

• Introduces new Sigma import routes and integrates Sigma import options into the Event Definitions list header actions.
• Refactors Event Definition wizard step construction into a reusable “common steps” hook and simplifies the form/wizard component API.
• Adds React Query hooks to load entity types, cluster config, and event notifications, plus small UI improvements (submit-state handling, hidden steps support).

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
graylog2-web-interface/src/stores/event-notifications/EventNotificationsStore.ts	Makes listAll() return its promise to support React Query usage.
graylog2-web-interface/src/routing/Routes.ts	Adds Sigma import route constants under alerts definitions.
graylog2-web-interface/src/routing/AppRouter.tsx	Wires Sigma import routes to the event definition creation page.
graylog2-web-interface/src/pages/EventDefinitionsPage.tsx	Adds Sigma import options next to the “Create Event Definition” button (via plugin export).
graylog2-web-interface/src/pages/CreateEventDefinitionPage.tsx	Minor formatting/cleanup while continuing to drive wizard via step query param.
graylog2-web-interface/src/components/event-definitions/types.ts	Extends plugin export typings for Sigma import/upload/options components.
graylog2-web-interface/src/components/event-definitions/hooks/useEventDefinitions.ts	Adds React Query hooks for entity types, cluster config, and event notifications.
graylog2-web-interface/src/components/event-definitions/event-definitions-types.ts	Extends wizard controls props (submit disabled/submitting flags).
graylog2-web-interface/src/components/event-definitions/event-definition-form/useEventDefinitionCommonSteps.tsx	New shared step builder + new shared initial event definition shape.
graylog2-web-interface/src/components/event-definitions/event-definition-form/EventDefinitionFormControls.tsx	Enhances submit button UX (disabled/submitting + spinner/text).
graylog2-web-interface/src/components/event-definitions/event-definition-form/EventDefinitionFormContainer.tsx	Moves step assembly into container and adopts new React Query hooks.
graylog2-web-interface/src/components/event-definitions/event-definition-form/EventDefinitionForm.tsx	Accepts externally-built steps and manages telemetry for wizard navigation.
graylog2-web-interface/src/components/common/Wizard.tsx	Adds optional hidden property to steps.
graylog2-web-interface/src/components/common/CreateButton.tsx	Refactors permission wrapping logic for create buttons.

Comments suppressed due to low confidence (2)

graylog2-web-interface/src/components/common/CreateButton.tsx:76

• PermissionWrapper is rendered without passing the entity creator’s required permissions, so the create button will be visible/clickable even when entityCreator.permissions is set. This effectively bypasses permission gating for entity creation.

Pass permissions={entityCreator.permissions} to PermissionWrapper (and consider keeping the previous behavior of conditionally wrapping based on entityCreator.permissions).

  return (
    <PermissionWrapper>
      <LinkContainer to={entityCreator.path}>
        <Button bsSize="md" bsStyle="primary" onClick={_onClick} disabled={disabled}>
          {entityCreator.title}
        </Button>
      </LinkContainer>
    </PermissionWrapper>

graylog2-web-interface/src/components/event-definitions/event-definition-form/EventDefinitionForm.tsx:103

• Step click telemetry is selected by indexing into STEP_TELEMETRY_KEYS using the current steps array index. Because the wizard steps are dynamically filtered (e.g., fields can be hidden, and the Share step is present only on create), this index-based lookup can map to the wrong telemetry event or to undefined (e.g., clicking Summary when Share is present). That results in incorrect telemetry and can trigger runtime warnings/errors in telemetry capture.

Use a key-based mapping (stepKey -> telemetry event type) and only call sendTelemetry when a mapping exists.

  const currentStepKeys = steps.map((step) => step.key);
  const activeStepIndex = currentStepKeys.indexOf(activeStep);

  const handleStepChange = (nextStep: string) => {
    sendTelemetry(STEP_TELEMETRY_KEYS[currentStepKeys.indexOf(nextStep)], {
      app_pathname: getPathnameWithoutId(pathname),
      app_section: action === 'create' ? 'new-event-definition' : 'edit-event-definition',
      app_action_value: 'event-definition-step',
      current_step: steps[activeStepIndex]?.title,
    });

    onChangeStep(nextStep);
  };

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.