Allow for alerts toggle button to receive a set of types to display.

elastic · May 4, 2020 · 86add5b · 86add5b
1 parent 190610c
commit 86add5b
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 59 deletions.
diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/index.ts b/x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/index.ts
@@ -5,5 +5,8 @@
  */
 
 export { AlertMonitorStatus } from './alert_monitor_status';
-export { ToggleAlertFlyoutButton } from './toggle_alert_flyout_button';
+export {
+  ToggleAlertFlyoutButton,
+  ToggleAlertFlyoutButtonProps,
+} from './toggle_alert_flyout_button';
 export { UptimeAlertsFlyoutWrapper } from './uptime_alerts_flyout_wrapper';
diff --git a/...uptime/public/components/overview/alerts/alerts_containers/toggle_alert_flyout_button.tsx b/...uptime/public/components/overview/alerts/alerts_containers/toggle_alert_flyout_button.tsx
@@ -9,10 +9,15 @@ import { useDispatch } from 'react-redux';
 import { setAlertFlyoutType, setAlertFlyoutVisible } from '../../../../state/actions';
 import { ToggleAlertFlyoutButtonComponent } from '../index';
 
-export const ToggleAlertFlyoutButton = () => {
+export interface ToggleAlertFlyoutButtonProps {
+  alertOptions?: string[];
+}
+
+export const ToggleAlertFlyoutButton: React.FC<ToggleAlertFlyoutButtonProps> = props => {
   const dispatch = useDispatch();
   return (
     <ToggleAlertFlyoutButtonComponent
+      {...props}
       setAlertFlyoutVisible={(value: boolean | string) => {
         if (typeof value === 'string') {
           dispatch(setAlertFlyoutType(value));

diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/toggle_alert_flyout_button.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/toggle_alert_flyout_button.tsx
@@ -8,6 +8,7 @@ import {
   EuiButtonEmpty,
   EuiContextMenu,
   EuiContextMenuPanelDescriptor,
+  EuiContextMenuPanelItemDescriptor,
   EuiLink,
   EuiPopover,
 } from '@elastic/eui';
@@ -16,74 +17,109 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { CLIENT_ALERT_TYPES } from '../../../../common/constants';
 import { ToggleFlyoutTranslations } from './translations';
+import { ToggleAlertFlyoutButtonProps } from './alerts_containers';
 
-interface Props {
+interface ComponentProps {
   setAlertFlyoutVisible: (value: boolean | string) => void;
 }
 
+type Props = ComponentProps & ToggleAlertFlyoutButtonProps;
+
 const ALERT_CONTEXT_MAIN_PANEL_ID = 0;
 const ALERT_CONTEXT_SELECT_TYPE_PANEL_ID = 1;
 
-export const ToggleAlertFlyoutButtonComponent = ({ setAlertFlyoutVisible }: Props) => {
+export const ToggleAlertFlyoutButtonComponent: React.FC<Props> = ({
+  alertOptions,
+  setAlertFlyoutVisible,
+}) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const kibana = useKibana();
-  const panels: EuiContextMenuPanelDescriptor[] = [
-    {
-      id: ALERT_CONTEXT_MAIN_PANEL_ID,
-      title: 'main panel',
-      items: [
-        {
-          'aria-label': ToggleFlyoutTranslations.openAlertContextPanelAriaLabel,
-          'data-test-subj': 'xpack.uptime.openAlertContextPanel',
-          name: ToggleFlyoutTranslations.openAlertContextPanelLabel,
-          icon: 'bell',
-          panel: 1,
-        },
-        {
-          'aria-label': ToggleFlyoutTranslations.navigateToAlertingUIAriaLabel,
-          'data-test-subj': 'xpack.uptime.navigateToAlertingUi',
-          name: (
-            <EuiLink
-              color="text"
-              href={kibana.services?.application?.getUrlForApp(
-                'kibana#/management/kibana/triggersActions/alerts'
-              )}
-            >
-              <FormattedMessage
-                id="xpack.uptime.navigateToAlertingButton.content"
-                defaultMessage="Manage alerts"
-              />
-            </EuiLink>
-          ),
-          icon: 'tableOfContents',
-        },
-      ],
+  const monitorStatusAlertContextMenuItem: EuiContextMenuPanelItemDescriptor = {
+    'aria-label': ToggleFlyoutTranslations.toggleMonitorStatusAriaLabel,
+    'data-test-subj': 'xpack.uptime.toggleAlertFlyout',
+    name: ToggleFlyoutTranslations.toggleMonitorStatusContent,
+    onClick: () => {
+      setAlertFlyoutVisible(CLIENT_ALERT_TYPES.MONITOR_STATUS);
+      setIsOpen(false);
     },
-    {
-      id: ALERT_CONTEXT_SELECT_TYPE_PANEL_ID,
-      title: 'create alerts',
-      items: [
-        {
-          'aria-label': ToggleFlyoutTranslations.toggleMonitorStatusAriaLabel,
-          'data-test-subj': 'xpack.uptime.toggleAlertFlyout',
-          name: ToggleFlyoutTranslations.toggleMonitorStatusContent,
-          onClick: () => {
-            setAlertFlyoutVisible(CLIENT_ALERT_TYPES.MONITOR_STATUS);
-            setIsOpen(false);
-          },
-        },
-        {
-          'aria-label': ToggleFlyoutTranslations.toggleTlsAriaLabel,
-          'data-test-subj': 'xpack.uptime.toggleTlsAlertFlyout',
-          name: ToggleFlyoutTranslations.toggleTlsContent,
-          onClick: () => {
-            setAlertFlyoutVisible(CLIENT_ALERT_TYPES.TLS);
-            setIsOpen(false);
-          },
-        },
-      ],
+  };
+
+  const tlsAlertContextMenuItem: EuiContextMenuPanelItemDescriptor = {
+    'aria-label': ToggleFlyoutTranslations.toggleTlsAriaLabel,
+    'data-test-subj': 'xpack.uptime.toggleTlsAlertFlyout',
+    name: ToggleFlyoutTranslations.toggleTlsContent,
+    onClick: () => {
+      setAlertFlyoutVisible(CLIENT_ALERT_TYPES.TLS);
+      setIsOpen(false);
     },
-  ];
+  };
+
+  const managementContextItem: EuiContextMenuPanelItemDescriptor = {
+    'aria-label': ToggleFlyoutTranslations.navigateToAlertingUIAriaLabel,
+    'data-test-subj': 'xpack.uptime.navigateToAlertingUi',
+    name: (
+      <EuiLink
+        color="text"
+        href={kibana.services?.application?.getUrlForApp(
+          'kibana#/management/kibana/triggersActions/alerts'
+        )}
+      >
+        <FormattedMessage
+          id="xpack.uptime.navigateToAlertingButton.content"
+          defaultMessage="Manage alerts"
+        />
+      </EuiLink>
+    ),
+    icon: 'tableOfContents',
+  };
+
+  let selectionItems: EuiContextMenuPanelItemDescriptor[] = [];
+  if (!alertOptions) {
+    selectionItems = [monitorStatusAlertContextMenuItem, tlsAlertContextMenuItem];
+  } else {
+    alertOptions.forEach(option => {
+      if (option === CLIENT_ALERT_TYPES.MONITOR_STATUS)
+        selectionItems.push(monitorStatusAlertContextMenuItem);
+      else if (option === CLIENT_ALERT_TYPES.TLS) selectionItems.push(tlsAlertContextMenuItem);
+    });
+  }
+
+  if (selectionItems.length === 1) {
+    selectionItems[0].icon = 'bell';
+  }
+
+  let panels: EuiContextMenuPanelDescriptor[];
+  if (selectionItems.length === 1) {
+    panels = [
+      {
+        id: ALERT_CONTEXT_MAIN_PANEL_ID,
+        title: 'main panel',
+        items: [...selectionItems, managementContextItem],
+      },
+    ];
+  } else {
+    panels = [
+      {
+        id: ALERT_CONTEXT_MAIN_PANEL_ID,
+        title: 'main panel',
+        items: [
+          {
+            'aria-label': ToggleFlyoutTranslations.openAlertContextPanelAriaLabel,
+            'data-test-subj': 'xpack.uptime.openAlertContextPanel',
+            name: ToggleFlyoutTranslations.openAlertContextPanelLabel,
+            icon: 'bell',
+            panel: ALERT_CONTEXT_SELECT_TYPE_PANEL_ID,
+          },
+          managementContextItem,
+        ],
+      },
+      {
+        id: ALERT_CONTEXT_SELECT_TYPE_PANEL_ID,
+        title: 'create alerts',
+        items: selectionItems,
+      },
+    ];
+  }
 
   return (
     <EuiPopover