release-23.1: ui: update sort setting on 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),
     }),