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

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');