[Actionable Observability] consume shareable status filter

x-pack/plugins/observability/public/hooks/use_fetch_rules.ts

@@ -16,6 +16,7 @@ import { useKibana } from '../utils/kibana_react';
 export function useFetchRules({
   searchText,
   ruleLastResponseFilter,
+  ruleStatusesFilter,
   typesFilter,
   setPage,
   page,
@@ -43,6 +44,7 @@ export function useFetchRules({
         searchText,
         typesFilter: typesFilter.length > 0 ? typesFilter : OBSERVABILITY_RULE_TYPES,
         ruleExecutionStatusesFilter: ruleLastResponseFilter,
+        ruleStatusesFilter,
         sort,
       });
       setRulesState((oldState) => ({
@@ -58,6 +60,7 @@ export function useFetchRules({
       const isFilterApplied = !(
         isEmpty(searchText) &&
         isEmpty(ruleLastResponseFilter) &&
+        isEmpty(ruleStatusesFilter) &&
         isEmpty(typesFilter)
       );
 
@@ -66,7 +69,16 @@ export function useFetchRules({
       setRulesState((oldState) => ({ ...oldState, isLoading: false, error: RULES_LOAD_ERROR }));
     }
     setInitialLoad(false);
-  }, [http, page, setPage, searchText, ruleLastResponseFilter, typesFilter, sort]);
+  }, [
+    http,
+    page,
+    setPage,
+    searchText,
+    ruleLastResponseFilter,
+    ruleStatusesFilter,
+    typesFilter,
+    sort,
+  ]);
   useEffect(() => {
     fetchRules();
   }, [fetchRules]);

x-pack/plugins/observability/public/observability_public_plugins_start.mock.ts

@@ -38,6 +38,7 @@ const triggersActionsUiStartMock = {
       getAddAlertFlyout: jest.fn(),
       getRuleStatusDropdown: jest.fn(),
       getRuleTagBadge: jest.fn(),
+      getRuleStatusFilter: jest.fn(),
       ruleTypeRegistry: {
         has: jest.fn(),
         register: jest.fn(),

x-pack/plugins/observability/public/pages/rules/components/last_response_filter.tsx

@@ -18,12 +18,12 @@ import {
 } from '@elastic/eui';
 import { RuleExecutionStatuses, RuleExecutionStatusValues } from '@kbn/alerting-plugin/common';
 import { getHealthColor, rulesStatusesTranslationsMapping } from '../config';
-import { StatusFilterProps } from '../types';
+import { LastResponseFilterProps } from '../types';
 
-export const LastResponseFilter: React.FunctionComponent<StatusFilterProps> = ({
+export const LastResponseFilter: React.FunctionComponent<LastResponseFilterProps> = ({
   selectedStatuses,
   onChange,
-}: StatusFilterProps) => {
+}: LastResponseFilterProps) => {
   const [selectedValues, setSelectedValues] = useState<string[]>(selectedStatuses);
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 

x-pack/plugins/observability/public/pages/rules/config.ts

@@ -7,34 +7,15 @@
 
 import { RuleExecutionStatuses } from '@kbn/alerting-plugin/common';
 import { Rule, RuleTypeIndex, RuleType } from '@kbn/triggers-actions-ui-plugin/public';
-import { Status, RuleStatus } from './types';
 import {
   RULE_STATUS_OK,
   RULE_STATUS_ACTIVE,
   RULE_STATUS_ERROR,
   RULE_STATUS_PENDING,
   RULE_STATUS_UNKNOWN,
   RULE_STATUS_WARNING,
-  RULE_STATUS_ENABLED,
-  RULE_STATUS_DISABLED,
-  RULE_STATUS_SNOOZED_INDEFINITELY,
 } from './translations';
 
-export const statusMap: Status = {
-  [RuleStatus.enabled]: {
-    color: 'primary',
-    label: RULE_STATUS_ENABLED,
-  },
-  [RuleStatus.disabled]: {
-    color: 'default',
-    label: RULE_STATUS_DISABLED,
-  },
-  [RuleStatus.snoozed]: {
-    color: 'warning',
-    label: RULE_STATUS_SNOOZED_INDEFINITELY,
-  },
-};
-
 export const DEFAULT_SEARCH_PAGE_SIZE: number = 25;
 
 export function getHealthColor(status: RuleExecutionStatuses) {

x-pack/plugins/observability/public/pages/rules/index.tsx

@@ -27,6 +27,7 @@ import {
   disableRule,
   snoozeRule,
   useLoadRuleTypes,
+  RuleStatus,
   unsnoozeRule,
 } from '@kbn/triggers-actions-ui-plugin/public';
 import { RuleExecutionStatus, ALERTS_FEATURE_ID } from '@kbn/alerting-plugin/common';
@@ -93,7 +94,7 @@ function RulesPage() {
   });
   const [inputText, setInputText] = useState<string | undefined>();
   const [searchText, setSearchText] = useState<string | undefined>();
-  // const [ruleLastResponseFilter, setRuleLastResponseFilter] = useState<string[]>([]);
+  const [ruleStatusesFilter, setRuleStatusesFilter] = useState<RuleStatus[]>([]);
   const [typesFilter, setTypesFilter] = useState<string[]>([]);
   const [currentRuleToEdit, setCurrentRuleToEdit] = useState<RuleTableItem | null>(null);
   const [rulesToDelete, setRulesToDelete] = useState<string[]>([]);
@@ -110,6 +111,7 @@ function RulesPage() {
   const { rulesState, setRulesState, reload, noData, initialLoad } = useFetchRules({
     searchText,
     ruleLastResponseFilter: lastResponse,
+    ruleStatusesFilter,
     typesFilter,
     page,
     setPage,
@@ -353,6 +355,12 @@ function RulesPage() {
               onChange={setExecutionStatusFilter}
             />
           </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            {triggersActionsUi.getRuleStatusFilter({
+              selectedStatuses: ruleStatusesFilter,
+              onChange: setRuleStatusesFilter,
+            })}
+          </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton
               data-test-subj="refreshRulesButton"

x-pack/plugins/observability/public/pages/rules/translations.ts

@@ -53,27 +53,6 @@ export const RULE_STATUS_WARNING = i18n.translate(
   }
 );
 
-export const RULE_STATUS_ENABLED = i18n.translate(
-  'xpack.observability.rules.rulesTable.ruleStatusEnabled',
-  {
-    defaultMessage: 'Enabled',
-  }
-);
-
-export const RULE_STATUS_DISABLED = i18n.translate(
-  'xpack.observability.rules.rulesTable.ruleStatusDisabled',
-  {
-    defaultMessage: 'Disabled',
-  }
-);
-
-export const RULE_STATUS_SNOOZED_INDEFINITELY = i18n.translate(
-  'xpack.observability.rules.rulesTable.ruleStatusSnoozedIndefinitely',
-  {
-    defaultMessage: 'Snoozed indefinitely',
-  }
-);
-
 export const LAST_RESPONSE_COLUMN_TITLE = i18n.translate(
   'xpack.observability.rules.rulesTable.columns.lastResponseTitle',
   {

x-pack/plugins/observability/public/pages/rules/types.ts

@@ -7,38 +7,9 @@
 import { Dispatch, SetStateAction } from 'react';
 import { EuiTableSortingType, EuiBasicTableColumn } from '@elastic/eui';
 import { RuleExecutionStatus } from '@kbn/alerting-plugin/common';
-import { RuleTableItem, Rule } from '@kbn/triggers-actions-ui-plugin/public';
-export interface StatusProps {
-  type: RuleStatus;
-  disabled: boolean;
-  onClick: () => void;
-}
-
-export enum RuleStatus {
-  enabled = 'enabled',
-  disabled = 'disabled',
-  snoozed = 'snoozed',
-}
-
-export type Status = Record<
-  RuleStatus,
-  {
-    color: string;
-    label: string;
-  }
->;
-
-export interface StatusContextProps {
-  item: RuleTableItem;
-  disabled: boolean;
-  onStatusChanged: (status: RuleStatus) => void;
-  enableRule: (rule: Rule) => Promise<void>;
-  disableRule: (rule: Rule) => Promise<void>;
-  muteRule: (rule: Rule) => Promise<void>;
-  unMuteRule: (rule: Rule) => Promise<void>;
-}
+import { RuleTableItem, Rule, RuleStatus } from '@kbn/triggers-actions-ui-plugin/public';
 
-export interface StatusFilterProps {
+export interface LastResponseFilterProps {
   selectedStatuses: string[];
   onChange?: (selectedRuleStatusesIds: string[]) => void;
 }
@@ -71,6 +42,7 @@ export interface Pagination {
 export interface FetchRulesProps {
   searchText: string | undefined;
   ruleLastResponseFilter: string[];
+  ruleStatusesFilter: RuleStatus[];
   typesFilter: string[];
   page: Pagination;
   setPage: Dispatch<SetStateAction<Pagination>>;