Fix LogViewerSearch styling issue and improve functionality

Fix LogViewerSearch styling issue and improve tests fix: pause logs while loading in pipeline topology test fix: pause logs while loading in pipeline topology test fix: pause logs while loading in pipeline topology test fix: update pipeline topology test to pause logs while loading fix: update pipeline topology test to pause logs while loading fix: pause logs while loading in pipeline topology test
Gkrumbach07 · Jul 12, 2024 · 07269cb · 07269cb
1 parent 8a4261f
commit 07269cb
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 45 deletions.
diff --git a/frontend/src/__mocks__/mockPipelinePodK8sResource.ts b/frontend/src/__mocks__/mockPipelinePodK8sResource.ts
@@ -13,6 +13,7 @@ export const mockPipelinePodK8sResource = ({
   user = 'test-user',
   name = 'test-pod',
   namespace = 'test-project',
+  isPending = false,
 }: MockResourceConfigType): PodKind => ({
   kind: 'Pod',
   apiVersion: 'project.openshift.io/v1',
@@ -545,21 +546,21 @@ export const mockPipelinePodK8sResource = ({
       {
         name: 'step-copy-artifacts',
         state: {
-          terminated: true,
+          terminated: !isPending,
         },
         ready: false,
       },
       {
         name: 'step-main',
         state: {
-          terminated: true,
+          terminated: !isPending,
         },
         ready: false,
       },
       {
         name: 'step-move-all-results-to-tekton-home',
         state: {
-          terminated: true,
+          terminated: !isPending,
         },
         ready: false,
       },

diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/topology.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/topology.ts
@@ -176,7 +176,8 @@ class PipelineDetails extends PipelinesTopology {
   }
 
   selectActionDropdownItem(label: string) {
-    this.findActionsDropdown().click().findByRole('menuitem', { name: label }).click();
+    this.findActionsDropdown().click();
+    cy.findByRole('menuitem', { name: label }).click();
   }
 }
 
@@ -193,7 +194,8 @@ class PipelineRecurringRunDetails extends RunDetails {
   }
 
   selectActionDropdownItem(label: string) {
-    this.findActionsDropdown().click().findByRole('menuitem', { name: label }).click();
+    this.findActionsDropdown().click();
+    cy.findByRole('menuitem', { name: label }).click();
   }
 
   mockEnableRecurringRun(recurringRun: PipelineRecurringRunKFv2, namespace: string) {
@@ -269,12 +271,17 @@ class PipelineRunDetails extends RunDetails {
     return cy.findByTestId('logs-step-select');
   }
 
+  findLogsPauseButton() {
+    return cy.findByTestId('logs-pause-refresh-button');
+  }
+
   selectStepByName(name: string): void {
     this.findStepSelect().findDropdownItem(name).click();
   }
 
   selectActionDropdownItem(label: string) {
-    this.findActionsDropdown().findDropdownItem(label).click();
+    this.findActionsDropdown().click();
+    cy.findByRole('menuitem', { name: label }).click();
   }
 
   findYamlOutput() {

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/pipelinesTopology.cy.ts
@@ -172,7 +172,7 @@ const initIntercepts = () => {
       podName: 'iris-training-pipeline-v4zp7-2757091352',
       containerName: 'step-main',
     }),
-  );
+  ).as('logsLoaded');
 };
 
 describe('Pipeline topology', () => {
@@ -525,14 +525,10 @@ describe('Pipeline topology', () => {
         mockRecurringRun.recurring_run_id,
       );
 
-      pipelineRecurringRunDetails.findActionsDropdown();
       pipelineRecurringRunDetails.selectActionDropdownItem('Disable');
 
-      pipelineRecurringRunDetails
-        .findActionsDropdown()
-        .click()
-        .findByRole('menuitem', { name: 'Enable' })
-        .should('be.visible');
+      pipelineRecurringRunDetails.findActionsDropdown().click();
+      cy.findByRole('menuitem', { name: 'Enable' }).should('be.visible');
     });
 
     it('enables recurring run from action dropdown', () => {
@@ -555,14 +551,10 @@ describe('Pipeline topology', () => {
         mockRecurringRun.recurring_run_id,
       );
 
-      pipelineRecurringRunDetails.findActionsDropdown();
       pipelineRecurringRunDetails.selectActionDropdownItem('Enable');
 
-      pipelineRecurringRunDetails
-        .findActionsDropdown()
-        .click()
-        .findByRole('menuitem', { name: 'Disable' })
-        .should('be.visible');
+      pipelineRecurringRunDetails.findActionsDropdown().click();
+      cy.findByRole('menuitem', { name: 'Disable' }).should('be.visible');
     });
   });
 
@@ -667,8 +659,7 @@ describe('Pipeline topology', () => {
   });
 
   describe('Pipelines logs', () => {
-    beforeEach(() => {
-      initIntercepts();
+    const navigateToLogsTab = () => {
       pipelineRunDetails.visit(
         projectId,
         mockVersion.pipeline_id,
@@ -680,10 +671,48 @@ describe('Pipeline topology', () => {
       rightDrawer.findRightDrawerDetailsTab().should('be.visible');
       rightDrawer.findRightDrawerLogsTab().should('be.visible');
       rightDrawer.findRightDrawerLogsTab().click();
-      pipelineRunDetails.findLogsSuccessAlert().should('be.visible');
+    };
+
+    beforeEach(() => {
+      initIntercepts();
+      navigateToLogsTab();
+    });
+
+    it('test logs paused while loading', () => {
+      cy.interceptK8s(
+        PodModel,
+        mockPipelinePodK8sResource({
+          namespace: projectId,
+          name: 'iris-training-pipeline-v4zp7-2757091352',
+          isPending: true,
+        }),
+      ).as('podLoading');
+      navigateToLogsTab();
+
+      cy.wait('@logsLoaded');
+      cy.wait('@podLoading');
+
+      pipelineRunDetails.findLogsPauseButton().click();
+
+      cy.interceptK8s(
+        PodModel,
+        mockPipelinePodK8sResource({
+          namespace: projectId,
+          name: 'iris-training-pipeline-v4zp7-2757091352',
+          isPending: false,
+        }),
+      ).as('podTerminated');
+
+      cy.wait('@podTerminated', { timeout: 20000 });
+
+      pipelineRunDetails.findLogsPauseButton().should('exist');
+      pipelineRunDetails.findLogsPauseButton().click();
+      pipelineRunDetails.findLogsPauseButton().should('not.exist');
     });
 
     it('test whether the logs load in Logs tab', () => {
+      pipelineRunDetails.findLogsSuccessAlert().should('be.visible');
+
       pipelineRunDetails
         .findLogs()
         .contains(
@@ -702,6 +731,8 @@ describe('Pipeline topology', () => {
     });
 
     it('test logs of another step', () => {
+      pipelineRunDetails.findLogsSuccessAlert().should('be.visible');
+
       pipelineRunDetails.findStepSelect().should('not.be.disabled');
       pipelineRunDetails.selectStepByName('step-copy-artifacts');
       pipelineRunDetails.findLogs().contains('No logs available');

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetailsActions.tsx
@@ -18,6 +18,7 @@ import {
   pipelineVersionRecurringRunsRoute,
   pipelineVersionRunsRoute,
 } from '~/routes';
+import { getDashboardMainContainer } from '~/utilities/utils';
 
 type PipelineDetailsActionsProps = {
   onDelete: () => void;
@@ -40,6 +41,7 @@ const PipelineDetailsActions: React.FC<PipelineDetailsActionsProps> = ({
       <Dropdown
         data-testid="pipeline-version-details-actions"
         onSelect={() => setOpen(false)}
+        menuAppendTo={getDashboardMainContainer}
         toggle={
           <DropdownToggle toggleVariant="primary" onToggle={() => setOpen(!open)}>
             Actions

diff --git a/...ines/content/pipelinesDetails/pipelineRecurringRun/PipelineRecurringRunDetailsActions.tsx b/...ines/content/pipelinesDetails/pipelineRecurringRun/PipelineRecurringRunDetailsActions.tsx
@@ -13,6 +13,7 @@ import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { PipelineRecurringRunKFv2, RecurringRunStatus } from '~/concepts/pipelines/kfTypes';
 import { cloneRecurringRunRoute } from '~/routes';
 import { useIsAreaAvailable, SupportedArea } from '~/concepts/areas';
+import { getDashboardMainContainer } from '~/utilities/utils';
 
 type PipelineRecurringRunDetailsActionsProps = {
   recurringRun?: PipelineRecurringRunKFv2;
@@ -69,6 +70,7 @@ const PipelineRecurringRunDetailsActions: React.FC<PipelineRecurringRunDetailsAc
     <Dropdown
       data-testid="pipeline-recurring-run-details-actions"
       onSelect={() => setOpen(false)}
+      menuAppendTo={getDashboardMainContainer}
       toggle={
         <DropdownToggle toggleVariant="primary" onToggle={() => setOpen(!open)}>
           Actions

diff --git a/...src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsActions.tsx b/...src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetailsActions.tsx
@@ -13,6 +13,7 @@ import { PipelineRunKFv2, RuntimeStateKF, StorageStateKF } from '~/concepts/pipe
 import { cloneRunRoute, experimentsCompareRunsRoute } from '~/routes';
 import { SupportedArea, useIsAreaAvailable } from '~/concepts/areas';
 import useExperimentById from '~/concepts/pipelines/apiHooks/useExperimentById';
+import { getDashboardMainContainer } from '~/utilities/utils';
 
 type PipelineRunDetailsActionsProps = {
   run?: PipelineRunKFv2 | null;
@@ -55,6 +56,7 @@ const PipelineRunDetailsActions: React.FC<PipelineRunDetailsActionsProps> = ({
     <Dropdown
       data-testid="pipeline-run-details-actions"
       onSelect={() => setOpen(false)}
+      menuAppendTo={getDashboardMainContainer}
       toggle={
         <DropdownToggle toggleVariant="primary" onToggle={() => setOpen(!open)}>
           Actions

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx
@@ -108,11 +108,13 @@ const LogsTab: React.FC<LogsTabProps> = ({ task }) => {
     scrollOffsetToBottom,
     scrollUpdateWasRequested,
   }) => {
-    if (!scrollUpdateWasRequested) {
-      if (scrollOffsetToBottom > 0) {
-        setIsPaused(true);
-      } else {
-        setIsPaused(false);
+    if (!podStatus?.completed && logsLoaded) {
+      if (!scrollUpdateWasRequested) {
+        if (scrollOffsetToBottom > 0) {
+          setIsPaused(true);
+        } else {
+          setIsPaused(false);
+        }
       }
     }
   };
@@ -296,34 +298,37 @@ const LogsTab: React.FC<LogsTabProps> = ({ task }) => {
                         </ToolbarItem>
                       )}
                       <ToolbarItem spacer={{ default: 'spacerNone' }} style={{ maxWidth: '300px' }}>
-                        <Tooltip content="Search">
-                          <LogViewerSearch
-                            onFocus={() => setIsPaused(true)}
-                            placeholder="Search"
-                            minSearchChars={0}
-                            expandableInput={{
-                              isExpanded: showSearchbar,
-                              onToggleExpand,
-                              toggleAriaLabel: 'Expandable search input toggle',
-                            }}
-                          />
-                        </Tooltip>
+                        <LogViewerSearch
+                          onFocus={() => {
+                            if (!podStatus?.completed && logsLoaded) {
+                              setIsPaused(true);
+                            }
+                          }}
+                          placeholder="Search"
+                          minSearchChars={0}
+                          expandableInput={{
+                            isExpanded: showSearchbar,
+                            onToggleExpand,
+                            toggleAriaLabel: 'Expandable search input toggle',
+                          }}
+                        />
                       </ToolbarItem>
-                      {!podStatus?.completed && (
+                      {(!podStatus?.completed || isPaused) && (
                         <ToolbarItem spacer={{ default: 'spacerNone' }}>
                           <Button
                             variant={!logsLoaded ? 'plain' : isPaused ? 'plain' : 'link'}
                             onClick={() => setIsPaused(!isPaused)}
                             isDisabled={!!error}
+                            data-testid="logs-pause-refresh-button"
                           >
-                            {!logsLoaded || podStatus?.podInitializing ? (
-                              <Tooltip content="Loading log">
-                                <Spinner size="sm" />
-                              </Tooltip>
-                            ) : isPaused ? (
+                            {isPaused ? (
                               <Tooltip content="Resume refreshing">
                                 <PlayIcon />
                               </Tooltip>
+                            ) : !logsLoaded || podStatus?.podInitializing ? (
+                              <Tooltip content="Loading log">
+                                <Spinner size="sm" />
+                              </Tooltip>
                             ) : (
                               <Tooltip content="Pause refreshing">
                                 <PauseIcon />