Adds SavedObjectsWarning to analytics results pages. (elastic#144109)

- Fixes the saved object sync warning that should be shown on the analytics result pages. - Adds a check if the jobs description is an empty string to avoid unnecessary whitespace rendering.
tsullivan · Oct 27, 2022 · a602fa8 · a602fa8
1 parent e6a3507
commit a602fa8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/...es/analytics_exploration/components/exploration_page_wrapper/exploration_page_wrapper.tsx b/...es/analytics_exploration/components/exploration_page_wrapper/exploration_page_wrapper.tsx
@@ -161,7 +161,7 @@ export const ExplorationPageWrapper: FC<Props> = ({
 
   return (
     <>
-      {typeof jobConfig?.description !== 'undefined' && (
+      {typeof jobConfig?.description !== 'undefined' && jobConfig?.description !== '' && (
         <>
           <EuiText>{jobConfig?.description}</EuiText>
           <EuiSpacer size="m" />

diff --git a/...lytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx b/...lytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
@@ -121,7 +121,7 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
 
   return (
     <>
-      {typeof jobConfig?.description !== 'undefined' && (
+      {typeof jobConfig?.description !== 'undefined' && jobConfig?.description !== '' && (
         <>
           <EuiText>{jobConfig?.description}</EuiText>
           <EuiSpacer size="m" />

diff --git a/...k/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/page.tsx b/...k/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/page.tsx
@@ -25,6 +25,7 @@ import {
 } from '../components/analytics_selector';
 import { AnalyticsEmptyPrompt } from '../analytics_management/components/empty_prompt';
 import { useUrlState } from '../../../util/url_state';
+import { SavedObjectsWarning } from '../../../components/saved_objects_warning';
 
 export const Page: FC<{
   jobId: string;
@@ -41,7 +42,9 @@ export const Page: FC<{
   } = useMlApiContext();
   const helpLink = docLinks.links.ml.dataFrameAnalytics;
   const jobIdToUse = jobId ?? analyticsId?.job_id;
-  const analysisTypeToUse = analysisType || analyticsId?.analysis_type;
+  const [analysisTypeToUse, setAnalysisTypeToUse] = useState<
+    DataFrameAnalysisConfigType | undefined
+  >(analysisType || analyticsId?.analysis_type);
 
   const [, setGlobalState] = useUrlState('_g');
 
@@ -55,6 +58,25 @@ export const Page: FC<{
     }
   };
 
+  // The inner components of the results page don't have a concept of reloading the full page.
+  // Because we might want to refresh though if a user has to fix unsynced saved objects,
+  // we achieve this here by unmounting the inner pages first by setting `analysisTypeToUse`
+  // to `undefined`. The `useEffect()` below will then check if `analysisTypeToUse` doesn't
+  // match the passed in analyis type and will update it once again, the re-mounted
+  // page will then again fetch the most recent results.
+  const refresh = () => {
+    setAnalysisTypeToUse(undefined);
+  };
+
+  useEffect(
+    function checkRefresh() {
+      if (analysisTypeToUse !== analysisType || analyticsId?.analysis_type) {
+        setAnalysisTypeToUse(analysisType || analyticsId?.analysis_type);
+      }
+    },
+    [analyticsId, analysisType, analysisTypeToUse]
+  );
+
   useEffect(function checkJobs() {
     checkJobsExist();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -126,6 +148,9 @@ export const Page: FC<{
           />
         </MlPageHeader>
       )}
+
+      <SavedObjectsWarning onCloseFlyout={refresh} />
+
       {jobIdToUse && analysisTypeToUse ? (
         <div data-test-subj="mlPageDataFrameAnalyticsExploration">
           {analysisTypeToUse === ANALYSIS_CONFIG_TYPE.OUTLIER_DETECTION && (