[7.x] [Logs UI] Add "View in machine learning" links in the anomaly explorer (#74555) (#75454)

Co-authored-by: Felix Stürmer <weltenwort@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: 3 people

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

@@ -40,7 +40,7 @@ export const AnalyzeInMlButton: React.FunctionComponent<{
   );
 };
 
-const getOverallAnomalyExplorerLinkDescriptor = (
+export const getOverallAnomalyExplorerLinkDescriptor = (
   jobId: string,
   timeRange: TimeRange
 ): LinkDescriptor => {

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

@@ -22,8 +22,14 @@ 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 viewLogEntryRateSetupFlyout = useCallback(() => {
     onViewModuleSetup('logs_ui_analysis');
@@ -37,6 +43,7 @@ export const LogAnalysisModuleList: React.FC<{
       <EuiFlexGroup>
         <EuiFlexItem>
           <LogAnalysisModuleListCard
+            jobId={logEntryRateJobIds['log-entry-rate']}
             hasSetupCapabilities={hasLogAnalysisSetupCapabilities}
             moduleDescription={logEntryRateModule.moduleDescription}
             moduleName={logEntryRateModule.moduleName}
@@ -46,6 +53,7 @@ export const LogAnalysisModuleList: React.FC<{
         </EuiFlexItem>
         <EuiFlexItem>
           <LogAnalysisModuleListCard
+            jobId={logEntryCategoriesJobIds['log-entry-categories-count']}
             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,41 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiCard, EuiIcon } from '@elastic/eui';
+import { EuiCard, EuiIcon, EuiButtonEmpty, EuiSpacer } 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';
 
 export const LogAnalysisModuleListCard: React.FC<{
+  jobId: string;
   hasSetupCapabilities: boolean;
   moduleDescription: string;
   moduleName: string;
   moduleStatus: SetupStatus;
   onViewSetup: () => void;
-}> = ({ hasSetupCapabilities, moduleDescription, moduleName, moduleStatus, onViewSetup }) => {
+}> = ({
+  jobId,
+  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({
+    app: 'ml',
+    pathname: '/jobs',
+    search: { mlManagement: `(jobId:${jobId})` },
+  });
+
   const moduleSetupButton =
     moduleStatus.type === 'required' ? (
       <CreateJobButton hasSetupCapabilities={hasSetupCapabilities} onClick={onViewSetup}>
@@ -33,7 +48,16 @@ export const LogAnalysisModuleListCard: React.FC<{
         />
       </CreateJobButton>
     ) : (
-      <RecreateJobButton hasSetupCapabilities={hasSetupCapabilities} onClick={onViewSetup} />
+      <>
+        <RecreateJobButton hasSetupCapabilities={hasSetupCapabilities} onClick={onViewSetup} />
+        <EuiSpacer size="xs" />
+        <EuiButtonEmpty {...viewInMlLinkProps}>
+          <FormattedMessage
+            id="xpack.infra.logs.analysis.viewInMlButtonLabel"
+            defaultMessage="View in Machine Learning"
+          />
+        </EuiButtonEmpty>
+      </>
     );
 
   return (