ui/jobs: jobs paused for a reason now show the reason

The UI was previously assuming extra information about why a job paused,
if available, would be in the 'error' field, however pause reasons are a
status, and thus in the running_status field, so the UI should render
the extra detail for a paused job regardless of which field it is in.

Additionally jobs paused for a reason now display their status with the
'warning' (yellow) style, as a job pausing for a reason is most commonly
associated with some sort of condition or problem requiring operator
intervention, such as disk capacity exhaustion or cluster unhealthiness.

Release note (ui change): Jobs which are paused for a specific reason
now show that reason, and are highlighted in the UI.

Epic: none.

Author: dt

pkg/ui/workspaces/cluster-ui/src/jobs/util/jobOptions.tsx

@@ -45,11 +45,11 @@ export function jobToVisual(job: Job): JobStatusVisual {
       return JobStatusVisual.BadgeWithMessage;
     case JOB_STATUS_CANCELED:
     case JOB_STATUS_CANCEL_REQUESTED:
+    case JOB_STATUS_PAUSE_REQUESTED:
     case JOB_STATUS_PAUSED:
-      return job.error === ""
+      return !job.error && !job.running_status
         ? JobStatusVisual.BadgeOnly
         : JobStatusVisual.BadgeWithErrorMessage;
-    case JOB_STATUS_PAUSE_REQUESTED:
     case JOB_STATUS_REVERTING:
     default:
       return JobStatusVisual.BadgeOnly;
@@ -68,7 +68,7 @@ export const JOB_STATUS_FAILED = "failed";
 export const JOB_STATUS_CANCELED = "canceled";
 export const JOB_STATUS_CANCEL_REQUESTED = "cancel-requested";
 export const JOB_STATUS_PAUSED = "paused";
-export const JOB_STATUS_PAUSE_REQUESTED = "paused-requested";
+export const JOB_STATUS_PAUSE_REQUESTED = "pause-requested";
 export const JOB_STATUS_RUNNING = "running";
 export const JOB_STATUS_PENDING = "pending";
 export const JOB_STATUS_REVERTING = "reverting";
@@ -111,7 +111,10 @@ export function jobHasOneOfStatuses(job: Job, ...statuses: string[]): boolean {
   return statuses.indexOf(job.status) !== -1;
 }
 
-export const jobStatusToBadgeStatus = (status: string): BadgeStatus => {
+export const jobStatusToBadgeStatus = (
+  status: string,
+  advisory?: string,
+): BadgeStatus => {
   switch (status) {
     case JOB_STATUS_SUCCEEDED:
       return "success";
@@ -123,10 +126,14 @@ export const jobStatusToBadgeStatus = (status: string): BadgeStatus => {
       return "info";
     case JOB_STATUS_PENDING:
       return "warning";
+    case JOB_STATUS_PAUSE_REQUESTED:
+    case JOB_STATUS_PAUSED:
+      if (advisory) {
+        return "warning";
+      }
+      return "default";
     case JOB_STATUS_CANCELED:
     case JOB_STATUS_CANCEL_REQUESTED:
-    case JOB_STATUS_PAUSED:
-    case JOB_STATUS_PAUSE_REQUESTED:
     case JOB_STATUS_REVERTING:
     default:
       return "default";

pkg/ui/workspaces/cluster-ui/src/jobs/util/jobStatus.tsx

@@ -10,7 +10,7 @@ import React from "react";
 import styles from "../jobs.module.scss";
 
 import { Duration } from "./duration";
-import { JobStatusVisual, jobToVisual } from "./jobOptions";
+import { JOB_STATUS_FAILED, JobStatusVisual, jobToVisual } from "./jobOptions";
 import {
   JobStatusBadge,
   ProgressBar,
@@ -35,10 +35,14 @@ export const JobStatus: React.FC<JobStatusProps> = ({
   hideDuration = false,
 }) => {
   const visualType = jobToVisual(job);
-
   switch (visualType) {
     case JobStatusVisual.BadgeOnly:
-      return <JobStatusBadge jobStatus={job.status} />;
+      return (
+        <JobStatusBadge
+          jobStatus={job.status}
+          advisory={job.error || job.running_status}
+        />
+      );
     case JobStatusVisual.BadgeWithDuration:
       return (
         <div>
@@ -68,7 +72,10 @@ export const JobStatus: React.FC<JobStatusProps> = ({
     case JobStatusVisual.BadgeWithMessage:
       return (
         <div>
-          <JobStatusBadge jobStatus={job.status} />
+          <JobStatusBadge
+            jobStatus={job.status}
+            advisory={job.error || job.running_status}
+          />
           <span className={cx("jobs-table__running-status")}>
             {job.running_status}
           </span>
@@ -77,11 +84,14 @@ export const JobStatus: React.FC<JobStatusProps> = ({
     case JobStatusVisual.BadgeWithErrorMessage:
       return (
         <div>
-          <JobStatusBadge jobStatus={job.status} />
+          <JobStatusBadge
+            jobStatus={job.status}
+            advisory={job.error || job.running_status}
+          />
           {!compact && (
             <InlineAlert
-              title={job.error}
-              intent="danger"
+              title={job.error || job.running_status}
+              intent={job.status === JOB_STATUS_FAILED ? "danger" : "warning"}
               className={cx("inline-message")}
             />
           )}

pkg/ui/workspaces/cluster-ui/src/jobs/util/progressBar.tsx

@@ -17,10 +17,13 @@ const cx = classNames.bind(styles);
 
 type Job = cockroach.server.serverpb.IJobResponse;
 
-export class JobStatusBadge extends React.PureComponent<{ jobStatus: string }> {
+export class JobStatusBadge extends React.PureComponent<{
+  jobStatus: string;
+  advisory?: string;
+}> {
   render(): React.ReactElement {
     const jobStatus = this.props.jobStatus;
-    const badgeStatus = jobStatusToBadgeStatus(jobStatus);
+    const badgeStatus = jobStatusToBadgeStatus(jobStatus, this.props.advisory);
     return <Badge status={badgeStatus} text={jobStatus} />;
   }
 }