[ML] Overview: ensure proper permissions check for empty prompt 'Create job' buttons (#49067)

* disabled overview empty prompt create job button if no permissions

* permission check from overviewPage main component. add mlNodes check to resolver

* remove period from overview empty prompt title

x-pack/legacy/plugins/ml/public/overview/components/analytics_panel/analytics_panel.tsx

@@ -19,7 +19,10 @@ import { AnalyticsTable } from './table';
 import { getAnalyticsFactory } from '../../../data_frame_analytics/pages/analytics_management/services/analytics_service';
 import { DataFrameAnalyticsListRow } from '../../../data_frame_analytics/pages/analytics_management/components/analytics_list/common';
 
-export const AnalyticsPanel: FC = () => {
+interface Props {
+  jobCreationDisabled: boolean;
+}
+export const AnalyticsPanel: FC<Props> = ({ jobCreationDisabled }) => {
   const [analytics, setAnalytics] = useState<DataFrameAnalyticsListRow[]>([]);
   const [errorMessage, setErrorMessage] = useState<any>(undefined);
   const [isInitialized, setIsInitialized] = useState(false);
@@ -67,7 +70,7 @@ export const AnalyticsPanel: FC = () => {
           title={
             <h2>
               {i18n.translate('xpack.ml.overview.analyticsList.createFirstJobMessage', {
-                defaultMessage: 'Create your first analytics job.',
+                defaultMessage: 'Create your first analytics job',
               })}
             </h2>
           }
@@ -81,7 +84,13 @@ export const AnalyticsPanel: FC = () => {
             </Fragment>
           }
           actions={
-            <EuiButton href="#/data_frame_analytics?" color="primary" fill iconType="plusInCircle">
+            <EuiButton
+              href="#/data_frame_analytics?"
+              color="primary"
+              fill
+              iconType="plusInCircle"
+              isDisabled={jobCreationDisabled}
+            >
               {i18n.translate('xpack.ml.overview.analyticsList.createJobButtonText', {
                 defaultMessage: 'Create job',
               })}

x-pack/legacy/plugins/ml/public/overview/components/anomaly_detection_panel/anomaly_detection_panel.tsx

@@ -50,7 +50,11 @@ function getDefaultAnomalyScores(groups: Group[]): MaxScoresByGroup {
   return anomalyScores;
 }
 
-export const AnomalyDetectionPanel: FC = () => {
+interface Props {
+  jobCreationDisabled: boolean;
+}
+
+export const AnomalyDetectionPanel: FC<Props> = ({ jobCreationDisabled }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [groups, setGroups] = useState<GroupsDictionary>({});
   const [groupsCount, setGroupsCount] = useState<number>(0);
@@ -156,7 +160,7 @@ export const AnomalyDetectionPanel: FC = () => {
           title={
             <h2>
               {i18n.translate('xpack.ml.overview.anomalyDetection.createFirstJobMessage', {
-                defaultMessage: 'Create your first anomaly detection job.',
+                defaultMessage: 'Create your first anomaly detection job',
               })}
             </h2>
           }
@@ -170,7 +174,13 @@ export const AnomalyDetectionPanel: FC = () => {
             </Fragment>
           }
           actions={
-            <EuiButton color="primary" href={createJobLink} fill iconType="plusInCircle">
+            <EuiButton
+              color="primary"
+              href={createJobLink}
+              fill
+              iconType="plusInCircle"
+              isDisabled={jobCreationDisabled}
+            >
               {i18n.translate('xpack.ml.overview.anomalyDetection.createJobButtonText', {
                 defaultMessage: 'Create job',
               })}

x-pack/legacy/plugins/ml/public/overview/components/content.tsx

@@ -9,15 +9,23 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { AnomalyDetectionPanel } from './anomaly_detection_panel';
 import { AnalyticsPanel } from './analytics_panel/';
 
+interface Props {
+  createAnomalyDetectionJobDisabled: boolean;
+  createAnalyticsJobDisabled: boolean;
+}
+
 // Fetch jobs and determine what to show
-export const OverviewContent: FC = () => (
+export const OverviewContent: FC<Props> = ({
+  createAnomalyDetectionJobDisabled,
+  createAnalyticsJobDisabled,
+}) => (
   <EuiFlexItem grow={3}>
     <EuiFlexGroup direction="column">
       <EuiFlexItem grow={false}>
-        <AnomalyDetectionPanel />
+        <AnomalyDetectionPanel jobCreationDisabled={createAnomalyDetectionJobDisabled} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <AnalyticsPanel />
+        <AnalyticsPanel jobCreationDisabled={createAnalyticsJobDisabled} />
       </EuiFlexItem>
     </EuiFlexGroup>
   </EuiFlexItem>

x-pack/legacy/plugins/ml/public/overview/components/sidebar.tsx

@@ -17,7 +17,27 @@ const feedbackLink = 'https://www.elastic.co/community/';
 const transformsLink = `${chrome.getBasePath()}/app/kibana#/management/elasticsearch/transform`;
 const whatIsMachineLearningLink = 'https://www.elastic.co/what-is/elasticsearch-machine-learning';
 
-export const OverviewSideBar: FC = () => (
+interface Props {
+  createAnomalyDetectionJobDisabled: boolean;
+}
+
+function getCreateJobLink(createAnomalyDetectionJobDisabled: boolean) {
+  return createAnomalyDetectionJobDisabled === true ? (
+    <FormattedMessage
+      id="xpack.ml.overview.gettingStartedSectionCreateJob"
+      defaultMessage="creating a new job"
+    />
+  ) : (
+    <EuiLink href={createJobLink} target="blank">
+      <FormattedMessage
+        id="xpack.ml.overview.gettingStartedSectionCreateJob"
+        defaultMessage="creating a new job"
+      />
+    </EuiLink>
+  );
+}
+
+export const OverviewSideBar: FC<Props> = ({ createAnomalyDetectionJobDisabled }) => (
   <EuiFlexItem grow={1}>
     <EuiText className="mlOverview__sidebar">
       <h2>
@@ -41,14 +61,7 @@ export const OverviewSideBar: FC = () => (
                 />
               </EuiLink>
             ),
-            createJob: (
-              <EuiLink href={createJobLink} target="blank">
-                <FormattedMessage
-                  id="xpack.ml.overview.gettingStartedSectionCreateJob"
-                  defaultMessage="creating a new job"
-                />
-              </EuiLink>
-            ),
+            createJob: getCreateJobLink(createAnomalyDetectionJobDisabled),
             transforms: (
               <EuiLink href={transformsLink} target="blank">
                 <FormattedMessage

x-pack/legacy/plugins/ml/public/overview/overview_page.tsx

@@ -6,19 +6,28 @@
 
 import React, { Fragment, FC } from 'react';
 import { EuiFlexGroup, EuiPage, EuiPageBody } from '@elastic/eui';
+import { checkPermission } from '../privilege/check_privilege';
+import { mlNodesAvailable } from '../ml_nodes_check/check_ml_nodes';
 import { NavigationMenu } from '../components/navigation_menu';
 import { OverviewSideBar } from './components/sidebar';
 import { OverviewContent } from './components/content';
 
 export const OverviewPage: FC = () => {
+  const disableCreateAnomalyDetectionJob = !checkPermission('canCreateJob') || !mlNodesAvailable();
+  const disableCreateAnalyticsButton =
+    !checkPermission('canCreateDataFrameAnalytics') ||
+    !checkPermission('canStartStopDataFrameAnalytics');
   return (
     <Fragment>
       <NavigationMenu tabId="overview" />
       <EuiPage data-test-subj="mlPageOverview">
         <EuiPageBody>
           <EuiFlexGroup>
-            <OverviewSideBar />
-            <OverviewContent />
+            <OverviewSideBar createAnomalyDetectionJobDisabled={disableCreateAnomalyDetectionJob} />
+            <OverviewContent
+              createAnomalyDetectionJobDisabled={disableCreateAnomalyDetectionJob}
+              createAnalyticsJobDisabled={disableCreateAnalyticsButton}
+            />
           </EuiFlexGroup>
         </EuiPageBody>
       </EuiPage>

x-pack/legacy/plugins/ml/public/overview/route.ts

@@ -5,6 +5,7 @@
  */
 
 import uiRoutes from 'ui/routes';
+import { getMlNodeCount } from '../ml_nodes_check/check_ml_nodes';
 // @ts-ignore no declaration module
 import { checkFullLicense } from '../license/check_license';
 import { checkGetJobsPrivilege } from '../privilege/check_privilege';
@@ -19,5 +20,6 @@ uiRoutes.when('/overview/?', {
   resolve: {
     CheckLicense: checkFullLicense,
     privileges: checkGetJobsPrivilege,
+    mlNodeCount: getMlNodeCount,
   },
 });