Merge #97486 #97642 #97662

97486: ui: fix jobs page error state r=xinhaoz a=xinhaoz

Previously, the error state for the jobs page was
only displayed if there were previously jobs
returned. We should show the api error even when
we have never received a successful jobs payload
(e.g. error on first request). This commit changes 
error displaying in the jobs page  such that we will 
show the request error  regardless of whether or 
not we have previously received data. If we have 
previous data when we receive an unsuccessful request 
response, we will show the error along with the existing data.

Epic: none

Release note (bug fix): Jobs page properly shows error state when we receive an error during data fetching.

97642: sqlstats: increase default value for deleted rows r=maryliag a=maryliag

During the sql stats compaction job, we limit the amount of rows being deleted per transaction. We used a default value of 1024, but we have been increasinly seeing customer needing to increase this value to allow the job to keep up with the large amount of data being flushed.
We have been recommening a value for 20k, so being more conservative with the default (plus the changes on #97123 that won't let tables get in a state with so many rows), this commit changes the value to 10k.

Fixes #97528

Release note (sql change): Increase the default value of `sql.stats.cleanup.rows_to_delete_per_txn` to 10k, to increase efficiency of the cleanup job for sql statistics.

97662: ui: show recent executions even without lock information r=maryliag a=maryliag

Previously, if the call to retrieve contention/lock information returned a max size limit error, we were not displaying any data on the recent executions.
Now we show the data returned with a warning that cluster locks information might be missing.

Part Of #96184

<img width="1133" alt="Screenshot 2023-02-24 at 6 25 39 PM" src="https://user-images.githubusercontent.com/1017486/221320673-65a8f2eb-e7e3-4f27-b911-4111e8dc6728.png">


Release note (ui change): Still show active execution information when there is a max size limit error.

Co-authored-by: Xin Hao Zhang <[email protected]>
Co-authored-by: maryliag <[email protected]>

pkg/sql/sqlstats/persistedsqlstats/cluster_settings.go

@@ -126,6 +126,6 @@ var CompactionJobRowsToDeletePerTxn = settings.RegisterIntSetting(
 	settings.TenantWritable,
 	"sql.stats.cleanup.rows_to_delete_per_txn",
 	"number of rows the compaction job deletes from system table per iteration",
-	1024,
+	10000,
 	settings.NonNegativeInt,
 )

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

@@ -14,6 +14,9 @@ import {
   LONG_TIMEOUT,
   SqlExecutionRequest,
   sqlResultsAreEmpty,
+  LARGE_RESULT_SIZE,
+  SqlApiResponse,
+  formatApiResult,
 } from "./sqlApi";
 
 export type ClusterLockState = {
@@ -48,7 +51,9 @@ type ClusterLockColumns = {
  * getClusterLocksState returns information from crdb_internal.cluster_locks
  * regarding the state of range locks in the cluster.
  */
-export function getClusterLocksState(): Promise<ClusterLocksResponse> {
+export function getClusterLocksState(): Promise<
+  SqlApiResponse<ClusterLocksResponse>
+> {
   const request: SqlExecutionRequest = {
     statements: [
       {
@@ -71,12 +76,16 @@ WHERE
     ],
     execute: true,
     timeout: LONG_TIMEOUT,
+    max_result_size: LARGE_RESULT_SIZE,
   };
 
   return executeInternalSql<ClusterLockColumns>(request).then(result => {
     if (sqlResultsAreEmpty(result)) {
-      // No data.
-      return [];
+      return formatApiResult(
+        [],
+        result.error,
+        "retrieving cluster locks information",
+      );
     }
 
     const locks: Record<string, ClusterLockState> = {};
@@ -117,6 +126,10 @@ WHERE
       }
     });
 
-    return Object.values(locks);
+    return formatApiResult(
+      Object.values(locks),
+      result.error,
+      "retrieving luster locks information",
+    );
   });
 }

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

@@ -12,9 +12,10 @@ import {
   executeInternalSql,
   LARGE_RESULT_SIZE,
   LONG_TIMEOUT,
-  sqlApiErrorMessage,
+  SqlApiResponse,
   SqlExecutionRequest,
   sqlResultsAreEmpty,
+  formatApiResult,
 } from "./sqlApi";
 import { ContentionDetails } from "src/insights";
 import moment from "moment";
@@ -44,7 +45,7 @@ export type ContentionResponseColumns = {
 
 export async function getContentionDetailsApi(
   filters?: ContentionFilters,
-): Promise<ContentionDetails[]> {
+): Promise<SqlApiResponse<ContentionDetails[]>> {
   const request: SqlExecutionRequest = {
     statements: [
       {
@@ -57,16 +58,13 @@ export async function getContentionDetailsApi(
   };
 
   const result = await executeInternalSql<ContentionResponseColumns>(request);
-  if (result.error) {
-    throw new Error(
-      `Error while retrieving insights information: ${sqlApiErrorMessage(
-        result.error.message,
-      )}`,
-    );
-  }
 
   if (sqlResultsAreEmpty(result)) {
-    return [];
+    return formatApiResult(
+      [],
+      result.error,
+      "retrieving contention information",
+    );
   }
 
   const contentionDetails: ContentionDetails[] = [];
@@ -96,7 +94,11 @@ export async function getContentionDetailsApi(
     });
   });
 
-  return contentionDetails;
+  return formatApiResult(
+    contentionDetails,
+    result.error,
+    "retrieving insights information",
+  );
 }
 
 function isFiltered(filters: ContentionFilters): boolean {

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

@@ -180,12 +180,14 @@ async function addStmtContentionInfoApi(
       continue;
     }
 
-    event.contentionEvents = await getContentionDetailsApi({
+    const contentionResults = await getContentionDetailsApi({
       waitingTxnID: null,
       waitingStmtID: event.statementExecutionID,
       start: null,
       end: null,
     });
+
+    event.contentionEvents = contentionResults.results;
   }
 }
 

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

@@ -170,12 +170,13 @@ export async function getTxnInsightsContentionDetailsApi(
 
   // Get contention results for requested transaction.
 
-  const contentionResults = await getContentionDetailsApi({
+  const contentionResponse = await getContentionDetailsApi({
     waitingTxnID: req.txnExecutionID,
     waitingStmtID: null,
     start: null,
     end: null,
   });
+  const contentionResults = contentionResponse.results;
 
   if (contentionResults.length === 0) {
     return;

pkg/ui/workspaces/cluster-ui/src/jobs/jobsPage/jobsPage.tsx

@@ -243,7 +243,6 @@ export class JobsPage extends React.Component<JobsPageProps, PageState> {
       onColumnsChange,
     } = this.props;
     const isLoading = reqInFlight && (!isDataValid || !jobs);
-    const error = jobs && jobsError;
     const { pagination } = this.state;
     const filteredJobs = jobs?.jobs ?? [];
     const columns = makeJobsColumns();
@@ -300,7 +299,14 @@ export class JobsPage extends React.Component<JobsPageProps, PageState> {
           </PageConfig>
         </div>
         <div className={cx("table-area")}>
-          <Loading loading={isLoading} page={"jobs"} error={error}>
+          {jobsError && jobs && (
+            <InlineAlert intent="danger" title={jobsError.message} />
+          )}
+          <Loading
+            loading={isLoading}
+            page={"jobs"}
+            error={!jobs ? jobsError : null}
+          >
             <div>
               <section className={sortableTableCx("cl-table-container")}>
                 <div className={sortableTableCx("cl-table-statistic")}>
@@ -350,7 +356,7 @@ export class JobsPage extends React.Component<JobsPageProps, PageState> {
               />
             </div>
           </Loading>
-          {isLoading && !error && (
+          {isLoading && !jobsError && (
             <Delayed delay={moment.duration(2, "s")}>
               <InlineAlert
                 intent="info"

pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx

@@ -113,7 +113,7 @@ export function getFullFiltersAsStringRecord(
       filterKey in partialFilters &&
       partialFilters[filterKey] !== inactiveFiltersState[filterKey]
     ) {
-      filters[filterKey] = partialFilters[filterKey].toString();
+      filters[filterKey] = partialFilters[filterKey]?.toString();
       return;
     }
     filters[filterKey] = null;

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

@@ -30,7 +30,10 @@ import {
 const selectSessions = (state: AppState) => state.adminUI.sessions?.data;
 
 const selectClusterLocks = (state: AppState) =>
-  state.adminUI.clusterLocks?.data;
+  state.adminUI.clusterLocks?.data?.results;
+
+export const selectClusterLocksMaxApiSizeReached = (state: AppState) =>
+  !!state.adminUI.clusterLocks?.data?.maxSizeReached;
 
 export const selectRecentExecutions = createSelector(
   selectSessions,

pkg/ui/workspaces/cluster-ui/src/statementsPage/recentStatementsPage.selectors.ts

@@ -21,6 +21,7 @@ import {
   selectRecentStatements,
   selectAppName,
   selectExecutionStatus,
+  selectClusterLocksMaxApiSizeReached,
 } from "src/selectors/recentExecutions.selectors";
 import { actions as localStorageActions } from "src/store/localStorage";
 import { actions as sessionsActions } from "src/store/sessions";
@@ -58,6 +59,7 @@ export const mapStateToRecentStatementsPageProps = (
   executionStatus: selectExecutionStatus(),
   internalAppNamePrefix: selectAppName(state),
   isTenant: selectIsTenant(state),
+  maxSizeApiReached: selectClusterLocksMaxApiSizeReached(state),
 });
 
 export const mapDispatchToRecentStatementsPageProps = (

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

@@ -30,12 +30,13 @@ import {
   calculateActiveFilters,
   defaultFilters,
   getFullFiltersAsStringRecord,
-} from "../queryFilter/filter";
+} from "../queryFilter";
 import { RecentStatementsSection } from "../recentExecutions/recentStatementsSection";
 import { queryByName, syncHistory } from "src/util/query";
 import { getTableSortFromURL } from "../sortedtable/getTableSortFromURL";
 import { getRecentStatementFiltersFromURL } from "src/queryFilter/utils";
 import { Pagination } from "src/pagination";
+import { InlineAlert } from "@cockroachlabs/ui-components";
 
 import styles from "./statementsPage.module.scss";
 
@@ -58,6 +59,7 @@ export type RecentStatementsViewStateProps = {
   executionStatus: string[];
   internalAppNamePrefix: string;
   isTenant?: boolean;
+  maxSizeApiReached?: boolean;
 };
 
 export type RecentStatementsViewProps = RecentStatementsViewStateProps &
@@ -76,6 +78,7 @@ export const RecentStatementsView: React.FC<RecentStatementsViewProps> = ({
   executionStatus,
   internalAppNamePrefix,
   isTenant,
+  maxSizeApiReached,
 }: RecentStatementsViewProps) => {
   const [pagination, setPagination] = useState<ISortedTablePagination>({
     current: 1,
@@ -231,6 +234,17 @@ export const RecentStatementsView: React.FC<RecentStatementsViewProps> = ({
             total={filteredStatements?.length}
             onChange={onChangePage}
           />
+          {maxSizeApiReached && (
+            <InlineAlert
+              intent="info"
+              title={
+                <>
+                  Not all contention events are displayed because the maximum
+                  number of contention events was reached in the console.
+                </>
+              }
+            />
+          )}
         </Loading>
       </div>
     </div>

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

@@ -10,10 +10,10 @@
 
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { DOMAIN_NAME, noopReducer } from "../utils";
-import { ClusterLocksResponse } from "src/api";
+import { ClusterLocksResponse, SqlApiResponse } from "src/api";
 
 export type ClusterLocksReqState = {
-  data: ClusterLocksResponse;
+  data: SqlApiResponse<ClusterLocksResponse>;
   lastError: Error;
   valid: boolean;
 };
@@ -28,7 +28,10 @@ const clusterLocksSlice = createSlice({
   name: `${DOMAIN_NAME}/clusterLocks`,
   initialState,
   reducers: {
-    received: (state, action: PayloadAction<ClusterLocksResponse>) => {
+    received: (
+      state,
+      action: PayloadAction<SqlApiResponse<ClusterLocksResponse>>,
+    ) => {
       state.data = action.payload;
       state.valid = true;
       state.lastError = null;

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

@@ -21,6 +21,7 @@ import {
   selectAppName,
   selectRecentTransactions,
   selectExecutionStatus,
+  selectClusterLocksMaxApiSizeReached,
 } from "src/selectors/recentExecutions.selectors";
 import { actions as localStorageActions } from "src/store/localStorage";
 import { actions as sessionsActions } from "src/store/sessions";
@@ -58,6 +59,7 @@ export const mapStateToRecentTransactionsPageProps = (
   executionStatus: selectExecutionStatus(),
   internalAppNamePrefix: selectAppName(state),
   isTenant: selectIsTenant(state),
+  maxSizeApiReached: selectClusterLocksMaxApiSizeReached(state),
 });
 
 export const mapDispatchToRecentTransactionsPageProps = (

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

@@ -28,9 +28,9 @@ import {
   calculateActiveFilters,
   Filter,
   getFullFiltersAsStringRecord,
-} from "../queryFilter/filter";
+  inactiveFiltersState,
+} from "../queryFilter";
 import { getAppsFromRecentExecutions } from "../recentExecutions/recentStatementUtils";
-import { inactiveFiltersState } from "../queryFilter/filter";
 import { RecentTransactionsSection } from "src/recentExecutions/recentTransactionsSection";
 import { Pagination } from "src/pagination";
 
@@ -39,6 +39,7 @@ import { queryByName, syncHistory } from "src/util/query";
 import { getTableSortFromURL } from "src/sortedtable/getTableSortFromURL";
 import { getRecentTransactionFiltersFromURL } from "src/queryFilter/utils";
 import { filterRecentTransactions } from "../recentExecutions/recentStatementUtils";
+import { InlineAlert } from "@cockroachlabs/ui-components";
 const cx = classNames.bind(styles);
 
 export type RecentTransactionsViewDispatchProps = {
@@ -57,6 +58,7 @@ export type RecentTransactionsViewStateProps = {
   sortSetting: SortSetting;
   internalAppNamePrefix: string;
   isTenant?: boolean;
+  maxSizeApiReached?: boolean;
 };
 
 export type RecentTransactionsViewProps = RecentTransactionsViewStateProps &
@@ -78,6 +80,7 @@ export const RecentTransactionsView: React.FC<RecentTransactionsViewProps> = ({
   filters,
   executionStatus,
   internalAppNamePrefix,
+  maxSizeApiReached,
 }: RecentTransactionsViewProps) => {
   const [pagination, setPagination] = useState<ISortedTablePagination>({
     current: 1,
@@ -234,6 +237,17 @@ export const RecentTransactionsView: React.FC<RecentTransactionsViewProps> = ({
             total={filteredTransactions?.length}
             onChange={onChangePage}
           />
+          {maxSizeApiReached && (
+            <InlineAlert
+              intent="info"
+              title={
+                <>
+                  Not all contention events are displayed because the maximum
+                  number of contention events was reached in the console.
+                </>
+              }
+            />
+          )}
         </Loading>
       </div>
     </div>

pkg/ui/workspaces/db-console/src/redux/apiReducers.ts

@@ -558,7 +558,9 @@ export interface APIReducersState {
   statementDiagnosticsReports: CachedDataReducerState<clusterUiApi.StatementDiagnosticsResponse>;
   userSQLRoles: CachedDataReducerState<api.UserSQLRolesResponseMessage>;
   hotRanges: PaginatedCachedDataReducerState<api.HotRangesV2ResponseMessage>;
-  clusterLocks: CachedDataReducerState<clusterUiApi.ClusterLocksResponse>;
+  clusterLocks: CachedDataReducerState<
+    clusterUiApi.SqlApiResponse<clusterUiApi.ClusterLocksResponse>
+  >;
   stmtInsights: CachedDataReducerState<
     clusterUiApi.SqlApiResponse<StmtInsightEvent[]>
   >;

pkg/ui/workspaces/db-console/src/selectors/recentExecutionsSelectors.ts

@@ -25,7 +25,13 @@ import { SessionsResponseMessage } from "src/util/api";
 const selectSessions = (state: AdminUIState) => state.cachedData.sessions?.data;
 
 const selectClusterLocks = (state: AdminUIState) =>
-  state.cachedData.clusterLocks?.data;
+  state.cachedData.clusterLocks?.data?.results;
+
+export const selectClusterLocksMaxApiSizeReached = (
+  state: AdminUIState,
+): boolean => {
+  return !!state.cachedData.clusterLocks?.data?.maxSizeReached;
+};
 
 export const selectRecentExecutions = createSelector(
   selectSessions,