[ML] Anomaly Detection: when no anomalies present for time range show…

… no results message (#91151)

* single metric viewer callout color to blue.show empty results in explorer.

* update snapshot for empty results view

* check if selected job still running

* update resultsWithAnomalies check

* update no overall data message. remove unnecessary component prop

x-pack/plugins/ml/common/types/anomaly_detection_jobs/summary_job.ts

@@ -49,6 +49,7 @@ export type MlSummaryJobs = MlSummaryJob[];
 
 export interface MlJobWithTimeRange extends CombinedJobWithStats {
   id: string;
+  isRunning?: boolean;
   isNotSingleMetricViewerJobMessage?: string;
   timeRange: {
     from: number;

x-pack/plugins/ml/public/application/explorer/components/explorer_no_results_found/explorer_no_results_found.js

@@ -14,26 +14,48 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { EuiEmptyPrompt } from '@elastic/eui';
 
-export const ExplorerNoResultsFound = () => (
-  <EuiEmptyPrompt
-    iconType="iInCircle"
-    title={
-      <h2>
-        <FormattedMessage
-          id="xpack.ml.explorer.noResultsFoundLabel"
-          defaultMessage="No results found"
-        />
-      </h2>
-    }
-    body={
-      <React.Fragment>
-        <p>
-          <FormattedMessage
-            id="xpack.ml.explorer.tryWideningTimeSelectionLabel"
-            defaultMessage="Try widening the time selection or moving further back in time"
-          />
-        </p>
-      </React.Fragment>
-    }
-  />
-);
+export const ExplorerNoResultsFound = ({ hasResults, selectedJobsRunning }) => {
+  const resultsHaveNoAnomalies = hasResults === true;
+  const noResults = hasResults === false;
+  return (
+    <EuiEmptyPrompt
+      iconType="iInCircle"
+      title={
+        <h2>
+          {resultsHaveNoAnomalies && (
+            <FormattedMessage
+              id="xpack.ml.explorer.noAnomaliesFoundLabel"
+              defaultMessage="No anomalies found"
+            />
+          )}
+          {noResults && (
+            <FormattedMessage
+              id="xpack.ml.explorer.noResultsFoundLabel"
+              defaultMessage="No results found"
+            />
+          )}
+        </h2>
+      }
+      body={
+        <React.Fragment>
+          {selectedJobsRunning && noResults && (
+            <p>
+              <FormattedMessage
+                id="xpack.ml.explorer.selectedJobsRunningLabel"
+                defaultMessage="One or more selected jobs are still running and results may not be available yet."
+              />
+            </p>
+          )}
+          {!selectedJobsRunning && (
+            <p>
+              <FormattedMessage
+                id="xpack.ml.explorer.tryWideningTimeSelectionLabel"
+                defaultMessage="Try widening the time selection or moving further back in time"
+              />
+            </p>
+          )}
+        </React.Fragment>
+      }
+    />
+  );
+};

x-pack/plugins/ml/public/application/explorer/components/no_overall_data.tsx

@@ -12,7 +12,7 @@ export const NoOverallData: FC = () => {
   return (
     <FormattedMessage
       id="xpack.ml.anomalySwimLane.noOverallDataMessage"
-      defaultMessage="No overall data found"
+      defaultMessage="No anomalies found in the overall bucket results for this time range"
     />
   );
 };

x-pack/plugins/ml/public/application/explorer/explorer.js

@@ -142,6 +142,7 @@ export class Explorer extends React.Component {
     setSelectedCells: PropTypes.func.isRequired,
     severity: PropTypes.number.isRequired,
     showCharts: PropTypes.bool.isRequired,
+    selectedJobsRunning: PropTypes.bool.isRequired,
   };
 
   state = { filterIconTriggeredQuery: undefined, language: DEFAULT_QUERY_LANG };
@@ -223,7 +224,7 @@ export class Explorer extends React.Component {
   updateLanguage = (language) => this.setState({ language });
 
   render() {
-    const { showCharts, severity, stoppedPartitions } = this.props;
+    const { showCharts, severity, stoppedPartitions, selectedJobsRunning } = this.props;
 
     const {
       annotations,
@@ -248,6 +249,9 @@ export class Explorer extends React.Component {
 
     const noJobsFound = selectedJobs === null || selectedJobs.length === 0;
     const hasResults = overallSwimlaneData.points && overallSwimlaneData.points.length > 0;
+    const hasResultsWithAnomalies =
+      (hasResults && overallSwimlaneData.points.some((v) => v.value > 0)) ||
+      tableData.anomalies?.length > 0;
 
     if (noJobsFound && !loading) {
       return (
@@ -257,10 +261,13 @@ export class Explorer extends React.Component {
       );
     }
 
-    if (noJobsFound && hasResults === false && !loading) {
+    if (hasResultsWithAnomalies === false && !loading) {
       return (
         <ExplorerPage jobSelectorProps={jobSelectorProps}>
-          <ExplorerNoResultsFound />
+          <ExplorerNoResultsFound
+            hasResults={hasResults}
+            selectedJobsRunning={selectedJobsRunning}
+          />
         </ExplorerPage>
       );
     }

x-pack/plugins/ml/public/application/routing/routes/explorer.tsx

@@ -87,6 +87,9 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
   const timefilter = useTimefilter({ timeRangeSelector: true, autoRefreshSelector: true });
 
   const { jobIds } = useJobSelection(jobsWithTimeRange);
+  const selectedJobsRunning = jobsWithTimeRange.some(
+    (job) => jobIds.includes(job.id) && job.isRunning === true
+  );
 
   const explorerAppState = useObservable(explorerService.appState$);
   const explorerState = useObservable(explorerService.state$);
@@ -261,6 +264,7 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
           severity: tableSeverity.val,
           stoppedPartitions,
           invalidTimeRangeError,
+          selectedJobsRunning,
         }}
       />
     </div>

x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js

@@ -1000,7 +1000,6 @@ export class TimeSeriesExplorer extends React.Component {
                   }}
                 />
               }
-              color="warning"
               iconType="help"
               size="s"
             />