ARMADA-2371 Adding routing to jobs page w/filters from JOB SETS page (#…

…37) (#47) * Adding routing to jobs page w/filters from JOB SETS page. Refactoring to make linter happy * Correcting parameter type Signed-off-by: Mustafa Ilyas <[email protected]>
armadaproject · Dec 29, 2023 · 7d57477 · 7d57477
1 parent 99977ab
commit 7d57477
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 12 deletions.
diff --git a/internal/lookout/ui/src/components/LinkCell.css b/internal/lookout/ui/src/components/LinkCell.css
@@ -0,0 +1,9 @@
+.link {
+    width: 100%;
+    color: blue;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: underline;
+    cursor: pointer;
+}
diff --git a/internal/lookout/ui/src/components/LinkCell.tsx b/internal/lookout/ui/src/components/LinkCell.tsx
@@ -0,0 +1,17 @@
+import React from "react"
+
+import { TableCellProps } from "react-virtualized"
+
+import "./LinkCell.css"
+
+type LinkCellProps = {
+  onClick: () => void
+} & TableCellProps
+
+export default function LinkCell(props: LinkCellProps) {
+  return (
+    <div className="link" onClick={props.onClick}>
+      {props.cellData}
+    </div>
+  )
+}
diff --git a/internal/lookout/ui/src/components/job-sets/JobSetTable.tsx b/internal/lookout/ui/src/components/job-sets/JobSetTable.tsx
@@ -4,12 +4,13 @@ import Truncate from "react-truncate"
 import { TableCellProps, Table as VirtualizedTable } from "react-virtualized"
 import { Column, defaultTableCellRenderer } from "react-virtualized"
 
+import { JobState } from "../../models/lookoutV2Models"
 import { JobSet } from "../../services/JobService"
 import CheckboxHeaderRow from "../CheckboxHeaderRow"
 import CheckboxRow from "../CheckboxRow"
-import SortableHeaderCell from "../SortableHeaderCell"
-
 import "./JobSetTable.css"
+import LinkCell from "../LinkCell"
+import SortableHeaderCell from "../SortableHeaderCell"
 
 interface JobSetTableProps {
   height: number
@@ -23,12 +24,14 @@ interface JobSetTableProps {
   onDeselectAllClick: () => void
   onSelectAllClick: () => void
   onOrderChange: (newestFirst: boolean) => void
+  onJobSetStateClick(rowIndex: number, state: string): void
 }
 
-function cellRendererForState(cellProps: TableCellProps) {
-  if (cellProps.cellData) {
-    return cellProps.cellData
+function cellRendererForState(cellProps: TableCellProps, onClickFunc: () => void) {
+  if (cellProps.cellData > 0) {
+    return <LinkCell onClick={onClickFunc} {...cellProps} />
   }
+
   return defaultTableCellRenderer(cellProps)
 }
 
@@ -121,42 +124,54 @@ export default function JobSetTable(props: JobSetTableProps) {
           width={0.06 * props.width}
           label="Queued"
           className="job-set-table-number-cell"
-          cellRenderer={(cellProps) => cellRendererForState(cellProps)}
+          cellRenderer={(cellProps) =>
+            cellRendererForState(cellProps, () => props.onJobSetStateClick(cellProps.rowIndex, JobState.Queued))
+          }
         />
         <Column
           dataKey="jobsPending"
           width={0.06 * props.width}
           label="Pending"
           className="job-set-table-number-cell"
-          cellRenderer={(cellProps) => cellRendererForState(cellProps)}
+          cellRenderer={(cellProps) =>
+            cellRendererForState(cellProps, () => props.onJobSetStateClick(cellProps.rowIndex, JobState.Pending))
+          }
         />
         <Column
           dataKey="jobsRunning"
           width={0.06 * props.width}
           label="Running"
           className="job-set-table-number-cell"
-          cellRenderer={(cellProps) => cellRendererForState(cellProps)}
+          cellRenderer={(cellProps) =>
+            cellRendererForState(cellProps, () => props.onJobSetStateClick(cellProps.rowIndex, JobState.Running))
+          }
         />
         <Column
           dataKey="jobsSucceeded"
           width={0.06 * props.width}
           label="Succeeded"
           className="job-set-table-number-cell"
-          cellRenderer={(cellProps) => cellRendererForState(cellProps)}
+          cellRenderer={(cellProps) =>
+            cellRendererForState(cellProps, () => props.onJobSetStateClick(cellProps.rowIndex, JobState.Succeeded))
+          }
         />
         <Column
           dataKey="jobsFailed"
           width={0.06 * props.width}
           label="Failed"
           className="job-set-table-number-cell"
-          cellRenderer={(cellProps) => cellRendererForState(cellProps)}
+          cellRenderer={(cellProps) =>
+            cellRendererForState(cellProps, () => props.onJobSetStateClick(cellProps.rowIndex, JobState.Failed))
+          }
         />
         <Column
           dataKey="jobsCancelled"
           width={0.06 * props.width}
           label="Cancelled"
           className="job-set-table-number-cell"
-          cellRenderer={(cellProps) => cellRendererForState(cellProps)}
+          cellRenderer={(cellProps) =>
+            cellRendererForState(cellProps, () => props.onJobSetStateClick(cellProps.rowIndex, JobState.Cancelled))
+          }
         />
       </VirtualizedTable>
     </div>

diff --git a/internal/lookout/ui/src/components/job-sets/JobSets.tsx b/internal/lookout/ui/src/components/job-sets/JobSets.tsx
@@ -34,6 +34,7 @@ interface JobSetsProps {
   onReprioritizeJobSetsClick: () => void
   onOrderChange: (newestFirst: boolean) => void
   onActiveOnlyChange: (activeOnly: boolean) => void
+  onJobSetStateClick(rowIndex: number, state: string): void
 }
 
 export default function JobSets(props: JobSetsProps) {
@@ -50,6 +51,7 @@ export default function JobSets(props: JobSetsProps) {
       onDeselectAllClick={props.onDeselectAllClick}
       onSelectAllClick={props.onSelectAllClick}
       onOrderChange={props.onOrderChange}
+      onJobSetStateClick={props.onJobSetStateClick}
     />
   )
 

diff --git a/internal/lookout/ui/src/containers/JobSetsContainer.tsx b/internal/lookout/ui/src/containers/JobSetsContainer.tsx
@@ -9,8 +9,15 @@ import { GetJobSetsRequest, JobSet } from "../services/JobService"
 import JobSetsLocalStorageService from "../services/JobSetsLocalStorageService"
 import JobSetsQueryParamsService from "../services/JobSetsQueryParamsService"
 import { IGroupJobsService } from "../services/lookoutV2/GroupJobsService"
+import {
+  DEFAULT_PREFERENCES,
+  JobsTablePreferences,
+  stringifyQueryParams,
+  toQueryStringSafe,
+} from "../services/lookoutV2/JobsTablePreferencesService"
 import { UpdateJobSetsService } from "../services/lookoutV2/UpdateJobSetsService"
 import { ApiResult, debounced, PropsWithRouter, RequestStatus, selectItem, setStateAsync, withRouter } from "../utils"
+import { StandardColumnId } from "../utils/jobsTableColumns"
 
 interface JobSetsContainerProps extends PropsWithRouter {
   v2GroupJobsService: IGroupJobsService
@@ -75,6 +82,7 @@ class JobSetsContainer extends React.Component<JobSetsContainerProps, JobSetsCon
     this.fetchJobSets = debounced(this.fetchJobSets.bind(this), 100)
     this.loadJobSets = this.loadJobSets.bind(this)
     this.toggleAutoRefresh = this.toggleAutoRefresh.bind(this)
+    this.onJobSetStateClick = this.onJobSetStateClick.bind(this)
   }
 
   async componentDidMount() {
@@ -223,6 +231,33 @@ class JobSetsContainer extends React.Component<JobSetsContainerProps, JobSetsCon
     }
   }
 
+  private async onJobSetStateClick(rowIndex: number, state: string) {
+    const jobSet = this.state.jobSets[rowIndex]
+
+    const prefs: JobsTablePreferences = {
+      ...DEFAULT_PREFERENCES,
+      filters: [
+        {
+          id: StandardColumnId.Queue,
+          value: jobSet.queue,
+        },
+        {
+          id: StandardColumnId.State,
+          value: [state],
+        },
+        {
+          id: StandardColumnId.JobSet,
+          value: jobSet.jobSetId,
+        },
+      ],
+    }
+
+    this.props.router.navigate({
+      pathname: "/",
+      search: stringifyQueryParams(toQueryStringSafe(prefs)),
+    })
+  }
+
   private async updateState(updatedState: JobSetsContainerState) {
     this.localStorageService.saveState(updatedState)
     this.queryParamsService.saveState(updatedState)
@@ -330,6 +365,7 @@ class JobSetsContainer extends React.Component<JobSetsContainerProps, JobSetsCon
           onCancelJobSetsClick={() => this.openCancelJobSets(true)}
           onToggleAutoRefresh={this.autoRefreshService && this.toggleAutoRefresh}
           onReprioritizeJobSetsClick={() => this.openReprioritizeJobSets(true)}
+          onJobSetStateClick={this.onJobSetStateClick}
         />
       </>
     )

diff --git a/internal/lookout/ui/src/services/lookoutV2/JobsTablePreferencesService.ts b/internal/lookout/ui/src/services/lookoutV2/JobsTablePreferencesService.ts
@@ -86,7 +86,7 @@ export interface QueryStringPrefs {
   refresh: string | undefined
 }
 
-const toQueryStringSafe = (prefs: JobsTablePreferences): QueryStringPrefs => {
+export const toQueryStringSafe = (prefs: JobsTablePreferences): QueryStringPrefs => {
   // The order of these keys are the order they'll show in the URL bar (in modern browsers)
   return {
     page: prefs.pageIndex.toString(),