ui: change start and end values on stmt details charts

[maryliag]

Previously, we were using the data values to define the start and end date of charts, which could cause confusion, since users might think that is a bug of now showing data, when instead there is no data to show.
This commit forces the start and end of the chart to be the selected period, this way we always show the correct period even if we don't have data to show.

Fixes #102214

https://www.loom.com/share/3f463d82407b4ab186a5b0c1e1ab2369

Release note (ui change): On Statement Details page always show the entire selected period, instead of just the period that had data.

[cockroach-teamcity]

This change is 

[maryliag]

fyi @dt who created the issue (in case you're interested)

[koorosh]

Thanks for awesome demo of the problem and how it works now!

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

---

pkg/ui/workspaces/cluster-ui/src/graphs/bargraph/index.tsx line 35 at r1 (raw file):

  uPlotOptions: Partial<Options>;
  yAxisUnits: AxisUnits;
  graphTsStartMillis?: number;

nit. I would suggest to define single prop that ensures that either both values or nothing is provided. ie:

xScale?: {
  startMillis: number,
  endMillis: number,
}

---

pkg/ui/workspaces/cluster-ui/src/graphs/bargraph/index.tsx line 59 at r1 (raw file):

    if (!alignedData) return;

    const start = graphTsStartMillis ? graphTsStartMillis : alignedData[0][0];

I suggest that it's necessary to validate that graphTsStartMillis is less than alignedData[0][0] to make sure it doesn't trim provided datapoints.
My concern that it might cause some misunderstanding why some data is missed on a chart.
Or at least we need explicitly articulate that this props take precedence over start and end timestamps in provided timeseries.

[maryliag]

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @koorosh and @xinhaoz)

---

pkg/ui/workspaces/cluster-ui/src/graphs/bargraph/index.tsx line 35 at r1 (raw file):

Previously, koorosh (Andrii Vorobiov) wrote…

nit. I would suggest to define single prop that ensures that either both values or nothing is provided. ie:

xScale?: {
  startMillis: number,
  endMillis: number,
}

Done

---

pkg/ui/workspaces/cluster-ui/src/graphs/bargraph/index.tsx line 59 at r1 (raw file):

Previously, koorosh (Andrii Vorobiov) wrote…

I suggest that it's necessary to validate that graphTsStartMillis is less than alignedData[0][0] to make sure it doesn't trim provided datapoints.
My concern that it might cause some misunderstanding why some data is missed on a chart.
Or at least we need explicitly articulate that this props take precedence over start and end timestamps in provided timeseries.

I want the xScale to take precedent, so I added the comment on the function

[koorosh]

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

---

pkg/ui/workspaces/cluster-ui/src/graphs/bargraph/index.tsx line 59 at r1 (raw file):

Previously, maryliag (Marylia Gutierrez) wrote…

I want the xScale to take precedent, so I added the comment on the function

Great thanks!

[maryliag]

TFTRs!

bors r+

[craig]

Build failed (retrying...):

• Bazel Essential CI (Cockroach)

[craig]

Build succeeded:

• Bazel Essential CI (Cockroach)

[blathers-crl]

Encountered an error creating backports. Some common things that can go wrong:

1. The backport branch might have already existed.
2. There was a merge conflict.
3. The backport branch contained merge commits.

You might need to create your backport manually using the backport tool.

---

error creating merge commit from a251210 to blathers/backport-release-23.1-118680: POST https://api.github.com/repos/cockroachdb/cockroach/merges: 409 Merge conflict []

you may need to manually resolve merge conflicts with the backport tool.

Backport to branch 23.1.x failed. See errors above.

---

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