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

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/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

@@ -26,6 +26,10 @@ export const statusMap: Status = {
     color: 'default',
     label: 'Disabled',
   },
+  [RuleStatus.snoozed]: {
+    color: 'warning',
+    label: 'Snoozed',
+  },
 };
 
 export const DEFAULT_SEARCH_PAGE_SIZE: number = 25;
@@ -93,3 +97,8 @@ export function convertRulesToTableItems(
     enabledInLicense: !!ruleTypeIndex.get(rule.ruleTypeId)?.enabledInLicense,
   }));
 }
+
+type Capabilities = Record<string, any>;
+
+export const hasExecuteActionsCapability = (capabilities: Capabilities) =>
+  capabilities?.actions?.execute;

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

@@ -39,13 +39,15 @@ import {
   disableRule,
   muteRule,
   useLoadRuleTypes,
+  unmuteRule,
 } from '../../../../triggers_actions_ui/public';
 import { AlertExecutionStatus, ALERTS_FEATURE_ID } from '../../../../alerting/common';
 import { Pagination } from './types';
 import {
   DEFAULT_SEARCH_PAGE_SIZE,
   convertRulesToTableItems,
   OBSERVABILITY_SOLUTIONS,
+  hasExecuteActionsCapability,
 } from './config';
 import {
   LAST_RESPONSE_COLUMN_TITLE,
@@ -73,9 +75,11 @@ export function RulesPage() {
     http,
     docLinks,
     triggersActionsUi,
+    application: { capabilities },
     notifications: { toasts },
   } = useKibana().services;
-
+  const ruleTypeRegistry = triggersActionsUi.ruleTypeRegistry;
+  const canExecuteActions = hasExecuteActionsCapability(capabilities);
   const [page, setPage] = useState<Pagination>({ index: 0, size: DEFAULT_SEARCH_PAGE_SIZE });
   const [sort, setSort] = useState<EuiTableSortingType<RuleTableItem>['sort']>({
     field: 'name',
@@ -90,6 +94,9 @@ export function RulesPage() {
   const [rulesToDelete, setRulesToDelete] = useState<string[]>([]);
   const [createRuleFlyoutVisibility, setCreateRuleFlyoutVisibility] = useState(false);
 
+  const isRuleTypeEditableInContext = (ruleTypeId: string) =>
+    ruleTypeRegistry.has(ruleTypeId) ? !ruleTypeRegistry.get(ruleTypeId).requiresAppContext : false;
+
   const onRuleEdit = (ruleItem: RuleTableItem) => {
     setCurrentRuleToEdit(ruleItem);
   };
@@ -109,7 +116,14 @@ export function RulesPage() {
     sort,
   });
   const { data: rules, totalItemCount, error } = rulesState;
-  const { ruleTypeIndex } = useLoadRuleTypes({ filteredSolutions: OBSERVABILITY_SOLUTIONS });
+  const { ruleTypeIndex, ruleTypes } = useLoadRuleTypes({
+    filteredSolutions: OBSERVABILITY_SOLUTIONS,
+  });
+  const authorizedRuleTypes = [...ruleTypes.values()];
+
+  const authorizedToCreateAnyRules = authorizedRuleTypes.some(
+    (ruleType) => ruleType.authorizedConsumers[ALERTS_FEATURE_ID]?.all
+  );
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -161,11 +175,13 @@ export function RulesPage() {
         render: (_enabled: boolean, item: RuleTableItem) => {
           return (
             <StatusContext
+              disabled={!item.isEditable}
               item={item}
               onStatusChanged={() => reload()}
               enableRule={async () => await enableRule({ http, id: item.id })}
               disableRule={async () => await disableRule({ http, id: item.id })}
               muteRule={async () => await muteRule({ http, id: item.id })}
+              unMuteRule={async () => await unmuteRule({ http, id: item.id })}
             />
           );
         },
@@ -180,6 +196,9 @@ export function RulesPage() {
                 <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
                   <EuiFlexItem grow={false} data-test-subj="ruleSidebarEditAction">
                     <EuiButtonIcon
+                      isDisabled={
+                        !(item.isEditable && isRuleTypeEditableInContext(item.ruleTypeId))
+                      }
                       color={'primary'}
                       title={EDIT_ACTION_TOOLTIP}
                       className="ruleSidebarItem__action"
@@ -191,6 +210,7 @@ export function RulesPage() {
                   </EuiFlexItem>
                   <EuiFlexItem grow={false} data-test-subj="ruleSidebarDeleteAction">
                     <EuiButtonIcon
+                      isDisabled={!item.isEditable}
                       color={'danger'}
                       title={DELETE_ACTION_TOOLTIP}
                       className="ruleSidebarItem__action"
@@ -232,18 +252,20 @@ export function RulesPage() {
           </>
         ),
         rightSideItems: [
-          <EuiButton
-            iconType="plusInCircle"
-            key="create-alert"
-            data-test-subj="createRuleButton"
-            fill
-            onClick={() => setCreateRuleFlyoutVisibility(true)}
-          >
-            <FormattedMessage
-              id="xpack.observability.rules.addRuleButtonLabel"
-              defaultMessage="Create rule"
-            />
-          </EuiButton>,
+          authorizedToCreateAnyRules && (
+            <EuiButton
+              iconType="plusInCircle"
+              key="create-alert"
+              data-test-subj="createRuleButton"
+              fill
+              onClick={() => setCreateRuleFlyoutVisibility(true)}
+            >
+              <FormattedMessage
+                id="xpack.observability.rules.addRuleButtonLabel"
+                defaultMessage="Create rule"
+              />
+            </EuiButton>
+          ),
           <EuiButtonEmpty
             href={docLinks.links.alerting.guide}
             target="_blank"
@@ -351,7 +373,7 @@ export function RulesPage() {
         <EuiFlexItem>
           <RulesTable
             columns={getRulesTableColumns()}
-            rules={convertRulesToTableItems(rules, ruleTypeIndex, true)} // TODO add canExecuteActions and remove hardcoded true value
+            rules={convertRulesToTableItems(rules, ruleTypeIndex, canExecuteActions)}
             isLoading={rulesState.isLoading}
             page={page}
             totalItemCount={totalItemCount}

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

@@ -144,6 +144,13 @@ export const SEARCH_PLACEHOLDER = i18n.translate(
   { defaultMessage: 'Search' }
 );
 
+export const RULES_CHANGE_STATUS = i18n.translate(
+  'xpack.observability.rules.rulesTable.changeStatusAriaLabel',
+  {
+    defaultMessage: 'Change status',
+  }
+);
+
 export const confirmModalText = (
   numIdsToDelete: number,
   singleTitle: string,

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

@@ -9,12 +9,14 @@ import { AlertExecutionStatus } from '../../../../alerting/common';
 import { RuleTableItem, Rule } from '../../../../triggers_actions_ui/public';
 export interface StatusProps {
   type: RuleStatus;
+  disabled: boolean;
   onClick: () => void;
 }
 
 export enum RuleStatus {
   enabled = 'enabled',
   disabled = 'disabled',
+  snoozed = 'snoozed',
 }
 
 export type Status = Record<
@@ -27,10 +29,12 @@ export type Status = Record<
 
 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>;
 }
 
 export interface StatusFilterProps {

x-pack/plugins/triggers_actions_ui/public/index.ts

@@ -55,6 +55,7 @@ export { deleteRules } from './application/lib/rule_api/delete';
 export { enableRule } from './application/lib/rule_api/enable';
 export { disableRule } from './application/lib/rule_api/disable';
 export { muteRule } from './application/lib/rule_api/mute';
+export { unmuteRule } from './application/lib/rule_api/unmute';
 export { loadRuleAggregations } from './application/lib/rule_api/aggregate';
 export { useLoadRuleTypes } from './application/hooks/use_load_rule_types';