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

MatthewBemis · 2025-11-06T19:58:00Z

Jira Ticket: https://broadworkbench.atlassian.net/browse/TSPS-634

Depends on https://broadworkbench.atlassian.net/browse/TSPS-502

Summary of changes:

What

Adds job history filtering controls for description, jobId, status, and pipelineName, supported on the backend as part of TSPS-502 (PR link coming soon)
Reorganizes a bunch of the code to be better grouped by tab
Refactored pipeline fetching to use a common hook usePipelinesList
A few unrelated Sonar fixes

Screen.Recording.2025-11-06.at.3.43.48.PM.mov

Why

Testing strategy

MatthewBemis · 2025-11-06T19:59:34Z

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

+  error: Error | undefined;
+}
+
+export const usePipelinesList = (): UsePipelinesListResult => {


factored this fetch logic out into a hook because all 3 tabs now rely on it

MatthewBemis · 2025-11-06T20:00:03Z

src/pages/scientificServices/pipelines/tabs/history/modals/ViewOutputsModal.tsx

@@ -149,7 +149,7 @@ export const ViewOutputsModal = ({ jobId, onDismiss }: OutputsModalProps): React
              </div>
            ) : (
              <div style={{ padding: '1rem', textAlign: 'center' }}>
-                No output information found for this job. If this job completed more than $
+                No output information found for this job. If this job completed more than{' '}


drive-by fix to remove unnecessary dollar sign

time is money!

MatthewBemis · 2025-11-06T20:01:34Z

src/pages/scientificServices/pipelines/tabs/history/controls/TableFilters.tsx

+      }}
+    >
+      <div style={{ fontWeight: 600, fontSize: '14px' }}>Description</div>
+      <DelayedSearchInput


these inputs are debounced to avoid hitting the backend for every single keystroke in the text input

MatthewBemis · 2025-11-06T20:03:16Z

src/pages/scientificServices/pipelines/tabs/history/controls/TableFilters.tsx

+          control: (provided) => ({
+            ...provided,
+            minHeight: '2.25rem',
+            height: '2.25rem',
+          }),


it drove me crazy that the height of the Select component was a few pixels taller than the height of the text input components that are next to these, hence the height style override to make them consistent

MatthewBemis · 2025-11-06T20:04:50Z

src/libs/ajax/teaspoons/Teaspoons.ts

+        ...(status ? { status } : {}),
+        ...(description ? { description } : {}),
+        ...(jobId ? { jobId } : {}),
+        ...(pipelineName ? { pipelineName } : {}),


this query string formulation may change pending the results of TSPS-502, but that's such an insignificant detail that the rest of the PR can still be reviewed imo

MatthewBemis · 2025-11-06T20:29:29Z

src/pages/scientificServices/pipelines/tabs/about/About.tsx

you'll see a bunch of directory changes- i did some re-organization that felt a little bit overdue especially after working on this ticket. components that aren't used in multiple places are now grouped more closely with the tab that they belong to.

MatthewBemis · 2025-11-06T22:16:23Z

src/pages/scientificServices/pipelines/tabs/history/modals/ViewOutputsModal.tsx

    const response = await fetch(url, { method: 'HEAD' });
    const size = response.headers.get('content-length');
-    return size ? formatBytes(parseInt(size)) : 'Unknown size';
+    return size ? formatBytes(Number.parseInt(size)) : 'Unknown size';


driveby fix for a sonar warning that got flagged since i touched this code

MatthewBemis · 2025-11-06T22:16:40Z

src/pages/scientificServices/pipelines/tabs/history/JobHistory.tsx


 const DataDeletionDateCell = ({ pipelineRun }: CellProps): ReactNode => {
-  if (!pipelineRun.timeCompleted || !(pipelineRun.status === 'SUCCEEDED')) {
+  if (!pipelineRun.timeCompleted || pipelineRun.status !== 'SUCCEEDED') {


another driveby sonar fix

MatthewBemis · 2025-11-06T22:17:25Z

config/dev.json

  "orchestrationUrlRoot": "https://firecloud-orchestration.dsde-dev.broadinstitute.org",
  "rawlsUrlRoot": "https://rawls.dsde-dev.broadinstitute.org",
-  "teaspoonsUrlRoot": "https://teaspoons.dsde-dev.broadinstitute.org",
+  "teaspoonsUrlRoot": "http://localhost:8080",


will revert this prior to merging, but needed to test this against my local teaspoons w/ the changes

jsotobroad

this makes sense to me. It might be worth going over as a team just to get an understanding of the new file structure and changes added here since it seems not insignificant

jsotobroad · 2025-11-07T15:39:14Z

src/libs/ajax/teaspoons/Teaspoons.ts

        pageNumber,
        ...(sortProperty ? { sortProperty } : {}),
        ...(sortDirection ? { sortDirection } : {}),
+        ...(status ? { status } : {}),


its kinda crazy all of these changes to "just" pass in these values

jsotobroad

thank you for the walkthrough in post!

mmorgantaylor

looks fantastic. I love being able to show and hide the filters. 👍 pending reverting the teaspoonsUrlRoot value for dev

mmorgantaylor · 2025-11-12T14:08:40Z

src/pages/scientificServices/pipelines/tabs/history/modals/ViewOutputsModal.tsx

@@ -149,7 +149,7 @@ export const ViewOutputsModal = ({ jobId, onDismiss }: OutputsModalProps): React
              </div>
            ) : (
              <div style={{ padding: '1rem', textAlign: 'center' }}>
-                No output information found for this job. If this job completed more than $
+                No output information found for this job. If this job completed more than{' '}


time is money!

mmorgantaylor · 2025-11-12T14:09:24Z

src/pages/scientificServices/pipelines/tabs/run/RunJob.tsx

  const [submittedJobId, setSubmittedJobId] = useState<string>();

-  // User quota for the selected pipeline
+  const { isLoading: isLoadingPipelines, pipelines: pipelinesList } = usePipelinesList();


great refactor

sonarqubecloud · 2025-11-18T19:32:26Z

Quality Gate passed

Issues
5 New issues
3 Accepted issues

Measures
0 Security Hotspots
84.3% Coverage on New Code
2.2% Duplication on New Code

See analysis details on SonarQube Cloud

MatthewBemis changed the title ~~[TSPS-642] Add filtering controls to Teaspoons Job History page [wip]~~ [TSPS-634] Add filtering controls to Teaspoons Job History page [wip] Nov 6, 2025

MatthewBemis commented Nov 6, 2025

View reviewed changes

broadbot requested a deployment to pr-4 November 6, 2025 20:27 Abandoned

MatthewBemis commented Nov 6, 2025

View reviewed changes

broadbot requested a deployment to pr-4 November 6, 2025 20:56 Abandoned

broadbot temporarily deployed to pr-4 November 6, 2025 21:10 Inactive

broadbot temporarily deployed to pr-4 November 6, 2025 21:42 Inactive

MatthewBemis changed the title ~~[TSPS-634] Add filtering controls to Teaspoons Job History page [wip]~~ [TSPS-634] Add filtering controls to Teaspoons Job History page Nov 6, 2025

MatthewBemis commented Nov 6, 2025

View reviewed changes

broadbot temporarily deployed to pr-4 November 6, 2025 22:27 Inactive

MatthewBemis marked this pull request as ready for review November 6, 2025 22:28

MatthewBemis requested a review from a team as a code owner November 6, 2025 22:28

MatthewBemis requested a review from jsotobroad November 6, 2025 22:28

jsotobroad reviewed Nov 7, 2025

View reviewed changes

jsotobroad approved these changes Nov 10, 2025

View reviewed changes

mmorgantaylor approved these changes Nov 12, 2025

View reviewed changes

broadbot temporarily deployed to pr-4 November 14, 2025 02:40 Inactive

broadbot temporarily deployed to pr-4 November 14, 2025 19:12 Inactive

broadbot temporarily deployed to pr-4 November 15, 2025 02:03 Inactive

MatthewBemis added 5 commits November 18, 2025 14:11

cleanup

dcb5f0c

table fitlers in new compnent

d764ac8

tweaks

b687e0b

tweaks

d7c47a5

fix bug

2ccec9a

MatthewBemis and others added 19 commits November 18, 2025 14:14

tweaks

6a6d2a5

tweaks

2301606

fixes to dropdown filters

a024dd9

ux tweaks

ccac39c

refactor pipelines list into hook

4fd83cc

various cleanup

3d73d33

more tweaks

5a43705

consistent heights for filter controls

1a90186

extract filter controls

ed11c80

fix existing tests

fd41cbd

re-org

fa0e598

fix paths after refactor

056c15d

use hook in about component

7e94c20

tests for table filters

cc97c00

fix a bunch of sonar warnings

9103afe

use newly-added totalFilteredResults value

53b01b2

check for valid uuids prior to calling backend

9b3cc3a

add test case

bedd450

Update dev.json

e0cd572

MatthewBemis force-pushed the mb-tsps-filtering-jobs branch from b0f18b5 to e0cd572 Compare November 18, 2025 19:19

broadbot deployed to pr-4 November 18, 2025 19:32 View deployment

MatthewBemis added this pull request to the merge queue Nov 18, 2025

Merged via the queue into dev with commit b1dee1e Nov 18, 2025
11 checks passed

MatthewBemis deleted the mb-tsps-filtering-jobs branch November 18, 2025 20:08

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

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

Uh oh!

Conversation

MatthewBemis commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Jira Ticket: https://broadworkbench.atlassian.net/browse/TSPS-634

Summary of changes:

What

Why

Testing strategy

Uh oh!

MatthewBemis Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MatthewBemis Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jsotobroad left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jsotobroad left a comment

Choose a reason for hiding this comment

Uh oh!

mmorgantaylor left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Nov 18, 2025

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

MatthewBemis commented Nov 6, 2025 •

edited

Loading

MatthewBemis Nov 6, 2025 •

edited

Loading

MatthewBemis Nov 6, 2025 •

edited

Loading