[7.x] [Logs UI] Add missing ML capabilities checks (#72606) (#72905)

Backports the following commits to 7.x:
 - [Logs UI] Add missing ML capabilities checks (#72606)

Author: weltenwort

x-pack/plugins/infra/public/components/logging/log_analysis_job_status/index.ts

@@ -6,4 +6,3 @@
 
 export * from './log_analysis_job_problem_indicator';
 export * from './notices_section';
-export * from './recreate_job_button';

x-pack/plugins/infra/public/components/logging/log_analysis_job_status/job_configuration_outdated_callout.tsx

@@ -11,10 +11,12 @@ import React from 'react';
 import { RecreateJobCallout } from './recreate_job_callout';
 
 export const JobConfigurationOutdatedCallout: React.FC<{
+  hasSetupCapabilities: boolean;
   moduleName: string;
   onRecreateMlJob: () => void;
-}> = ({ moduleName, onRecreateMlJob }) => (
+}> = ({ hasSetupCapabilities, moduleName, onRecreateMlJob }) => (
   <RecreateJobCallout
+    hasSetupCapabilities={hasSetupCapabilities}
     title={i18n.translate('xpack.infra.logs.analysis.jobConfigurationOutdatedCalloutTitle', {
       defaultMessage: 'The {moduleName} ML job configuration is outdated',
       values: {

x-pack/plugins/infra/public/components/logging/log_analysis_job_status/job_definition_outdated_callout.tsx

@@ -11,10 +11,12 @@ import React from 'react';
 import { RecreateJobCallout } from './recreate_job_callout';
 
 export const JobDefinitionOutdatedCallout: React.FC<{
+  hasSetupCapabilities: boolean;
   moduleName: string;
   onRecreateMlJob: () => void;
-}> = ({ moduleName, onRecreateMlJob }) => (
+}> = ({ hasSetupCapabilities, moduleName, onRecreateMlJob }) => (
   <RecreateJobCallout
+    hasSetupCapabilities={hasSetupCapabilities}
     title={i18n.translate('xpack.infra.logs.analysis.jobDefinitionOutdatedCalloutTitle', {
       defaultMessage: 'The {moduleName} ML job definition is outdated',
       values: {

x-pack/plugins/infra/public/components/logging/log_analysis_job_status/log_analysis_job_problem_indicator.tsx

@@ -14,6 +14,7 @@ import { FirstUseCallout } from '../log_analysis_results';
 export const LogAnalysisJobProblemIndicator: React.FC<{
   hasOutdatedJobConfigurations: boolean;
   hasOutdatedJobDefinitions: boolean;
+  hasSetupCapabilities: boolean;
   hasStoppedJobs: boolean;
   isFirstUse: boolean;
   moduleName: string;
@@ -22,6 +23,7 @@ export const LogAnalysisJobProblemIndicator: React.FC<{
 }> = ({
   hasOutdatedJobConfigurations,
   hasOutdatedJobDefinitions,
+  hasSetupCapabilities,
   hasStoppedJobs,
   isFirstUse,
   moduleName,
@@ -32,12 +34,14 @@ export const LogAnalysisJobProblemIndicator: React.FC<{
     <>
       {hasOutdatedJobDefinitions ? (
         <JobDefinitionOutdatedCallout
+          hasSetupCapabilities={hasSetupCapabilities}
           moduleName={moduleName}
           onRecreateMlJob={onRecreateMlJobForUpdate}
         />
       ) : null}
       {hasOutdatedJobConfigurations ? (
         <JobConfigurationOutdatedCallout
+          hasSetupCapabilities={hasSetupCapabilities}
           moduleName={moduleName}
           onRecreateMlJob={onRecreateMlJobForReconfiguration}
         />

x-pack/plugins/infra/public/components/logging/log_analysis_job_status/notices_section.tsx

@@ -12,6 +12,7 @@ import { CategoryQualityWarnings } from './quality_warning_notices';
 export const CategoryJobNoticesSection: React.FC<{
   hasOutdatedJobConfigurations: boolean;
   hasOutdatedJobDefinitions: boolean;
+  hasSetupCapabilities: boolean;
   hasStoppedJobs: boolean;
   isFirstUse: boolean;
   moduleName: string;
@@ -21,6 +22,7 @@ export const CategoryJobNoticesSection: React.FC<{
 }> = ({
   hasOutdatedJobConfigurations,
   hasOutdatedJobDefinitions,
+  hasSetupCapabilities,
   hasStoppedJobs,
   isFirstUse,
   moduleName,
@@ -32,6 +34,7 @@ export const CategoryJobNoticesSection: React.FC<{
     <LogAnalysisJobProblemIndicator
       hasOutdatedJobConfigurations={hasOutdatedJobConfigurations}
       hasOutdatedJobDefinitions={hasOutdatedJobDefinitions}
+      hasSetupCapabilities={hasSetupCapabilities}
       hasStoppedJobs={hasStoppedJobs}
       isFirstUse={isFirstUse}
       moduleName={moduleName}

x-pack/plugins/infra/public/components/logging/log_analysis_job_status/recreate_job_button.tsx

@@ -4,17 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
 import { EuiCallOut } from '@elastic/eui';
-
-import { RecreateJobButton } from './recreate_job_button';
+import React from 'react';
+import { RecreateJobButton } from '../log_analysis_setup/create_job_button';
 
 export const RecreateJobCallout: React.FC<{
+  hasSetupCapabilities?: boolean;
   onRecreateMlJob: () => void;
   title?: React.ReactNode;
-}> = ({ children, onRecreateMlJob, title }) => (
+}> = ({ children, hasSetupCapabilities, onRecreateMlJob, title }) => (
   <EuiCallOut color="warning" iconType="alert" title={title}>
     <p>{children}</p>
-    <RecreateJobButton color="warning" onClick={onRecreateMlJob} />
+    <RecreateJobButton
+      color="warning"
+      hasSetupCapabilities={hasSetupCapabilities}
+      onClick={onRecreateMlJob}
+    />
   </EuiCallOut>
 );

x-pack/plugins/infra/public/components/logging/log_analysis_job_status/recreate_job_callout.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 { EuiButton, PropsOf } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React from 'react';
+import { MissingSetupPrivilegesToolTip } from './missing_setup_privileges_tooltip';
+
+export const CreateJobButton: React.FunctionComponent<
+  {
+    hasSetupCapabilities?: boolean;
+  } & PropsOf<typeof EuiButton>
+> = ({ hasSetupCapabilities = true, children, ...buttonProps }) => {
+  const button = (
+    <EuiButton isDisabled={!hasSetupCapabilities} {...buttonProps}>
+      {children ?? (
+        <FormattedMessage
+          id="xpack.infra.logs.analysis.createJobButtonLabel"
+          defaultMessage="Create ML jobs"
+        />
+      )}
+    </EuiButton>
+  );
+
+  return hasSetupCapabilities ? (
+    button
+  ) : (
+    <MissingSetupPrivilegesToolTip position="bottom" delay="regular">
+      {button}
+    </MissingSetupPrivilegesToolTip>
+  );
+};
+
+export const RecreateJobButton: React.FunctionComponent<PropsOf<typeof CreateJobButton>> = ({
+  children,
+  ...otherProps
+}) => (
+  <CreateJobButton {...otherProps}>
+    {children ?? (
+      <FormattedMessage
+        id="xpack.infra.logs.analysis.recreateJobButtonLabel"
+        defaultMessage="Recreate ML job"
+      />
+    )}
+  </CreateJobButton>
+);

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

@@ -0,0 +1,30 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const missingMlPrivilegesTitle = i18n.translate(
+  'xpack.infra.logs.analysis.missingMlPrivilegesTitle',
+  {
+    defaultMessage: 'Additional Machine Learning privileges required',
+  }
+);
+
+export const missingMlResultsPrivilegesDescription = i18n.translate(
+  'xpack.infra.logs.analysis.missingMlResultsPrivilegesDescription',
+  {
+    defaultMessage:
+      'This feature makes use of Machine Learning jobs, which require at least the read permission for the Machine Learning app in order to access their status and results.',
+  }
+);
+
+export const missingMlSetupPrivilegesDescription = i18n.translate(
+  'xpack.infra.logs.analysis.missingMlSetupPrivilegesDescription',
+  {
+    defaultMessage:
+      'This feature makes use of Machine Learning jobs, which require all permissions for the Machine Learning app in order to be set up.',
+  }
+);

x-pack/plugins/infra/public/components/logging/log_analysis_setup/missing_privileges_messages.ts

@@ -4,34 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiEmptyPrompt, EuiCode } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
-
 import { euiStyled } from '../../../../../observability/public';
+import {
+  missingMlPrivilegesTitle,
+  missingMlResultsPrivilegesDescription,
+} from './missing_privileges_messages';
 import { UserManagementLink } from './user_management_link';
 
 export const MissingResultsPrivilegesPrompt: React.FunctionComponent = () => (
   <EmptyPrompt
-    title={
-      <h2>
-        <FormattedMessage
-          id="xpack.infra.logs.analysis.missingMlResultsPrivilegesTitle"
-          defaultMessage="Additional Machine Learning privileges required"
-        />
-      </h2>
-    }
-    body={
-      <p>
-        <FormattedMessage
-          id="xpack.infra.logs.analysis.missingMlResultsPrivilegesBody"
-          defaultMessage="This feature makes use of Machine Learning jobs, which require at least the {machineLearningUserRole} role in order to access their status and results."
-          values={{
-            machineLearningUserRole: <EuiCode>machine_learning_user</EuiCode>,
-          }}
-        />
-      </p>
-    }
+    title={<h2>{missingMlPrivilegesTitle}</h2>}
+    body={<p>{missingMlResultsPrivilegesDescription}</p>}
     actions={<UserManagementLink />}
   />
 );