[TSPS-634] Add filtering controls to Teaspoons Job History page (#5449)

Author: MatthewBemis

src/libs/ajax/teaspoons/Teaspoons.ts

@@ -12,6 +12,7 @@ import {
   StartPipelineResponse,
   UserPipelineQuotaDetails,
 } from 'src/libs/ajax/teaspoons/teaspoons-models';
+import { FilterValues } from 'src/pages/scientificServices/pipelines/tabs/history/controls/TableFilters';
 
 export const Teaspoons = (signal?: AbortSignal) => ({
   /* Lists all pipelines available to the user */
@@ -40,17 +41,25 @@ export const Teaspoons = (signal?: AbortSignal) => ({
     pageSize: number,
     pageNumber: number,
     sortProperty?: string,
-    sortDirection?: string
+    sortDirection?: string,
+    filters?: FilterValues
   ): Promise<GetPipelineRunsResponse> => {
+    const { status, description, jobId, pipelineName } = filters || {};
+
     const queryString = qs.stringify(
       {
         pageSize,
         pageNumber,
         ...(sortProperty ? { sortProperty } : {}),
         ...(sortDirection ? { sortDirection } : {}),
+        ...(status ? { status } : {}),
+        ...(description ? { description } : {}),
+        ...(jobId ? { jobId } : {}),
+        ...(pipelineName ? { pipelineName } : {}),
       },
       { addQueryPrefix: true }
     );
+
     const res = await fetchTeaspoons(`pipelineruns/v2/pipelineruns${queryString}`, _.merge(authOpts(), { signal }));
     return res.json();
   },

src/libs/ajax/teaspoons/teaspoons-models.ts

@@ -71,6 +71,7 @@ export interface PipelineRun {
 
 export interface GetPipelineRunsResponse {
   totalResults: number;
+  totalFilteredResults: number;
   pageToken: string;
   results: PipelineRun[];
 }

src/pages/scientificServices/NavPaths.tsx

@@ -1,7 +1,7 @@
 import { CliAuth } from 'src/pages/scientificServices/cli-auth/CliAuth';
-import { About } from 'src/pages/scientificServices/pipelines/views/About';
-import { JobHistory } from 'src/pages/scientificServices/pipelines/views/JobHistory';
-import { RunJob } from 'src/pages/scientificServices/pipelines/views/RunJob';
+import { About } from 'src/pages/scientificServices/pipelines/tabs/about/About';
+import { JobHistory } from 'src/pages/scientificServices/pipelines/tabs/history/JobHistory';
+import { RunJob } from 'src/pages/scientificServices/pipelines/tabs/run/RunJob';
 
 export const navPaths = [
   // For now, redirect /pipelines to the Imputation home page

src/pages/scientificServices/pipelines/hooks/usePipelinesList.ts

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { Teaspoons } from 'src/libs/ajax/teaspoons/Teaspoons';
+import { Pipeline } from 'src/libs/ajax/teaspoons/teaspoons-models';
+import { notify } from 'src/libs/notifications';
+import { useCancellation } from 'src/libs/react-utils';
+
+export interface UsePipelinesListResult {
+  pipelines: Pipeline[];
+  isLoading: boolean;
+  error: Error | undefined;
+}
+
+export const usePipelinesList = (): UsePipelinesListResult => {
+  const signal = useCancellation();
+  const [pipelines, setPipelines] = useState<Pipeline[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | undefined>(undefined);
+
+  const fetchPipelines = async () => {
+    setIsLoading(true);
+    setError(undefined);
+
+    try {
+      const response = await Teaspoons(signal).getPipelines();
+      setPipelines(response.results);
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Failed to fetch pipelines');
+      setError(error);
+      notify('error', error.message);
+      setPipelines([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchPipelines();
+  }, [signal]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    pipelines,
+    isLoading,
+    error,
+  };
+};

src/pages/scientificServices/pipelines/views/About.tsx renamed to src/pages/scientificServices/pipelines/tabs/about/About.tsx

@@ -1,30 +1,12 @@
 import { Spinner } from '@terra-ui-packages/components';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import FooterWrapper from 'src/components/FooterWrapper';
-import { Teaspoons } from 'src/libs/ajax/teaspoons/Teaspoons';
-import { PipelineList } from 'src/libs/ajax/teaspoons/teaspoons-models';
 import { pipelinesTopBar } from 'src/pages/scientificServices/pipelines/common/scientific-services-common';
+import { usePipelinesList } from 'src/pages/scientificServices/pipelines/hooks/usePipelinesList';
 import { AoUStylizedString } from 'src/pages/scientificServices/pipelines/utils/AoUStylizedString';
 
 export const About = () => {
-  const [pipelines, setPipelines] = useState<PipelineList | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchPipelines = async () => {
-      try {
-        const pipelineData = await Teaspoons().getPipelines();
-        setPipelines(pipelineData);
-        setLoading(false);
-      } catch (e) {
-        setError('Failed to load pipeline information');
-        setLoading(false);
-      }
-    };
-
-    fetchPipelines();
-  }, []);
+  const { isLoading, error, pipelines } = usePipelinesList();
 
   return (
     <FooterWrapper alwaysShow>
@@ -33,25 +15,24 @@ export const About = () => {
         <h1>Scientific Services from the Broad Data Sciences Platform</h1>
         <h2 style={{ marginTop: '2rem' }}>Pipelines</h2>
 
-        {loading && <Spinner />}
-
-        {error && <div style={{ color: 'red' }}>{error}</div>}
-
-        {pipelines &&
-          pipelines.results.map((pipeline) => (
-            <div key={pipeline.pipelineName}>
-              <h3>
-                <AoUStylizedString text={pipeline.displayName} />
-              </h3>
-              <div style={{ width: '50%' }}>
-                {pipeline.description ? (
-                  <AoUStylizedString text={pipeline.description} />
-                ) : (
-                  <em>No description available</em>
-                )}
-              </div>
+        {isLoading && <Spinner />}
+
+        {error && <div style={{ color: 'red' }}>{error.message}</div>}
+
+        {pipelines?.map((pipeline) => (
+          <div key={pipeline.pipelineName}>
+            <h3>
+              <AoUStylizedString text={pipeline.displayName} />
+            </h3>
+            <div style={{ width: '50%' }}>
+              {pipeline.description ? (
+                <AoUStylizedString text={pipeline.description} />
+              ) : (
+                <em>No description available</em>
+              )}
             </div>
-          ))}
+          </div>
+        ))}
 
         <h2 style={{ marginTop: '2rem' }}>User Documentation</h2>
         <div style={{ marginTop: '1rem' }}>

src/pages/scientificServices/pipelines/views/JobHistory.test.tsx renamed to src/pages/scientificServices/pipelines/tabs/history/JobHistory.test.tsx

@@ -4,14 +4,18 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Teaspoons, TeaspoonsContract } from 'src/libs/ajax/teaspoons/Teaspoons';
 import { PipelineRun } from 'src/libs/ajax/teaspoons/teaspoons-models';
-import { mockPipelineRun } from 'src/pages/scientificServices/pipelines/utils/mock-utils';
-import { PREPARING_JOB_CUTOFF_HOURS } from 'src/pages/scientificServices/pipelines/views/JobHistory';
+import { usePipelinesList } from 'src/pages/scientificServices/pipelines/hooks/usePipelinesList';
+import { mockPipeline, mockPipelineRun } from 'src/pages/scientificServices/pipelines/utils/mock-utils';
 import { asMockedFn, partial, renderWithAppContexts as render } from 'src/testing/test-utils';
 
-import { JobHistory } from './JobHistory';
+import { JobHistory, PREPARING_JOB_CUTOFF_HOURS } from './JobHistory';
 
 jest.mock('src/libs/ajax/teaspoons/Teaspoons');
 
+jest.mock('src/pages/scientificServices/pipelines/hooks/usePipelinesList');
+
+const mockUsePipelinesList = usePipelinesList as jest.MockedFunction<typeof usePipelinesList>;
+
 jest.mock('react-virtualized', () => {
   const actual = jest.requireActual('react-virtualized');
 
@@ -44,6 +48,11 @@ beforeEach(() => {
       get: jest.fn().mockReturnValue('1234'),
     },
   } as any);
+  mockUsePipelinesList.mockReturnValue({
+    pipelines: [mockPipeline('array_imputation')],
+    isLoading: false,
+    error: undefined,
+  });
 });
 
 describe('job history table', () => {
@@ -99,15 +108,15 @@ describe('job history table', () => {
     expect(screen.queryAllByText(/Test Job/)).toHaveLength(2);
 
     // Verify initial call to API without sort parameters defaults to (created, desc)
-    expect(Teaspoons().getAllPipelineRuns).toHaveBeenNthCalledWith(1, 10, 1, 'created', 'desc');
+    expect(Teaspoons().getAllPipelineRuns).toHaveBeenNthCalledWith(1, 10, 1, 'created', 'desc', {});
 
     // Click Quota Used header to sort ascending
     const jobIdHeader = screen.getByText('Quota Used');
     expect(jobIdHeader).toBeInTheDocument();
     await userEvent.click(jobIdHeader);
 
     // Verify that API was called with correct sort parameters (quotaConsumed, asc)
-    expect(Teaspoons().getAllPipelineRuns).toHaveBeenNthCalledWith(2, 10, 1, 'quotaConsumed', 'asc');
+    expect(Teaspoons().getAllPipelineRuns).toHaveBeenNthCalledWith(2, 10, 1, 'quotaConsumed', 'asc', {});
   });
 
   it('displays pipeline name without version when version is not available', async () => {