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

* Replace InputStaticFieldsStore with direct @graylog/server-api calls

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>

* Migrate InputStatesStore from Reflux to react-query hooks

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>

* Migrate InputTypesStore from Reflux to react-query hooks

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>

* Migrate PipelineConnectionsStore from Reflux to react-query hooks

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>

* Migrate StreamRulesStore from Reflux to react-query

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>

* Migrate GrokPatternsStore from Reflux to standalone API functions

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>

* Migrate OutputsStore from Reflux to react-query hooks

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>

* Migrate ContentPacksStore from Reflux to API functions

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>

* Migrate LookupTables/Caches/DataAdapters stores from Reflux to direct 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>

* Migrate IndexSetsStore from Reflux to direct API functions and react-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>

* Remove useFetchLookupTables wrapper, use named exports directly

Replace the useFetchLookupTables hook with direct named exports of
fetchPaginatedLookupTables and lookupTablesKeyFn from useLookupTablesAPI.

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

* Fix type error in lookup table list test mock

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

* Fixing linter hints.

* Fix stale imports from earlier Reflux store migrations

- Update InputState type import to hooks/useInputsStates (InputStatesStore was removed in Tier 2)
- Update DataAdapter test mock to use lookupDataAdapter API function (LookupTableDataAdaptersStore was removed in Tier 3)

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

* Waiting for index sets to have loaded before showing modal.

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: dennisoelkers

graylog2-web-interface/src/components/content-packs/ContentPackUploadControls.tsx

@@ -15,16 +15,18 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import React, { useState, useRef } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 
 import UserNotification from 'util/UserNotification';
 import { BootstrapModalForm, Input, Button } from 'components/bootstrap';
-import { ContentPacksActions } from 'stores/content-packs/ContentPacksStore';
+import { createContentPack } from 'hooks/useContentPackMutations';
 import useProductName from 'brand-customization/useProductName';
 
 import style from './ContentPackUploadControls.css';
 
 const ContentPackUploadControls = () => {
   const productName = useProductName();
+  const queryClient = useQueryClient();
   const [isOpen, setIsOpen] = useState(false);
   const uploadInputRef = useRef(null);
 
@@ -44,10 +46,10 @@ const ContentPackUploadControls = () => {
     reader.onload = (evt) => {
       const request = evt.target.result;
 
-      ContentPacksActions.create.triggerPromise(request as string).then(
+      createContentPack(request as string).then(
         () => {
           UserNotification.success('Content pack imported successfully', 'Success!');
-          ContentPacksActions.list();
+          queryClient.invalidateQueries({ queryKey: ['content-packs'] });
         },
         (response) => {
           const message = `Error importing content pack, please ensure it is a valid JSON file. Check your ${productName} server logs for more information.`;

graylog2-web-interface/src/components/event-definitions/event-definition-types/FilterForm.tsx

@@ -26,13 +26,13 @@ import moment from 'moment';
 import { OrderedMap } from 'immutable';
 import type * as Immutable from 'immutable';
 import type { Permission } from 'graylog-web-plugin/plugin';
+import { useQuery } from '@tanstack/react-query';
 
 import { describeExpression } from 'util/CronUtils';
 import { getPathnameWithoutId } from 'util/URLUtils';
 import { isPermitted } from 'util/PermissionsMixin';
 import * as FormsUtils from 'util/FormsUtils';
 import FormWarningsContext from 'contexts/FormWarningsContext';
-import { useStore } from 'stores/connect';
 import Store from 'logic/local-storage/Store';
 import { MultiSelect, TimeUnitInput, SearchFiltersFormControls, TimezoneSelect } from 'components/common';
 import Query from 'views/logic/queries/Query';
@@ -43,7 +43,7 @@ import { Alert, ButtonToolbar, ControlLabel, FormGroup, HelpBlock, Input } from
 import RelativeTime from 'components/common/RelativeTime';
 import type { LookupTableParameterJson } from 'views/logic/parameters/LookupTableParameter';
 import LookupTableParameter from 'views/logic/parameters/LookupTableParameter';
-import { LookupTablesActions, LookupTablesStore } from 'stores/lookup-tables/LookupTablesStore';
+import { fetchAllLookupTables } from 'components/lookup-tables/hooks/api/lookupTablesAPI';
 import validateQuery from 'views/components/searchbar/queryvalidation/validateQuery';
 import generateId from 'logic/generateId';
 import parseSearch from 'views/logic/slices/parseSearch';
@@ -139,7 +139,11 @@ type QueryParametersProps = {
   validation: Props['validation'];
 };
 const QueryParameters = ({ eventDefinition, onChange, userCanViewLookupTables, validation }: QueryParametersProps) => {
-  const { tables = {} } = useStore(LookupTablesStore);
+  const { data: tables = [] } = useQuery({
+    queryKey: ['lookup-tables', 'all'],
+    queryFn: () => fetchAllLookupTables(),
+    enabled: userCanViewLookupTables,
+  });
   const queryParameters = eventDefinition?.config?.query_parameters ?? [];
 
   const onChangeQueryParameters = useCallback(
@@ -161,7 +165,7 @@ const QueryParameters = ({ eventDefinition, onChange, userCanViewLookupTables, v
       queryParameter={LookupTableParameter.fromJSON(queryParam)}
       embryonic={!!(queryParam as LookupTableParameterJsonEmbryonic).embryonic}
       queryParameters={queryParameters}
-      lookupTables={Object.values(tables)}
+      lookupTables={tables}
       onChange={onChangeQueryParameters}
     />
   ));
@@ -253,12 +257,6 @@ const FilterForm = ({ currentUser, eventDefinition, onChange, streams, validatio
     [setFieldWarning],
   );
 
-  useEffect(() => {
-    if (userCanViewLookupTables) {
-      LookupTablesActions.searchPaginated(1, 0, undefined, false);
-    }
-  }, [userCanViewLookupTables]);
-
   useEffect(() => {
     validateQueryString(
       eventDefinition.config.query,

graylog2-web-interface/src/components/extractors/converters_configuration/LookupTableConverterConfiguration.tsx

@@ -20,7 +20,7 @@ import { Link, Select, Spinner } from 'components/common';
 import { Row, Col, Input } from 'components/bootstrap';
 import Routes from 'routing/Routes';
 import { getValueFromInput } from 'util/FormsUtils';
-import { LookupTablesActions } from 'stores/lookup-tables/LookupTablesStore';
+import { fetchAllLookupTables } from 'components/lookup-tables/hooks/api/lookupTablesAPI';
 
 type Props = {
   type: string;
@@ -40,8 +40,8 @@ class LookupTableConverterConfiguration extends React.Component<Props, { lookupT
     this.props.onChange(this.props.type, this._getConverterObject());
 
     // TODO the 10k items is bad. we need a searchable/scrollable long list select box
-    LookupTablesActions.searchPaginated(1, 10000, null).then((result) => {
-      this.setState({ lookupTables: result.lookup_tables });
+    fetchAllLookupTables().then((result) => {
+      this.setState({ lookupTables: result });
     });
   }
 

graylog2-web-interface/src/components/extractors/extractors_configuration/GrokExtractorConfiguration.tsx

@@ -22,8 +22,7 @@ import GrokPatternInput from 'components/grok-patterns/GrokPatternInput';
 import UserNotification from 'util/UserNotification';
 import { getValueFromInput } from 'util/FormsUtils';
 import ToolsStore from 'stores/tools/ToolsStore';
-import { GrokPatternsStore } from 'stores/grok-patterns/GrokPatternsStore';
-import type CancellablePromise from 'logic/rest/CancellablePromise';
+import { loadGrokPatterns } from 'hooks/useGrokPatterns';
 
 import Style from './GrokExtractorConfiguration.css';
 
@@ -58,18 +57,14 @@ class GrokExtractorConfiguration extends React.Component<
   }
 
   componentWillUnmount() {
-    if (this.loadPromise) {
-      this.loadPromise.cancel();
-    }
+    this._unmounted = true;
   }
 
-  private loadPromise: CancellablePromise<void>;
+  private _unmounted = false;
 
   loadData = () => {
-    this.loadPromise = GrokPatternsStore.loadPatterns((patterns) => {
-      if (!this.loadPromise.isCancelled()) {
-        this.loadPromise = undefined;
-
+    loadGrokPatterns((patterns) => {
+      if (!this._unmounted) {
         this.setState({
           patterns: patterns,
         });

graylog2-web-interface/src/components/extractors/extractors_configuration/LookupTableExtractorConfiguration.tsx

@@ -21,7 +21,7 @@ import { Row, Col, Button, Input } from 'components/bootstrap';
 import Routes from 'routing/Routes';
 import UserNotification from 'util/UserNotification';
 import ToolsStore from 'stores/tools/ToolsStore';
-import { LookupTablesActions } from 'stores/lookup-tables/LookupTablesStore';
+import { fetchAllLookupTables } from 'components/lookup-tables/hooks/api/lookupTablesAPI';
 
 type Props = {
   configuration: any;
@@ -51,8 +51,8 @@ class LookupTableExtractorConfiguration extends React.Component<
 
   componentDidMount() {
     // TODO the 10k items is bad. we need a searchable/scrollable long list select box
-    LookupTablesActions.searchPaginated(1, 10000, null).then((result) => {
-      this.setState({ lookupTables: result.lookup_tables });
+    fetchAllLookupTables().then((result) => {
+      this.setState({ lookupTables: result });
     });
   }
 

graylog2-web-interface/src/components/grok-patterns/BulkLoadPatternModal.tsx

@@ -19,7 +19,7 @@ import React from 'react';
 import { Button, Input } from 'components/bootstrap';
 import UserNotification from 'util/UserNotification';
 import BootstrapModalForm from 'components/bootstrap/BootstrapModalForm';
-import { GrokPatternsStore } from 'stores/grok-patterns/GrokPatternsStore';
+import { bulkImportGrokPatterns } from 'hooks/useGrokPatterns';
 import withTelemetry from 'logic/telemetry/withTelemetry';
 import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
 
@@ -67,7 +67,7 @@ class BulkLoadPatternModal extends React.Component<
     reader.onload = (loaded) => {
       const request = loaded.target.result;
 
-      GrokPatternsStore.bulkImport(request, importStrategy).then(() => {
+      bulkImportGrokPatterns(request as string, importStrategy).then(() => {
         UserNotification.success('Grok Patterns imported successfully', 'Success!');
         this._closeModal();
 

graylog2-web-interface/src/components/grok-patterns/GrokPatterns.tsx

@@ -22,10 +22,14 @@ import { Button, ButtonToolbar, Col, Row } from 'components/bootstrap';
 import EditPatternModal from 'components/grok-patterns/EditPatternModal';
 import BulkLoadPatternModal from 'components/grok-patterns/BulkLoadPatternModal';
 import withPaginationQueryParameter from 'components/common/withPaginationQueryParameter';
-import { GrokPatternsStore } from 'stores/grok-patterns/GrokPatternsStore';
+import {
+  searchGrokPatternsPaginated,
+  testGrokPattern,
+  saveGrokPattern,
+  deleteGrokPattern,
+} from 'hooks/useGrokPatterns';
 import withTelemetry from 'logic/telemetry/withTelemetry';
 import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
-import type CancellablePromise from 'logic/rest/CancellablePromise';
 
 import GrokPatternQueryHelper from './GrokPatternQueryHelper';
 
@@ -39,8 +43,8 @@ const GrokPatternsList = styled(DataTable)`
   }
 `;
 
-const testPattern = (pattern, callback, errCallback) => {
-  GrokPatternsStore.testPattern(pattern, callback, errCallback);
+const _testPattern = (pattern, callback, errCallback) => {
+  testGrokPattern(pattern, callback, errCallback);
 };
 
 const _headerCellFormatter = (header) => {
@@ -93,12 +97,10 @@ class GrokPatterns extends React.Component<
   }
 
   componentWillUnmount() {
-    if (this.loadPromise) {
-      this.loadPromise.cancel();
-    }
+    this._unmounted = true;
   }
 
-  private loadPromise: CancellablePromise<unknown>;
+  private _unmounted = false;
 
   loadData = (
     callback?,
@@ -109,15 +111,13 @@ class GrokPatterns extends React.Component<
       pagination: { query },
     } = this.state;
 
-    this.loadPromise = GrokPatternsStore.searchPaginated(page, perPage, query).then(({ patterns, pagination }) => {
+    searchGrokPatternsPaginated(page, perPage, query).then((result) => {
       if (callback) {
         callback();
       }
 
-      if (!this.loadPromise?.isCancelled()) {
-        this.loadPromise = undefined;
-
-        this.setState({ patterns, pagination });
+      if (!this._unmounted && result) {
+        this.setState({ patterns: result.patterns, pagination: result.pagination });
       }
     });
   };
@@ -130,7 +130,7 @@ class GrokPatterns extends React.Component<
   };
 
   savePattern = (pattern, callback) => {
-    GrokPatternsStore.savePattern(pattern, () => {
+    saveGrokPattern(pattern, () => {
       callback();
       this.loadData();
     });
@@ -161,7 +161,7 @@ class GrokPatterns extends React.Component<
         `Really delete the grok pattern ${pattern.name}?\nIt will be removed from the system and unavailable for any extractor. If it is still in use by extractors those will fail to work.`,
       )
     ) {
-      GrokPatternsStore.deletePattern(pattern, () => {
+      deleteGrokPattern(pattern, () => {
         this.props.sendTelemetry(TELEMETRY_EVENT_TYPE.GROK_PATTERN.DELETED, {
           app_pathname: 'grokpatterns',
           app_section: 'grokpatterns',
@@ -187,7 +187,7 @@ class GrokPatterns extends React.Component<
                 id={pattern.id}
                 name={pattern.name}
                 pattern={pattern.pattern}
-                testPattern={testPattern}
+                testPattern={_testPattern}
                 patterns={patterns}
                 create={false}
                 reload={this.loadData}
@@ -228,7 +228,7 @@ class GrokPatterns extends React.Component<
                   pattern=""
                   patterns={patterns}
                   create
-                  testPattern={testPattern}
+                  testPattern={_testPattern}
                   reload={this.loadData}
                   savePattern={this.savePattern}
                   validPatternName={this.validPatternName}

graylog2-web-interface/src/components/indices/CreateIndexSet.tsx

@@ -20,7 +20,7 @@ import AppConfig from 'util/AppConfig';
 import { Spinner } from 'components/common';
 import { IndexSetConfigurationForm } from 'components/indices';
 import Routes from 'routing/Routes';
-import { IndexSetsActions } from 'stores/indices/IndexSetsStore';
+import { createIndexSet } from 'stores/indices/IndexSetsStore';
 import type { IndexSet } from 'stores/indices/IndexSetsStore';
 import SelectIndexSetTemplateModal from 'components/indices/IndexSetTemplates/SelectIndexSetTemplateModal';
 import { adjustFormat } from 'util/DateTime';
@@ -53,7 +53,7 @@ const CreateIndexSet = ({ showSelectTemplateModal, setShowSelectTemplateModal }:
 
     copy.creation_date = adjustFormat(new Date(), 'internal');
 
-    return IndexSetsActions.create(copy).then(() => {
+    return createIndexSet(copy).then(() => {
       history.push(Routes.SYSTEM.INDICES.LIST);
     });
   };

graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfilesList.tsx

@@ -24,8 +24,7 @@ import type { IndexSetFieldTypeProfile } from 'components/indices/IndexSetFieldT
 import { fetchIndexSetFieldTypeProfiles, keyFn } from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles';
 import useCustomColumnRenderers from 'components/indices/IndexSetFieldTypeProfiles/helpers/useCustomColumnRenderers';
 import profileActions from 'components/indices/IndexSetFieldTypeProfiles/helpers/profileActions';
-import { useStore } from 'stores/connect';
-import { IndexSetsStore } from 'stores/indices/IndexSetsStore';
+import useIndexSetsList from 'components/indices/hooks/useIndexSetsList';
 import ExpandedCustomFieldTypes from 'components/indices/IndexSetFieldTypeProfiles/ExpandedCustomFieldTypes';
 
 export const DEFAULT_LAYOUT = {
@@ -46,7 +45,9 @@ const expandedSections = {
 };
 
 const ProfilesList = () => {
-  const { indexSets } = useStore(IndexSetsStore);
+  const {
+    data: { indexSets },
+  } = useIndexSetsList(false);
   const normalizedIndexSetsTitles = useMemo(() => mapValues(keyBy(indexSets, 'id'), 'title'), [indexSets]);
   const customColumnRenderers = useCustomColumnRenderers(normalizedIndexSetsTitles);
 

graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetCustomFieldTypeRemoveModal.test.tsx

@@ -18,7 +18,6 @@ import * as React from 'react';
 import { render, screen } from 'wrappedTestingLibrary';
 import userEvent from '@testing-library/user-event';
 
-import { MockStore } from 'helpers/mocking';
 import asMock from 'helpers/mocking/AsMock';
 import TestStoreProvider from 'views/test/TestStoreProvider';
 import useViewsPlugin from 'views/test/testViewsPlugin';
@@ -35,17 +34,12 @@ const renderIndexSetCustomFieldTypeRemoveModal = () =>
     </TestStoreProvider>,
   );
 
-jest.mock('stores/indices/IndexSetsStore', () => ({
-  IndexSetsActions: {
-    list: jest.fn(),
-  },
-  IndexSetsStore: MockStore([
-    'getInitialState',
-    () => ({
-      indexSets: [{ id: '111', title: 'index set title' }],
-    }),
-  ]),
-}));
+jest.mock('components/indices/hooks/useIndexSetsList', () => jest.fn(() => ({
+  data: { indexSets: [{ id: '111', title: 'index set title' }], indexSetsCount: 1, indexSetStats: null },
+  refetch: jest.fn(),
+  isSuccess: true,
+  isInitialLoading: false,
+})));
 
 jest.mock('components/indices/IndexSetFieldTypes/hooks/useRemoveCustomFieldTypeMutation', () => jest.fn());
 jest.mock('components/common/EntityDataTable/hooks/useSelectedEntities');