Merge #110366 #111867

110366: ui: do not show current time as a fall back for empty timestamps on Jobs pages r=koorosh a=koorosh

Previously, timestamps for running jobs showed
current time even if job is not finished because
`TimestampToMoment` function used current time as
a default value for Nulls.
With this change it is explicitly set to Null to
make sure that Job's time is not misinterpreted.

Resolves: #109204

Release note (ui change): Correctly display timestamps 
for creation, last modified, and completed time on Jobs table.

<img width="1587" alt="Screenshot 2023-09-11 at 22 10 13" src="https://github.com/cockroachdb/cockroach/assets/3106437/ec6d0b81-c728-4914-ad27-9bd48f4e24fe">


111867: ui: fix transaction contention details query where clause r=xinhaoz a=xinhaoz

Change a `>=` to `=` in a where clause creation for txn details. The query where clause creation contained a bug where when filtering for a particular `waiting_txn_id`, we specify `>=` the id rather than strictly equals. This can lead to surfacing contention events for not just the txn id specified.

Epic: none

Release note (bug fix): In txn insight details, we will only surface contention details for the current txn and no others. Previously it was possible to see the contention details of other txns due to a bug.

Co-authored-by: Andrii Vorobiov <and.vorobiov@gmail.com>
Co-authored-by: Xin Hao Zhang <xzhang@cockroachlabs.com>

pkg/ui/workspaces/cluster-ui/src/api/contentionApi.ts

@@ -137,7 +137,7 @@ function getContentionWhereClause(filters?: ContentionFilters): string {
     if (whereClause !== defaultWhereClause) {
       whereClause += " and ";
     }
-    whereClause = whereClause + ` waiting_txn_id >= '${filters.waitingTxnID}' `;
+    whereClause = whereClause + ` waiting_txn_id = '${filters.waitingTxnID}' `;
   }
 
   if (filters?.start) {

pkg/ui/workspaces/cluster-ui/src/jobs/jobDetailsPage/jobDetails.tsx

@@ -191,7 +191,7 @@ export class JobDetails extends React.Component<
               label="Creation Time"
               value={
                 <Timestamp
-                  time={TimestampToMoment(job.created)}
+                  time={TimestampToMoment(job.created, null)}
                   format={DATE_WITH_SECONDS_AND_MILLISECONDS_FORMAT_24_TZ}
                 />
               }
@@ -201,7 +201,7 @@ export class JobDetails extends React.Component<
                 label="Last Modified Time"
                 value={
                   <Timestamp
-                    time={TimestampToMoment(job.modified)}
+                    time={TimestampToMoment(job.modified, null)}
                     format={DATE_WITH_SECONDS_AND_MILLISECONDS_FORMAT_24_TZ}
                   />
                 }
@@ -212,7 +212,7 @@ export class JobDetails extends React.Component<
                 label="Completed Time"
                 value={
                   <Timestamp
-                    time={TimestampToMoment(job.finished)}
+                    time={TimestampToMoment(job.finished, null)}
                     format={DATE_WITH_SECONDS_AND_MILLISECONDS_FORMAT_24_TZ}
                   />
                 }
@@ -222,7 +222,7 @@ export class JobDetails extends React.Component<
               label="Last Execution Time"
               value={
                 <Timestamp
-                  time={TimestampToMoment(job.last_run)}
+                  time={TimestampToMoment(job.last_run, null)}
                   format={DATE_WITH_SECONDS_AND_MILLISECONDS_FORMAT_24_TZ}
                 />
               }

pkg/ui/workspaces/cluster-ui/src/jobs/jobsPage/jobsTable.tsx

@@ -172,7 +172,7 @@ export function makeJobsColumns(): ColumnDescriptor<Job>[] {
       ),
       cell: job => (
         <Timestamp
-          time={TimestampToMoment(job?.created)}
+          time={TimestampToMoment(job?.created, null)}
           format={DATE_WITH_SECONDS_AND_MILLISECONDS_FORMAT}
         />
       ),
@@ -194,7 +194,7 @@ export function makeJobsColumns(): ColumnDescriptor<Job>[] {
       ),
       cell: job => (
         <Timestamp
-          time={TimestampToMoment(job?.modified)}
+          time={TimestampToMoment(job?.modified, null)}
           format={DATE_WITH_SECONDS_AND_MILLISECONDS_FORMAT}
         />
       ),
@@ -220,7 +220,7 @@ export function makeJobsColumns(): ColumnDescriptor<Job>[] {
       ),
       cell: job => (
         <Timestamp
-          time={TimestampToMoment(job?.finished)}
+          time={TimestampToMoment(job?.finished, null)}
           format={DATE_WITH_SECONDS_AND_MILLISECONDS_FORMAT}
         />
       ),
@@ -242,7 +242,7 @@ export function makeJobsColumns(): ColumnDescriptor<Job>[] {
       ),
       cell: job => (
         <Timestamp
-          time={TimestampToMoment(job?.last_run)}
+          time={TimestampToMoment(job?.last_run, null)}
           format={DATE_WITH_SECONDS_AND_MILLISECONDS_FORMAT}
         />
       ),

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

@@ -36,17 +36,21 @@ export class Duration extends React.PureComponent<{
 
     if (isRunning(job.status)) {
       const fractionCompleted = job.fraction_completed;
-      if (fractionCompleted > 0) {
-        const duration = modifiedAt.diff(startedAt);
-        const remaining = duration / fractionCompleted - duration;
-        return (
-          <span className={className}>
-            {formatDuration(moment.duration(remaining)) + " remaining"}
-          </span>
-        );
+      if (!startedAt || !modifiedAt || fractionCompleted === 0) {
+        return null;
       }
-      return null;
-    } else if (job.status === JOB_STATUS_SUCCEEDED) {
+      const duration = modifiedAt.diff(startedAt);
+      const remaining = duration / fractionCompleted - duration;
+      return (
+        <span className={className}>
+          {formatDuration(moment.duration(remaining)) + " remaining"}
+        </span>
+      );
+    } else if (
+      job.status === JOB_STATUS_SUCCEEDED &&
+      !!startedAt &&
+      !!finishedAt
+    ) {
       return (
         <span className={className}>
           {"Duration: " +