Status filter

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

@@ -19,7 +19,13 @@ interface RuleState {
   totalItemCount: number;
 }
 
-export function useFetchRules({ searchText, ruleLastResponseFilter, page, sort }: FetchRulesProps) {
+export function useFetchRules({
+  searchText,
+  ruleLastResponseFilter,
+  ruleStatusFilter,
+  page,
+  sort,
+}: FetchRulesProps) {
   const { http } = useKibana().services;
 
   const [rulesState, setRulesState] = useState<RuleState>({
@@ -39,6 +45,7 @@ export function useFetchRules({ searchText, ruleLastResponseFilter, page, sort }
         searchText,
         typesFilter: OBSERVABILITY_RULE_TYPES,
         ruleStatusesFilter: ruleLastResponseFilter,
+        ruleStatusFilter: [false],
         sort,
       });
       setRulesState((oldState) => ({
@@ -50,7 +57,7 @@ export function useFetchRules({ searchText, ruleLastResponseFilter, page, sort }
     } catch (_e) {
       setRulesState((oldState) => ({ ...oldState, isLoading: false, error: RULES_LOAD_ERROR }));
     }
-  }, [http, page, searchText, ruleLastResponseFilter, sort]);
+  }, [http, page, searchText, ruleLastResponseFilter, ruleStatusFilter, sort]);
   useEffect(() => {
     fetchRules();
   }, [fetchRules]);

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

@@ -0,0 +1,77 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { EuiFilterGroup, EuiPopover, EuiFilterButton, EuiFilterSelectItem } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { RuleStatus } from '../../types';
+import { statusMap } from '../../config';
+
+export function StatusFilter({ selectedStatuses, onChange }) {
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+  const [selectedValues, setSelectedValues] = useState<string[]>(selectedStatuses);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(selectedValues);
+    }
+  }, [selectedValues, onChange]);
+
+  useEffect(() => {
+    setSelectedValues(selectedStatuses);
+  }, [selectedStatuses]);
+
+  const panelItems = useMemo(
+    () =>
+      Object.values(RuleStatus).map((status: RuleStatus) => (
+        <EuiFilterSelectItem
+          key={status}
+          onClick={() => {
+            const isPreviouslyChecked = selectedValues.includes(status);
+            if (isPreviouslyChecked) {
+              setSelectedValues(selectedValues.filter((val) => val !== status));
+            } else {
+              setSelectedValues(selectedValues.concat(status));
+            }
+          }}
+          checked={selectedValues.includes(status) ? 'on' : undefined}
+          data-test-subj={`ruleStatus${status}FilterOption`}
+        >
+          {statusMap[status].label}
+        </EuiFilterSelectItem>
+      )),
+    [selectedValues]
+  );
+
+  return (
+    <EuiFilterGroup>
+      <EuiPopover
+        button={
+          <EuiFilterButton
+            iconType="arrowDown"
+            hasActiveFilters={selectedValues.length > 0}
+            numActiveFilters={selectedValues.length}
+            numFilters={selectedValues.length}
+            onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+            data-test-subj="ruleStatusFilterButton"
+          >
+            <FormattedMessage
+              id="xpack.observability.rules.ruleStatusFilterLabel"
+              defaultMessage="Status"
+            />
+          </EuiFilterButton>
+        }
+        closePopover={() => setIsPopoverOpen(false)}
+        anchorPosition="downLeft"
+        isOpen={isPopoverOpen}
+        panelPaddingSize="none"
+      >
+        {panelItems}
+      </EuiPopover>
+    </EuiFilterGroup>
+  );
+}

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

@@ -74,7 +74,7 @@ export const LastResponseFilter: React.FunctionComponent<StatusFilterProps> = ({
                   }
                 }}
                 checked={selectedValues.includes(item) ? 'on' : undefined}
-                data-test-subj={`ruleStatus${item}FilerOption`}
+                data-test-subj={`ruleLastResponse${item}FilterOption`}
               >
                 <EuiHealth color={healthColor}>{rulesStatusesTranslationsMapping[item]}</EuiHealth>
               </EuiFilterSelectItem>

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

@@ -6,8 +6,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiBadge } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText } from '@elastic/eui';
 import { RuleNameProps } from '../types';
 import { useKibana } from '../../../utils/kibana_react';
 
@@ -34,17 +33,5 @@ export function Name({ name, rule }: RuleNameProps) {
       </EuiFlexItem>
     </EuiFlexGroup>
   );
-  return (
-    <>
-      {link}
-      {rule.enabled && rule.muteAll && (
-        <EuiBadge data-test-subj="mutedActionsBadge" color="hollow">
-          <FormattedMessage
-            id="xpack.observability.rules.rulesTable.columns.mutedBadge"
-            defaultMessage="Muted"
-          />
-        </EuiBadge>
-      )}
-    </>
-  );
+  return <>{link}</>;
 }

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

@@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+import { EuiButton, EuiEmptyPrompt, EuiLink, EuiButtonEmpty, EuiPageTemplate } from '@elastic/eui';
+
+export function NoDataPrompt({
+  onCTAClicked,
+  documentationLink,
+}: {
+  onCTAClicked: () => void;
+  documentationLink: string;
+}) {
+  return (
+    <EuiPageTemplate
+      template="centeredContent"
+      pageContentProps={{
+        paddingSize: 'none',
+        role: null, // For passing a11y tests in EUI docs only
+      }}
+    >
+      <EuiEmptyPrompt
+        color="plain"
+        hasBorder={true}
+        data-test-subj="createFirstRuleEmptyPrompt"
+        title={
+          <h2>
+            <FormattedMessage
+              id="xpack.observability.rules.emptyPrompt.emptyTitle"
+              defaultMessage="Create your first Rule"
+            />
+          </h2>
+        }
+        body={
+          <p>
+            <FormattedMessage
+              id="xpack.observability.rules.noDataPrompt.noDataDesc"
+              defaultMessage="Rules allow you to receive alerts and automate custom actions when specific conditions are met."
+            />
+          </p>
+        }
+        actions={[
+          <EuiButton
+            iconType="plusInCircle"
+            data-test-subj="createFirstRuleButton"
+            key="create-action"
+            fill
+            onClick={onCTAClicked}
+          >
+            <FormattedMessage
+              id="xpack.observability.rules.emptyPrompt.emptyButton"
+              defaultMessage="Create Rule"
+            />
+          </EuiButton>,
+          <EuiButtonEmpty color="primary">
+            <EuiLink href={documentationLink} target="_blank">
+              Documentation
+            </EuiLink>
+          </EuiButtonEmpty>,
+        ]}
+      />
+    </EuiPageTemplate>
+  );
+}

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

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+import { EuiEmptyPrompt, EuiPageTemplate } from '@elastic/eui';
+
+export function NoPermissionPrompt() {
+  return (
+    <EuiPageTemplate
+      template="centeredContent"
+      pageContentProps={{
+        paddingSize: 'none',
+        role: null, // For passing a11y tests in EUI docs only
+      }}
+    >
+      <EuiEmptyPrompt
+        color="plain"
+        hasBorder={true}
+        iconType="securityApp"
+        title={
+          <h1>
+            <FormattedMessage
+              id="xpack.observability.rules.noPermissionToCreateTitle"
+              defaultMessage="No permissions to create rules"
+            />
+          </h1>
+        }
+        body={
+          <p data-test-subj="permissionDeniedMessage">
+            <FormattedMessage
+              id="xpack.observability.rules.noPermissionToCreateDescription"
+              defaultMessage="Contact your system administrator."
+            />
+          </p>
+        }
+      />
+    </EuiPageTemplate>
+  );
+}

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

@@ -5,19 +5,28 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { EuiBadge } from '@elastic/eui';
+import { noop } from 'lodash/fp';
 import { StatusProps } from '../types';
 import { statusMap } from '../config';
+import { RULES_CHANGE_STATUS } from '../translations';
 
-export function Status({ type, onClick }: StatusProps) {
+export function Status({ type, disabled, onClick }: StatusProps) {
+  const props = useMemo(
+    () => ({
+      color: statusMap[type].color,
+      ...(!disabled ? { onClick } : { onClick: noop }),
+      ...(!disabled ? { iconType: 'arrowDown', iconSide: 'right' as const } : {}),
+      ...(!disabled ? { iconOnClick: onClick } : { iconOnClick: noop }),
+    }),
+    [disabled, onClick, type]
+  );
   return (
     <EuiBadge
-      color={statusMap[type].color}
-      iconType="arrowDown"
-      iconSide="right"
-      onClick={onClick}
-      onClickAriaLabel="Change status"
+      {...props}
+      onClickAriaLabel={RULES_CHANGE_STATUS}
+      iconOnClickAriaLabel={RULES_CHANGE_STATUS}
     >
       {statusMap[type].label}
     </EuiBadge>

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

@@ -18,19 +18,26 @@ import { statusMap } from '../config';
 
 export function StatusContext({
   item,
+  disabled = false,
   onStatusChanged,
   enableRule,
   disableRule,
   muteRule,
+  unMuteRule,
 }: StatusContextProps) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
   const togglePopover = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [isPopoverOpen]);
 
-  const currentStatus = item.enabled ? RuleStatus.enabled : RuleStatus.disabled;
+  let currentStatus: RuleStatus;
+  if (item.enabled) {
+    currentStatus = item.muteAll ? RuleStatus.snoozed : RuleStatus.enabled;
+  } else {
+    currentStatus = RuleStatus.disabled;
+  }
   const popOverButton = useMemo(
-    () => <Status type={currentStatus} onClick={togglePopover} />,
-    [currentStatus, togglePopover]
+    () => <Status disabled={disabled} type={currentStatus} onClick={togglePopover} />,
+    [disabled, currentStatus, togglePopover]
   );
 
   const onContextMenuItemClick = useCallback(
@@ -41,22 +48,38 @@ export function StatusContext({
 
         if (status === RuleStatus.enabled) {
           await enableRule({ ...item, enabled: true });
+          if (item.muteAll) {
+            await unMuteRule({ ...item, muteAll: false });
+          }
         } else if (status === RuleStatus.disabled) {
           await disableRule({ ...item, enabled: false });
+        } else if (status === RuleStatus.snoozed) {
+          await muteRule({ ...item, muteAll: true });
         }
         setIsUpdating(false);
         onStatusChanged(status);
       }
     },
-    [item, togglePopover, enableRule, disableRule, currentStatus, onStatusChanged]
+    [
+      item,
+      togglePopover,
+      enableRule,
+      disableRule,
+      muteRule,
+      unMuteRule,
+      currentStatus,
+      onStatusChanged,
+    ]
   );
+
   const panelItems = useMemo(
     () =>
       Object.values(RuleStatus).map((status: RuleStatus) => (
         <EuiContextMenuItem
           icon={status === currentStatus ? 'check' : 'empty'}
           key={status}
           onClick={() => onContextMenuItemClick(status)}
+          disabled={status === RuleStatus.snoozed && currentStatus === RuleStatus.disabled}
         >
           {statusMap[status].label}
         </EuiContextMenuItem>