ui: update sort setting on search criteria

Fixes cockroachdb#99397
When a new search criteria is applying, the table on Statement
and Transactions are sorted to match the value selected by the
search criteria.
When a new column is selected on the table, a warning is displayed
to let the users know they're looking into a subset od the data.
If the new column selected is one of the options on the search
criteria, we give a suggestion to update the search criteria with
that value instead.

This commit adds the counter per page on the Statement
and Transaction tables.

This commit also adds analytics to the apply button,
sending the information about each criteria.

Release note (ui change): Add a warning when a user select a sorting
column on Statement and Transaction tables that were not the original
selected sorting on the search criteria.

pkg/ui/workspaces/cluster-ui/src/insights/schemaInsights/schemaInsightsView.tsx

@@ -136,7 +136,7 @@ export const SchemaInsightsView: React.FC<SchemaInsightsViewProps> = ({
     // redux changes and syncs the URL params with redux.
     syncHistory(
       {
-        ascending: sortSetting.ascending.toString(),
+        ascending: sortSetting.ascending?.toString(),
         columnTitle: sortSetting.columnTitle,
         ...getFullFiltersAsStringRecord(filters),
         [SCHEMA_INSIGHT_SEARCH_PARAM]: search,

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.fixture.ts

@@ -621,6 +621,7 @@ const statementsPagePropsFixture: StatementsPageProps = {
   onFilterChange: noop,
   onChangeLimit: noop,
   onChangeReqSort: noop,
+  onApplySearchCriteria: noop,
 };
 
 export const statementsPagePropsWithRequestError: StatementsPageProps = {

pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss

@@ -56,6 +56,10 @@ cl-table-container {
   margin-bottom: 0px;
 }
 
+.margin-bottom {
+  margin-bottom: 10px;
+}
+
 .root {
   flex-grow: 0;
   width: 100%;

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

@@ -21,7 +21,7 @@ import {
   updateSortSettingQueryParamsOnTab,
 } from "src/sortedtable";
 import { Search } from "src/search";
-import { Pagination } from "src/pagination";
+import { Pagination, ResultsPerPageLabel } from "src/pagination";
 import {
   calculateActiveFilters,
   defaultFilters,
@@ -59,6 +59,7 @@ import {
   SqlStatsSortType,
   StatementsRequest,
   createCombinedStmtsRequest,
+  SqlStatsSortOptions,
 } from "src/api/statementsApi";
 import ClearStats from "../sqlActivity/clearStats";
 import LoadingError from "../sqlActivity/errorComponent";
@@ -83,8 +84,9 @@ import {
   STATS_LONG_LOADING_DURATION,
   stmtRequestSortOptions,
   getSortLabel,
+  getSortColumn,
+  getSubsetWarning,
 } from "src/util/sqlActivityConstants";
-import { Button } from "src/button";
 import { SearchCriteria } from "src/searchCriteria/searchCriteria";
 import timeScaleStyles from "../timeScaleDropdown/timeScale.module.scss";
 
@@ -125,6 +127,7 @@ export interface StatementsPageDispatchProps {
   onTimeScaleChange: (ts: TimeScale) => void;
   onChangeLimit: (limit: number) => void;
   onChangeReqSort: (sort: SqlStatsSortType) => void;
+  onApplySearchCriteria: (ts: TimeScale, limit: number, sort: string) => void;
 }
 export interface StatementsPageStateProps {
   statements: AggregateStatistics[];
@@ -275,6 +278,13 @@ export class StatementsPage extends React.Component<
     }
   };
 
+  isSortSettingSameAsReqSort = (): boolean => {
+    return (
+      getSortColumn(this.state.reqSortSetting) ==
+      this.props.sortSetting.columnTitle
+    );
+  };
+
   changeTimeScale = (ts: TimeScale): void => {
     this.setState(prevState => ({
       ...prevState,
@@ -283,10 +293,30 @@ export class StatementsPage extends React.Component<
   };
 
   updateRequestParams = (): void => {
-    this.props.onChangeLimit(this.state.limit);
-    this.props.onChangeReqSort(this.state.reqSortSetting);
-    this.props.onTimeScaleChange(this.state.timeScale);
+    if (this.props.limit !== this.state.limit) {
+      this.props.onChangeLimit(this.state.limit);
+    }
+
+    if (this.props.reqSortSetting !== this.state.reqSortSetting) {
+      this.props.onChangeReqSort(this.state.reqSortSetting);
+    }
+
+    if (this.props.timeScale !== this.state.timeScale) {
+      this.props.onTimeScaleChange(this.state.timeScale);
+    }
+    if (this.props.onApplySearchCriteria) {
+      this.props.onApplySearchCriteria(
+        this.state.timeScale,
+        this.state.limit,
+        getSortLabel(this.state.reqSortSetting),
+      );
+    }
     this.refreshStatements();
+    const ss: SortSetting = {
+      ascending: false,
+      columnTitle: getSortColumn(this.state.reqSortSetting),
+    };
+    this.changeSortSetting(ss);
   };
 
   resetPagination = (): void => {
@@ -478,6 +508,16 @@ export class StatementsPage extends React.Component<
     this.setState(prevState => ({ ...prevState, reqSortSetting: newSort }));
   };
 
+  hasReqSortOption = (): boolean => {
+    let found = false;
+    Object.values(SqlStatsSortOptions).forEach((option: SqlStatsSortType) => {
+      if (getSortColumn(option) == this.props.sortSetting.columnTitle) {
+        found = true;
+      }
+    });
+    return found;
+  };
+
   renderStatements = (): React.ReactElement => {
     const { pagination, filters, activeFilters } = this.state;
     const {
@@ -598,6 +638,12 @@ export class StatementsPage extends React.Component<
               <p className={timeScaleStylesCx("time-label")}>
                 Showing aggregated stats from{" "}
                 <span className={timeScaleStylesCx("bold")}>{period}</span>
+                {", "}
+                <ResultsPerPageLabel
+                  pagination={{ ...pagination, total: data.length }}
+                  pageName={"Statements"}
+                  search={search}
+                />
               </p>
             </PageConfigItem>
             {hasAdminRole && (
@@ -620,6 +666,19 @@ export class StatementsPage extends React.Component<
             onRemoveFilter={this.onSubmitFilters}
             onClearFilters={this.onClearFilters}
           />
+          {!this.isSortSettingSameAsReqSort() && (
+            <InlineAlert
+              intent="warning"
+              title={getSubsetWarning(
+                "statement",
+                this.props.limit,
+                sortSettingLabel,
+                this.hasReqSortOption(),
+                this.props.sortSetting.columnTitle as StatisticTableColumnKeys,
+              )}
+              className={cx("margin-bottom")}
+            />
+          )}
           <StatementsSortedTable
             className="statements-table"
             data={data}

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

@@ -258,6 +258,16 @@ export const ConnectedStatementsPage = withRouter(
           dispatch(updateStmtsPageLimitAction(limit)),
         onChangeReqSort: (sort: SqlStatsSortType) =>
           dispatch(updateStmsPageReqSortAction(sort)),
+        onApplySearchCriteria: (ts: TimeScale, limit: number, sort: string) =>
+          dispatch(
+            analyticsActions.track({
+              name: "Apply Search Criteria",
+              page: "Statements",
+              tsValue: ts.key,
+              limitValue: limit,
+              sortValue: sort,
+            }),
+          ),
       },
       activePageProps: mapDispatchToRecentStatementsPageProps(dispatch),
     }),

pkg/ui/workspaces/cluster-ui/src/store/analytics/analytics.reducer.ts

@@ -26,6 +26,14 @@ type Page =
   | "Workload Insights - Statement"
   | "Workload Insights - Transaction";
 
+type ApplySearchCriteriaEvent = {
+  name: "Apply Search Criteria";
+  page: Page;
+  tsValue: string;
+  limitValue: number;
+  sortValue: string;
+};
+
 type BackButtonClick = {
   name: "Back Clicked";
   page: Page;
@@ -102,6 +110,7 @@ type TimeScaleChangeEvent = {
 };
 
 type AnalyticsEvent =
+  | ApplySearchCriteriaEvent
   | BackButtonClick
   | ColumnsChangeEvent
   | FilterEvent

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

@@ -24,7 +24,7 @@ import {
   SortSetting,
   updateSortSettingQueryParamsOnTab,
 } from "../sortedtable";
-import { Pagination } from "../pagination";
+import { Pagination, ResultsPerPageLabel } from "../pagination";
 import { statisticsClasses } from "./transactionsPageClasses";
 import {
   aggregateAcrossNodeIDs,
@@ -54,6 +54,7 @@ import {
   SqlStatsSortType,
   createCombinedStmtsRequest,
   StatementsRequest,
+  SqlStatsSortOptions,
 } from "src/api/statementsApi";
 import ColumnsSelector from "../columnsSelector/columnsSelector";
 import { SelectOption } from "../multiSelectCheckbox/multiSelectCheckbox";
@@ -79,8 +80,9 @@ import {
   STATS_LONG_LOADING_DURATION,
   txnRequestSortOptions,
   getSortLabel,
+  getSortColumn,
+  getSubsetWarning,
 } from "src/util/sqlActivityConstants";
-import { Button } from "src/button";
 import { SearchCriteria } from "src/searchCriteria/searchCriteria";
 import timeScaleStyles from "../timeScaleDropdown/timeScale.module.scss";
 
@@ -131,6 +133,7 @@ export interface TransactionsPageDispatchProps {
     columnTitle: string,
     ascending: boolean,
   ) => void;
+  onApplySearchCriteria: (ts: TimeScale, limit: number, sort: string) => void;
 }
 
 export type TransactionsPageProps = TransactionsPageStateProps &
@@ -289,6 +292,13 @@ export class TransactionsPage extends React.Component<
     }
   };
 
+  isSortSettingSameAsReqSort = (): boolean => {
+    return (
+      getSortColumn(this.state.reqSortSetting) ==
+      this.props.sortSetting.columnTitle
+    );
+  };
+
   onChangePage = (current: number): void => {
     const { pagination } = this.state;
     this.setState({ pagination: { ...pagination, current } });
@@ -391,10 +401,41 @@ export class TransactionsPage extends React.Component<
   };
 
   updateRequestParams = (): void => {
-    this.props.onChangeLimit(this.state.limit);
-    this.props.onChangeReqSort(this.state.reqSortSetting);
-    this.props.onTimeScaleChange(this.state.timeScale);
+    if (this.props.limit !== this.state.limit) {
+      this.props.onChangeLimit(this.state.limit);
+    }
+
+    if (this.props.reqSortSetting !== this.state.reqSortSetting) {
+      this.props.onChangeReqSort(this.state.reqSortSetting);
+    }
+
+    if (this.props.timeScale !== this.state.timeScale) {
+      this.props.onTimeScaleChange(this.state.timeScale);
+    }
+
+    if (this.props.onApplySearchCriteria) {
+      this.props.onApplySearchCriteria(
+        this.state.timeScale,
+        this.state.limit,
+        getSortLabel(this.state.reqSortSetting),
+      );
+    }
     this.refreshData();
+    const ss: SortSetting = {
+      ascending: false,
+      columnTitle: getSortColumn(this.state.reqSortSetting),
+    };
+    this.onChangeSortSetting(ss);
+  };
+
+  hasReqSortOption = (): boolean => {
+    let found = false;
+    Object.values(SqlStatsSortOptions).forEach((option: SqlStatsSortType) => {
+      if (getSortColumn(option) == this.props.sortSetting.columnTitle) {
+        found = true;
+      }
+    });
+    return found;
   };
 
   renderTransactions(): React.ReactElement {
@@ -488,6 +529,7 @@ export class TransactionsPage extends React.Component<
 
     const period = timeScaleToString(this.props.timeScale);
     const sortSettingLabel = getSortLabel(this.props.reqSortSetting);
+
     return (
       <>
         <h5 className={`${commonStyles("base-heading")} ${cx("margin-top")}`}>
@@ -527,6 +569,15 @@ export class TransactionsPage extends React.Component<
               <p className={timeScaleStylesCx("time-label")}>
                 Showing aggregated stats from{" "}
                 <span className={timeScaleStylesCx("bold")}>{period}</span>
+                {", "}
+                <ResultsPerPageLabel
+                  pagination={{
+                    ...pagination,
+                    total: transactionsToDisplay.length,
+                  }}
+                  pageName={"Statements"}
+                  search={search}
+                />
               </p>
             </PageConfigItem>
             {hasAdminRole && (
@@ -549,6 +600,19 @@ export class TransactionsPage extends React.Component<
             onRemoveFilter={this.onSubmitFilters}
             onClearFilters={this.onClearFilters}
           />
+          {!this.isSortSettingSameAsReqSort() && (
+            <InlineAlert
+              intent="warning"
+              title={getSubsetWarning(
+                "transaction",
+                this.props.limit,
+                sortSettingLabel,
+                this.hasReqSortOption(),
+                this.props.sortSetting.columnTitle as StatisticTableColumnKeys,
+              )}
+              className={cx("margin-bottom")}
+            />
+          )}
           <TransactionsTable
             columns={displayColumns}
             transactions={transactionsToDisplay}

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

@@ -171,6 +171,16 @@ export const TransactionsPageConnected = withRouter(
           dispatch(updateTxnsPageLimitAction(limit)),
         onChangeReqSort: (sort: SqlStatsSortType) =>
           dispatch(updateTxnsPageReqSortAction(sort)),
+        onApplySearchCriteria: (ts: TimeScale, limit: number, sort: string) =>
+          dispatch(
+            analyticsActions.track({
+              name: "Apply Search Criteria",
+              page: "Transactions",
+              tsValue: ts.key,
+              limitValue: limit,
+              sortValue: sort,
+            }),
+          ),
       },
       activePageProps: mapDispatchToRecentTransactionsPageProps(dispatch),
     }),