ui: add a sessions page

[jordanlewis]

This PR adds two new pages:

1. Active Sessions, a table of all active sessions in the database.
2. Session Details, a page with information about a single active
   session.

In addition, active sessions and queries are now terminatable from the
Active Sessions page.

Release note (admin ui change): add the session list and session detail
pages, and permit session and query termination from the UI.

Release justification: low risk, high benefit change to admin ui

Closes #52193.

Screenshots:

[cockroach-teamcity]

This change is 

[awoods187]

This is amazing! I'm really excited we are tracking this information in the WebUI now.

[jordanlewis]

Here's a short video of the page in action: https://youtu.be/xPAtTGchPfo

[jordanlewis]

Actions menu:

Details page (the button location and colors need help, will need the CSS 🚁 later :)

[jordanlewis]

Okay, this is ready for a review!

[dhartunian]

Thanks for putting this up @jordanlewis. My comments are mostly small nits. Nothing blocking except maybe the question re: pagination.

Reviewed 4 of 4 files at r1, 11 of 11 files at r2, 25 of 27 files at r3.
Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @dhartunian, @jordanlewis, @nathanstilwell, and @solongordon)

---

pkg/ui/src/redux/sessions/sessionsSagas.tsx, line 76 at r3 (raw file):

}

export function* terminateQuerySaga(action: PayloadAction<ICancelQueryRequest>) {

I still don't fully "get" how redux-saga works but I do like how this code reads! Really clear what's intended.

---

pkg/ui/src/views/sessions/sessionsPage.tsx, line 62 at r3 (raw file):

        ascending: false,
      },
      pagination: {

I'm unable to glean from the code where the pagination is being applied to the data in the table...am I missing something?

---

pkg/ui/src/views/sessions/sessionsPage.tsx, line 160 at r3 (raw file):

              label: "Learn more",
              // TODO(jordan): point this to a more appropriate page.
              buttonHref: "https://www.cockroachlabs.com/docs/stable/show-sessions.html",

See pkg/ui/src/util/docs.ts for docs link examples. We can generate the base of the docs URL there.

---

pkg/ui/src/views/sessions/terminateSessionModal.tsx, line 26 at r3 (raw file):

// tslint:disable-next-line:variable-name
const TerminateSessionModal = (props: TerminateSessionModalProps, ref: React.RefObject<TerminateSessionModalRef>) => {

This whole pattern is a bit rough to read second time around. Thanks for lifting it from the diagnostics modal for now. I can't help but feel like there's a simplification that's possible here

cc @nathanstilwell, the diagnostics modal stuff was built quite quickly so I'm sure the modal pattern it implements could use a second look. Feels weird to be using these "refs" but maybe it's a valid pattern. Not sure how CC does it.

---

pkg/ui/src/views/statements/statementsTableContent.tsx, line 228 at r3 (raw file):

// StatementLinkTarget returns the link to the relevant statement page, given
// the input statement details.
export const StatementLinkTarget = (props: StatementLinkProps) => {

Thanks for improving this component!

[dhartunian]

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @jordanlewis, @nathanstilwell, and @solongordon)

---

pkg/ui/src/views/sessions/sessionDetails.tsx, line 133 at r4 (raw file):

          <div>
            <Link className={cx("back-link")} to={ "/sessions" }>
              Back to Statements

should say Sessions here?

[jordanlewis]

TFTR!

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @dhartunian, @jordanlewis, @nathanstilwell, and @solongordon)

---

pkg/ui/src/redux/sessions/sessionsSagas.tsx, line 76 at r3 (raw file):

Previously, dhartunian (David Hartunian) wrote…

I still don't fully "get" how redux-saga works but I do like how this code reads! Really clear what's intended.

You and me both!

---

pkg/ui/src/views/sessions/sessionDetails.tsx, line 133 at r4 (raw file):

Previously, dhartunian (David Hartunian) wrote…

should say Sessions here?

Nice catch, fixed.

---

pkg/ui/src/views/sessions/sessionsPage.tsx, line 62 at r3 (raw file):

Previously, dhartunian (David Hartunian) wrote…

I'm unable to glean from the code where the pagination is being applied to the data in the table...am I missing something?

No, I just failed at cargo culting :) Thank you for noticing, I added the remaining plumbing.

---

pkg/ui/src/views/sessions/sessionsPage.tsx, line 160 at r3 (raw file):

Previously, dhartunian (David Hartunian) wrote…

See pkg/ui/src/util/docs.ts for docs link examples. We can generate the base of the docs URL there.

Done.

---

pkg/ui/src/views/sessions/terminateSessionModal.tsx, line 26 at r3 (raw file):

Previously, dhartunian (David Hartunian) wrote…

This whole pattern is a bit rough to read second time around. Thanks for lifting it from the diagnostics modal for now. I can't help but feel like there's a simplification that's possible here

cc @nathanstilwell, the diagnostics modal stuff was built quite quickly so I'm sure the modal pattern it implements could use a second look. Feels weird to be using these "refs" but maybe it's a valid pattern. Not sure how CC does it.

Yes, these refs are definitely interesting. I thought this is how one manages state. See the way I implemented the per-row actions popovers for a more interesting example - it definitely feels like a pattern, but an odd one.

[jordanlewis]

Latest revision uses UUID format for the links, includes session ID in the session page, freezes the session page from updates, and fixes the remote debugging issues.

[yuzefovich]

Just a drive-by comment (based on the dilemma Jordan posed in his stream): re: should the webpage of a session reload itself when that session exits or should the webpage be frozen until the user initiates the reload? Not sure if it was considered, but maybe a good alternative would be to add a pop-up warning that says something like "the session has finished, click reload" to reload the page and have a button or something. (Sorry If the sessions page already does something like this.)

Never mind, this was suggested later in the video.

[jordanlewis]

Done.

[solongordon]

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

[solongordon]

By the way, I don't want this to block merging but it seems unideal that if you don't have CANCELQUERY permissions, trying to cancel a query or a session gives you a generic error when you click the link. Would be nicer to either not show the link or explain that you don't have the right privileges.

Same goes for if a non-admin tries to cancel an admin query/session.

I'd say let's just open an issue to track it.

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

[jordanlewis]

Thanks! That piece of feedback is already in the acceptance testing doc as it turns out: https://docs.google.com/document/d/1obahPF5wH_GbScPFtA3VUz-UjgqR7IRMCKRuT0JFen8/edit# I'll merge this now and make issues next.

bors r+

[craig]

Build failed:

• GitHub CI (Cockroach)

[jordanlewis]

bors r+

[jordanlewis]

bors r-

[craig]

Canceled.

[jordanlewis]

bors r+

[craig]

Build failed:

• GitHub CI (Cockroach)

[jordanlewis]

bors r+

🤞

[craig]

Build succeeded:

• GitHub CI (Cockroach)