ui: tenant-gate transaction insights, change selection order of workl…

…oad insights

Related to cockroachdb#96353, cockroachdb#92936.

This commit hides the dropdown to switch workload insights from
statement insights to transaction insights on tenants. When cockroachdb#96353
is resolved, we can re-enable transaction insights for tenant
clusters.

The commit also switches the order of workload insights, to show
statement insights first (see cockroachdb#92936).

Release note: None

pkg/ui/workspaces/cluster-ui/src/insights/types.ts

@@ -262,8 +262,8 @@ export const getInsightFromCause = (
 };
 
 export const InsightExecOptions = new Map<string, string>([
-  [InsightExecEnum.TRANSACTION.toString(), "Transaction Executions"],
   [InsightExecEnum.STATEMENT.toString(), "Statement Executions"],
+  [InsightExecEnum.TRANSACTION.toString(), "Transaction Executions"],
 ]);
 
 export const InsightEnumToLabel = new Map<string, string>([

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/statementInsights/statementInsightsView.tsx

@@ -72,6 +72,7 @@ export type StatementInsightsViewStateProps = {
   isLoading?: boolean;
   dropDownSelect?: React.ReactElement;
   timeScale?: TimeScale;
+  isTenant?: boolean;
 };
 
 export type StatementInsightsViewDispatchProps = {
@@ -105,6 +106,7 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = ({
   setTimeScale,
   selectedColumnNames,
   dropDownSelect,
+  isTenant,
 }: StatementInsightsViewProps) => {
   const [pagination, setPagination] = useState<ISortedTablePagination>({
     current: 1,
@@ -245,7 +247,7 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = ({
   return (
     <div className={cx("root")}>
       <PageConfig>
-        <PageConfigItem>{dropDownSelect}</PageConfigItem>
+        {!isTenant && <PageConfigItem>{dropDownSelect}</PageConfigItem>}
         <PageConfigItem>
           <Search
             placeholder="Search Statements"

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/workloadInsightRootControl.tsx

@@ -36,12 +36,11 @@ export const WorkloadInsightsRootControl = ({
 }: WorkloadInsightsViewProps): React.ReactElement => {
   const location = useLocation();
   const history = useHistory();
-  let viewValue =
-    queryByName(location, viewAttr) || InsightExecEnum.TRANSACTION;
-  // Use the default Transaction page if an
+  let viewValue = queryByName(location, viewAttr) || InsightExecEnum.STATEMENT;
+  // Use the default Statement page if an
   // unrecognized string was passed in from the URL
   if (!InsightExecOptions.has(viewValue)) {
-    viewValue = InsightExecEnum.TRANSACTION;
+    viewValue = InsightExecEnum.STATEMENT;
   }
 
   const [selectedInsightView, setSelectedInsightView] = useState(viewValue);

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/workloadInsightsPageConnected.tsx

@@ -48,6 +48,7 @@ import { TimeScale } from "../../timeScaleDropdown";
 import { StmtInsightsReq, TxnInsightsRequest } from "src/api";
 import { selectTimeScale } from "../../store/utils/selectors";
 import { actions as analyticsActions } from "../../store/analytics";
+import { selectIsTenant } from "../../store/uiConfig";
 
 const transactionMapStateToProps = (
   state: AppState,
@@ -78,6 +79,7 @@ const statementMapStateToProps = (
   selectedColumnNames: selectColumns(state),
   timeScale: selectTimeScale(state),
   isLoading: selectStmtInsightsLoading(state),
+  isTenant: selectIsTenant(state),
 });
 
 const TransactionDispatchProps = (