ui: Statement diagnostics history - empty state

[vladlos]

Use SortableTable component instead of antd table, this change gives us oportunity to reuse realisation of empty and loading states of table on Statement diagnostics history page.
Minor updates to component props api, to avoid duplicates of window.open calls
Added storybook for SortableTable empty state.

Resolves: #46576

Release note (ui): new design of empty state of Statement diagnostics history page

[cockroach-teamcity]

This change is 

[dhartunian]

While I agree that re-using the components is generally the right thing to do, this change modifies the functionality of this page in a big way: previously the links to statement diagnostics would take the you to the statements page.

Additionally the tooltip on a "Ready" diagnostic is now confusing because it tells you to go to the details page but you can't...

Can you make the change without modifying the table itself? Let me know if that's tricky and we can discuss alternatives.

Reviewed 2 of 2 files at r1.
Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @elkmaster)

---

pkg/ui/src/views/reports/containers/statementDiagnosticsHistory/index.tsx, line 179 at r1 (raw file):

            description: "Statement diagnostics can help when troubleshooting issues with specific queries. The diagnostic bundle can be activated from individual statement pages and will include EXPLAIN plans, table statistics, and traces.",
            label: "Learn more",
            onClick: () => window.open(statementsTable),

can we change the onClick to be a link href instead? do we ever need to support a special click action?

[dhartunian]

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

---

pkg/ui/src/views/reports/containers/statementDiagnosticsHistory/index.tsx, line 179 at r1 (raw file):

Previously, dhartunian (David Hartunian) wrote…

can we change the onClick to be a link href instead? do we ever need to support a special click action?

I don't think there's a need to have there be an onClick function option at all.
Can we change the name to buttonHref or something and make it always a string? Then in the Empty component you can wrap the Button in an Anchor. Is that possible?

---

pkg/ui/src/views/reports/containers/statementDiagnosticsHistory/index.tsx, line 85 at r2 (raw file):

class StatementDiagnosticsHistoryView extends React.Component<StatementDiagnosticsHistoryViewProps, StatementDiagnosticsHistoryViewState> {
  columns: ColumnDescriptor<IStatementDiagnosticsReport>[] = [

Can we set the mouse icon to "pointer" on the column headers?

---

pkg/ui/src/views/reports/containers/statementDiagnosticsHistory/index.tsx, line 116 at r2 (raw file):

    {
      title: "Status",
      sort: record => record.completed.toString(),

Clicking on status sort breaks the page

---

pkg/ui/src/views/reports/containers/statementDiagnosticsHistory/index.tsx, line 164 at r2 (raw file):

      sortSetting: {
        sortKey: 0,
        ascending: true,

The default sort order is descending. we'd like to see the newest diagnostics at the top by default.

---

pkg/ui/src/views/reports/containers/statementDiagnosticsHistory/index.tsx, line 230 at r2 (raw file):

            description: "Statement diagnostics can help when troubleshooting issues with specific queries. The diagnostic bundle can be activated from individual statement pages and will include EXPLAIN plans, table statistics, and traces.",
            label: "Learn more",
            onClick: statementsTable,

This link should be to statementDiagnostics, not statementsTable.

[blathers-crl]

❌ The GitHub CI (Cockroach) build has failed on 42d8912e.

_{🦉 Hoot! I am a Blathers, a bot for CockroachDB. My owner is otan.}

[vladlos]

Clicking on status sort breaks the page

couldn't recreate this on, my dataset. provided fix by guess, should be retested.

onClick function option is needed, but also added buttonHref to avoid inconvenience in naming. Added ts rule to accept only one of that props at a time.

[blathers-crl]

❌ The GitHub CI (Cockroach) build has failed on 3e0f8030.

_{🦉 Hoot! I am a Blathers, a bot for CockroachDB. My owner is otan.}

[dhartunian]

@elkmaster I expected to see the empty state at https://localhost:3000/#/reports/statements/diagnosticshistory when running this. Instead I still see:

Let me know if I'm missing something.
Please add a Storybook story rendering the empty table with the empty state showing.

Additionally, please describe in the commit message, PR, and Release Notes which pages will have modified behavior and in which cases we expect the empty state to show. Clarify that the empty state provides documentation to customers.

[vladlos]

@dhartunian, sorry just a typo. Should be fixed now. Updated description and added storybook for empty table. In this visible updates will be only on Statement diagnostics history page.

[dhartunian]

@elkmaster LGTM. Thanks for making the latest round of changes. Please rebase and resolve conflicts, then merge with bors.

[vladlos]

bors r+

[craig]

Build succeeded

• GitHub CI (Cockroach)