[Actionable Observability] rules page read permissions & snoozed status & no data screen

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

@@ -6,6 +6,7 @@
  */
 
 import { useEffect, useState, useCallback } from 'react';
+import { isEmpty } from 'lodash';
 import { loadRules, Rule } from '../../../triggers_actions_ui/public';
 import { RULES_LOAD_ERROR } from '../pages/rules/translations';
 import { FetchRulesProps } from '../pages/rules/types';
@@ -19,7 +20,13 @@ interface RuleState {
   totalItemCount: number;
 }
 
-export function useFetchRules({ searchText, ruleLastResponseFilter, page, sort }: FetchRulesProps) {
+export function useFetchRules({
+  searchText,
+  ruleLastResponseFilter,
+  setPage,
+  page,
+  sort,
+}: FetchRulesProps) {
   const { http } = useKibana().services;
 
   const [rulesState, setRulesState] = useState<RuleState>({
@@ -29,6 +36,9 @@ export function useFetchRules({ searchText, ruleLastResponseFilter, page, sort }
     totalItemCount: 0,
   });
 
+  const [noData, setNoData] = useState<boolean>(true);
+  const [initialLoad, setInitialLoad] = useState<boolean>(true);
+
   const fetchRules = useCallback(async () => {
     setRulesState((oldState) => ({ ...oldState, isLoading: true }));
 
@@ -47,10 +57,18 @@ export function useFetchRules({ searchText, ruleLastResponseFilter, page, sort }
         data: response.data,
         totalItemCount: response.total,
       }));
+
+      if (!response.data?.length && page.index > 0) {
+        setPage({ ...page, index: 0 });
+      }
+      const isFilterApplied = !(isEmpty(searchText) && isEmpty(ruleLastResponseFilter));
+
+      setNoData(response.data.length === 0 && !isFilterApplied);
     } catch (_e) {
       setRulesState((oldState) => ({ ...oldState, isLoading: false, error: RULES_LOAD_ERROR }));
     }
-  }, [http, page, searchText, ruleLastResponseFilter, sort]);
+    setInitialLoad(false);
+  }, [http, page, setPage, searchText, ruleLastResponseFilter, sort]);
   useEffect(() => {
     fetchRules();
   }, [fetchRules]);
@@ -59,5 +77,7 @@ export function useFetchRules({ searchText, ruleLastResponseFilter, page, sort }
     rulesState,
     reload: fetchRules,
     setRulesState,
+    noData,
+    initialLoad,
   };
 }

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

@@ -0,0 +1,25 @@
+/*
+ * 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 from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiLoadingSpinnerSize } from '@elastic/eui/src/components/loading/loading_spinner';
+
+interface Props {
+  size?: EuiLoadingSpinnerSize;
+}
+
+export function CenterJustifiedSpinner({ size }: Props) {
+  return (
+    <EuiFlexGroup data-test-subj="centerJustifiedSpinner" justifyContent="center">
+      <EuiFlexItem grow={false}>
+        <EuiLoadingSpinner size={size || 'xl'} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

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>

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

@@ -13,18 +13,25 @@ import {
   RULE_STATUS_PENDING,
   RULE_STATUS_UNKNOWN,
   RULE_STATUS_WARNING,
+  RULE_STATUS_ENABLED,
+  RULE_STATUS_DISABLED,
+  RULE_STATUS_SNOOZED_INDEFINITELY,
 } from './translations';
 import { AlertExecutionStatuses } from '../../../../alerting/common';
 import { Rule, RuleTypeIndex, RuleType } from '../../../../triggers_actions_ui/public';
 
 export const statusMap: Status = {
   [RuleStatus.enabled]: {
     color: 'primary',
-    label: 'Enabled',
+    label: RULE_STATUS_ENABLED,
   },
   [RuleStatus.disabled]: {
     color: 'default',
-    label: 'Disabled',
+    label: RULE_STATUS_DISABLED,
+  },
+  [RuleStatus.snoozed]: {
+    color: 'warning',
+    label: RULE_STATUS_SNOOZED_INDEFINITELY,
   },
 };
 
@@ -93,3 +100,8 @@ export function convertRulesToTableItems(
     enabledInLicense: !!ruleTypeIndex.get(rule.ruleTypeId)?.enabledInLicense,
   }));
 }
+
+type Capabilities = Record<string, any>;
+
+export const hasExecuteActionsCapability = (capabilities: Capabilities) =>
+  capabilities?.actions?.execute;