use EuiTable built in Actions column type for Discover link

x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import {
   EuiBadge,
   EuiBasicTable,
@@ -18,13 +18,12 @@ import { sortBy } from 'lodash';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { escapeKuery } from '@kbn/es-query';
 import type { ChangePoint } from '@kbn/ml-agg-utils';
-
 import { useEuiTheme } from '../../hooks/use_eui_theme';
-
 import { MiniHistogram } from '../mini_histogram';
-
-import { LinksMenu } from './links_menu';
+import { useAiOpsKibana } from '../../kibana_context';
+import { SEARCH_QUERY_LANGUAGE } from '../../application/utils/search_utils';
 
 import { getFailedTransactionsCorrelationImpactLabel } from './get_failed_transactions_correlation_impact_label';
 
@@ -33,6 +32,12 @@ const NARROW_COLUMN_WIDTH = '120px';
 const PAGINATION_SIZE_OPTIONS = [5, 10, 20, 50];
 const DEFAULT_SORT_FIELD = 'pValue';
 const DEFAULT_SORT_DIRECTION = 'asc';
+const viewInDiscoverMessage = i18n.translate(
+  'xpack.aiops.spikeAnalysisTable.linksMenu.viewInDiscover',
+  {
+    defaultMessage: 'View in Discover',
+  }
+);
 
 interface SpikeAnalysisTableProps {
   changePoints: ChangePoint[];
@@ -57,6 +62,71 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
   const [pageSize, setPageSize] = useState(10);
   const [sortField, setSortField] = useState<keyof ChangePoint>(DEFAULT_SORT_FIELD);
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>(DEFAULT_SORT_DIRECTION);
+  const [discoverUrlError, setDiscoverUrlError] = useState<string | undefined>();
+
+  const aiOpsKibana = useAiOpsKibana();
+  const {
+    services: { application, share, data },
+  } = aiOpsKibana;
+
+  const discoverLocator = useMemo(
+    () => share.url.locators.get('DISCOVER_APP_LOCATOR'),
+    [share.url.locators]
+  );
+
+  useEffect(() => {
+    if (!application.capabilities.discover?.show) {
+      const discoverNotEnabled = i18n.translate(
+        'xpack.ml.anomaliesTable.linksMenu.discoverNotEnabledErrorMessage',
+        {
+          defaultMessage: 'Discover is not enabled',
+        }
+      );
+
+      setDiscoverUrlError(discoverNotEnabled);
+      return;
+    }
+    if (!discoverLocator) {
+      const discoverLocatorMissing = i18n.translate(
+        'xpack.ml.anomaliesTable.linksMenu.discoverLocatorMissingErrorMessage',
+        {
+          defaultMessage: 'No locator for Discover detected',
+        }
+      );
+
+      setDiscoverUrlError(discoverLocatorMissing);
+      return;
+    }
+    if (!dataViewId) {
+      const autoGeneratedDiscoverLinkError = i18n.translate(
+        'xpack.ml.anomaliesTable.linksMenu.autoGeneratedDiscoverLinkErrorMessage',
+        {
+          defaultMessage: 'Unable to link to Discover; no data view exists for this index',
+        }
+      );
+
+      setDiscoverUrlError(autoGeneratedDiscoverLinkError);
+      return;
+    }
+  }, [application.capabilities.discover?.show, dataViewId, discoverLocator]);
+
+  const generateDiscoverUrl = async (changePoint: ChangePoint) => {
+    if (discoverLocator !== undefined) {
+      const url = await discoverLocator.getRedirectUrl({
+        indexPatternId: dataViewId,
+        timeRange: data.query.timefilter.timefilter.getTime(),
+        filters: data.query.filterManager.getFilters(),
+        query: {
+          language: SEARCH_QUERY_LANGUAGE.KUERY,
+          query: `${escapeKuery(changePoint.fieldName)}:${escapeKuery(
+            String(changePoint.fieldValue)
+          )}`,
+        },
+      });
+
+      return url;
+    }
+  };
 
   const columns: Array<EuiBasicTableColumn<ChangePoint>> = [
     {
@@ -172,9 +242,24 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
       name: i18n.translate('xpack.ml.anomaliesTable.actionsColumnName', {
         defaultMessage: 'Actions',
       }),
-      render: (changePoint: ChangePoint) => {
-        return <LinksMenu changePoint={changePoint} dataViewId={dataViewId} />;
-      },
+      actions: [
+        {
+          name: () => (
+            <EuiToolTip content={discoverUrlError ? discoverUrlError : viewInDiscoverMessage}>
+              <EuiIcon type="link" />
+            </EuiToolTip>
+          ),
+          description: viewInDiscoverMessage,
+          type: 'button',
+          onClick: async (changePoint) => {
+            const openInDiscoverUrl = await generateDiscoverUrl(changePoint);
+            if (typeof openInDiscoverUrl === 'string') {
+              await application.navigateToUrl(openInDiscoverUrl);
+            }
+          },
+          enabled: () => discoverUrlError === undefined,
+        },
+      ],
     },
   ];