Skip to content

Refactor: Migrate Tier 3 Reflux stores to react-query and direct API calls#25320

Open
dennisoelkers wants to merge 17 commits intomasterfrom
refactor/migrate-reflux-stores-tier-3
Open

Refactor: Migrate Tier 3 Reflux stores to react-query and direct API calls#25320
dennisoelkers wants to merge 17 commits intomasterfrom
refactor/migrate-reflux-stores-tier-3

Conversation

@dennisoelkers
Copy link
Member

@dennisoelkers dennisoelkers commented Mar 13, 2026 •
edited
Loading

Description

Motivation and Context

  • Migrate 13 Reflux stores to modern patterns: react-query for API caching, useState/direct API functions for simpler cases
  • Remove ~3,500 lines of Reflux store boilerplate across the codebase
  • IndicesStore (#31) deferred to Tier 7 due to shared connect() HOC dependency with IndexerOverviewStore in IndexSetPage

Stores migrated

# Store Replacement Consumers updated
19 InputStaticFieldsStore Direct @graylog/server-api calls 3
20 InputTypesStore react-query hook ~7
21 InputStatesStore react-query hook ~4
22 PipelineConnectionsStore react-query hooks ~6
23 StreamRulesStore useStreamRuleMutations hook ~5
24 GrokPatternsStore Standalone API functions ~3
25 OutputsStore useOutputMutations hook ~4
26 ContentPacksStore Standalone API functions ~4
27 LookupTablesStore Direct REST via lookupTablesAPI.ts ~4
28 LookupTableCachesStore Direct REST via lookupTablesAPI.ts 0 (internal)
29 LookupTableDataAdaptersStore Direct REST via lookupTablesAPI.ts 1
30 IndexSetsStore API functions + existing useIndexSetsList/useSingleIndexSet hooks ~20

/prd Graylog2/graylog-plugin-enterprise#13565
/nocl Internal refactoring

How Has This Been Tested?

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 read the CONTRIBUTING document.
  • I have added tests to cover my changes.

dennisoelkers and others added 10 commits March 19, 2026 08:42
@dennisoelkers @claude
Replace InputStaticFieldsStore with direct @graylog/server-api calls
463e8a4 
Use StaticFields.create/remove from @graylog/server-api instead of
the Reflux store. Remove cross-store dependency from InputsStore
since react-query cache invalidation already handles input list refresh.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dennisoelkers @claude
Migrate InputStatesStore from Reflux to react-query hooks
2aaf9ac 
Replace all usages of the Reflux InputStatesStore with the existing
useInputsStates hook and useInputStateMutations hook. Components now
use SystemInputStates from @graylog/server-api directly where hooks
cannot be used (StartInputStep).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dennisoelkers @claude
Migrate InputTypesStore from Reflux to react-query hooks
3e5d8ac 
Replace all usages of InputTypesStore with existing hooks:
- useInputTypesDescriptions for input type descriptions
- useInputTypes (hooks/) for input type summaries
- fetchInputType for fetching a single input type definition

Move InputDescription type to hooks/useInputType.ts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dennisoelkers @claude
Migrate PipelineConnectionsStore from Reflux to react-query hooks
5654d30 
Create usePipelineConnections hook for fetching connections and
usePipelineConnectionMutation for updating pipeline-to-stream
connections. Uses PipelinesConnections from @graylog/server-api.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dennisoelkers @claude
Migrate StreamRulesStore from Reflux to react-query
1138c99 
Replace StreamRulesStore with useStreamRuleMutations hook for create/update/remove
operations. Update useStreamRuleTypes to use generated API client directly.
Remove onChange/unregister callbacks in favor of query invalidation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dennisoelkers @claude
Migrate GrokPatternsStore from Reflux to standalone API functions
2f2d12f 
Replace GrokPatternsStore with exported functions in hooks/useGrokPatterns.ts
that call the generated SystemGrok API client. Update all three consumers
(GrokPatterns, BulkLoadPatternModal, GrokExtractorConfiguration) and replace
CancellablePromise patterns with unmounted flags.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dennisoelkers @claude
Migrate OutputsStore from Reflux to react-query hooks
d4c3694 
Create useOutputMutations hook for save/update/remove operations using
SystemOutputs API client. Move Output type to hooks/useOutputs. Update
OutputsComponent to use useOutputs/useStreamOutputs hooks instead of
store callbacks. Update OutputsList and AddOutputButton to use mutations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dennisoelkers @claude
Migrate ContentPacksStore from Reflux to API functions
0550bd1 
Replace ContentPacksActions with direct calls to SystemContentPacks API
client. Replace useStore(ContentPacksStore) in EditContentPackPage with
useContentPackRevisions hook. Use queryClient.invalidateQueries for
cache refresh after upload.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dennisoelkers @claude
Migrate LookupTables/Caches/DataAdapters stores from Reflux to direct…
a6600ac 
… API calls

Replace LookupTablesStore, LookupTableCachesStore, and LookupTableDataAdaptersStore
with direct REST calls via lookupTablesAPI.ts. Consumers now use react-query or
call API functions directly instead of going through Reflux stores.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dennisoelkers @claude
Migrate IndexSetsStore from Reflux to direct API functions and react-…
82c46d3 
…query hooks

Replace the Reflux store with standalone API functions (fetchIndexSets,
createIndexSet, updateIndexSet, deleteIndexSet, setDefaultIndexSet, etc.)
and leverage existing useIndexSetsList/useSingleIndexSet react-query hooks.
Update all 20 consumer files including tests.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dennisoelkers dennisoelkers force-pushed the refactor/migrate-reflux-stores-tier-3 branch from 472787e to 82c46d3 Compare March 19, 2026 07:42
@dennisoelkers dennisoelkers marked this pull request as ready for review March 19, 2026 07:43
@dennisoelkers dennisoelkers added the e2e-tests Run PR build with e2e tests. label Mar 19, 2026
@dennisoelkers dennisoelkers requested a review from a team March 19, 2026 07:43
linuspahl
linuspahl reviewed Mar 20, 2026
View reviewed changes
Copy link
Contributor

@linuspahl linuspahl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How the code has been refactored and the concept behind it seems very reasonable, but I am having a hard time testing every related page manually. We are just changing too many files in one PR. I started with content packs, lookup tables and pipelines.

@dennisoelkers
Copy link
Member Author

dennisoelkers commented Mar 20, 2026

How the code has been refactored and the concept behind it seems very reasonable, but I am having a hard time testing every related page manually. We are just changing too many files in one PR. I started with content packs, lookup tables and pipelines.

Agreed. I think we need to do a best effort PR review and utilize e2e-tests, testing days and manual testing before the release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@linuspahl linuspahl linuspahl left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

e2e-tests Run PR build with e2e tests.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@dennisoelkers @linuspahl