Merge pull request #1512 from orchest/fix/job-runs-issues

Add "view" link back to job runs, fix sort order and "open in new tab"
orchest · Jan 31, 2023 · fa694d4 · fa694d4
2 parents 20c8b15 + d4b8f52
commit fa694d4
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 27 deletions.
diff --git a/services/orchest-api/app/app/apis/namespace_jobs.py b/services/orchest-api/app/app/apis/namespace_jobs.py
@@ -414,19 +414,6 @@ def get(self):
             undefer(models.NonInteractivePipelineRun.env_variables),
         )
 
-        if sort == "oldest":
-            job_runs_query = job_runs_query.order_by(
-                asc(models.NonInteractivePipelineRun.created_time),
-                asc(models.NonInteractivePipelineRun.job_run_index),
-                asc(models.NonInteractivePipelineRun.job_run_pipeline_run_index),
-            )
-        else:
-            job_runs_query = job_runs_query.order_by(
-                desc(models.NonInteractivePipelineRun.created_time),
-                desc(models.NonInteractivePipelineRun.job_run_index),
-                desc(models.NonInteractivePipelineRun.job_run_pipeline_run_index),
-            )
-
         if project_uuids is not None or project_pipeline_uuids is not None:
             exp = None
             if project_uuids is not None:
@@ -461,6 +448,19 @@ def get(self):
                 args.fuzzy_filter,
             )
 
+        if sort == "oldest":
+            job_runs_query = job_runs_query.order_by(
+                asc(models.NonInteractivePipelineRun.started_time),
+                asc(models.NonInteractivePipelineRun.job_run_index),
+                asc(models.NonInteractivePipelineRun.job_run_pipeline_run_index),
+            )
+        else:
+            job_runs_query = job_runs_query.order_by(
+                desc(models.NonInteractivePipelineRun.started_time),
+                desc(models.NonInteractivePipelineRun.job_run_index),
+                desc(models.NonInteractivePipelineRun.job_run_pipeline_run_index),
+            )
+
         if args.page is not None and args.page_size is not None:
             job_runs_pagination = job_runs_query.paginate(
                 args.page, args.page_size, False

diff --git a/services/orchest-webserver/client/src/components/common/SystemStatusIcon.tsx b/services/orchest-webserver/client/src/components/common/SystemStatusIcon.tsx
@@ -18,7 +18,7 @@ export type SystemStatusIconProps = {
 export type SystemStatusIconSize = "small" | "medium" | "large";
 
 const progressSize: Record<SystemStatusIconSize, number> = {
-  small: 16,
+  small: 18,
   medium: 24,
   large: 30,
 };

diff --git a/services/orchest-webserver/client/src/components/pipeline-runs/PipelineRunRow.tsx b/services/orchest-webserver/client/src/components/pipeline-runs/PipelineRunRow.tsx
@@ -1,10 +1,12 @@
+import { useRouteLink } from "@/hooks/useCustomRoute";
 import { useToggle } from "@/hooks/useToggle";
 import { formatPipelineParams } from "@/jobs-view/common";
 import { PipelineRun } from "@/types";
 import { humanizeDate } from "@/utils/date-time";
 import { isJobRun } from "@/utils/pipeline-run";
 import { ChevronRightSharp } from "@mui/icons-material";
 import MoreHorizOutlined from "@mui/icons-material/MoreHorizOutlined";
+import { Button } from "@mui/material";
 import Box from "@mui/material/Box";
 import Collapse from "@mui/material/Collapse";
 import IconButton from "@mui/material/IconButton";
@@ -14,6 +16,7 @@ import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
 import React from "react";
 import { SystemStatusChip } from "../common/SystemStatusChip";
+import { RouteLink } from "../RouteLink";
 import { PipelineRunBreadcrumbs } from "./PipelineRunBreadcrumbs";
 import { PipelineRunContextMenu } from "./PipelineRunContextMenu";
 
@@ -24,16 +27,28 @@ export type PipelineRunRowProps = {
   expandable?: boolean;
   /** Whether or not breadcrumbs (project, pipeline, job) should be displayed in each row. */
   breadcrumbs?: boolean;
+  /** Whether or not a link to the pipeline/job run should be displayed. */
+  viewLink?: boolean;
 };
 
 export const PipelineRunRow = ({
   run,
   expandable = false,
   breadcrumbs = false,
+  viewLink = false,
 }: PipelineRunRowProps) => {
   const [isExpanded, toggleRow] = useToggle();
   const [isMenuOpen, toggleMenu] = useToggle();
   const moreButtonRef = React.useRef<HTMLButtonElement>(null);
+  const runLink = useRouteLink({
+    route: isJobRun(run) ? "jobRun" : "pipeline",
+    query: {
+      projectUuid: run.project_uuid,
+      pipelineUuid: run.pipeline_uuid,
+      jobUuid: isJobRun(run) ? run.job_uuid : undefined,
+      runUuid: run.uuid,
+    },
+  });
 
   return (
     <>
@@ -72,10 +87,24 @@ export const PipelineRunRow = ({
         </TableCell>
 
         <TableCell sx={{ textAlign: "right" }}>
-          <SystemStatusChip status={run.status} flavor="job" size="small" />
+          <Stack direction="row" justifyContent="flex-end">
+            <SystemStatusChip
+              status={run.status}
+              flavor={isJobRun(run) ? "job" : "pipeline"}
+              size="small"
+            />
+
+            {viewLink && (
+              <Button LinkComponent={RouteLink} size="small" href={runLink}>
+                View
+              </Button>
+            )}
+          </Stack>
         </TableCell>
 
-        <TableCell sx={{ textAlign: "right", whiteSpace: "nowrap" }}>
+        <TableCell
+          sx={{ textAlign: "right", whiteSpace: "nowrap", minWidth: 177 }}
+        >
           {run.started_time ? humanizeDate(run.started_time) : "—"}
         </TableCell>
 

diff --git a/services/orchest-webserver/client/src/components/pipeline-runs/PipelineRunsTable.tsx b/services/orchest-webserver/client/src/components/pipeline-runs/PipelineRunsTable.tsx
@@ -9,6 +9,7 @@ export type JobRunsTableProps = {
   runs: PipelineRun[];
   expandable?: boolean;
   breadcrumbs?: boolean;
+  viewLink?: boolean;
 };
 
 export const PipelineRunsTable = ({ runs, ...rowProps }: JobRunsTableProps) => {

diff --git a/services/orchest-webserver/client/src/home-view/AllRunsTab.tsx b/services/orchest-webserver/client/src/home-view/AllRunsTab.tsx
@@ -110,7 +110,9 @@ const usePollJobRunsWithFilter = (filter: RunFilterState, page: number) => {
           }))
         : undefined,
       statuses: filter.statuses.length
-        ? filter.statuses.map(toPipelineRunStatus)
+        ? filter.statuses
+            .filter((status) => status !== "PENDING")
+            .map(toPipelineRunStatus)
         : undefined,
     }),
     [

diff --git a/services/orchest-webserver/client/src/home-view/utils/filter.ts b/services/orchest-webserver/client/src/home-view/utils/filter.ts
@@ -1,4 +1,5 @@
 import { PipelineMetaData, PipelineRun, Project } from "@/types";
+import { isJobRun } from "@/utils/pipeline-run";
 import { SystemStatus } from "@/utils/system-status";
 
 export type RunMaxAxe = "all" | "7 days" | "30 days";
@@ -37,11 +38,24 @@ export const maxAgeInMilliseconds = (maxAge: RunMaxAxe) => {
   }
 };
 
-const matchesMaxAge = (run: PipelineRun, maxAge: RunMaxAxe) =>
-  Date.parse(run.started_time) + maxAgeInMilliseconds(maxAge) > Date.now();
+const matchesMaxAge = (run: PipelineRun, maxAge: RunMaxAxe) => {
+  if (!run.started_time) return true;
+
+  return (
+    Date.parse(run.started_time) + maxAgeInMilliseconds(maxAge) > Date.now()
+  );
+};
+const matchesStatus = (run: PipelineRun, status: SystemStatus) => {
+  if (isJobRun(run) && status === "SCHEDULED") {
+    return run.status === "PENDING";
+  } else {
+    return run.status === status;
+  }
+};
 
 const matchesRunFilter = (run: PipelineRun, filter: RunFilterState) =>
-  (!filter.statuses.length || filter.statuses.includes(run.status)) &&
+  (!filter.statuses.length ||
+    filter.statuses.some((status) => matchesStatus(run, status))) &&
   (!filter.projects.length ||
     filter.projects.some((project) => project.uuid === run.project_uuid)) &&
   (!filter.pipelines.length ||
@@ -52,12 +66,21 @@ const matchesRunFilter = (run: PipelineRun, filter: RunFilterState) =>
     )) &&
   matchesMaxAge(run, filter.maxAge);
 
+const compareStartTime = (
+  left: string | undefined,
+  right: string | undefined
+): number => {
+  if (!left) return -1;
+  else if (!right) return 1;
+  else return left.localeCompare(right);
+};
+
 /** Filters and sorts the pipeline runs according to the filter state. */
 export const filterRuns = (runs: PipelineRun[], filter: RunFilterState) =>
   runs
     .filter((run) => matchesRunFilter(run, filter))
     .sort((left, right) =>
       filter.sort === "oldest"
-        ? left.started_time.localeCompare(right.started_time)
-        : right.started_time.localeCompare(left.started_time)
+        ? compareStartTime(left.started_time, right.started_time)
+        : compareStartTime(right.started_time, left.started_time)
     );
diff --git a/services/orchest-webserver/client/src/hooks/useCustomRoute.ts b/services/orchest-webserver/client/src/hooks/useCustomRoute.ts
@@ -164,7 +164,7 @@ export const useCustomRoute = () => {
         : toQueryString(query);
 
       if (shouldOpenNewTab) {
-        openInNewTab(`${window.location.origin}${pathname}?${queryString}`);
+        openInNewTab(window.location.origin + pathname + queryString);
       } else {
         const mutateHistory = replace ? history.replace : history.push;
         mutateHistory({

diff --git a/services/orchest-webserver/client/src/jobs-view/job-view/JobRuns.tsx b/services/orchest-webserver/client/src/jobs-view/job-view/JobRuns.tsx
@@ -79,7 +79,7 @@ export const JobRuns = () => {
 
         {pagination && runs && (
           <>
-            <PipelineRunsTable expandable runs={runs} />
+            <PipelineRunsTable runs={runs} expandable viewLink />
             <TablePagination
               rowsPerPageOptions={[5, 10, 25]}
               component="div"

diff --git a/services/orchest-webserver/client/src/types.d.ts b/services/orchest-webserver/client/src/types.d.ts
@@ -297,7 +297,7 @@ export type PipelineRun = {
   pipeline_uuid: string;
   status: PipelineRunStatus;
   server_time: string;
-  started_time: string;
+  started_time?: string;
   finished_time: string | null;
   pipeline_steps: PipelineRunStep[];
   env_variables: Record<string, string>;

diff --git a/services/orchest-webserver/client/src/utils/system-status.ts b/services/orchest-webserver/client/src/utils/system-status.ts
@@ -21,8 +21,6 @@ export type SystemStatus =
 
 export type StatusFlavor = "job" | "pipeline" | "build";
 
-export const isRunning = (status: SystemStatus) => status === "STARTED";
-
 export const hasEnded = (status: SystemStatus) =>
   status === "ABORTED" || status === "SUCCESS" || status === "FAILURE";