[Metrics UI] Hide Create Alert options for a read-only user (#91951)

x-pack/plugins/infra/public/alerting/common/components/metrics_alert_dropdown.tsx

@@ -14,6 +14,7 @@ import {
   EuiContextMenuPanelDescriptor,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { PrefilledInventoryAlertFlyout } from '../../inventory/components/alert_flyout';
 import { PrefilledThresholdAlertFlyout } from '../../metric_threshold/components/alert_flyout';
 import { useLinkProps } from '../../../hooks/use_link_props';
@@ -23,73 +24,100 @@ type VisibleFlyoutType = 'inventory' | 'threshold' | null;
 export const MetricsAlertDropdown = () => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [visibleFlyoutType, setVisibleFlyoutType] = useState<VisibleFlyoutType>(null);
+  const uiCapabilities = useKibana().services.application?.capabilities;
+
+  const canCreateAlerts = useMemo(() => Boolean(uiCapabilities?.infrastructure?.save), [
+    uiCapabilities,
+  ]);
 
   const closeFlyout = useCallback(() => setVisibleFlyoutType(null), [setVisibleFlyoutType]);
 
+  const infrastructureAlertsPanel = useMemo(
+    () => ({
+      id: 1,
+      title: i18n.translate('xpack.infra.alerting.infrastructureDropdownTitle', {
+        defaultMessage: 'Infrastructure alerts',
+      }),
+      items: [
+        {
+          name: i18n.translate('xpack.infra.alerting.createInventoryAlertButton', {
+            defaultMessage: 'Create inventory alert',
+          }),
+          onClick: () => setVisibleFlyoutType('inventory'),
+        },
+      ],
+    }),
+    [setVisibleFlyoutType]
+  );
+
+  const metricsAlertsPanel = useMemo(
+    () => ({
+      id: 2,
+      title: i18n.translate('xpack.infra.alerting.metricsDropdownTitle', {
+        defaultMessage: 'Metrics alerts',
+      }),
+      items: [
+        {
+          name: i18n.translate('xpack.infra.alerting.createThresholdAlertButton', {
+            defaultMessage: 'Create threshold alert',
+          }),
+          onClick: () => setVisibleFlyoutType('threshold'),
+        },
+      ],
+    }),
+    [setVisibleFlyoutType]
+  );
+
   const manageAlertsLinkProps = useLinkProps({
     app: 'management',
     pathname: '/insightsAndAlerting/triggersActions/alerts',
   });
 
+  const manageAlertsMenuItem = useMemo(
+    () => ({
+      name: i18n.translate('xpack.infra.alerting.manageAlerts', {
+        defaultMessage: 'Manage alerts',
+      }),
+      icon: 'tableOfContents',
+      onClick: manageAlertsLinkProps.onClick,
+    }),
+    [manageAlertsLinkProps]
+  );
+
+  const firstPanelMenuItems: EuiContextMenuPanelDescriptor['items'] = useMemo(
+    () =>
+      canCreateAlerts
+        ? [
+            {
+              name: i18n.translate('xpack.infra.alerting.infrastructureDropdownMenu', {
+                defaultMessage: 'Infrastructure',
+              }),
+              panel: 1,
+            },
+            {
+              name: i18n.translate('xpack.infra.alerting.metricsDropdownMenu', {
+                defaultMessage: 'Metrics',
+              }),
+              panel: 2,
+            },
+            manageAlertsMenuItem,
+          ]
+        : [manageAlertsMenuItem],
+    [canCreateAlerts, manageAlertsMenuItem]
+  );
+
   const panels: EuiContextMenuPanelDescriptor[] = useMemo(
-    () => [
-      {
-        id: 0,
-        title: i18n.translate('xpack.infra.alerting.alertDropdownTitle', {
-          defaultMessage: 'Alerts',
-        }),
-        items: [
-          {
-            name: i18n.translate('xpack.infra.alerting.infrastructureDropdownMenu', {
-              defaultMessage: 'Infrastructure',
-            }),
-            panel: 1,
-          },
-          {
-            name: i18n.translate('xpack.infra.alerting.metricsDropdownMenu', {
-              defaultMessage: 'Metrics',
-            }),
-            panel: 2,
-          },
-          {
-            name: i18n.translate('xpack.infra.alerting.manageAlerts', {
-              defaultMessage: 'Manage alerts',
-            }),
-            icon: 'tableOfContents',
-            onClick: manageAlertsLinkProps.onClick,
-          },
-        ],
-      },
-      {
-        id: 1,
-        title: i18n.translate('xpack.infra.alerting.infrastructureDropdownTitle', {
-          defaultMessage: 'Infrastructure alerts',
-        }),
-        items: [
-          {
-            name: i18n.translate('xpack.infra.alerting.createInventoryAlertButton', {
-              defaultMessage: 'Create inventory alert',
-            }),
-            onClick: () => setVisibleFlyoutType('inventory'),
-          },
-        ],
-      },
-      {
-        id: 2,
-        title: i18n.translate('xpack.infra.alerting.metricsDropdownTitle', {
-          defaultMessage: 'Metrics alerts',
-        }),
-        items: [
-          {
-            name: i18n.translate('xpack.infra.alerting.createThresholdAlertButton', {
-              defaultMessage: 'Create threshold alert',
-            }),
-            onClick: () => setVisibleFlyoutType('threshold'),
-          },
-        ],
-      },
-    ],
-    [manageAlertsLinkProps, setVisibleFlyoutType]
+    () =>
+      [
+        {
+          id: 0,
+          title: i18n.translate('xpack.infra.alerting.alertDropdownTitle', {
+            defaultMessage: 'Alerts',
+          }),
+          items: firstPanelMenuItems,
+        },
+      ].concat(canCreateAlerts ? [infrastructureAlertsPanel, metricsAlertsPanel] : []),
+    [infrastructureAlertsPanel, metricsAlertsPanel, firstPanelMenuItems, canCreateAlerts]
   );
 
   const closePopover = useCallback(() => {

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx

@@ -12,6 +12,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 import { EuiOutsideClickDetector } from '@elastic/eui';
 import { EuiIcon, EuiButtonIcon } from '@elastic/eui';
 import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
+import { useKibana } from '../../../../../../../../../src/plugins/kibana_react/public';
 import { InfraWaffleMapNode, InfraWaffleMapOptions } from '../../../../../lib/lib';
 import { InventoryItemType } from '../../../../../../common/inventory_models/types';
 import { MetricsTab } from './tabs/metrics/metrics';
@@ -46,6 +47,10 @@ export const NodeContextPopover = ({
   const tabConfigs = [MetricsTab, LogsTab, ProcessesTab, PropertiesTab];
   const inventoryModel = findInventoryModel(nodeType);
   const nodeDetailFrom = currentTime - inventoryModel.metrics.defaultTimeRangeInSeconds * 1000;
+  const uiCapabilities = useKibana().services.application?.capabilities;
+  const canCreateAlerts = useMemo(() => Boolean(uiCapabilities?.infrastructure?.save), [
+    uiCapabilities,
+  ]);
 
   const tabs = useMemo(() => {
     return tabConfigs.map((m) => {
@@ -96,20 +101,22 @@ export const NodeContextPopover = ({
               </OverlayTitle>
               <EuiFlexItem grow={false}>
                 <EuiFlexGroup gutterSize="m" responsive={false}>
-                  <EuiFlexItem grow={false}>
-                    <EuiButtonEmpty
-                      onClick={openAlertFlyout}
-                      size="xs"
-                      iconSide={'left'}
-                      flush="both"
-                      iconType="bell"
-                    >
-                      <FormattedMessage
-                        id="xpack.infra.infra.nodeDetails.createAlertLink"
-                        defaultMessage="Create alert"
-                      />
-                    </EuiButtonEmpty>
-                  </EuiFlexItem>
+                  {canCreateAlerts && (
+                    <EuiFlexItem grow={false}>
+                      <EuiButtonEmpty
+                        onClick={openAlertFlyout}
+                        size="xs"
+                        iconSide={'left'}
+                        flush="both"
+                        iconType="bell"
+                      >
+                        <FormattedMessage
+                          id="xpack.infra.infra.nodeDetails.createAlertLink"
+                          defaultMessage="Create alert"
+                        />
+                      </EuiButtonEmpty>
+                    </EuiFlexItem>
+                  )}
                   <EuiFlexItem grow={false}>
                     <EuiButtonEmpty
                       size="xs"

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx

@@ -71,6 +71,7 @@ export const NodeContextMenu: React.FC<Props & { theme?: EuiTheme }> = withTheme
     const showUptimeLink =
       inventoryModel.crosslinkSupport.uptime &&
       (['pod', 'container'].includes(nodeType) || node.ip);
+    const showCreateAlertLink = uiCapabilities?.infrastructure?.save;
 
     const inventoryId = useMemo(() => {
       if (nodeType === 'host') {
@@ -155,10 +156,10 @@ export const NodeContextMenu: React.FC<Props & { theme?: EuiTheme }> = withTheme
       label: i18n.translate('xpack.infra.nodeContextMenu.createAlertLink', {
         defaultMessage: 'Create alert',
       }),
-      style: { color: theme?.eui.euiLinkColor || '#006BB4', fontWeight: 500, padding: 0 },
       onClick: () => {
         setFlyoutVisible(true);
       },
+      isDisabled: !showCreateAlertLink,
     };
 
     return (

x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.test.tsx

@@ -25,6 +25,7 @@ const uiCapabilities: Capabilities = {
   management: { fake: { show: false } },
   catalogue: { show: false },
   visualize: { show: true },
+  infrastructure: { save: true },
 };
 
 const getTestSubject = (component: ReactWrapper, name: string) => {

x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx

@@ -152,20 +152,21 @@ export const MetricsExplorerChartContextMenu: React.FC<Props> = ({
       ]
     : [];
 
-  const itemPanels = [
-    ...filterByItem,
-    ...openInVisualize,
-    ...viewNodeDetail,
-    {
-      name: i18n.translate('xpack.infra.metricsExplorer.alerts.createAlertButton', {
-        defaultMessage: 'Create alert',
-      }),
-      icon: 'bell',
-      onClick() {
-        setFlyoutVisible(true);
-      },
-    },
-  ];
+  const createAlert = uiCapabilities?.infrastructure?.save
+    ? [
+        {
+          name: i18n.translate('xpack.infra.metricsExplorer.alerts.createAlertButton', {
+            defaultMessage: 'Create alert',
+          }),
+          icon: 'bell',
+          onClick() {
+            setFlyoutVisible(true);
+          },
+        },
+      ]
+    : [];
+
+  const itemPanels = [...filterByItem, ...openInVisualize, ...viewNodeDetail, ...createAlert];
 
   // If there are no itemPanels then there is no reason to show the actions button.
   if (itemPanels.length === 0) return null;