ui: changes for 22.2 release

Changes needed for 22.2 release for the max size
limit reached.
Epic: None

Release note: None

pkg/ui/workspaces/cluster-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cockroachlabs/cluster-ui",
-  "version": "22.2.4",
+  "version": "22.2.5",
   "description": "Cluster UI is a library of large features shared between CockroachDB and CockroachCloud",
   "repository": {
     "type": "git",

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

@@ -10,10 +10,13 @@
 
 import {
   executeInternalSql,
+  formatApiResult,
   INTERNAL_SQL_API_APP,
+  isMaxSizeError,
   LARGE_RESULT_SIZE,
   LONG_TIMEOUT,
   sqlApiErrorMessage,
+  SqlApiResponse,
   SqlExecutionRequest,
   SqlExecutionResponse,
   sqlResultsAreEmpty,
@@ -201,7 +204,9 @@ const makeInsightsSqlRequest = (queries: string[]): SqlExecutionRequest => ({
 });
 
 // getTransactionInsightEventState is the API function that executes the queries and returns the results.
-export async function getTransactionInsightEventState(): Promise<TransactionInsightEventsResponse> {
+export async function getTransactionInsightEventState(): Promise<
+  SqlApiResponse<TransactionInsightEventsResponse>
+> {
   // Note that any errors encountered fetching these results are caught
   // earlier in the call stack.
 
@@ -211,15 +216,20 @@ export async function getTransactionInsightEventState(): Promise<TransactionInsi
     await executeInternalSql<TransactionContentionResponseColumns>(
       makeInsightsSqlRequest([txnContentionQuery]),
     );
-  if (contentionResults.error) {
+  const maxSizeReached = isMaxSizeError(contentionResults.error?.message);
+  if (contentionResults.error && !maxSizeReached) {
     throw new Error(
       `Error while retrieving contention information: ${sqlApiErrorMessage(
         contentionResults.error.message,
       )}`,
     );
   }
   if (sqlResultsAreEmpty(contentionResults)) {
-    return [];
+    return formatApiResult(
+      [],
+      contentionResults.error,
+      "retrieving contention information",
+    );
   }
 
   // Step 2: Fetch the stmt fingerprints in the contended transactions.
@@ -236,15 +246,22 @@ export async function getTransactionInsightEventState(): Promise<TransactionInsi
         txnStmtFingerprintsQuery(Array.from(txnFingerprintIDs)),
       ]),
     );
-  if (txnStmtFingerprintResults.error) {
+  const maxSizeTxnFingerprintReached = isMaxSizeError(
+    txnStmtFingerprintResults.error?.message,
+  );
+  if (txnStmtFingerprintResults.error && !maxSizeTxnFingerprintReached) {
     throw new Error(
       `Error while retrieving statements information: ${sqlApiErrorMessage(
         txnStmtFingerprintResults.error.message,
       )}`,
     );
   }
   if (sqlResultsAreEmpty(txnStmtFingerprintResults)) {
-    return [];
+    return formatApiResult(
+      [],
+      contentionResults.error,
+      "retrieving statements information",
+    );
   }
 
   // Step 3: Get all query strings for statement fingerprints.
@@ -259,7 +276,10 @@ export async function getTransactionInsightEventState(): Promise<TransactionInsi
     await executeInternalSql<FingerprintStmtsResponseColumns>(
       fingerprintStmtsRequest,
     );
-  if (fingerprintStmtResults.error) {
+  const maxSizeStmtFingerprintReached = isMaxSizeError(
+    fingerprintStmtResults.error?.message,
+  );
+  if (fingerprintStmtResults.error && !maxSizeStmtFingerprintReached) {
     throw new Error(
       `Error while retrieving statements information: ${sqlApiErrorMessage(
         fingerprintStmtResults.error.message,
@@ -271,20 +291,27 @@ export async function getTransactionInsightEventState(): Promise<TransactionInsi
     transactionContentionResultsToEventState(contentionResults),
     txnStmtFingerprintsResultsToEventState(txnStmtFingerprintResults),
     fingerprintStmtsResultsToEventState(fingerprintStmtResults),
+    maxSizeReached ||
+      maxSizeTxnFingerprintReached ||
+      maxSizeStmtFingerprintReached,
   );
 }
 
 export function combineTransactionInsightEventState(
   txnContentionState: TransactionContentionEventsResponse,
   txnFingerprintState: TxnStmtFingerprintEventsResponse,
   fingerprintToQuery: StmtFingerprintToQueryRecord,
-): TransactionInsightEventState[] {
+  maxSizeReached: boolean,
+): SqlApiResponse<TransactionInsightEventState[]> {
   if (
     !txnContentionState.length ||
     !txnFingerprintState.length ||
     !fingerprintToQuery.size
   ) {
-    return [];
+    return {
+      maxSizeReached: maxSizeReached,
+      results: [],
+    };
   }
   const txnsWithStmtQueries = txnFingerprintState.map(txnRow => ({
     fingerprintID: txnRow.fingerprintID,
@@ -307,7 +334,10 @@ export function combineTransactionInsightEventState(
     }
   });
 
-  return res;
+  return {
+    maxSizeReached: maxSizeReached,
+    results: res,
+  };
 }
 
 // Transaction insight details.
@@ -455,7 +485,7 @@ function transactionContentionDetailsResultsToEventState(
 // getTransactionInsightEventState is the API function that executes the queries and returns the results.
 export async function getTransactionInsightEventDetailsState(
   req: TransactionInsightEventDetailsRequest,
-): Promise<TransactionInsightEventDetailsResponse> {
+): Promise<SqlApiResponse<TransactionInsightEventDetailsResponse>> {
   // Note that any errors encountered fetching these results are caught // earlier in the call stack.
   //
   // There are 3 api requests/queries in this process.
@@ -471,15 +501,20 @@ export async function getTransactionInsightEventDetailsState(
     await executeInternalSql<TxnContentionDetailsResponseColumns>(
       txnContentionDetailsRequest,
     );
-  if (contentionResults.error) {
+  const maxSizeReached = isMaxSizeError(contentionResults.error?.message);
+  if (contentionResults.error && !maxSizeReached) {
     throw new Error(
       `Error while retrieving contention information: ${sqlApiErrorMessage(
         contentionResults.error.message,
       )}`,
     );
   }
   if (sqlResultsAreEmpty(contentionResults)) {
-    return;
+    return formatApiResult(
+      [],
+      contentionResults.error,
+      "retrieving contention information",
+    );
   }
 
   // Collect all txn fingerprints involved.
@@ -504,7 +539,10 @@ export async function getTransactionInsightEventDetailsState(
     await executeInternalSql<TxnStmtFingerprintsResponseColumns>(
       makeInsightsSqlRequest([txnStmtFingerprintsQuery(txnFingerprintIDs)]),
     );
-  if (getStmtFingerprintsResponse.error) {
+  const maxSizeStmtFingerprintReached = isMaxSizeError(
+    getStmtFingerprintsResponse.error?.message,
+  );
+  if (getStmtFingerprintsResponse.error && !maxSizeStmtFingerprintReached) {
     throw new Error(
       `Error while retrieving statements information: ${sqlApiErrorMessage(
         getStmtFingerprintsResponse.error.message,
@@ -523,7 +561,10 @@ export async function getTransactionInsightEventDetailsState(
         fingerprintStmtsQuery(Array.from(stmtFingerprintIDs)),
       ]),
     );
-  if (stmtQueriesResponse.error) {
+  const maxSizeQueriesReached = isMaxSizeError(
+    stmtQueriesResponse.error?.message,
+  );
+  if (stmtQueriesResponse.error && !maxSizeQueriesReached) {
     throw new Error(
       `Error while retrieving statements information: ${sqlApiErrorMessage(
         stmtQueriesResponse.error.message,
@@ -535,20 +576,25 @@ export async function getTransactionInsightEventDetailsState(
     transactionContentionDetailsResultsToEventState(contentionResults),
     txnStmtFingerprintsResultsToEventState(getStmtFingerprintsResponse),
     fingerprintStmtsResultsToEventState(stmtQueriesResponse),
+    maxSizeReached || maxSizeStmtFingerprintReached || maxSizeQueriesReached,
   );
 }
 
 export function combineTransactionInsightEventDetailsState(
   txnContentionDetailsState: TransactionContentionEventDetailsResponse,
   txnsWithStmtFingerprints: TxnStmtFingerprintEventsResponse,
   stmtFingerprintToQuery: StmtFingerprintToQueryRecord,
-): TransactionInsightEventDetailsState {
+  maxSizeReached: boolean,
+): SqlApiResponse<TransactionInsightEventDetailsState> {
   if (
     !txnContentionDetailsState &&
     !txnsWithStmtFingerprints.length &&
     !stmtFingerprintToQuery.size
   ) {
-    return null;
+    return {
+      maxSizeReached: maxSizeReached,
+      results: null,
+    };
   }
 
   txnContentionDetailsState.blockingContentionDetails.forEach(blockedRow => {
@@ -557,7 +603,10 @@ export function combineTransactionInsightEventDetailsState(
     );
 
     if (!currBlockedFingerprintStmts) {
-      return;
+      return {
+        maxSizeReached: maxSizeReached,
+        results: null,
+      };
     }
 
     blockedRow.blockingQueries = currBlockedFingerprintStmts.queryIDs.map(
@@ -575,7 +624,10 @@ export function combineTransactionInsightEventDetailsState(
     queries: waitingTxn.queryIDs.map(id => stmtFingerprintToQuery.get(id)),
   };
 
-  return res;
+  return {
+    maxSizeReached: maxSizeReached,
+    results: res,
+  };
 }
 
 // Statements
@@ -698,7 +750,9 @@ const statementInsightsQuery: InsightQuery<
   toState: getStatementInsightsFromClusterExecutionInsightsResponse,
 };
 
-export async function getStatementInsightsApi(): Promise<StatementInsights> {
+export async function getStatementInsightsApi(): Promise<
+  SqlApiResponse<StatementInsights>
+> {
   const request: SqlExecutionRequest = {
     statements: [
       {
@@ -712,13 +766,17 @@ export async function getStatementInsightsApi(): Promise<StatementInsights> {
   const result = await executeInternalSql<ExecutionInsightsResponseRow>(
     request,
   );
-  if (result.error) {
+  const maxSizeReached = isMaxSizeError(result.error?.message);
+  if (result.error && !maxSizeReached) {
     throw new Error(
       `Error while retrieving insights information: ${sqlApiErrorMessage(
         result.error.message,
       )}`,
     );
   }
-
-  return statementInsightsQuery.toState(result);
+  return formatApiResult(
+    statementInsightsQuery.toState(result),
+    result.error,
+    "retrieving insights information",
+  );
 }

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx

@@ -74,7 +74,6 @@ function insightsTableData(
     });
 }
 
-
 export interface TransactionInsightDetailsStateProps {
   insightEventDetails: TransactionInsightEventDetailsResponse;
   insightError: Error | null;
@@ -256,8 +255,8 @@ export const TransactionInsightDetails: React.FC<
               intent="info"
               title={
                 <>
-                  Not all statements are displayed because the maximum
-                  number of statements was reached in the console.&nbsp;
+                  Not all statements are displayed because the maximum number of
+                  statements was reached in the console.&nbsp;
                   <Anchor href={insights} target="_blank">
                     Learn more
                   </Anchor>

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/util/queriesCell.tsx

@@ -21,8 +21,8 @@ export function QueriesCell(
   textLimit: number,
 ): React.ReactElement {
   if (
-    transactionQueries.length < 2 &&
-    transactionQueries[0].length < textLimit
+    transactionQueries?.length < 2 &&
+    transactionQueries[0]?.length < textLimit
   ) {
     return <div>{transactionQueries[0]}</div>;
   }

pkg/ui/workspaces/cluster-ui/src/store/insightDetails/transactionInsightDetails/transactionInsightDetails.reducer.ts

@@ -31,6 +31,7 @@ const txnInitialState: TransactionInsightDetailsState = {
   lastUpdated: null,
   lastError: null,
   valid: true,
+  maxSizeReached: false,
 };
 
 export type TransactionInsightDetailsCachedState = {
@@ -49,14 +50,17 @@ const transactionInsightDetailsSlice = createSlice({
   reducers: {
     received: (
       state,
-      action: PayloadAction<SqlApiResponse<TransactionInsightEventDetailsResponse>>,
+      action: PayloadAction<
+        SqlApiResponse<TransactionInsightEventDetailsResponse>
+      >,
     ) => {
       if (action?.payload?.results?.executionID) {
         state.cachedData[action.payload.results.executionID] = {
           data: action.payload.results,
           valid: true,
           lastError: null,
           lastUpdated: moment.utc(),
+          maxSizeReached: action.payload.maxSizeReached,
         };
       }
     },

pkg/ui/workspaces/cluster-ui/src/store/insights/statementInsights/statementInsights.reducer.ts

@@ -32,7 +32,10 @@ const statementInsightsSlice = createSlice({
   name: `${DOMAIN_NAME}/statementInsightsSlice`,
   initialState,
   reducers: {
-    received: (state, action: PayloadAction<SqlApiResponse<StatementInsights>>) => {
+    received: (
+      state,
+      action: PayloadAction<SqlApiResponse<StatementInsights>>,
+    ) => {
       state.data = action.payload;
       state.valid = true;
       state.lastError = null;

pkg/ui/workspaces/db-console/src/views/insights/insightsSelectors.ts

@@ -61,14 +61,14 @@ export const selectStmtInsightsMaxApiReached = (
   state: AdminUIState,
 ): boolean => {
   return !!state.cachedData.statementInsights?.data?.maxSizeReached;
+};
 
 export const selectTxnInsightsMaxApiReached = (
   state: AdminUIState,
 ): boolean => {
   return !!state.cachedData.transactionInsights?.data?.maxSizeReached;
 };
 
-
 export const selectTransactionInsightDetailsError = createSelector(
   (state: AdminUIState) => state.cachedData.transactionInsightDetails,
   selectID,