Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: Add column selector and filter to sessions page #75965

Merged
merged 1 commit into from Feb 22, 2022

Conversation

gtr
Copy link
Contributor

@gtr gtr commented Feb 3, 2022

Closes #73463

Previously, the sessions page was missing the column selector and filter
components that the stmts and txns page have. This change adds both
components in addition to new columns in the sessions overview page and
edits to the sessions details page.

Release note (ui change): added column selector, filters, new columns to
the sessions page and sessions details.

Screenshots:

Sessions overview page:
sessions-overview-page

Sessions overview page with column selector:
sessions-overview-page-column-selector

Sessions overview page with results from column selector:
sessions-overview-page-column-selector-results

Sessions overview page with filter:
sessions-overview-page-filter

Sessions overview page with results from filter:
sessions-overview-page-filter-results

Sessions detail page:
Screen Shot 2022-02-11 at 4 33 14 PM

@cockroach-teamcity
Copy link
Member

This change is Reviewable

@gtr gtr requested review from a team, maryliag, xinhaoz and kevin-v-ngo and removed request for maryliag February 3, 2022 17:59
@gtr
Copy link
Contributor Author

gtr commented Feb 3, 2022

@kevin-v-ngo A few things in the sessions details page can't be implemented until we fix #67888. This includes details for the "most recent transaction" and "most recent statement" sections since we don't currently store information about non-active queries.

Copy link
Contributor

@ericharmeling ericharmeling left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 1 of 11 files at r1.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr, @kevin-v-ngo, @maryliag, and @xinhaoz)


pkg/ui/workspaces/cluster-ui/src/icon/circleFilled.tsx, line 21 at r1 (raw file):

  const { fill, className } = props;
  return (
    <svg height={10} width={20} className={className} {...props}>

I think the height and width and fill can all be specified in the class definition (e.g., sessionPage.module.scss file) and then passed to the component via the className.

I'm doing it like this in a .module.scss file:

.bool-setting-icon {

  &__enabled {
    fill: $colors--success;
    margin-right: 8px;
    height: 8px;
    width: 8px;
  }

  &__disabled {
    fill: $colors--disabled;
    margin-right: 8px;
    height: 8px;
    width: 8px;
  }
}

and then in the parent component:

<CircleFilled className={cx("bool-setting-icon__enabled")} />

@kevin-v-ngo
Copy link

@kevin-v-ngo A few things in the sessions details page can't be implemented until we fix #67888. This includes details for the "most recent transaction" and "most recent statement" sections since we don't currently store information about non-active queries.

Thanks. What's the "last_active_query" column in crdb_internal.cluster_sessions?

Copy link
Contributor

@maryliag maryliag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From the screenshot both column selector and filter are not in the right location, with the correct spacing, etc

Reviewed 1 of 11 files at r1.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr, @kevin-v-ngo, and @xinhaoz)


pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx, line 328 at r1 (raw file):

    const appNames = getSessionAppFilterOptions(sessionsData);
    const nodes = isTenant

we are not really filtering anything based on nodes, so all mentions of nodes and tenants can be removed


pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTableContent.tsx, line 26 at r1 (raw file):

      content={"The timestamp at which the session started."}
    >
      Session Start Time (UTC)

since you created the label on sessionsColumnLabels you can use that here, so is one source of truth

Code quote (from pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx):

sessionsColumnLabels

Copy link

@kevin-v-ngo kevin-v-ngo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the "last_active_query" column in crdb_internal.cluster_sessions? I thought that was the most recent query which we can add to the UI.

From the screenshot, the spacing seems a bit off. Adding @Annebirzin for another set of eyes.

@gtr
Copy link
Contributor Author

gtr commented Feb 4, 2022

From the screenshot both column selector and filter are not in the right location, with the correct spacing, etc

Reviewed 1 of 11 files at r1.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr, @kevin-v-ngo, and @xinhaoz)

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx, line 328 at r1 (raw file):

    const appNames = getSessionAppFilterOptions(sessionsData);
    const nodes = isTenant

we are not really filtering anything based on nodes, so all mentions of nodes and tenants can be removed

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTableContent.tsx, line 26 at r1 (raw file):

      content={"The timestamp at which the session started."}
    >
      Session Start Time (UTC)

since you created the label on sessionsColumnLabels you can use that here, so is one source of truth

Code quote (from pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx):

sessionsColumnLabels

done, good catches! 👍🏽

@gtr
Copy link
Contributor Author

gtr commented Feb 4, 2022

What's the "last_active_query" column in crdb_internal.cluster_sessions? I thought that was the most recent query which we can add to the UI.

From the screenshot, the spacing seems a bit off. Adding @Annebirzin for another set of eyes.

It is! But it only actually stores the string of the query, not any other information such as the start time.

Copy link
Contributor

@maryliag maryliag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From the images looks like your filter count is showing how many results there are and not how many filters where selected. The value should be how many filters where selected

Reviewed 1 of 11 files at r1, 2 of 9 files at r2.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr, @maryliag, and @xinhaoz)


-- commits, line 8 at r2:
nit: add which issue this is fixing

@Annebirzin
Copy link

Annebirzin commented Feb 4, 2022

Thanks @gtr! A couple of notes and questions:

Session Overview

  • For the Filter button, the text looks off-center inside the button, and the arrow icon looks very small. Can we match the alignment/styling of other Filter buttons on Statements and Transactions?
  • The 1-20 of 35 results pagination label looks vertically misaligned. Can we center align this vertically with the column selector button?

Session Detail

  • Update the Statement header above the Statement SQL box to Most Recent Statement
  • Fix the spacing of the 'View Statement Details' link at the bottom of the page (add padding above the link)
  • Use our core blue color for links on this page: Info-blue #0055FF (Applies to Gateway node and View statement detail links)
  • @kevin-v-ngo should we also update the Transaction header to Most Recent Transaction and add the Transaction SQL box? Or is that for a future update?

@kevin-v-ngo
Copy link

Thanks @gtr! A couple of notes and questions:

Session Overview

  • For the Filter button, the text looks off-center inside the button, and the arrow icon looks very small. Can we match the alignment/styling of other Filter buttons on Statements and Transactions?
  • The 1-20 of 35 results pagination label looks vertically misaligned. Can we center align this vertically with the column selector button?

Session Detail

  • Update the Statement header above the Statement SQL box to Most Recent Statement
  • Fix the spacing of the 'View Statement Details' link at the bottom of the page (add padding above the link)
  • Use our core blue color for links on this page: Info-blue #0055FF (Applies to Gateway node and View statement detail links)
  • @kevin-v-ngo should we also update the Transaction header to Most Recent Transaction and add the Transaction SQL box? Or is that for a future update?

It should be consistent with statement - "Most Recent Transaction". @gtr, any reason why we don't have the SQL for the most recent transaction? For active Sessions, we should have it correct? I'm not sure for idle Sessions.

@gtr gtr force-pushed the gtr-sessions-page branch 3 times, most recently from 53f7902 to 6767522 Compare February 7, 2022 19:56
@gtr
Copy link
Contributor Author

gtr commented Feb 7, 2022

Thanks @gtr! A couple of notes and questions:
Session Overview

  • For the Filter button, the text looks off-center inside the button, and the arrow icon looks very small. Can we match the alignment/styling of other Filter buttons on Statements and Transactions?
  • The 1-20 of 35 results pagination label looks vertically misaligned. Can we center align this vertically with the column selector button?

Session Detail

  • Update the Statement header above the Statement SQL box to Most Recent Statement
  • Fix the spacing of the 'View Statement Details' link at the bottom of the page (add padding above the link)
  • Use our core blue color for links on this page: Info-blue #0055FF (Applies to Gateway node and View statement detail links)
  • @kevin-v-ngo should we also update the Transaction header to Most Recent Transaction and add the Transaction SQL box? Or is that for a future update?

It should be consistent with statement - "Most Recent Transaction". @gtr, any reason why we don't have the SQL for the most recent transaction? For active Sessions, we should have it correct? I'm not sure for idle Sessions.

The way the sessions details page is currently written, the cockroach.server.serverpb.ITxnInfo transaction type doesn't contain the SQL text but it should be available for active sessions correct. I couldn't get it to work for this current change but I'm working on it right now.

@gtr
Copy link
Contributor Author

gtr commented Feb 7, 2022

Thanks @gtr! A couple of notes and questions:

Session Overview

  • For the Filter button, the text looks off-center inside the button, and the arrow icon looks very small. Can we match the alignment/styling of other Filter buttons on Statements and Transactions?
  • The 1-20 of 35 results pagination label looks vertically misaligned. Can we center align this vertically with the column selector button?

Session Detail

  • Update the Statement header above the Statement SQL box to Most Recent Statement
  • Fix the spacing of the 'View Statement Details' link at the bottom of the page (add padding above the link)
  • Use our core blue color for links on this page: Info-blue #0055FF (Applies to Gateway node and View statement detail links)
  • @kevin-v-ngo should we also update the Transaction header to Most Recent Transaction and add the Transaction SQL box? Or is that for a future update?

Thank you! Done 👍🏽

@gtr gtr marked this pull request as ready for review February 7, 2022 21:46
@gtr gtr force-pushed the gtr-sessions-page branch 2 times, most recently from a7a0ecf to 29071a7 Compare February 7, 2022 22:57
@kevin-v-ngo
Copy link

Hi @gtr , i've added to the following task to track the missing "Most recent transaction" information.

Copy link
Contributor

@maryliag maryliag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is looking great!
One thing: the session start time and actions columns should not be "selectable", meaning, they should always be displayed. We have a flag for alwaysShow that you can use on that column (e.g.

)

Reviewed 2 of 9 files at r2, 1 of 4 files at r3.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr, @maryliag, and @xinhaoz)


pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx, line 233 at r4 (raw file):

        timeUnit: filters.timeUnit,
        regions: filters.regions,
        nodes: filters.nodes,

nit: you don't need regions and nodes here


pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx, line 256 at r4 (raw file):

        timeUnit: undefined,
        regions: undefined,
        nodes: undefined,

you don't need regions and nodes here


pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx, line 275 at r4 (raw file):

    }
    const activeFilters = calculateActiveFilters(filters);
    const internalAppNamePrefix = "$ internal";

this value should come from the props, we don't want to set here, in case it changes


pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPageConnected.tsx, line 124 at r4 (raw file):

          action: "Terminate Statement",
        }),
      onFilterChange: (value: Filters) => {

make sure you're also testing this on CC Console


pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx, line 266 at r4 (raw file):

        }
      >
        Statements Run

nit: use the getLabel here too


pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx, line 277 at r4 (raw file):

        content={"The duration of the open transaction, if there is one."}
      >
        Transaction Duration

nit: use the getLabel here too


pkg/ui/workspaces/db-console/src/views/sessions/sessionsPage.tsx, line 30 at r4 (raw file):

  terminateSessionAction,
} from "src/redux/sessions/sessionsSagas";
import { nodeRegionsByIDSelector } from "oss/src/redux/nodes";

nit: you don't need nodes on this page


pkg/ui/workspaces/db-console/src/views/sessions/sessionsPage.tsx, line 73 at r4 (raw file):

      columns: sessionColumnsLocalSetting.selectorToArray(state),
      filters: filtersLocalSetting.selector(state),
      nodeRegions: nodeRegionsByIDSelector(state),

nit: you don't need nodes on this page


pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPageConnected.stories.tsx, line 28 at r4 (raw file):

  Store,
} from "redux";
import { SessionsPageConnected } from "./sessionsPageConnected";

why this removal? Don't we want to test this page?


pkg/ui/workspaces/cluster-ui/src/sessions/sessionPage.module.scss, line 20 at r4 (raw file):

.sessions-filter {
  font-size: 14px;

use the variable $font-size--medium instead of the direct value here


pkg/ui/workspaces/cluster-ui/src/sessions/sessionPage.module.scss, line 21 at r4 (raw file):

.sessions-filter {
  font-size: 14px;
  margin-bottom: 10px;

use $spacing-smaller instead


pkg/ui/workspaces/cluster-ui/src/sessions/sessionPage.module.scss, line 25 at r4 (raw file):

.session-column-selector {
  margin-bottom: 10px;

use $spacing-smaller

@gtr gtr force-pushed the gtr-sessions-page branch 3 times, most recently from 9a8520a to d5ed064 Compare February 10, 2022 20:51
Copy link
Contributor

@maryliag maryliag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed 1 of 9 files at r2, 1 of 4 files at r3, 7 of 9 files at r5.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr, @maryliag, and @xinhaoz)


-- commits, line 8 at r2:

Previously, maryliag (Marylia Gutierrez) wrote…

nit: add which issue this is fixing

you added to the PR description, but not here :)

@gtr gtr force-pushed the gtr-sessions-page branch 2 times, most recently from 263b2f2 to 84f7236 Compare February 11, 2022 21:24
@gtr
Copy link
Contributor Author

gtr commented Feb 11, 2022

Yay, great stuff! Just a few nits.

Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr, @maryliag, and @xinhaoz)

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx, line 262 at r4 (raw file):

  };

  filteredSessionsData = (): {

nit: please verb-ify this and other function names that currently look like nouns. s/filteredSessionsData/getFilteredSessionsData

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx, line 294 at r4 (raw file):

            (showInternal && isInternal(s)) ||
            s.session.application_name === filters.app ||
            apps.includes(s.session.application_name)

nit: Is it just me, or are these two lines redundant? If the apps are getting string split above, let's just work with the split version.

Suggestion:

            s.session.application_name === filters.app ||
            apps.includes(s.session.application_name)

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx, line 335 at r4 (raw file):

    const isColumnSelected = (c: ColumnDescriptor<SessionInfo>) => {
      return (
        ((userSelectedColumnsToShow === null ||

nit: perhaps simplify this chunk by generally checking if values are truthy?

(!userSelectedColumnsToShow && c.showByDefault) ||
(userSelectedColumnsToShow && userSelectedColumnsToShow.includes(c.name)) ||
c.alwaysShow

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx, line 147 at r4 (raw file):

  onTerminateStatementClick?: () => void,
): ColumnDescriptor<SessionInfo>[] {
  const statType = "session";

nit: an explicit type annotation here would be nice, to make it easier to understand what other possible values are s/statType/statType: StatisticType

pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx, line 117 at r4 (raw file):

// StatisticType is used to modify the content of the tooltip.
export const statisticsTableTitles: StatisticTableTitleType = {
  sessionStart: () => {

nit: Please verb-ify these functions. I'd also suggest naming them to indicate that they are returning components, e.g. s/sessionStart/getSessionStartComponent

Code quote:

sessionStart

Done! :)

this is looking great! One thing: the session start time and actions columns should not be "selectable", meaning, they should always be displayed. We have a flag for alwaysShow that you can use on that column (e.g.

)

Reviewed 2 of 9 files at r2, 1 of 4 files at r3.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr, @maryliag, and @xinhaoz)

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx, line 233 at r4 (raw file):

        timeUnit: filters.timeUnit,
        regions: filters.regions,
        nodes: filters.nodes,

nit: you don't need regions and nodes here

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx, line 256 at r4 (raw file):

        timeUnit: undefined,
        regions: undefined,
        nodes: undefined,

you don't need regions and nodes here

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx, line 275 at r4 (raw file):

    }
    const activeFilters = calculateActiveFilters(filters);
    const internalAppNamePrefix = "$ internal";

this value should come from the props, we don't want to set here, in case it changes

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPageConnected.tsx, line 124 at r4 (raw file):

          action: "Terminate Statement",
        }),
      onFilterChange: (value: Filters) => {

make sure you're also testing this on CC Console

pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx, line 266 at r4 (raw file):

        }
      >
        Statements Run

nit: use the getLabel here too

pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx, line 277 at r4 (raw file):

        content={"The duration of the open transaction, if there is one."}
      >
        Transaction Duration

nit: use the getLabel here too

pkg/ui/workspaces/db-console/src/views/sessions/sessionsPage.tsx, line 30 at r4 (raw file):

  terminateSessionAction,
} from "src/redux/sessions/sessionsSagas";
import { nodeRegionsByIDSelector } from "oss/src/redux/nodes";

nit: you don't need nodes on this page

pkg/ui/workspaces/db-console/src/views/sessions/sessionsPage.tsx, line 73 at r4 (raw file):

      columns: sessionColumnsLocalSetting.selectorToArray(state),
      filters: filtersLocalSetting.selector(state),
      nodeRegions: nodeRegionsByIDSelector(state),

nit: you don't need nodes on this page

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPageConnected.stories.tsx, line 28 at r4 (raw file):

  Store,
} from "redux";
import { SessionsPageConnected } from "./sessionsPageConnected";

why this removal? Don't we want to test this page?

pkg/ui/workspaces/cluster-ui/src/sessions/sessionPage.module.scss, line 20 at r4 (raw file):

.sessions-filter {
  font-size: 14px;

use the variable $font-size--medium instead of the direct value here

pkg/ui/workspaces/cluster-ui/src/sessions/sessionPage.module.scss, line 21 at r4 (raw file):

.sessions-filter {
  font-size: 14px;
  margin-bottom: 10px;

use $spacing-smaller instead

pkg/ui/workspaces/cluster-ui/src/sessions/sessionPage.module.scss, line 25 at r4 (raw file):

.session-column-selector {
  margin-bottom: 10px;

use $spacing-smaller

Apologies for the delay; was waiting for #76307 to merge. Done!

@gtr
Copy link
Contributor Author

gtr commented Feb 11, 2022

Updated the screenshots to reflect:

  • Updated column case
  • New "Session Duration" label on filter
  • Fixed width of 1200px for sessions details
  • Updated font for "Most Recent Statement" row

Copy link
Contributor

@jocrl jocrl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Nits look good to me; I'll leave the stamp to Marylia 🙂

Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr, @maryliag, and @xinhaoz)


pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx, line 117 at r4 (raw file):

Previously, gtr (Gerardo Torres Castro) wrote…
// StatisticType is used to modify the content of the tooltip.
export const statisticsTableTitles: StatisticTableTitleType = {
  sessionStart: () => {

nit: Please verb-ify these functions. I'd also suggest naming them to indicate that they are returning components, e.g. s/sessionStart/getSessionStartComponent

Code quote:

sessionStart

Done! :)

this is looking great! One thing: the session start time and actions columns should not be "selectable", meaning, they should always be displayed. We have a flag for alwaysShow that you can use on that column (e.g.

)

Reviewed 2 of 9 files at r2, 1 of 4 files at r3.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr, @maryliag, and @xinhaoz)

Not sure why the comment reply formatting is weird, but just following up that we chatted offline about not changing sessionStart because of the type definition on the key of StatisticTableTitleType

Copy link
Contributor

@maryliag maryliag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I want to make sure this is working on CC Console before I can give the approval :)

Reviewed 5 of 5 files at r6, all commit messages.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @gtr, @maryliag, and @xinhaoz)

@gtr gtr force-pushed the gtr-sessions-page branch 3 times, most recently from 6432877 to 9f665d0 Compare February 18, 2022 21:53
@gtr
Copy link
Contributor Author

gtr commented Feb 18, 2022

Video of the sessions page tested on CC Console:

sessions-page-cc.mov

Copy link
Contributor

@maryliag maryliag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome!
There is just one check that I would have like to see on the video: select a filter, change page, come back, the filter must be selected
(no need to create another video, just make sure that this behaviour works as expected :D )

:lgtm:

Reviewed 1 of 11 files at r1, 2 of 2 files at r7, 3 of 3 files at r8, all commit messages.
Reviewable status: :shipit: complete! 1 of 0 LGTMs obtained (waiting on @gtr, @maryliag, and @xinhaoz)

…ession overview page

Closes [cockroachdb#73463](https://cockroachlabs.atlassian.net/browse/CRDB-11600)
Previously, the sessions page was missing the column selector and filter
components that the stmts and txns page have. This change adds both
components in addition to new columns in the sessions overview page and
edits to the sessions details page.

Release note (ui change): added column selector, filters, new columns to
the sessions page and sessions details.
@gtr
Copy link
Contributor Author

gtr commented Feb 22, 2022

bors r+

@gtr gtr closed this Feb 22, 2022
@craig
Copy link
Contributor

craig bot commented Feb 22, 2022

Already running a review

@gtr gtr reopened this Feb 22, 2022
@gtr
Copy link
Contributor Author

gtr commented Feb 22, 2022

bors r+

@craig
Copy link
Contributor

craig bot commented Feb 22, 2022

Build failed:

@gtr
Copy link
Contributor Author

gtr commented Feb 22, 2022

bors retry

@craig
Copy link
Contributor

craig bot commented Feb 22, 2022

Build succeeded:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
7 participants