ui: fix statement activity timepicker for sub-hour ranges

This commit fixes a bug where the statement activity time picker
wasn't working correctly with time ranges less than an hour when
sql.stats.aggregation.interval is set to values smaller than 1h.

The issue was that API calls were using toRoundedDateRange() which
rounds timestamps to hour boundaries instead of toDateRange() which
uses the exact selected time range. This prevented sub-hour time
ranges from working properly even when the aggregation interval
supported them.

Changed the following components to use toDateRange():
- StatementsPage
- TransactionsPage
- TransactionDetails
- StatementDetails selectors
- IndexDetails API

Fixes #145430

Epic: None
Release note (bug fix): Fixed statement activity page time picker
to work correctly with time ranges less than an hour when
sql.stats.aggregation.interval is configured to sub-hour values.
Previously, selecting a 10-minute window would query for a full
hour of data instead of the precise selected range.

Author: angles-n-daemons

pkg/ui/workspaces/cluster-ui/src/api/indexDetailsApi.ts

@@ -20,7 +20,7 @@ import {
 
 import { INTERNAL_APP_NAME_PREFIX } from "../activeExecutions/activeStatementUtils";
 import { AggregateStatistics } from "../statementsTable";
-import { TimeScale, toRoundedDateRange } from "../timeScaleDropdown";
+import { TimeScale, toDateRange } from "../timeScaleDropdown";
 
 export type TableIndexStatsRequest =
   cockroach.server.serverpb.TableIndexStatsRequest;
@@ -77,7 +77,7 @@ export function StatementsListRequestFromDetails(
   ts: TimeScale,
 ): StatementsUsingIndexRequest {
   if (ts === null) return { table, index, database };
-  const [start, end] = toRoundedDateRange(ts);
+  const [start, end] = toDateRange(ts);
   return { table, index, database, start, end };
 }
 

pkg/ui/workspaces/cluster-ui/src/searchCriteria/searchCriteria.tsx

@@ -4,8 +4,10 @@
 // included in the /LICENSE file.
 
 import { CaretDown } from "@cockroachlabs/icons";
+import { InlineAlert } from "@cockroachlabs/ui-components";
 import { Menu, Dropdown } from "antd";
 import classNames from "classnames/bind";
+import moment from "moment-timezone";
 import { MenuClickEventHandler } from "rc-menu/es/interface";
 import React from "react";
 
@@ -17,6 +19,7 @@ import {
   TimeScale,
   timeScale1hMinOptions,
   TimeScaleDropdown,
+  toDateRange,
 } from "src/timeScaleDropdown";
 
 import { applyBtn } from "../queryFilter/filterClasses";
@@ -60,6 +63,11 @@ export function SearchCriteria(props: SearchCriteriaProps): React.ReactElement {
     onChangeBy,
     onChangeTimeScale,
   } = props;
+
+  // Check if selected time range is less than 1 hour
+  const [start, end] = toDateRange(currentScale);
+  const duration = moment.duration(end.diff(start));
+  const isSubHourRange = duration.asHours() < 1;
   const sortOptions: SortOption[] =
     searchType === "Statement" ? stmtRequestSortOptions : txnRequestSortOptions;
   const sortMoreOptions: SortOption[] =
@@ -119,6 +127,14 @@ export function SearchCriteria(props: SearchCriteriaProps): React.ReactElement {
   return (
     <div className={cx("search-area")}>
       <h5 className={commonStyles("base-heading")}>Search Criteria</h5>
+      {isSubHourRange && (
+        <div style={{ marginBottom: "16px" }}>
+          <InlineAlert
+            intent="warning"
+            title="Sub-hour time range selected: Statement statistics are aggregated hourly by default. You may not see data for time ranges less than 1 hour if the aggregation interval has not elapsed yet. Adjust the sql.stats.aggregation.interval cluster setting if you need finer granularity."
+          />
+        </div>
+      )}
       <PageConfig className={cx("top-area")}>
         <PageConfigItem>
           <label>

pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.selectors.ts

@@ -11,7 +11,7 @@ import { RouteComponentProps } from "react-router-dom";
 
 import { AppState } from "../store";
 import { selectTimeScale } from "../store/utils/selectors";
-import { TimeScale, toRoundedDateRange } from "../timeScaleDropdown";
+import { TimeScale, toDateRange } from "../timeScaleDropdown";
 import {
   appNamesAttr,
   statementAttr,
@@ -41,12 +41,10 @@ export const selectStatementDetails = createSelector(
     lastError: Error;
     lastUpdated: moment.Moment | null;
   } => {
-    // Since the aggregation interval is 1h, we want to round the selected timeScale to include
-    // the full hour. If a timeScale is between 14:32 - 15:17 we want to search for values
-    // between 14:00 - 16:00. We don't encourage the aggregation interval to be modified, but
-    // in case that changes in the future we might consider changing this function to use the
-    // cluster settings value for the rounding function.
-    const [start, end] = toRoundedDateRange(timeScale);
+    // Use the exact time range selected by the user, not rounded to hour boundaries.
+    // This allows for more granular time ranges when sql.stats.aggregation.interval
+    // is set to a value smaller than 1 hour.
+    const [start, end] = toDateRange(timeScale);
     const key = generateStmtDetailsToID(
       fingerprintID,
       appNames,

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx

@@ -88,7 +88,7 @@ import {
   getValidOption,
   TimeScale,
   timeScale1hMinOptions,
-  toRoundedDateRange,
+  toDateRange,
 } from "../timeScaleDropdown";
 import timeScaleStyles from "../timeScaleDropdown/timeScale.module.scss";
 
@@ -175,7 +175,7 @@ type RequestParams = Pick<
 >;
 
 function stmtsRequestFromParams(params: RequestParams): StatementsRequest {
-  const [start, end] = toRoundedDateRange(params.timeScale);
+  const [start, end] = toDateRange(params.timeScale);
   return createCombinedStmtsRequest({
     start,
     end,

pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx

@@ -79,7 +79,7 @@ import {
   timeScale1hMinOptions,
   TimeScaleDropdown,
   timeScaleRangeToObj,
-  toRoundedDateRange,
+  toDateRange,
 } from "../timeScaleDropdown";
 import timeScaleStyles from "../timeScaleDropdown/timeScale.module.scss";
 import { baseHeadingClasses } from "../transactionsPage/transactionsPageClasses";
@@ -143,7 +143,7 @@ interface TState {
 function statementsRequestFromProps(
   props: TransactionDetailsProps,
 ): StatementsRequest {
-  const [start, end] = toRoundedDateRange(props.timeScale);
+  const [start, end] = toDateRange(props.timeScale);
   return createCombinedStmtsRequest({
     start,
     end,

pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx

@@ -66,7 +66,7 @@ import {
   TimeScale,
   timeScale1hMinOptions,
   getValidOption,
-  toRoundedDateRange,
+  toDateRange,
 } from "../timeScaleDropdown";
 import timeScaleStyles from "../timeScaleDropdown/timeScale.module.scss";
 import {
@@ -140,7 +140,7 @@ export type TransactionsPageProps = TransactionsPageStateProps &
 type RequestParams = Pick<TState, "timeScale" | "limit" | "reqSortSetting">;
 
 function stmtsRequestFromParams(params: RequestParams): StatementsRequest {
-  const [start, end] = toRoundedDateRange(params.timeScale);
+  const [start, end] = toDateRange(params.timeScale);
   return createCombinedStmtsRequest({
     start,
     end,