Fix Datanode Details Page Error (#20628)

* fix useTableFetchContext refetch error * changelog file * fix build
Graylog2 · Oct 4, 2024 · 3c6fe1d · 3c6fe1d
1 parent 01c33c1
commit 3c6fe1d
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/changelog/unreleased/issue-20604.toml b/changelog/unreleased/issue-20604.toml
@@ -0,0 +1,5 @@
+type = "fixed"
+message = "Fix Datanode Details Page Error"
+
+issues = ["20604"]
+pulls = ["20628"]
diff --git a/graylog2-web-interface/src/components/common/PaginatedEntityTable/useTableFetchContext.ts b/graylog2-web-interface/src/components/common/PaginatedEntityTable/useTableFetchContext.ts
@@ -17,10 +17,13 @@
 import { useContext } from 'react';
 
 import TableFetchContext from './TableFetchContext';
+import type { ContextValue } from './TableFetchContext';
 
-const useTableFetchContext = () => {
+const useTableFetchContext = (skip: boolean = false) => {
   const tableFetchContext = useContext(TableFetchContext);
 
+  if (skip) return {} as ContextValue;
+
   if (!tableFetchContext) {
     throw new Error('useTableFetchContext hook needs to be used inside TableFetchContext.Provider');
   }

diff --git a/graylog2-web-interface/src/components/datanode/DataNodeList/DataNodeActions.tsx b/graylog2-web-interface/src/components/datanode/DataNodeList/DataNodeActions.tsx
@@ -42,6 +42,7 @@ const ActionButton = styled(Button)`
 type Props = {
   dataNode: DataNode,
   displayAs?: 'dropdown'|'buttons',
+  refetch?: () => void,
 };
 
 const DIALOG_TYPES = {
@@ -66,11 +67,12 @@ const DIALOG_TEXT = {
   },
 };
 
-const DataNodeActions = ({ dataNode, displayAs }: Props) => {
+const DataNodeActions = ({ dataNode, refetch, displayAs }: Props) => {
   const [showLogsDialog, setShowLogsDialog] = useState(false);
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const [dialogType, setDialogType] = useState(null);
-  const { refetch } = useTableFetchContext();
+  const context = useTableFetchContext(!!refetch);
+  const _refetch = refetch || context?.refetch || (() => {});
   const statusTimeout = useRef<ReturnType<typeof setTimeout>>();
 
   const sleepAndClearTimer = async () => {
@@ -83,7 +85,7 @@ const DataNodeActions = ({ dataNode, displayAs }: Props) => {
 
   const refetchDatanodes = async () => {
     await sleepAndClearTimer();
-    await refetch();
+    await _refetch();
   };
 
   const handleStartDatanode = async () => {
@@ -189,6 +191,7 @@ const DataNodeActions = ({ dataNode, displayAs }: Props) => {
 
 DataNodeActions.defaultProps = {
   displayAs: 'dropdown',
+  refetch: undefined,
 };
 
 export default DataNodeActions;
diff --git a/graylog2-web-interface/src/pages/DataNodePage.tsx b/graylog2-web-interface/src/pages/DataNodePage.tsx
@@ -57,7 +57,7 @@ const ActionsCol = styled(Col)`
 
 const DataNodePage = () => {
   const { dataNodeId } = useParams();
-  const { data, isInitialLoading, error } = useDataNode(dataNodeId);
+  const { data, isInitialLoading, error, refetch } = useDataNode(dataNodeId);
 
   if (isInitialLoading) {
     return <Spinner />;
@@ -105,7 +105,7 @@ const DataNodePage = () => {
             </StyledHorizontalDl>
           </Col>
           <ActionsCol xs={3}>
-            <DataNodeActions dataNode={datanode} displayAs="buttons" />
+            <DataNodeActions dataNode={datanode} refetch={refetch} displayAs="buttons" />
           </ActionsCol>
         </Col>
       </Row>