Skip to content

ui: modify statements and transactions pages to use the TimeScaleDropdown component#73608

Merged
craig[bot] merged 1 commit intocockroachdb:masterfrom
jocrl:statements-transactions-time-picker
Dec 13, 2021
Merged

ui: modify statements and transactions pages to use the TimeScaleDropdown component#73608
craig[bot] merged 1 commit intocockroachdb:masterfrom
jocrl:statements-transactions-time-picker

Conversation

@jocrl
Copy link
Copy Markdown
Contributor

@jocrl jocrl commented Dec 8, 2021

Resolves #70997

This commit modifies the Statements and Transactions pages in DB Console
and CC Console to use the TimeScaleDropdown component that is currently
used in the Metrics page.

Release note (ui change): The time pickers on the Statements and
Transactions pages now have the same style and functionality as the
time picker on the Metrics page.

Previously:
image

Now:
image

@cockroach-teamcity
Copy link
Copy Markdown
Member

This change is Reviewable

@jocrl jocrl requested a review from a team December 8, 2021 16:55
Copy link
Copy Markdown
Contributor Author

@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.

Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained


pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPageConnected.tsx, line 72 at r1 (raw file):

          sqlStatsActions.updateDateRange({
            start: start.unix(),
            end: end.unix(),

The prior implementation stored start and end dates in UNIX format. I am instead implicitly storing windowEnd in UTC format, due to the default serialization of moment.Moment. I only convert to UNIX (ultimately to Long) when making the request. The implicit format feels weird, but is consistent with what the Metrics page currently does for its time picker.


pkg/ui/workspaces/cluster-ui/src/store/localStorage/localStorage.reducer.ts, line 51 at r1 (raw file):

Quoted 7 lines of code…
const defaultDateRange: StatementsDateRangeState = {
  start: moment
    .utc()
    .subtract(1, "hours")
    .unix(),
  end: moment.utc().unix() + 60, // Add 1 minute to account for potential lag.
};

The prior implementation would add 1 minute into the future to the end of the time scale, to account for potential lag. This is lost with my current implementation that naively uses TimeScaleDropdown. Does anyone (@maryliag?) know if this is okay, or if should I implement this buffer (probably in TimeScaleDropdown)?


pkg/ui/workspaces/db-console/src/views/statements/statementsPage.fixture.ts, line 0 at r1 (raw file):
Deleted this fixture file because there is no story.

Copy link
Copy Markdown
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 22 of 24 files at r1, all commit messages.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @jocrl and @maryliag)


pkg/ui/workspaces/cluster-ui/src/store/localStorage/localStorage.reducer.ts, line 51 at r1 (raw file):

Previously, jocrl (Josephine) wrote…
const defaultDateRange: StatementsDateRangeState = {
  start: moment
    .utc()
    .subtract(1, "hours")
    .unix(),
  end: moment.utc().unix() + 60, // Add 1 minute to account for potential lag.
};

The prior implementation would add 1 minute into the future to the end of the time scale, to account for potential lag. This is lost with my current implementation that naively uses TimeScaleDropdown. Does anyone (@maryliag?) know if this is okay, or if should I implement this buffer (probably in TimeScaleDropdown)?

Don't need to worry about this. If we hit this again in the future we can make adjustments.


pkg/ui/workspaces/db-console/src/redux/statementsTimeScale.ts, line 20 at r1 (raw file):

  AdminUIState,
  TimeScale
>("statements_time_scale", localSettingsSelector, defaultTimeScaleSelected);

nit: can you use the same key we're using on cluster-ui? so timeScale/StatementsPage. So we can keep things aligned


pkg/ui/workspaces/db-console/src/redux/statements/statementsActions.ts, line 13 at r1 (raw file):

import { Action } from "redux";
import { PayloadAction } from "src/interfaces/action";
import { TimeScale } from "oss/src/redux/timewindow";

nit: remove the oss, start import with src/...

@jocrl jocrl force-pushed the statements-transactions-time-picker branch from c69d485 to 8a0c721 Compare December 8, 2021 20:14
@jocrl
Copy link
Copy Markdown
Contributor Author

jocrl commented Dec 8, 2021


pkg/ui/workspaces/db-console/src/redux/statements/statementsActions.ts, line 13 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

nit: remove the oss, start import with src/...

done

Copy link
Copy Markdown
Contributor Author

@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.

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


pkg/ui/workspaces/db-console/src/redux/statementsTimeScale.ts, line 20 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

nit: can you use the same key we're using on cluster-ui? so timeScale/StatementsPage. So we can keep things aligned

done

Copy link
Copy Markdown
Contributor

@Azhng Azhng left a comment

Choose a reason for hiding this comment

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

Reviewed 4 of 24 files at r1.
Reviewable status: :shipit: complete! 0 of 0 LGTMs obtained (waiting on @Azhng, @jocrl, and @maryliag)


-- commits, line 3 at r2:
nit: extra space in the commit msg ?


pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.fixture.ts, line 150 at r2 (raw file):

  timeScale: {
    windowSize: moment.duration(5, "day"),
    sampleSize: moment.duration(5, "minutes"),

Hmm is the discrepancy between the windowSize and sampleSize possible in real life scenario? I think i'm just not entirely sure whats' the difference between windowSize and sampleSize here


pkg/ui/workspaces/cluster-ui/src/store/sqlStats/sqlStats.sagas.ts, line 66 at r2 (raw file):

  const { ts } = action.payload;
  yield put(
    // TODO(azhng): do we want to rename this into dataRange/SQLActivity?

do you mind update this todo 😛

@jocrl jocrl force-pushed the statements-transactions-time-picker branch 3 times, most recently from d28899c to 14b52d8 Compare December 9, 2021 15:20
Copy link
Copy Markdown
Contributor Author

@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.

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


-- commits, line 3 at r2:

Previously, Azhng (Archer Zhang) wrote…

nit: extra space in the commit msg ?

done


pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.fixture.ts, line 150 at r2 (raw file):

Previously, Azhng (Archer Zhang) wrote…

Hmm is the discrepancy between the windowSize and sampleSize possible in real life scenario? I think i'm just not entirely sure whats' the difference between windowSize and sampleSize here

So I know windowSize is the straightforward one, it's the size of the time window.

For sampleSize, the comment string is: "The expected duration of individual samples for queries at this time scale.". I think this has to do with how fine-grained the information on the statements and transactions tables are. sampleSize is specified for all default options. In every case it's smaller than windowSize.

However, you raise a point that I'm pretty sure this isn't sent in the request. My IDE says that the only usage is here... which looks like it's just setting a floor on the sampleSize.

@xinhaoz, do you have an idea what sampleSize is for, or if the metrics page currently uses it? Or @maryliag if it's for some upcoming functionality?


pkg/ui/workspaces/cluster-ui/src/store/sqlStats/sqlStats.sagas.ts, line 66 at r2 (raw file):

Previously, Azhng (Archer Zhang) wrote…

do you mind update this todo 😛

Done, and renamed to timeScale/SQLActivity.
Any suggestions for the name when this also gets shared by the Metrics page? 😛

@jocrl
Copy link
Copy Markdown
Contributor Author

jocrl commented Dec 9, 2021


pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.fixture.ts, line 150 at r2 (raw file):

Previously, jocrl (Josephine) wrote…

So I know windowSize is the straightforward one, it's the size of the time window.

For sampleSize, the comment string is: "The expected duration of individual samples for queries at this time scale.". I think this has to do with how fine-grained the information on the statements and transactions tables are. sampleSize is specified for all default options. In every case it's smaller than windowSize.

However, you raise a point that I'm pretty sure this isn't sent in the request. My IDE says that the only usage is here... which looks like it's just setting a floor on the sampleSize.

@xinhaoz, do you have an idea what sampleSize is for, or if the metrics page currently uses it? Or @maryliag if it's for some upcoming functionality?

edit: my bad with the usage search; it's used for request in the Metrics page. It's not (at least, currently) used in the request for the Statements or Transactions pages

@jocrl
Copy link
Copy Markdown
Contributor Author

jocrl commented Dec 9, 2021


pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.fixture.ts, line 150 at r2 (raw file):

Previously, jocrl (Josephine) wrote…

edit: my bad with the usage search; it's used for request in the Metrics page. It's not (at least, currently) used in the request for the Statements or Transactions pages

double edit: it seems like using sampleSize for the Statements and Transactions pages is part of my next task for aggregated stats 🙂

Copy link
Copy Markdown
Contributor

@Azhng Azhng left a comment

Choose a reason for hiding this comment

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

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


pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.fixture.ts, line 150 at r2 (raw file):

Previously, jocrl (Josephine) wrote…

double edit: it seems like using sampleSize for the Statements and Transactions pages is part of my next task for aggregated stats 🙂

Interesting, seems like it's used by the tsDB to represent the granularity of each sample point. Though I think it might be slightly difficult to adapt this for Statement / Transaction Page, since we don't have the aggregating capability in the backend yet. IIRC we do most of our aggregation in the frontend for now.


pkg/ui/workspaces/cluster-ui/src/store/sqlStats/sqlStats.sagas.ts, line 66 at r2 (raw file):

Previously, jocrl (Josephine) wrote…

Done, and renamed to timeScale/SQLActivity.
Any suggestions for the name when this also gets shared by the Metrics page? 😛

Hmm good question, timeScale/Global or timeScale/Observability ?

@jocrl jocrl force-pushed the statements-transactions-time-picker branch from 14b52d8 to 82f2673 Compare December 9, 2021 20:51
Copy link
Copy Markdown
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.

:lgtm:

Reviewed 2 of 2 files at r2, 4 of 4 files at r3, 2 of 2 files at r4, all commit messages.
Reviewable status: :shipit: complete! 1 of 0 LGTMs obtained (waiting on @Azhng and @xinhaoz)


pkg/ui/workspaces/cluster-ui/src/store/sqlStats/sqlStats.sagas.ts, line 66 at r2 (raw file):

Previously, Azhng (Archer Zhang) wrote…

Hmm good question, timeScale/Global or timeScale/Observability ?

I think we can still keep as timeScale/SQLActivity for that case, because the metrics there are also SQL Activity related

TimeScaleDropdown component

Resolves cockroachdb#70997

This commit modifies the Statements and Transactions pages in DB Console
and CC Console to use the TimeScaleDropdown component that is currently
used in the Metrics page.

Release note (ui change): The time pickers on the Statements and
Transactions pages now have the same style and functionality as the
time picker on the Metrics page.
@jocrl jocrl force-pushed the statements-transactions-time-picker branch from 82f2673 to 9b25303 Compare December 13, 2021 14:49
Copy link
Copy Markdown

@matthewtodd matthewtodd left a comment

Choose a reason for hiding this comment

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

:lgtm: 🎉

Reviewed 17 of 24 files at r1, 1 of 2 files at r2, 4 of 4 files at r3, 2 of 2 files at r4, 5 of 5 files at r5, all commit messages.
Reviewable status: :shipit: complete! 1 of 0 LGTMs obtained (and 1 stale) (waiting on @Azhng and @xinhaoz)

@jocrl
Copy link
Copy Markdown
Contributor Author

jocrl commented Dec 13, 2021

TFTRs!
bors r+

@craig
Copy link
Copy Markdown
Contributor

craig bot commented Dec 13, 2021

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

Development

Successfully merging this pull request may close these issues.

UX updates to statement/transaction time picker and 'Clear SQL stats' button

5 participants