[ML] Adding job sychronization warning to job list pages (#85794) (#86088)

* [ML] Adding job sychronization warning to job list pages

* fixing overview page callout

* improving check logic

* adding render lock

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/ml/common/types/saved_objects.ts

@@ -30,7 +30,7 @@ export type JobsSpacesResponse = {
 };
 
 export interface InitializeSavedObjectResponse {
-  jobs: Array<{ id: string; type: string }>;
+  jobs: Array<{ id: string; type: JobType }>;
   success: boolean;
   error?: any;
 }

x-pack/plugins/ml/public/application/components/saved_objects_warning/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { SavedObjectsWarning } from './saved_objects_warning';

x-pack/plugins/ml/public/application/components/saved_objects_warning/saved_objects_warning.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 React, { FC, useEffect, useState } from 'react';
+
+import { EuiCallOut, EuiLink, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { JobType } from '../../../../common/types/saved_objects';
+import { useMlApiContext, useMlKibana } from '../../contexts/kibana';
+
+interface Props {
+  jobType?: JobType;
+}
+
+export const SavedObjectsWarning: FC<Props> = ({ jobType }) => {
+  const {
+    savedObjects: { initSavedObjects },
+  } = useMlApiContext();
+  const {
+    services: {
+      http: { basePath },
+    },
+  } = useMlKibana();
+
+  const [showWarning, setShowWarning] = useState(false);
+
+  useEffect(() => {
+    let unmounted = false;
+    initSavedObjects(true)
+      .then(({ jobs }) => {
+        if (unmounted === true) {
+          return;
+        }
+
+        const missingJobs =
+          jobs.length > 0 && (jobType === undefined || jobs.some(({ type }) => type === jobType));
+        setShowWarning(missingJobs);
+      })
+      .catch(() => {
+        console.log('Saved object synchronization check could not be performed.'); // eslint-disable-line no-console
+      });
+    return () => {
+      unmounted = true;
+    };
+  }, []);
+
+  return showWarning === false ? null : (
+    <>
+      <EuiCallOut
+        title={
+          <FormattedMessage
+            id="xpack.ml.jobsList.missingSavedObjectWarning.title"
+            defaultMessage="ML job synchronization needed"
+          />
+        }
+        color="warning"
+        iconType="alert"
+      >
+        <div>
+          <FormattedMessage
+            id="xpack.ml.jobsList.missingSavedObjectWarning.description"
+            defaultMessage="All jobs require an accompanying saved object. Some jobs are missing their saved object and require synchronization in the {link}."
+            values={{
+              link: (
+                <EuiLink href={`${basePath.get()}/app/management/insightsAndAlerting/jobsListLink`}>
+                  <FormattedMessage
+                    id="xpack.ml.jobsList.missingSavedObjectWarning.linkToManagement.link"
+                    defaultMessage="stack management page"
+                  />
+                </EuiLink>
+              ),
+            }}
+          />
+        </div>
+      </EuiCallOut>
+      <EuiSpacer size="m" />
+    </>
+  );
+};

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/page.tsx

@@ -29,6 +29,7 @@ import { DataFrameAnalyticsList } from './components/analytics_list';
 import { useRefreshInterval } from './components/analytics_list/use_refresh_interval';
 import { RefreshAnalyticsListButton } from './components/refresh_analytics_list_button';
 import { NodeAvailableWarning } from '../../../components/node_available_warning';
+import { SavedObjectsWarning } from '../../../components/saved_objects_warning';
 import { UpgradeWarning } from '../../../components/upgrade';
 import { AnalyticsNavigationBar } from './components/analytics_navigation_bar';
 import { ModelsList } from './components/models_management';
@@ -106,6 +107,7 @@ export const Page: FC = () => {
           </EuiPageHeader>
 
           <NodeAvailableWarning />
+          <SavedObjectsWarning jobType="data-frame-analytics" />
           <UpgradeWarning />
 
           <EuiPageContent>

x-pack/plugins/ml/public/application/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js

@@ -32,6 +32,7 @@ import { MultiJobActions } from '../multi_job_actions';
 import { NewJobButton } from '../new_job_button';
 import { JobStatsBar } from '../jobs_stats_bar';
 import { NodeAvailableWarning } from '../../../../components/node_available_warning';
+import { SavedObjectsWarning } from '../../../../components/saved_objects_warning';
 import { DatePickerWrapper } from '../../../../components/navigation_menu/date_picker_wrapper';
 import { UpgradeWarning } from '../../../../components/upgrade';
 import { RefreshJobsListButton } from '../refresh_jobs_list_button';
@@ -439,6 +440,7 @@ export class JobsListView extends Component {
           </EuiPageHeader>
 
           <NodeAvailableWarning />
+          <SavedObjectsWarning jobType="anomaly-detector" />
 
           <UpgradeWarning />
 

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

@@ -12,6 +12,7 @@ import { NavigationMenu } from '../components/navigation_menu';
 import { OverviewSideBar } from './components/sidebar';
 import { OverviewContent } from './components/content';
 import { NodeAvailableWarning } from '../components/node_available_warning';
+import { SavedObjectsWarning } from '../components/saved_objects_warning';
 import { UpgradeWarning } from '../components/upgrade';
 
 export const OverviewPage: FC = () => {
@@ -26,6 +27,7 @@ export const OverviewPage: FC = () => {
       <EuiPage data-test-subj="mlPageOverview">
         <EuiPageBody>
           <NodeAvailableWarning />
+          <SavedObjectsWarning />
           <UpgradeWarning />
 
           <EuiFlexGroup>

x-pack/plugins/ml/public/application/services/ml_api_service/saved_objects.ts

@@ -13,6 +13,7 @@ import {
   JobType,
   CanDeleteJobResponse,
   SyncSavedObjectResponse,
+  InitializeSavedObjectResponse,
   SavedObjectResult,
   JobsSpacesResponse,
 } from '../../../../common/types/saved_objects';
@@ -55,7 +56,13 @@ export const savedObjectsApiProvider = (httpService: HttpService) => ({
       query: { simulate },
     });
   },
-
+  initSavedObjects(simulate: boolean = false) {
+    return httpService.http<InitializeSavedObjectResponse>({
+      path: `${basePath()}/saved_objects/initialize`,
+      method: 'GET',
+      query: { simulate },
+    });
+  },
   canDeleteJob(jobType: JobType, jobIds: string[]) {
     const body = JSON.stringify({ jobIds });
     return httpService.http<CanDeleteJobResponse>({