ui: add missing filters for workload insights and active execution pages

Fixes #87741, #87783.

Previously, the workload insights page was missing a filter for insights
type for both the statement and transaction tabs. Furthermore, the
active execution pages for statement and transactions was also missing a
status filter.

This commit adds the ability to filter by insights type for the workload
insights page and the ability to filter by execution status for the
active execution pages.

Release note (ui change): added an insights type filter for the workload
insights page, added a execution status filter for the active execution
pages.

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

@@ -310,7 +310,10 @@ export const InsightExecOptions = new Map<string, string>([
   [InsightExecEnum.STATEMENT.toString(), "Statement Executions"],
 ]);
 
-export type WorkloadInsightEventFilters = Pick<Filters, "app">;
+export type WorkloadInsightEventFilters = Pick<
+  Filters,
+  "app" | "workloadInsightType"
+>;
 
 export type SchemaInsightEventFilters = Pick<
   Filters,

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

@@ -59,6 +59,18 @@ export const filterTransactionInsights = (
   } else {
     filteredTransactions = filteredTransactions.filter(txn => !isInternal(txn));
   }
+  if (filters.workloadInsightType) {
+    const workloadInsightTypes = filters.workloadInsightType
+      .toString()
+      .split(",");
+    filteredTransactions = filteredTransactions.filter(
+      transactionInsight =>
+        workloadInsightTypes.length === 0 ||
+        workloadInsightTypes.includes(
+          transactionInsight.insights.map(insight => insight.label).toString(),
+        ),
+    );
+  }
   if (search) {
     search = search.toLowerCase();
 
@@ -201,6 +213,18 @@ export const filterStatementInsights = (
       stmt => !isInternal(stmt.application),
     );
   }
+  if (filters.workloadInsightType) {
+    const workloadInsightTypes = filters.workloadInsightType
+      .toString()
+      .split(",");
+    filteredStatements = filteredStatements.filter(
+      statementInsight =>
+        workloadInsightTypes.length === 0 ||
+        workloadInsightTypes.includes(
+          statementInsight.insights.map(insight => insight.label).toString(),
+        ),
+    );
+  }
   if (search) {
     search = search.toLowerCase();
     filteredStatements = filteredStatements.filter(

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

@@ -20,6 +20,7 @@ import { PageConfig, PageConfigItem } from "src/pageConfig/pageConfig";
 import { Search } from "src/search/search";
 import {
   calculateActiveFilters,
+  defaultFilters,
   Filter,
   getFullFiltersAsStringRecord,
 } from "src/queryFilter/filter";
@@ -53,6 +54,7 @@ const sortableTableCx = classNames.bind(sortableTableStyles);
 export type StatementInsightsViewStateProps = {
   statements: FlattenedStmtInsights;
   statementsError: Error | null;
+  insightTypes: string[];
   filters: WorkloadInsightEventFilters;
   sortSetting: SortSetting;
   selectedColumnNames: string[];
@@ -80,6 +82,7 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
     sortSetting,
     statements,
     statementsError,
+    insightTypes,
     filters,
     refreshStatementInsights,
     onFiltersChange,
@@ -187,7 +190,8 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
 
   const clearFilters = () =>
     onSubmitFilters({
-      app: "",
+      app: defaultFilters.app,
+      workloadInsightType: defaultFilters.workloadInsightType,
     });
 
   const apps = getAppsFromStatementInsights(
@@ -230,6 +234,8 @@ export const StatementInsightsView: React.FC<StatementInsightsViewProps> = (
             onSubmitFilters={onSubmitFilters}
             appNames={apps}
             filters={filters}
+            workloadInsightTypes={insightTypes}
+            showWorkloadInsightTypes={true}
           />
         </PageConfigItem>
       </PageConfig>

pkg/ui/workspaces/cluster-ui/src/insights/workloadInsights/transactionInsights/transactionInsightsView.tsx

@@ -20,6 +20,7 @@ import { PageConfig, PageConfigItem } from "src/pageConfig/pageConfig";
 import { Search } from "src/search/search";
 import {
   calculateActiveFilters,
+  defaultFilters,
   Filter,
   getFullFiltersAsStringRecord,
 } from "src/queryFilter/filter";
@@ -49,6 +50,7 @@ const sortableTableCx = classNames.bind(sortableTableStyles);
 export type TransactionInsightsViewStateProps = {
   transactions: MergedTxnInsightEvent[];
   transactionsError: Error | null;
+  insightTypes: string[];
   filters: WorkloadInsightEventFilters;
   sortSetting: SortSetting;
   dropDownSelect?: React.ReactElement;
@@ -74,6 +76,7 @@ export const TransactionInsightsView: React.FC<TransactionInsightsViewProps> = (
     sortSetting,
     transactions,
     transactionsError,
+    insightTypes,
     filters,
     refreshTransactionInsights,
     onFiltersChange,
@@ -173,7 +176,8 @@ export const TransactionInsightsView: React.FC<TransactionInsightsViewProps> = (
 
   const clearFilters = () =>
     onSubmitFilters({
-      app: "",
+      app: defaultFilters.app,
+      workloadInsightType: defaultFilters.workloadInsightType,
     });
 
   const transactionInsights = transactions;
@@ -207,6 +211,8 @@ export const TransactionInsightsView: React.FC<TransactionInsightsViewProps> = (
             onSubmitFilters={onSubmitFilters}
             appNames={apps}
             filters={filters}
+            workloadInsightTypes={insightTypes}
+            showWorkloadInsightTypes={true}
           />
         </PageConfigItem>
       </PageConfig>

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

@@ -31,11 +31,13 @@ import {
   selectColumns,
   selectStatementInsights,
   selectStatementInsightsError,
+  selectStatementInsightTypes,
 } from "src/store/insights/statementInsights";
 import {
   actions as transactionInsights,
   selectTransactionInsights,
   selectTransactionInsightsError,
+  selectTransactionInsightTypes,
   selectFilters,
   selectSortSetting,
 } from "src/store/insights/transactionInsights";
@@ -49,6 +51,7 @@ const transactionMapStateToProps = (
 ): TransactionInsightsViewStateProps => ({
   transactions: selectTransactionInsights(state),
   transactionsError: selectTransactionInsightsError(state),
+  insightTypes: selectTransactionInsightTypes(state),
   filters: selectFilters(state),
   sortSetting: selectSortSetting(state),
 });
@@ -59,6 +62,7 @@ const statementMapStateToProps = (
 ): StatementInsightsViewStateProps => ({
   statements: selectStatementInsights(state),
   statementsError: selectStatementInsightsError(state),
+  insightTypes: selectStatementInsightTypes(state),
   filters: selectFilters(state),
   sortSetting: selectSortSetting(state),
   selectedColumnNames: selectColumns(state),

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

@@ -39,14 +39,18 @@ interface QueryFilter {
   dbNames?: string[];
   usernames?: string[];
   sessionStatuses?: string[];
+  executionStatuses?: string[];
   schemaInsightTypes?: string[];
+  workloadInsightTypes?: string[];
   regions?: string[];
   nodes?: string[];
   hideAppNames?: boolean;
   showDB?: boolean;
   showUsername?: boolean;
   showSessionStatus?: boolean;
+  showExecutionStatus?: boolean;
   showSchemaInsightTypes?: boolean;
+  showWorkloadInsightTypes?: boolean;
   showSqlType?: boolean;
   showScan?: boolean;
   showRegions?: boolean;
@@ -69,7 +73,9 @@ export interface Filters extends Record<string, string | boolean> {
   nodes?: string;
   username?: string;
   sessionStatus?: string;
+  executionStatus?: string;
   schemaInsightType?: string;
+  workloadInsightType?: string;
 }
 
 const timeUnit = [
@@ -90,6 +96,8 @@ export const defaultFilters: Required<Filters> = {
   username: "",
   sessionStatus: "",
   schemaInsightType: "",
+  workloadInsightType: "",
+  executionStatus: "",
 };
 
 // getFullFiltersObject returns Filters with every field defined as
@@ -251,6 +259,9 @@ export const inactiveFiltersState: Required<Omit<Filters, "timeUnit">> = {
   database: "",
   regions: "",
   nodes: "",
+  workloadInsightType: "",
+  schemaInsightType: "",
+  executionStatus: "",
 };
 
 export const calculateActiveFilters = (filters: Filters): number => {
@@ -383,7 +394,9 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
       dbNames,
       usernames,
       sessionStatuses,
+      executionStatuses,
       schemaInsightTypes,
+      workloadInsightTypes,
       regions,
       nodes,
       activeFilters,
@@ -396,7 +409,9 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
       timeLabel,
       showUsername,
       showSessionStatus,
+      showExecutionStatus,
       showSchemaInsightTypes,
+      showWorkloadInsightTypes,
     } = this.props;
     const dropdownArea = hide ? hidden : dropdown;
     const customStyles = {
@@ -527,6 +542,32 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
       </div>
     );
 
+    const executionStatusOptions = showExecutionStatus
+      ? executionStatuses.map(executionStatus => ({
+          label: executionStatus,
+          value: executionStatus,
+          isSelected: this.isOptionSelected(
+            executionStatus,
+            filters.executionStatus,
+          ),
+        }))
+      : [];
+    const executionStatusValue = executionStatusOptions.filter(option =>
+      filters.executionStatus.split(",").includes(option.label),
+    );
+    const executionStatusFilter = (
+      <div>
+        <div className={filterLabel.margin}>Execution Status</div>
+        <MultiSelectCheckbox
+          options={executionStatusOptions}
+          placeholder="All"
+          field="executionStatus"
+          parent={this}
+          value={executionStatusValue}
+        />
+      </div>
+    );
+
     const schemaInsightTypeOptions = showSchemaInsightTypes
       ? schemaInsightTypes.map(schemaInsight => ({
           label: schemaInsight,
@@ -553,6 +594,34 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
       </div>
     );
 
+    const workloadInsightTypeOptions = showWorkloadInsightTypes
+      ? workloadInsightTypes.map(workloadInsight => ({
+          label: workloadInsight,
+          value: workloadInsight,
+          isSelected: this.isOptionSelected(
+            workloadInsight,
+            filters.workloadInsightType,
+          ),
+        }))
+      : [];
+    const workloadInsightTypeValue = workloadInsightTypeOptions.filter(
+      option => {
+        return filters.workloadInsightType.split(",").includes(option.label);
+      },
+    );
+    const workloadInsightTypeFilter = (
+      <div>
+        <div className={filterLabel.margin}>Workload Insight Type</div>
+        <MultiSelectCheckbox
+          options={workloadInsightTypeOptions}
+          placeholder="All"
+          field="workloadInsightType"
+          parent={this}
+          value={workloadInsightTypeValue}
+        />
+      </div>
+    );
+
     const regionsOptions = showRegions
       ? regions.map(region => ({
           label: region,
@@ -668,7 +737,9 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
             {showDB ? dbFilter : ""}
             {showUsername ? usernameFilter : ""}
             {showSessionStatus ? sessionStatusFilter : ""}
+            {showExecutionStatus ? executionStatusFilter : ""}
             {showSchemaInsightTypes ? schemaInsightTypeFilter : ""}
+            {showWorkloadInsightTypes ? workloadInsightTypeFilter : ""}
             {showSqlType ? sqlTypeFilter : ""}
             {showRegions ? regionsFilter : ""}
             {showNodes ? nodesFilter : ""}

pkg/ui/workspaces/cluster-ui/src/queryFilter/utils.ts

@@ -79,6 +79,7 @@ export function getWorkloadInsightEventFiltersFromURL(
 
   const appFilters = {
     app: filters.app,
+    workloadInsightType: filters.workloadInsightType,
   };
 
   // If every entry is null, there were no active filters. Return null.

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

@@ -65,6 +65,16 @@ export function filterRecentStatements(
     );
   }
 
+  if (filters.executionStatus) {
+    filteredStatements = filteredStatements.filter(
+      (statement: RecentStatement) => {
+        const executionStatuses = filters.executionStatus.toString().split(",");
+
+        return executionStatuses.includes(statement.status);
+      },
+    );
+  }
+
   if (search) {
     const searchCaseInsensitive = search.toLowerCase();
     filteredStatements = filteredStatements.filter(stmt =>
@@ -206,6 +216,14 @@ export function filterRecentTransactions(
     filteredTxns = filteredTxns.filter(txn => !isInternal(txn));
   }
 
+  if (filters.executionStatus) {
+    filteredTxns = filteredTxns.filter((txn: RecentTransaction) => {
+      const executionStatuses = filters.executionStatus.toString().split(",");
+
+      return executionStatuses.includes(txn.status);
+    });
+  }
+
   if (search) {
     const searchCaseInsensitive = search.toLowerCase();
     filteredTxns = filteredTxns.filter(txn =>

pkg/ui/workspaces/cluster-ui/src/recentExecutions/recentTransactionsSection.tsx

@@ -11,8 +11,8 @@
 import React, { useMemo } from "react";
 import classNames from "classnames/bind";
 import {
-  RecentStatementFilters,
   RecentTransaction,
+  RecentTransactionFilters,
 } from "src/recentExecutions/types";
 import ColumnsSelector, {
   SelectOption,
@@ -36,7 +36,7 @@ import { SortedTable } from "src/sortedtable";
 const sortableTableCx = classNames.bind(sortableTableStyles);
 
 type RecentTransactionsSectionProps = {
-  filters: RecentStatementFilters;
+  filters: RecentTransactionFilters;
   isTenant?: boolean;
   pagination: ISortedTablePagination;
   search: string;