ui: add search, filter and time picker on index details

Fixes cockroachdb#93087

This commit adds search, filters and time picker for the
list of fingerprints most used per index, on the Index
Details page.

It also limits to 20 fingerprints until we can make
improvements to use pagination on our calls with
sql-over-http.

Release note (ui change): Add search, filter and time picker
for the list of most used statement fingerprints on the
Index Details page.

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

@@ -13,6 +13,8 @@ import {
   convertStatementRawFormatToAggregatedStatistics,
   executeInternalSql,
   fetchData,
+  LARGE_RESULT_SIZE,
+  sqlApiErrorMessage,
   SqlExecutionRequest,
   sqlResultsAreEmpty,
   StatementRawFormat,
@@ -81,50 +83,54 @@ export function StatementsListRequestFromDetails(
   return { table, index, database, start, end };
 }
 
-export function getStatementsUsingIndex({
+export async function getStatementsUsingIndex({
   table,
   index,
   database,
   start,
   end,
 }: StatementsUsingIndexRequest): Promise<AggregateStatistics[]> {
   const args: any = [`"${table}@${index}"`];
-  let placeholder = 2;
   let whereClause = "";
   if (start) {
-    args.push(start);
-    whereClause = `${whereClause} AND aggregated_ts >= $${placeholder}`;
-    placeholder++;
+    whereClause = `${whereClause} AND aggregated_ts >= '${start.toISOString()}'`;
   }
   if (end) {
-    args.push(end);
-    whereClause = `${whereClause} AND aggregated_ts <= $${placeholder}`;
-    placeholder++;
+    whereClause = `${whereClause} AND aggregated_ts <= '${end.toISOString()}'`;
   }
 
   const selectStatements = {
     sql: `SELECT * FROM system.statement_statistics 
             WHERE $1::jsonb <@ indexes_usage
                 AND app_name NOT LIKE '${INTERNAL_APP_NAME_PREFIX}%' 
-                ${whereClause};`,
+                ${whereClause}
+            ORDER BY (statistics -> 'statistics' ->> 'cnt')::INT DESC
+            LIMIT 20;`,
     arguments: args,
   };
 
   const req: SqlExecutionRequest = {
     execute: true,
     statements: [selectStatements],
     database: database,
+    max_result_size: LARGE_RESULT_SIZE,
   };
 
-  return executeInternalSql<StatementRawFormat>(req).then(res => {
-    if (res.error || sqlResultsAreEmpty(res)) {
-      return [];
-    }
+  const result = await executeInternalSql<StatementRawFormat>(req);
+  if (result.error) {
+    throw new Error(
+      `Error while retrieving list of statements: ${sqlApiErrorMessage(
+        result.error.message,
+      )}`,
+    );
+  }
+  if (sqlResultsAreEmpty(result)) {
+    return [];
+  }
 
-    const statements: AggregateStatistics[] = [];
-    res.execution.txn_results[0].rows.forEach(s => {
-      statements.push(convertStatementRawFormatToAggregatedStatistics(s));
-    });
-    return statements;
+  const statements: AggregateStatistics[] = [];
+  result.execution.txn_results[0].rows.forEach(s => {
+    statements.push(convertStatementRawFormatToAggregatedStatistics(s));
   });
+  return statements;
 }

pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetails.selectors.ts

@@ -31,6 +31,7 @@ import {
 import { BreadcrumbItem } from "../breadcrumbs";
 import { RecommendationType as RecType } from "./indexDetailsPage";
 import { nodeRegionsByIDSelector } from "../store/nodes";
+import { selectTimeScale } from "src/store/utils/selectors";
 const { RecommendationType } = cockroach.sql.IndexRecommendation;
 
 export const selectIndexDetails = createSelector(
@@ -47,6 +48,7 @@ export const selectIndexDetails = createSelector(
   (state: AppState) => selectHasViewActivityRedactedRole(state),
   (state: AppState) => nodeRegionsByIDSelector(state),
   (state: AppState) => selectHasAdminRole(state),
+  (state: AppState) => selectTimeScale(state),
   (
     database,
     schema,
@@ -57,6 +59,7 @@ export const selectIndexDetails = createSelector(
     hasViewActivityRedactedRole,
     nodeRegions,
     hasAdminRole,
+    timeScale,
   ): IndexDetailsPageData => {
     const stats = indexStats[generateTableID(database, table)];
     const details = stats?.data?.statistics.filter(
@@ -89,6 +92,7 @@ export const selectIndexDetails = createSelector(
         index,
       ),
       isTenant: isTenant,
+      timeScale: timeScale,
       hasViewActivityRedactedRole: hasViewActivityRedactedRole,
       hasAdminRole: hasAdminRole,
       nodeRegions: nodeRegions,

pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsConnected.ts

@@ -17,6 +17,8 @@ import { connect } from "react-redux";
 import { actions as indexStatsActions } from "src/store/indexStats/indexStats.reducer";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 import { actions as nodesActions } from "../store/nodes";
+import { TimeScale } from "../timeScaleDropdown";
+import { actions as sqlStatsActions } from "../store/sqlStats";
 
 const mapStateToProps = (state: AppState, props: RouteComponentProps) => {
   return selectIndexDetails(state, props);
@@ -43,6 +45,13 @@ const mapDispatchToProps = (dispatch: Dispatch): IndexDetailPageActions => ({
   },
   refreshNodes: () => dispatch(nodesActions.refresh()),
   refreshUserSQLRoles: () => dispatch(uiConfigActions.refreshUserSQLRoles()),
+  onTimeScaleChange: (ts: TimeScale) => {
+    dispatch(
+      sqlStatsActions.updateTimeScale({
+        ts: ts,
+      }),
+    );
+  },
 });
 
 export const ConnectedIndexDetailsPage = withRouter<any, any>(