ui: move latestQuery, latestFormattedQuery from redux to local state

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

@@ -784,8 +784,6 @@ export const getStatementDetailsPropsFixture = (
     key: "Custom",
   },
   statementFingerprintID: "4705782015019656142",
-  latestQuery: "SELECT * FROM crdb_internal.node_build_info",
-  latestFormattedQuery: "SELECT * FROM crdb_internal.node_build_info\n",
   statementDetails: withData ? statementDetailsData : statementDetailsNoData,
   statementsError: null,
   nodeNames: {
@@ -809,8 +807,6 @@ export const getStatementDetailsPropsFixture = (
   dismissStatementDiagnosticsAlertMessage: noop,
   onTimeScaleChange: noop,
   createStatementDiagnosticsReport: noop,
-  onStatementDetailsQueryChange: noop,
-  onStatementDetailsFormattedQueryChange: noop,
   uiConfig: {
     showStatementDiagnosticsLink: true,
   },

pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.stories.tsx

@@ -102,7 +102,5 @@ storiesOf("StatementDetails", module)
   )
   .add("No data for this time frame; no cached statement", () => {
     const props = getStatementDetailsPropsFixture(false);
-    props.latestQuery = "";
-    props.latestFormattedQuery = "";
     return <StatementDetails {...props} />;
   });

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

@@ -91,6 +91,20 @@ export type StatementDetailsProps = StatementDetailsOwnProps &
 
 export interface StatementDetailsState {
   currentTab?: string;
+
+  /**
+   * The latest non-null query text associated with the statement fingerprint in the URL.
+   * We save this to preserve this data when the time frame changes such that there is no
+   * longer data for this statement fingerprint in the selected time frame.
+   */
+  query: string;
+
+  /**
+   * The latest non-null formatted query associated with the statement fingerprint in the URL.
+   * We save this to preserve data when the time frame changes such that there is no longer
+   * data for this statement fingerprint in the selected time frame.
+   */
+  formattedQuery: string;
 }
 
 export type NodesSummary = {
@@ -127,16 +141,12 @@ export interface StatementDetailsDispatchProps {
     ascending: boolean,
   ) => void;
   onBackToStatementsClick?: () => void;
-  onStatementDetailsQueryChange: (query: string) => void;
-  onStatementDetailsFormattedQueryChange: (formattedQuery: string) => void;
 }
 
 export interface StatementDetailsStateProps {
   statementFingerprintID: string;
   statementDetails: StatementDetailsResponse;
   isLoading: boolean;
-  latestQuery: string;
-  latestFormattedQuery: string;
   statementsError: Error | null;
   timeScale: TimeScale;
   nodeNames: { [nodeId: string]: string };
@@ -207,11 +217,15 @@ export class StatementDetails extends React.Component<
   StatementDetailsState
 > {
   activateDiagnosticsRef: React.RefObject<ActivateDiagnosticsModalRef>;
+
   constructor(props: StatementDetailsProps) {
     super(props);
     const searchParams = new URLSearchParams(props.history.location.search);
     this.state = {
       currentTab: searchParams.get("tab") || "overview",
+      query: this.props.statementDetails?.statement?.metadata?.query,
+      formattedQuery:
+        this.props.statementDetails?.statement?.metadata?.formatted_query,
     };
     this.activateDiagnosticsRef = React.createRef();
 
@@ -286,39 +300,30 @@ export class StatementDetails extends React.Component<
       }
     }
 
-    // If new, non-empty-string query text is available (derived from the statement details response),
-    // cache the query text.
+    // If a new, non-empty-string query text is available
+    // (derived from the statement details response), save the query text.
+    const newQuery =
+      this.props.statementDetails?.statement?.metadata?.query ||
+      this.state.query;
+    const newFormattedQuery =
+      this.props.statementDetails?.statement?.metadata?.formatted_query ||
+      this.state.formattedQuery;
     if (
-      this.props.statementDetails &&
-      this.props.statementDetails.statement.metadata.query != "" &&
-      this.props.latestQuery !=
-        this.props.statementDetails.statement.metadata.query
+      newQuery !== this.state.query ||
+      newFormattedQuery !== this.state.formattedQuery
     ) {
-      this.props.onStatementDetailsQueryChange(
-        this.props.statementDetails.statement.metadata.query,
-      );
-    }
-
-    // If a new, non-empty-string formatted query text is available (derived from the statement details response),
-    // cache the query text.
-    if (
-      this.props.statementDetails &&
-      this.props.statementDetails.statement.metadata.formatted_query != "" &&
-      this.props.latestFormattedQuery !=
-        this.props.statementDetails.statement.metadata.formatted_query
-    ) {
-      this.props.onStatementDetailsFormattedQueryChange(
-        this.props.statementDetails.statement.metadata.formatted_query,
-      );
+      this.setState({
+        query: newQuery,
+        formattedQuery: newFormattedQuery,
+      });
     }
 
     // If the statementFingerprintID (derived from the URL) changes, invalidate the cached query texts.
     // This is necessary for when the new statementFingerprintID does not have data for the given time frame.
     // The new query text and the formatted query text would be an empty string, and we need to invalidate the old
     // query text and formatted query text.
     if (this.props.statementFingerprintID != prevProps.statementFingerprintID) {
-      this.props.onStatementDetailsQueryChange("");
-      this.props.onStatementDetailsFormattedQueryChange("");
+      this.setState({ query: null, formattedQuery: null });
     }
   }
 
@@ -466,11 +471,11 @@ export class StatementDetails extends React.Component<
         </PageConfigItem>
       </PageConfig>
       <section className={cx("section")}>
-        {this.props.latestFormattedQuery && (
+        {this.state.formattedQuery && (
           <Row gutter={24}>
             <Col className="gutter-row" span={24}>
               <SqlBox
-                value={this.props.latestFormattedQuery}
+                value={this.state.formattedQuery}
                 size={SqlBoxSize.custom}
               />
             </Col>
@@ -614,7 +619,7 @@ export class StatementDetails extends React.Component<
           <Row gutter={24}>
             <Col className="gutter-row" span={24}>
               <SqlBox
-                value={this.props.latestFormattedQuery}
+                value={this.state.formattedQuery}
                 size={SqlBoxSize.custom}
               />
             </Col>
@@ -764,7 +769,7 @@ export class StatementDetails extends React.Component<
   };
 
   renderDiagnosticsTabContent = (hasData: boolean): React.ReactElement => {
-    if (!hasData && !this.props.latestQuery) {
+    if (!hasData && !this.state.query) {
       return this.renderNoDataTabContent();
     }
 
@@ -774,7 +779,9 @@ export class StatementDetails extends React.Component<
         diagnosticsReports={this.props.diagnosticsReports}
         dismissAlertMessage={this.props.dismissStatementDiagnosticsAlertMessage}
         hasData={this.hasDiagnosticReports()}
-        statementFingerprint={this.props.latestQuery}
+        statementFingerprint={
+          this.props.statementDetails?.statement?.metadata?.query
+        }
         onDownloadDiagnosticBundleClick={this.props.onDiagnosticBundleDownload}
         onDiagnosticCancelRequestClick={this.props.onDiagnosticCancelRequest}
         showDiagnosticsViewLink={

pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetailsConnected.ts

@@ -61,12 +61,11 @@ const mapStateToProps = (state: AppState, props: RouteComponentProps) => {
     state,
     props,
   );
+  const statementFingerprint = statementDetails?.statement.metadata.query;
   return {
     statementFingerprintID: getMatchParamByName(props.match, statementAttr),
     statementDetails,
     isLoading: isLoading,
-    latestQuery: state.adminUI.sqlDetailsStats.latestQuery,
-    latestFormattedQuery: state.adminUI.sqlDetailsStats.latestFormattedQuery,
     statementsError: lastError,
     timeScale: selectTimeScale(state),
     nodeNames: selectIsTenant(state) ? {} : nodeDisplayNameByIDSelector(state),
@@ -76,7 +75,7 @@ const mapStateToProps = (state: AppState, props: RouteComponentProps) => {
         ? []
         : selectDiagnosticsReportsByStatementFingerprint(
             state,
-            state.adminUI.sqlDetailsStats.latestQuery,
+            statementFingerprint,
           ),
     uiConfig: selectStatementDetailsUiConfig(state),
     isTenant: selectIsTenant(state),
@@ -162,14 +161,6 @@ const mapDispatchToProps = (
       }),
     );
   },
-  onStatementDetailsQueryChange: (latestQuery: string) => {
-    dispatch(sqlDetailsStatsActions.setLatestQuery(latestQuery));
-  },
-  onStatementDetailsFormattedQueryChange: (latestFormattedQuery: string) => {
-    dispatch(
-      sqlDetailsStatsActions.setLatestFormattedQuery(latestFormattedQuery),
-    );
-  },
   onSortingChange: (tableName, columnName) =>
     dispatch(
       analyticsActions.track({

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

@@ -29,14 +29,10 @@ export type SQLDetailsStatsReducerState = {
   cachedData: {
     [id: string]: SQLDetailsStatsState;
   };
-  latestQuery: string;
-  latestFormattedQuery: string;
 };
 
 const initialState: SQLDetailsStatsReducerState = {
   cachedData: {},
-  latestQuery: "",
-  latestFormattedQuery: "",
 };
 
 const sqlDetailsStatsSlice = createSlice({
@@ -103,12 +99,6 @@ const sqlDetailsStatsSlice = createSlice({
         inFlight: true,
       };
     },
-    setLatestQuery: (state, action: PayloadAction<string>) => {
-      state.latestQuery = action.payload;
-    },
-    setLatestFormattedQuery: (state, action: PayloadAction<string>) => {
-      state.latestFormattedQuery = action.payload;
-    },
   },
 });
 

pkg/ui/workspaces/cluster-ui/src/store/statementDetails/statementDetails.sagas.spec.ts

@@ -667,8 +667,6 @@ describe("SQLDetailsStats sagas", () => {
                 inFlight: false,
               },
           },
-          latestQuery: "",
-          latestFormattedQuery: "",
         })
         .run();
     });
@@ -694,8 +692,6 @@ describe("SQLDetailsStats sagas", () => {
                 inFlight: false,
               },
           },
-          latestQuery: "",
-          latestFormattedQuery: "",
         })
         .run();
     });

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

@@ -31,7 +31,6 @@ import { apiReducersReducer, APIReducersState } from "./apiReducers";
 import { hoverReducer, HoverState } from "./hover";
 import { localSettingsReducer, LocalSettingsState } from "./localsettings";
 import { metricsReducer, MetricsState } from "./metrics";
-import { sqlActivityReducer, SqlActivityState } from "src/redux/sqlActivity";
 import { queryManagerReducer, QueryManagerState } from "./queryManager/reducer";
 import { timeScaleReducer, TimeScaleState } from "./timeScale";
 import { uiDataReducer, UIDataState } from "./uiData";
@@ -44,7 +43,6 @@ export interface AdminUIState {
   hover: HoverState;
   localSettings: LocalSettingsState;
   metrics: MetricsState;
-  sqlActivity: SqlActivityState;
 
   queryManager: QueryManagerState;
   router: RouterState;
@@ -65,7 +63,6 @@ export function createAdminUIStore(historyInst: History<any>) {
       hover: hoverReducer,
       localSettings: localSettingsReducer,
       metrics: metricsReducer,
-      sqlActivity: sqlActivityReducer,
 
       queryManager: queryManagerReducer,
       router: routerReducer,