Merge #155149

155149: Revert "ui: fix statement activity timepicker for sub-hour ranges" r=kyle-a-wong a=kyle-a-wong

This reverts commit a444987.

This PR was intended to allow the sql activity timepicker to support sub 1-hour time ranges. Previously, any time range selected, whether a preset or an explicit range, always rounded to the top of the previous hour. The commit being reverted made changes to some of the components that rounded the time, but not all of them. It also introduced a new type of bug that could potentially cause the sql activity page to miss expected sql activity statistics.

Due to the latter bug that was mentioned, we are opting to revert this change as its sql stats aggregation buckets are almost always set to 1 hour and is not a public setting we advise for people to change.

Fixes: https://cockroachlabs.atlassian.net/browse/CC-33789
Epic: CC-33582
Release note: None

Co-authored-by: Kyle Wong <[email protected]>

Author: craig[bot]

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, toDateRange } from "../timeScaleDropdown";
+import { TimeScale, toRoundedDateRange } 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] = toDateRange(ts);
+  const [start, end] = toRoundedDateRange(ts);
   return { table, index, database, start, end };
 }
 

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

@@ -4,10 +4,8 @@
 // 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";
 
@@ -19,7 +17,6 @@ import {
   TimeScale,
   timeScale1hMinOptions,
   TimeScaleDropdown,
-  toDateRange,
 } from "src/timeScaleDropdown";
 
 import { applyBtn } from "../queryFilter/filterClasses";
@@ -63,11 +60,6 @@ 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[] =
@@ -127,14 +119,6 @@ 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, toDateRange } from "../timeScaleDropdown";
+import { TimeScale, toRoundedDateRange } from "../timeScaleDropdown";
 import {
   appNamesAttr,
   statementAttr,
@@ -41,10 +41,12 @@ export const selectStatementDetails = createSelector(
     lastError: Error;
     lastUpdated: moment.Moment | null;
   } => {
-    // 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);
+    // 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);
     const key = generateStmtDetailsToID(
       fingerprintID,
       appNames,

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

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

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

@@ -79,7 +79,7 @@ import {
   timeScale1hMinOptions,
   TimeScaleDropdown,
   timeScaleRangeToObj,
-  toDateRange,
+  toRoundedDateRange,
 } 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] = toDateRange(props.timeScale);
+  const [start, end] = toRoundedDateRange(props.timeScale);
   return createCombinedStmtsRequest({
     start,
     end,

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

@@ -66,7 +66,7 @@ import {
   TimeScale,
   timeScale1hMinOptions,
   getValidOption,
-  toDateRange,
+  toRoundedDateRange,
 } 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] = toDateRange(params.timeScale);
+  const [start, end] = toRoundedDateRange(params.timeScale);
   return createCombinedStmtsRequest({
     start,
     end,