fix(topology/tekton): stop polling after log streaming completes (#1122)

janus-idp · Feb 6, 2024 · 191bac2 · 191bac2
1 parent 049e762
commit 191bac2
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 48 deletions.
diff --git a/plugins/tekton/README.md b/plugins/tekton/README.md
@@ -119,7 +119,7 @@ The Tekton plugin enables you to visualize the `PipelineRun` resources available
    yarn workspace app add @janus-idp/backstage-plugin-tekton
    ```
 
-1. Enable the PipelineRun list in the **CI/CD** tab on the entity view page.
+1. To enable the PipelineRun list in the **CI/CD** tab on the entity view page, add the following snippet in the `packages/app/src/components/catalog/EntityPage.tsx`.
 
    ```tsx title="packages/app/src/components/catalog/EntityPage.tsx"
    /* highlight-add-next-line */

diff --git a/plugins/tekton/src/hooks/usePodLogsOfPipelineRun.ts b/plugins/tekton/src/hooks/usePodLogsOfPipelineRun.ts
@@ -65,7 +65,10 @@ export const usePodLogsOfPipelineRun = ({
     return requests.length > 0 ? Promise.all(requests) : [];
   }, [containersList, pod, getLogs]);
 
-  useInterval(() => retry(), intervalMs);
+  const stopPolling =
+    pod?.status?.phase === 'Succeeded' || pod?.status?.phase === 'Failed';
+
+  useInterval(() => retry(), stopPolling ? null : intervalMs);
 
   React.useEffect(() => {
     let mounted = true;

diff --git a/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogs.test.tsx b/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogs.test.tsx
@@ -29,7 +29,7 @@ describe('PodLogs', () => {
       value: 'log data...',
     });
     const { queryByTestId } = render(
-      <PodLogs podScope={podScopeData} setLogText={() => {}} />,
+      <PodLogs podScope={podScopeData} setLogText={() => {}} stopPolling />,
     );
     expect(queryByTestId('pod-log-banner')).not.toBeInTheDocument();
     expect(queryByTestId('log-viewer')).toBeInTheDocument();
@@ -44,7 +44,7 @@ describe('PodLogs', () => {
     };
     (usePodLogs as jest.Mock).mockReturnValue({ loading: true });
     const { queryByTestId } = render(
-      <PodLogs podScope={podScopeData} setLogText={() => {}} />,
+      <PodLogs podScope={podScopeData} setLogText={() => {}} stopPolling />,
     );
     expect(queryByTestId('pod-log-banner')).not.toBeInTheDocument();
     expect(queryByTestId('log-viewer')).not.toBeInTheDocument();
@@ -63,7 +63,7 @@ describe('PodLogs', () => {
       error: { message: 'some crash!!' },
     });
     const { queryByTestId } = render(
-      <PodLogs podScope={podScopeData} setLogText={() => {}} />,
+      <PodLogs podScope={podScopeData} setLogText={() => {}} stopPolling />,
     );
     expect(queryByTestId('pod-log-banner')).toBeInTheDocument();
     expect(queryByTestId('log-viewer')).not.toBeInTheDocument();

diff --git a/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogs.tsx b/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogs.tsx
@@ -11,11 +11,17 @@ import { ContainerScope } from './types';
 type PodLogsProps = {
   podScope: ContainerScope;
   setLogText: React.Dispatch<React.SetStateAction<string>>;
+  stopPolling: boolean;
 };
 
-export const PodLogs = ({ podScope, setLogText }: PodLogsProps) => {
+export const PodLogs = ({
+  podScope,
+  setLogText,
+  stopPolling,
+}: PodLogsProps) => {
   const { value, error, loading } = usePodLogs({
     podScope: podScope,
+    stopPolling,
   });
 
   React.useEffect(() => {

diff --git a/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogsDialog.test.tsx b/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogsDialog.test.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 
 import { V1Pod } from '@kubernetes/client-node';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { mockKubernetesResponse } from '../../../../__fixtures__/1-deployments';
 import { PodLogsDialog } from './PodLogsDialog';
@@ -28,9 +28,12 @@ describe('PodLogsDialog', () => {
       clusters: ['OCP'],
       selectedCluster: [0],
     });
-    const { queryByText, queryByTestId } = render(
+    const { queryByText, queryByTestId, getByRole } = render(
       <PodLogsDialog podData={mockKubernetesResponse.pods[0] as V1Pod} />,
     );
+    const button = getByRole('button');
+
+    fireEvent.click(button);
     expect(queryByText(/View Logs/i)).toBeInTheDocument();
     expect(queryByTestId('dialog')).toBeInTheDocument();
   });

diff --git a/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogsDialog.tsx b/plugins/topology/src/components/Topology/TopologySideBar/PodLogs/PodLogsDialog.tsx
@@ -43,10 +43,14 @@ type PodLogsDialogProps = {
   podData: V1Pod;
 };
 
-export const PodLogsDialog = ({ podData }: PodLogsDialogProps) => {
+type ViewLogsProps = {
+  podData: V1Pod;
+  onClose?: () => void;
+};
+
+const ViewLogs = ({ podData, onClose }: ViewLogsProps) => {
   const { clusters, selectedCluster } = React.useContext(K8sResourcesContext);
   const classes = useStyles();
-  const [open, setOpen] = useState<boolean>(false);
   const [logText, setLogText] = useState<string>('');
 
   const curCluster =
@@ -73,14 +77,6 @@ export const PodLogsDialog = ({ podData }: PodLogsDialogProps) => {
     setContainerSelected(event.target.value as string);
   };
 
-  const openDialog = () => {
-    setOpen(true);
-  };
-
-  const closeDialog = () => {
-    setOpen(false);
-  };
-
   React.useEffect(() => {
     if (containerSelected) {
       setPodScope(ps => ({
@@ -90,40 +86,74 @@ export const PodLogsDialog = ({ podData }: PodLogsDialogProps) => {
     }
   }, [containerSelected]);
 
+  if (!podName || !podNamespace || !curCluster) {
+    return null;
+  }
+  const stopPolling =
+    podData?.status?.phase === 'Succeeded' ||
+    podData?.status?.phase === 'Failed' ||
+    podData?.status?.phase === 'Running';
+
+  return (
+    <Dialog maxWidth="xl" fullWidth open onClose={onClose}>
+      <DialogTitle id="dialog-title">
+        <Box className={classes.titleContainer}>
+          <ResourceName name={podName} kind={podData.kind as string} />
+          <IconButton
+            aria-label="close"
+            className={classes.closeButton}
+            onClick={onClose}
+          >
+            <CloseIcon />
+          </IconButton>
+          <ContainerSelector
+            containersList={containersList}
+            onContainerChange={onContainerChange}
+            containerSelected={containerSelected}
+          />
+          <PodLogsDownload
+            logText={logText}
+            fileName={`${podName}-${containerSelected}`}
+          />
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        <ErrorBoundary>
+          <PodLogs
+            podScope={podScope}
+            setLogText={setLogText}
+            stopPolling={stopPolling}
+          />
+        </ErrorBoundary>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export const PodLogsDialog = ({ podData }: PodLogsDialogProps) => {
+  const { clusters, selectedCluster } = React.useContext(K8sResourcesContext);
+  const [open, setOpen] = useState<boolean>(false);
+
+  const curCluster =
+    (clusters.length > 0 && clusters[selectedCluster || 0]) || '';
+  const { name: podName = '', namespace: podNamespace = '' } =
+    podData?.metadata || {};
+
+  const openDialog = () => {
+    setOpen(true);
+  };
+
+  const closeDialog = () => {
+    setOpen(false);
+  };
+
   if (!podName || !podNamespace || !curCluster) {
     return null;
   }
 
   return (
     <>
-      <Dialog maxWidth="xl" fullWidth open={open} onClose={closeDialog}>
-        <DialogTitle id="dialog-title">
-          <Box className={classes.titleContainer}>
-            <ResourceName name={podName} kind={podData.kind as string} />
-            <IconButton
-              aria-label="close"
-              className={classes.closeButton}
-              onClick={closeDialog}
-            >
-              <CloseIcon />
-            </IconButton>
-            <ContainerSelector
-              containersList={containersList}
-              onContainerChange={onContainerChange}
-              containerSelected={containerSelected}
-            />
-            <PodLogsDownload
-              logText={logText}
-              fileName={`${podName}-${containerSelected}`}
-            />
-          </Box>
-        </DialogTitle>
-        <DialogContent>
-          <ErrorBoundary>
-            <PodLogs podScope={podScope} setLogText={setLogText} />
-          </ErrorBoundary>
-        </DialogContent>
-      </Dialog>
+      {open && <ViewLogs podData={podData} onClose={closeDialog} />}
       <Button
         style={{ padding: 0 }}
         variant="link"

diff --git a/plugins/topology/src/hooks/usePodLogs.test.ts b/plugins/topology/src/hooks/usePodLogs.test.ts
@@ -16,6 +16,7 @@ describe('usePodLogs', () => {
     });
     const { result, waitForNextUpdate } = renderHook(() =>
       usePodLogs({
+        stopPolling: true,
         podScope: {
           podName: 'node-ex-git-er56',
           podNamespace: 'sample-app',
@@ -38,6 +39,7 @@ describe('usePodLogs', () => {
     });
     const { result, waitForNextUpdate } = renderHook(() =>
       usePodLogs({
+        stopPolling: true,
         podScope: {
           podName: 'node-ex-git-er56',
           podNamespace: 'sample-app',

diff --git a/plugins/topology/src/hooks/usePodLogs.ts b/plugins/topology/src/hooks/usePodLogs.ts
@@ -9,10 +9,15 @@ import { ContainerScope } from '../components/Topology/TopologySideBar/PodLogs/t
 
 interface PodLogsOptions {
   podScope: ContainerScope;
+  stopPolling: boolean;
   intervalMs?: number;
 }
 
-export const usePodLogs = ({ podScope, intervalMs = 5000 }: PodLogsOptions) => {
+export const usePodLogs = ({
+  podScope,
+  stopPolling,
+  intervalMs = 5000,
+}: PodLogsOptions) => {
   const [loadingData, setLoadingData] = React.useState<boolean>(true);
   const kubernetesProxyApi = useApi(kubernetesProxyApiRef);
   const getLogs = React.useCallback(async (): Promise<{ text: string }> => {
@@ -30,7 +35,7 @@ export const usePodLogs = ({ podScope, intervalMs = 5000 }: PodLogsOptions) => {
     [getLogs],
   );
 
-  useInterval(() => retry(), intervalMs);
+  useInterval(() => retry(), stopPolling ? null : intervalMs);
 
   React.useEffect(() => {
     let mounted = true;