ui, changefeeds: better status col in db console

[dhartunian]

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.

[cockroach-teamcity]

This change is 

[shermanCRL]

I wonder if we should display the integer version of the highwater timestamp (as opposed to the friendly date) by default? Thinking of the use case that someone may wish to grab a copy of it for use elsewhere.

[HonoreDB]

I wonder if we should display the integer version of the highwater timestamp (as opposed to the friendly date) by default? Thinking of the use case that someone may wish to grab a copy of it for use elsewhere.

Both versions are definitely useful, the precise cursor for restarting feeds and the friendly date for troubleshooting. Do we have the UI pattern anywhere where we use the friendly date as alt text so you see it when you hover?

Edit: Oh, I see, you're doing the reverse. Yeah, I agree with @shermanCRL that it'd be useful to have the integer version as the default since it's easier to highlight and copy page text than a tooltip.

[HonoreDB]

Reviewed 4 of 4 files at r1, all commit messages.
Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @dhartunian)

[HonoreDB]

Thanks for doing this! Code LGTM. CI failure looks like a js dependency vendoring issue?

[dhartunian]

@shermanCRL @HonoreDB updated PR with new screenshots that use the nanosecond decimal value as primary display.

[abarganier]

The code LGTM - my only suggestion is formatting the timestamp string to drop the trailing decimals. Or is there precedent elsewhere to display unix timestamps this way?

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @dhartunian and @HonoreDB)

---

pkg/ui/workspaces/db-console/src/views/jobs/highwaterTimestamp.tsx line 20 at r3 (raw file):

interface HighwaterProps {
  timestamp: ITimestamp;
  decimalString: string;

Can we format this as 1652819391140803000 instead of 1652819391140803000.0000000000?

[dhartunian]

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @abarganier and @HonoreDB)

---

pkg/ui/workspaces/db-console/src/views/jobs/highwaterTimestamp.tsx line 20 at r3 (raw file):

Previously, abarganier (Alex Barganier) wrote…

Can we format this as 1652819391140803000 instead of 1652819391140803000.0000000000?

we could but it does show up with the dot in the SQL CLI output.

[abarganier]

Reviewable status: complete! 1 of 0 LGTMs obtained (waiting on @dhartunian and @HonoreDB)

---

pkg/ui/workspaces/db-console/src/views/jobs/highwaterTimestamp.tsx line 20 at r3 (raw file):

Previously, dhartunian (David Hartunian) wrote…

we could but it does show up with the dot in the SQL CLI output.

Gotcha - I guess best to keep things consistent then! Thanks for considering it.

[dhartunian]

@HonoreDB friendly ping, just want to confirm that the new screenshots reflect what you're expecting here.

[HonoreDB]

Reviewed 3 of 3 files at r3, all commit messages.
Reviewable status: complete! 1 of 0 LGTMs obtained (waiting on @dhartunian)

[dhartunian]

bors r=abarganier,HonoreDB

[craig]

Build succeeded:

• GitHub CI (Cockroach)