ui, changefeeds: better status col in db console

Previously, when a job contained a `highwater_timestamp` column value
(present for changefeeds) the status column in DB console would
*always* show that value instead of the job status ("running", "paused",
etc.). This would cause confusion for operators because the SQL output
for job status always included both a `status` column and a separate
`highwater_timestamp` column.

This change moves the `highwater_timestamp` into a separate column and
always renders the `status` column with the "pill" component that shows
the current job status.

The highwater timestamp is also moved to the sidebar in the job details
page instead of replacing the status pill, for similar consistency.

Finally, the highwater timestamp now displays the nanosecond decimal
value by default and the human-readable formatted value in the tooltip.
This faciliates easier copy/paste behavior from the UI as the decimal is
more useful.

Resolves #80496

Release note (ui change): The job status page in the DB Console will now
show the status column for changefeed jobs and display the
`highwater_timestamp` value in a separate column. Thise more closely
matches the SQL output of `SHOW changefeed JOBS`. The highwater
timestamp now displays as the nanosecond system time value by default
with the human-readable value in the tooltip since the decimal value is
copy/pasted more often.

pkg/ui/workspaces/db-console/src/views/jobs/highwaterTimestamp.tsx

@@ -16,14 +16,17 @@ import { google } from "src/js/protos";
 import ITimestamp = google.protobuf.ITimestamp;
 
 interface HighwaterProps {
-  highwater: ITimestamp;
-  tooltip: string;
+  timestamp: ITimestamp;
+  decimalString: string;
 }
 
 export class HighwaterTimestamp extends React.PureComponent<HighwaterProps> {
   render() {
+    if (!this.props.timestamp) {
+      return null;
+    }
     let highwaterMoment = moment(
-      this.props.highwater.seconds.toNumber() * 1000,
+      this.props.timestamp.seconds.toNumber() * 1000,
     );
     // It's possible due to client clock skew that this timestamp could be in
     // the future. To avoid confusion, set a maximum bound of now.
@@ -33,8 +36,8 @@ export class HighwaterTimestamp extends React.PureComponent<HighwaterProps> {
     }
 
     return (
-      <ToolTipWrapper text={`System Time: ${this.props.tooltip}`}>
-        High-water Timestamp: {highwaterMoment.format(DATE_FORMAT)}
+      <ToolTipWrapper text={highwaterMoment.format(DATE_FORMAT)}>
+        {this.props.decimalString}
       </ToolTipWrapper>
     );
   }

pkg/ui/workspaces/db-console/src/views/jobs/jobDetails.tsx

@@ -31,6 +31,7 @@ import { DATE_FORMAT } from "src/util/format";
 import { JobStatusCell } from "./jobStatusCell";
 import "src/views/shared/components/summaryCard/styles.styl";
 import * as protos from "src/js/protos";
+import { HighwaterTimestamp } from "src/views/jobs/highwaterTimestamp";
 
 interface JobsTableProps extends RouteComponentProps {
   refreshJob: typeof refreshJob;
@@ -84,6 +85,21 @@ class JobDetails extends React.Component<JobsTableProps, {}> {
                   <p className="summary--card__counting--label">Users</p>
                 </div>
               </Col>
+              {job.highwater_timestamp ? (
+                <Col span={24}>
+                  <div className="summary--card__counting">
+                    <h3 className="summary--card__counting--value">
+                      <HighwaterTimestamp
+                        timestamp={job.highwater_timestamp}
+                        decimalString={job.highwater_decimal}
+                      />
+                    </h3>
+                    <p className="summary--card__counting--label">
+                      High-water Timestamp
+                    </p>
+                  </div>
+                </Col>
+              ) : null}
             </Row>
           </SummaryCard>
         </Col>

pkg/ui/workspaces/db-console/src/views/jobs/jobStatusCell.tsx

@@ -10,7 +10,6 @@
 
 import React from "react";
 import { cockroach } from "src/js/protos";
-import { HighwaterTimestamp } from "src/views/jobs/highwaterTimestamp";
 import { JobStatus } from "./jobStatus";
 import { isRetrying } from "src/views/jobs/jobStatusOptions";
 import { util } from "@cockroachlabs/cluster-ui";
@@ -29,15 +28,6 @@ export const JobStatusCell: React.FC<JobStatusCellProps> = ({
   lineWidth,
   compact = false,
 }) => {
-  if (job.highwater_timestamp) {
-    return (
-      <HighwaterTimestamp
-        highwater={job.highwater_timestamp}
-        tooltip={job.highwater_decimal}
-      />
-    );
-  }
-
   const jobStatus = (
     <JobStatus job={job} lineWidth={lineWidth} compact={compact} />
   );

pkg/ui/workspaces/db-console/src/views/jobs/jobTable.tsx

@@ -37,6 +37,7 @@ import { Anchor } from "src/components";
 import emptyTableResultsIcon from "assets/emptyState/empty-table-results.svg";
 import magnifyingGlassIcon from "assets/emptyState/magnifying-glass.svg";
 import { Tooltip } from "@cockroachlabs/ui-components";
+import { HighwaterTimestamp } from "src/views/jobs/highwaterTimestamp";
 
 class JobsSortedTable extends SortedTable<Job> {}
 
@@ -159,6 +160,26 @@ const jobsTableColumns: ColumnDescriptor<Job>[] = [
       util.TimestampToMoment(job?.last_run).format(DATE_FORMAT_24_UTC),
     sort: job => util.TimestampToMoment(job?.last_run).valueOf(),
   },
+  {
+    name: "High-water Timestamp",
+    title: (
+      <Tooltip
+        placement="bottom"
+        style="tableTitle"
+        content={<p>Date and time the job was last executed.</p>}
+      >
+        {"High-water Timestamp"}
+      </Tooltip>
+    ),
+    cell: job =>
+      job.highwater_timestamp ? (
+        <HighwaterTimestamp
+          timestamp={job.highwater_timestamp}
+          decimalString={job.highwater_decimal}
+        />
+      ) : null,
+    sort: job => util.TimestampToMoment(job?.highwater_timestamp).valueOf(),
+  },
   {
     name: "executionCount",
     title: (