From 914ce4d29ef2bfed4f78143ae59a05470d6a7579 Mon Sep 17 00:00:00 2001 From: Dennis Oelkers Date: Wed, 15 Jan 2025 10:32:17 +0100 Subject: [PATCH] Replacing use of store with `useQuery` for content packs. --- .../hooks/useContentPackInstallations.ts | 9 +++ .../hooks/useContentPackRevisions.ts | 24 +++++++ .../src/pages/ShowContentPackPage.tsx | 66 +++++++++---------- 3 files changed, 66 insertions(+), 33 deletions(-) create mode 100644 graylog2-web-interface/src/components/content-packs/hooks/useContentPackInstallations.ts create mode 100644 graylog2-web-interface/src/components/content-packs/hooks/useContentPackRevisions.ts diff --git a/graylog2-web-interface/src/components/content-packs/hooks/useContentPackInstallations.ts b/graylog2-web-interface/src/components/content-packs/hooks/useContentPackInstallations.ts new file mode 100644 index 000000000000..5f9868cf7b80 --- /dev/null +++ b/graylog2-web-interface/src/components/content-packs/hooks/useContentPackInstallations.ts @@ -0,0 +1,9 @@ +import { useQuery } from '@tanstack/react-query'; + +import { SystemContentPacks } from '@graylog/server-api'; + +const useContentPackInstallations = (id: string) => useQuery( + ['content-packs', 'installations', id], + () => SystemContentPacks.listContentPackInstallationsById(id), +); +export default useContentPackInstallations; diff --git a/graylog2-web-interface/src/components/content-packs/hooks/useContentPackRevisions.ts b/graylog2-web-interface/src/components/content-packs/hooks/useContentPackRevisions.ts new file mode 100644 index 000000000000..7a1dc0dee13b --- /dev/null +++ b/graylog2-web-interface/src/components/content-packs/hooks/useContentPackRevisions.ts @@ -0,0 +1,24 @@ +import { useQuery } from '@tanstack/react-query'; + +import { SystemContentPacks } from '@graylog/server-api'; + +import ContentPackRevisions from 'logic/content-packs/ContentPackRevisions'; +import { onError } from 'util/conditional/onError'; + +const fetchContentPackRevisions = async (id: string) => { + const response = await SystemContentPacks.listContentPackRevisions(id); + const contentPackRevision = new ContentPackRevisions(response.content_pack_revisions); + const constraints = response.constraints_result; + + return { + contentPackRevisions: contentPackRevision, + selectedVersion: contentPackRevision.latestRevision, + constraints: constraints, + }; +}; + +const useContentPackRevisions = (id: string, onFetchError: (e: Error) => void) => useQuery( + ['content-packs', 'revisions', id], + () => onError(fetchContentPackRevisions(id), onFetchError), +); +export default useContentPackRevisions; diff --git a/graylog2-web-interface/src/pages/ShowContentPackPage.tsx b/graylog2-web-interface/src/pages/ShowContentPackPage.tsx index 399d4f429e48..4220d6ad369c 100644 --- a/graylog2-web-interface/src/pages/ShowContentPackPage.tsx +++ b/graylog2-web-interface/src/pages/ShowContentPackPage.tsx @@ -15,7 +15,7 @@ * . */ import * as React from 'react'; -import { useEffect, useState } from 'react'; +import { useCallback, useState } from 'react'; import { LinkContainer } from 'components/common/router'; import { Row, Col, Button, ButtonToolbar, BootstrapModalConfirm } from 'components/bootstrap'; @@ -27,39 +27,45 @@ import ContentPackDetails from 'components/content-packs/ContentPackDetails'; import ContentPackVersions from 'components/content-packs/ContentPackVersions'; import ContentPackInstallations from 'components/content-packs/ContentPackInstallations'; import ContentPackInstallEntityList from 'components/content-packs/ContentPackInstallEntityList'; -import { ContentPacksActions, ContentPacksStore } from 'stores/content-packs/ContentPacksStore'; -import { useStore } from 'stores/connect'; +import { ContentPacksActions } from 'stores/content-packs/ContentPacksStore'; import useHistory from 'routing/useHistory'; import useParams from 'routing/useParams'; +import useContentPackRevisions from 'components/content-packs/hooks/useContentPackRevisions'; +import useContentPackInstallations from 'components/content-packs/hooks/useContentPackInstallations'; +import type FetchError from 'logic/errors/FetchError'; import ShowContentPackStyle from './ShowContentPackPage.css'; const ShowContentPackPage = () => { - const { contentPackRevisions, installations, constraints, selectedVersion: currentVersion } = useStore(ContentPacksStore); const history = useHistory(); const params = useParams<{ contentPackId: string }>(); + const onFetchError = useCallback((error: FetchError) => { + if (error.status === 404) { + UserNotification.error( + `Cannot find Content Pack with the id ${params.contentPackId} and may have been deleted.`, + ); + } else { + UserNotification.error('An internal server error occurred. Please check your logfiles for more information'); + } + + history.push(Routes.SYSTEM.CONTENTPACKS.LIST); + }, [history, params?.contentPackId]); const [showModal, setShowModal] = useState(false); const [selectedVersion, setSelectedVersion] = useState(undefined); const [uninstallEntities, setUninstallEntities] = useState(undefined); const [uninstallContentPackId, setUninstallContentPackId] = useState(undefined); const [uninstallInstallId, setUninstallInstallId] = useState(undefined); - - useEffect(() => { - ContentPacksActions.get(params.contentPackId).catch((error) => { - if (error.status === 404) { - UserNotification.error( - `Cannot find Content Pack with the id ${params.contentPackId} and may have been deleted.`, - ); - } else { - UserNotification.error('An internal server error occurred. Please check your logfiles for more information'); - } - - history.push(Routes.SYSTEM.CONTENTPACKS.LIST); - }); - - ContentPacksActions.installList(params.contentPackId); - }, [history, params?.contentPackId]); + const { + data: contentPack, + isInitialLoading: isLoadingContentPack, + refetch: refetchContentPack, + } = useContentPackRevisions(params?.contentPackId, onFetchError); + const { + data: contentPackInstallations, + isInitialLoading: isLoadingInstallations, + refetch: refetchInstallations, + } = useContentPackInstallations(params?.contentPackId); const _onVersionChanged = (newVersion) => { setSelectedVersion(newVersion); @@ -71,13 +77,7 @@ const ShowContentPackPage = () => { ContentPacksActions.deleteRev(contentPackId, revision).then(() => { UserNotification.success('Content pack revision deleted successfully.', 'Success'); - ContentPacksActions.get(contentPackId).catch((error) => { - if (error.status !== 404) { - UserNotification.error('An internal server error occurred. Please check your logfiles for more information'); - } - - history.push(Routes.SYSTEM.CONTENTPACKS.LIST); - }); + refetchContentPack(); }, (error) => { let errMessage = error.message; @@ -108,11 +108,9 @@ const ShowContentPackPage = () => { }; const _uninstallContentPackRev = () => { - const contentPackId = uninstallContentPackId; - ContentPacksActions.uninstall(uninstallContentPackId, uninstallInstallId).then(() => { UserNotification.success('Content Pack uninstalled successfully.', 'Success'); - ContentPacksActions.installList(contentPackId); + refetchInstallations(); _clearUninstall(); }, () => { UserNotification.error('Uninstall content pack failed, please check your logs for more information.', 'Error'); @@ -122,17 +120,20 @@ const ShowContentPackPage = () => { const _installContentPack = (contentPackId: string, contentPackRev: string, parameters) => { ContentPacksActions.install(contentPackId, contentPackRev, parameters).then(() => { UserNotification.success('Content Pack installed successfully.', 'Success'); - ContentPacksActions.installList(contentPackId); + refetchInstallations(); }, (error) => { UserNotification.error(`Installing content pack failed with status: ${error}. Could not install content pack with ID: ${contentPackId}`); }); }; - if (!contentPackRevisions) { + if (isLoadingContentPack || isLoadingInstallations) { return (); } + const { contentPackRevisions, constraints, selectedVersion: currentVersion } = contentPack; + const { installations } = contentPackInstallations; + return ( @@ -174,7 +175,6 @@ const ShowContentPackPage = () => { - {/* @ts-ignore */}