[Metrics UI] Fix alert management to open without refresh (elastic#73739

) (elastic#73906) * [Metrics UI] Fix alert management to open without refresh * removing unecessary code * Deleting unused imports Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
simianhacker · Jul 31, 2020 · 7b90b31 · 7b90b31
1 parent 2abf256
commit 7b90b31
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 46 deletions.
diff --git a/x-pack/plugins/infra/public/alerting/inventory/components/alert_dropdown.tsx b/x-pack/plugins/infra/public/alerting/inventory/components/alert_dropdown.tsx
@@ -4,17 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback } from 'react';
 import { EuiPopover, EuiButtonEmpty, EuiContextMenuItem, EuiContextMenuPanel } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useAlertPrefillContext } from '../../../alerting/use_alert_prefill';
 import { AlertFlyout } from './alert_flyout';
-import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+import { ManageAlertsContextMenuItem } from './manage_alerts_context_menu_item';
 
 export const InventoryAlertDropdown = () => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [flyoutVisible, setFlyoutVisible] = useState(false);
-  const kibana = useKibana();
 
   const { inventoryPrefill } = useAlertPrefillContext();
   const { nodeType, metric, filterQuery } = inventoryPrefill;
@@ -27,26 +26,12 @@ export const InventoryAlertDropdown = () => {
     setPopoverOpen(true);
   }, [setPopoverOpen]);
 
-  const menuItems = useMemo(() => {
-    return [
-      <EuiContextMenuItem icon="bell" key="createLink" onClick={() => setFlyoutVisible(true)}>
-        <FormattedMessage
-          id="xpack.infra.alerting.createAlertButton"
-          defaultMessage="Create alert"
-        />
-      </EuiContextMenuItem>,
-      <EuiContextMenuItem
-        icon="tableOfContents"
-        key="manageLink"
-        href={kibana.services?.application?.getUrlForApp(
-          'management/insightsAndAlerting/triggersActions/alerts'
-        )}
-      >
-        <FormattedMessage id="xpack.infra.alerting.manageAlerts" defaultMessage="Manage alerts" />
-      </EuiContextMenuItem>,
-    ];
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  }, [kibana.services]);
+  const menuItems = [
+    <EuiContextMenuItem icon="bell" key="createLink" onClick={() => setFlyoutVisible(true)}>
+      <FormattedMessage id="xpack.infra.alerting.createAlertButton" defaultMessage="Create alert" />
+    </EuiContextMenuItem>,
+    <ManageAlertsContextMenuItem />,
+  ];
 
   return (
     <>

diff --git a/...ck/plugins/infra/public/alerting/inventory/components/manage_alerts_context_menu_item.tsx b/...ck/plugins/infra/public/alerting/inventory/components/manage_alerts_context_menu_item.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiContextMenuItem } from '@elastic/eui';
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { useLinkProps } from '../../../hooks/use_link_props';
+
+export const ManageAlertsContextMenuItem = () => {
+  const manageAlertsLinkProps = useLinkProps({
+    app: 'management',
+    pathname: '/insightsAndAlerting/triggersActions/alerts',
+  });
+  return (
+    <EuiContextMenuItem icon="tableOfContents" key="manageLink" {...manageAlertsLinkProps}>
+      <FormattedMessage id="xpack.infra.alerting.manageAlerts" defaultMessage="Manage alerts" />
+    </EuiContextMenuItem>
+  );
+};
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_dropdown.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_dropdown.tsx
@@ -4,17 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback } from 'react';
 import { EuiPopover, EuiButtonEmpty, EuiContextMenuItem, EuiContextMenuPanel } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { useAlertPrefillContext } from '../../use_alert_prefill';
 import { AlertFlyout } from './alert_flyout';
+import { ManageAlertsContextMenuItem } from '../../inventory/components/manage_alerts_context_menu_item';
 
 export const MetricsAlertDropdown = () => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [flyoutVisible, setFlyoutVisible] = useState(false);
-  const kibana = useKibana();
 
   const { metricThresholdPrefill } = useAlertPrefillContext();
   const { groupBy, filterQuery, metrics } = metricThresholdPrefill;
@@ -27,26 +26,12 @@ export const MetricsAlertDropdown = () => {
     setPopoverOpen(true);
   }, [setPopoverOpen]);
 
-  const menuItems = useMemo(() => {
-    return [
-      <EuiContextMenuItem icon="bell" key="createLink" onClick={() => setFlyoutVisible(true)}>
-        <FormattedMessage
-          id="xpack.infra.alerting.createAlertButton"
-          defaultMessage="Create alert"
-        />
-      </EuiContextMenuItem>,
-      <EuiContextMenuItem
-        icon="tableOfContents"
-        key="manageLink"
-        href={kibana.services?.application?.getUrlForApp(
-          'management/insightsAndAlerting/triggersActions/alerts'
-        )}
-      >
-        <FormattedMessage id="xpack.infra.alerting.manageAlerts" defaultMessage="Manage alerts" />
-      </EuiContextMenuItem>,
-    ];
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  }, [kibana.services]);
+  const menuItems = [
+    <EuiContextMenuItem icon="bell" key="createLink" onClick={() => setFlyoutVisible(true)}>
+      <FormattedMessage id="xpack.infra.alerting.createAlertButton" defaultMessage="Create alert" />
+    </EuiContextMenuItem>,
+    <ManageAlertsContextMenuItem />,
+  ];
 
   return (
     <>