ui: show job messages on the job detail page

Release note (ui change): Jobs can now choose to emit messages that are shown on the job detail page in 25.1+. Epic: none.
cockroachdb · Jan 17, 2025 · 67ea357 · 67ea357
1 parent 5a59e16
commit 67ea357
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 3 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/api/jobsApi.ts b/pkg/ui/workspaces/cluster-ui/src/api/jobsApi.ts
@@ -16,6 +16,7 @@ export type JobsResponse = cockroach.server.serverpb.JobsResponse;
 
 export type JobRequest = cockroach.server.serverpb.JobRequest;
 export type JobResponse = cockroach.server.serverpb.JobResponse;
+
 export type JobResponseWithKey = {
   jobResponse: JobResponse;
   key: string;

diff --git a/pkg/ui/workspaces/cluster-ui/src/jobs/jobDetailsPage/jobDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/jobs/jobDetailsPage/jobDetails.tsx
@@ -16,19 +16,23 @@ import { JobRequest, JobResponse } from "src/api/jobsApi";
 import { Button } from "src/button";
 import { commonStyles } from "src/common";
 import { CockroachCloudContext } from "src/contexts";
+import { EmptyTable } from "src/empty";
 import jobStyles from "src/jobs/jobs.module.scss";
 import { HighwaterTimestamp } from "src/jobs/util/highwaterTimestamp";
 import { JobStatusCell } from "src/jobs/util/jobStatusCell";
 import { Loading } from "src/loading";
+import { SortedTable } from "src/sortedtable";
 import { SqlBox, SqlBoxSize } from "src/sql";
 import { UIConfigState } from "src/store";
 import { SummaryCard, SummaryCardItem } from "src/summaryCard";
 import summaryCardStyles from "src/summaryCard/summaryCard.module.scss";
+import { Text, TextTypes } from "src/text";
 import {
+  DATE_WITH_SECONDS_AND_MILLISECONDS_FORMAT_24_TZ,
+  DATE_WITH_SECONDS_FORMAT,
   TimestampToMoment,
-  idAttr,
   getMatchParamByName,
-  DATE_WITH_SECONDS_AND_MILLISECONDS_FORMAT_24_TZ,
+  idAttr,
 } from "src/util";
 
 import {
@@ -43,6 +47,8 @@ import { isTerminalState } from "../util/jobOptions";
 
 import { JobProfilerView } from "./jobProfilerView";
 
+type JobMessage = JobResponse["messages"][number];
+
 const { TabPane } = Tabs;
 
 const cardCx = classNames.bind(summaryCardStyles);
@@ -151,9 +157,43 @@ export class JobDetails extends React.Component<
       return null;
     }
 
+    const messageColumns = [
+      {
+        name: "timestamp",
+        title: "When",
+        hideTitleUnderline: true,
+        cell: (x: JobMessage) => (
+          <Timestamp
+            time={TimestampToMoment(x.timestamp, null)}
+            format={DATE_WITH_SECONDS_FORMAT}
+          />
+        ),
+      },
+      {
+        name: "kind",
+        title: "Kind",
+        hideTitleUnderline: true,
+        cell: (x: JobMessage) => x.kind,
+      },
+      {
+        name: "message",
+        title: "Message",
+        hideTitleUnderline: true,
+        cell: (x: JobMessage) => (
+          <p className={jobCx("message")}>{x.message}</p>
+        ),
+      },
+    ];
+
     return (
       <Row gutter={24}>
-        <Col className="gutter-row" span={24}>
+        <Col className="gutter-row" span={8}>
+          <Text
+            textType={TextTypes.Heading5}
+            className={jobCx("details-header")}
+          >
+            Details
+          </Text>
           <SummaryCard className={cardCx("summary-card")}>
             <SummaryCardItem
               label="Status"
@@ -206,6 +246,22 @@ export class JobDetails extends React.Component<
             )}
           </SummaryCard>
         </Col>
+        <Col className="gutter-row" span={16}>
+          <Text
+            textType={TextTypes.Heading5}
+            className={jobCx("details-header")}
+          >
+            Events
+          </Text>
+          <SummaryCard className={jobCx("messages-card")}>
+            <SortedTable
+              data={job.messages}
+              columns={messageColumns}
+              tableWrapperClassName={jobCx("job-messages", "sorted-table")}
+              renderNoResult={<EmptyTable title="No messages recorded." />}
+            />
+          </SummaryCard>
+        </Col>
       </Row>
     );
   };

diff --git a/pkg/ui/workspaces/cluster-ui/src/jobs/jobs.module.scss b/pkg/ui/workspaces/cluster-ui/src/jobs/jobs.module.scss
@@ -190,6 +190,21 @@
     line-height: 22px;
     color: $colors--neutral-7;
   }
+
+  .job-messages {
+    overflow: scroll;
+    .message {
+      white-space: pre;
+    }
+  }
+
+  .details-header {
+    margin-top: 12px;
+    margin-bottom: 12px;
+  }
+  .messages-card {
+    padding: 0;
+  }
 }
 
 .inline-message {