[Logs UI] Add "View in machine learning" links in the anomaly explorer

x-pack/plugins/infra/public/components/logging/log_analysis_results/analyze_in_ml_button.tsx

@@ -11,10 +11,12 @@ import { encode } from 'rison-node';
 import { TimeRange } from '../../../../common/http_api/shared/time_range';
 import { useLinkProps, LinkDescriptor } from '../../../hooks/use_link_props';
 
+type DatemathRange = TimeRange | { startTime: string; endTime: string };
+
 export const AnalyzeInMlButton: React.FunctionComponent<{
   jobId: string;
   partition?: string;
-  timeRange: TimeRange;
+  timeRange: DatemathRange;
 }> = ({ jobId, partition, timeRange }) => {
   const linkProps = useLinkProps(
     typeof partition === 'string'
@@ -40,9 +42,9 @@ export const AnalyzeInMlButton: React.FunctionComponent<{
   );
 };
 
-const getOverallAnomalyExplorerLinkDescriptor = (
+export const getOverallAnomalyExplorerLinkDescriptor = (
   jobId: string,
-  timeRange: TimeRange
+  timeRange: DatemathRange
 ): LinkDescriptor => {
   const { from, to } = convertTimeRangeToParams(timeRange);
 
@@ -65,7 +67,7 @@ const getOverallAnomalyExplorerLinkDescriptor = (
 
 export const getEntitySpecificSingleMetricViewerLink = (
   jobId: string,
-  timeRange: TimeRange,
+  timeRange: DatemathRange,
   entities: Record<string, string>
 ): LinkDescriptor => {
   const { from, to } = convertTimeRangeToParams(timeRange);
@@ -94,9 +96,15 @@ export const getEntitySpecificSingleMetricViewerLink = (
   };
 };
 
-const convertTimeRangeToParams = (timeRange: TimeRange): { from: string; to: string } => {
+const convertTimeRangeToParams = (timeRange: DatemathRange): { from: string; to: string } => {
   return {
-    from: new Date(timeRange.startTime).toISOString(),
-    to: new Date(timeRange.endTime).toISOString(),
+    from:
+      typeof timeRange.startTime === 'number'
+        ? new Date(timeRange.startTime).toISOString()
+        : timeRange.startTime,
+    to:
+      typeof timeRange.endTime === 'number'
+        ? new Date(timeRange.endTime).toISOString()
+        : timeRange.endTime,
   };
 };

x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_flyout/module_list.tsx

@@ -17,13 +17,22 @@ import {
 } from '../../../../containers/logs/log_analysis/modules/log_entry_rate';
 import { LogAnalysisModuleListCard } from './module_list_card';
 import type { ModuleId } from './setup_flyout_state';
+import { useLogAnalysisResultsUrlState } from '../../../../pages/logs/log_entry_rate/use_log_entry_rate_results_url_state';
 
 export const LogAnalysisModuleList: React.FC<{
   onViewModuleSetup: (module: ModuleId) => void;
 }> = ({ onViewModuleSetup }) => {
   const { hasLogAnalysisSetupCapabilities } = useLogAnalysisCapabilitiesContext();
-  const { setupStatus: logEntryRateSetupStatus } = useLogEntryRateModuleContext();
-  const { setupStatus: logEntryCategoriesSetupStatus } = useLogEntryCategoriesModuleContext();
+  const {
+    setupStatus: logEntryRateSetupStatus,
+    jobIds: logEntryRateJobIds,
+  } = useLogEntryRateModuleContext();
+  const {
+    setupStatus: logEntryCategoriesSetupStatus,
+    jobIds: logEntryCategoriesJobIds,
+  } = useLogEntryCategoriesModuleContext();
+
+  const { timeRange } = useLogAnalysisResultsUrlState();
 
   const viewLogEntryRateSetupFlyout = useCallback(() => {
     onViewModuleSetup('logs_ui_analysis');
@@ -37,6 +46,8 @@ export const LogAnalysisModuleList: React.FC<{
       <EuiFlexGroup>
         <EuiFlexItem>
           <LogAnalysisModuleListCard
+            jobId={logEntryRateJobIds['log-entry-rate']}
+            timeRange={timeRange}
             hasSetupCapabilities={hasLogAnalysisSetupCapabilities}
             moduleDescription={logEntryRateModule.moduleDescription}
             moduleName={logEntryRateModule.moduleName}
@@ -46,6 +57,8 @@ export const LogAnalysisModuleList: React.FC<{
         </EuiFlexItem>
         <EuiFlexItem>
           <LogAnalysisModuleListCard
+            jobId={logEntryCategoriesJobIds['log-entry-categories-count']}
+            timeRange={timeRange}
             hasSetupCapabilities={hasLogAnalysisSetupCapabilities}
             moduleDescription={logEntryCategoriesModule.moduleDescription}
             moduleName={logEntryCategoriesModule.moduleName}

x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_flyout/module_list_card.tsx

@@ -4,26 +4,40 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiCard, EuiIcon } from '@elastic/eui';
+import { EuiCard, EuiIcon, EuiButtonEmpty } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 import { SetupStatus } from '../../../../../common/log_analysis';
 import { CreateJobButton, RecreateJobButton } from '../../log_analysis_setup/create_job_button';
+import { useLinkProps } from '../../../../hooks/use_link_props';
+import { getOverallAnomalyExplorerLinkDescriptor } from '../../log_analysis_results/analyze_in_ml_button';
 
 export const LogAnalysisModuleListCard: React.FC<{
+  jobId: string;
+  timeRange: { startTime: string; endTime: string };
   hasSetupCapabilities: boolean;
   moduleDescription: string;
   moduleName: string;
   moduleStatus: SetupStatus;
   onViewSetup: () => void;
-}> = ({ hasSetupCapabilities, moduleDescription, moduleName, moduleStatus, onViewSetup }) => {
+}> = ({
+  jobId,
+  timeRange,
+  hasSetupCapabilities,
+  moduleDescription,
+  moduleName,
+  moduleStatus,
+  onViewSetup,
+}) => {
   const moduleIcon =
     moduleStatus.type === 'required' ? (
       <EuiIcon size="xxl" type="machineLearningApp" />
     ) : (
       <EuiIcon color="secondary" size="xxl" type="check" />
     );
 
+  const viewInMlLinkProps = useLinkProps(getOverallAnomalyExplorerLinkDescriptor(jobId, timeRange));
+
   const moduleSetupButton =
     moduleStatus.type === 'required' ? (
       <CreateJobButton hasSetupCapabilities={hasSetupCapabilities} onClick={onViewSetup}>
@@ -33,7 +47,15 @@ export const LogAnalysisModuleListCard: React.FC<{
         />
       </CreateJobButton>
     ) : (
-      <RecreateJobButton hasSetupCapabilities={hasSetupCapabilities} onClick={onViewSetup} />
+      <>
+        <RecreateJobButton hasSetupCapabilities={hasSetupCapabilities} onClick={onViewSetup} />
+        <EuiButtonEmpty {...viewInMlLinkProps}>
+          <FormattedMessage
+            id="xpack.infra.logs.analysy.viewInMlButtonLabel"
+            defaultMessage="View in Machine Learning"
+          />
+        </EuiButtonEmpty>
+      </>
     );
 
   return (