checks for Anomaly Explorer page

elastic · Jan 26, 2022 · 962776c · 962776c
1 parent 0c08e3b
commit 962776c
Show file tree

Hide file tree

Showing 11 changed files with 111 additions and 148 deletions.
diff --git a/x-pack/plugins/ml/public/application/components/job_selector/_job_selector.scss b/x-pack/plugins/ml/public/application/components/job_selector/_job_selector.scss
@@ -1,7 +1,3 @@
-.mlJobSelectorBar {
-  padding: $euiSizeS;
-}
-
 .mlJobSelectorFlyoutBody>.euiFlyoutBody__overflow {
   padding-top: $euiSizeS;
 }

diff --git a/x-pack/plugins/ml/public/application/components/job_selector/job_selector.tsx b/x-pack/plugins/ml/public/application/components/job_selector/job_selector.tsx
@@ -9,7 +9,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 
 import { EuiButtonEmpty, EuiFlexItem, EuiFlexGroup, EuiFlyout } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-
+import { FormattedMessage } from '@kbn/i18n-react';
 import './_index.scss';
 
 import { Dictionary } from '../../../../common/types/common';
@@ -139,21 +139,30 @@ export function JobSelector({ dateFormatTz, singleSelection, timeseriesOnly }: J
     return (
       <EuiFlexGroup responsive={false} gutterSize="xs" alignItems="center">
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup
-            wrap
-            responsive={false}
-            gutterSize="xs"
-            alignItems="center"
-            data-test-subj="mlJobSelectionBadges"
-          >
-            <IdBadges
-              limit={BADGE_LIMIT}
-              maps={maps}
-              onLinkClick={() => setShowAllBarBadges(!showAllBarBadges)}
-              selectedIds={selectedIds}
-              showAllBarBadges={showAllBarBadges}
-            />
-          </EuiFlexGroup>
+          {selectedIds.length > 0 ? (
+            <EuiFlexGroup
+              wrap
+              responsive={false}
+              gutterSize="xs"
+              alignItems="center"
+              data-test-subj="mlJobSelectionBadges"
+            >
+              <IdBadges
+                limit={BADGE_LIMIT}
+                maps={maps}
+                onLinkClick={() => setShowAllBarBadges(!showAllBarBadges)}
+                selectedIds={selectedIds}
+                showAllBarBadges={showAllBarBadges}
+              />
+            </EuiFlexGroup>
+          ) : (
+            <span>
+              <FormattedMessage
+                id={'xpack.ml.jobSelector.noJobsSelectedLabel'}
+                defaultMessage="No jobs selected"
+              />
+            </span>
+          )}
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty
@@ -197,8 +206,8 @@ export function JobSelector({ dateFormatTz, singleSelection, timeseriesOnly }: J
   }
 
   return (
-    <div className="mlJobSelectorBar">
-      {selectedIds.length > 0 && renderJobSelectionBar()}
+    <div>
+      {renderJobSelectionBar()}
       {renderFlyout()}
     </div>
   );

diff --git a/x-pack/plugins/ml/public/application/components/job_selector/use_job_selection.ts b/x-pack/plugins/ml/public/application/components/job_selector/use_job_selection.ts
@@ -75,15 +75,19 @@ export const useJobSelection = (jobs: MlJobWithTimeRange[]) => {
   useEffect(() => {
     // if there are no valid ids, ask the user to provide job selection with the flyout
     if (validIds.length === 0 && jobs.length > 0) {
-      getJobSelection({ singleSelection: false }).then(({ jobIds, time }) => {
-        const mlGlobalState = globalState?.ml || {};
-        mlGlobalState.jobIds = jobIds;
-
-        setGlobalState({
-          ...{ ml: mlGlobalState },
-          ...(time !== undefined ? { time } : {}),
+      getJobSelection({ singleSelection: false })
+        .then(({ jobIds, time }) => {
+          const mlGlobalState = globalState?.ml || {};
+          mlGlobalState.jobIds = jobIds;
+
+          setGlobalState({
+            ...{ ml: mlGlobalState },
+            ...(time !== undefined ? { time } : {}),
+          });
+        })
+        .catch(() => {
+          // flyout closed without selection
         });
-      });
     }
   }, [jobs, validIds, setGlobalState, globalState?.ml]);
 

diff --git a/...lorer/components/explorer_no_jobs_found/__snapshots__/explorer_no_jobs_found.test.js.snap b/...lorer/components/explorer_no_jobs_found/__snapshots__/explorer_no_jobs_found.test.js.snap
diff --git a/...l/public/application/explorer/components/explorer_no_jobs_found/explorer_no_jobs_found.js b/...l/public/application/explorer/components/explorer_no_jobs_found/explorer_no_jobs_found.js
diff --git a/...lic/application/explorer/components/explorer_no_jobs_found/explorer_no_jobs_found.test.js b/...lic/application/explorer/components/explorer_no_jobs_found/explorer_no_jobs_found.test.js
diff --git a/...c/application/explorer/components/explorer_no_jobs_selected/explorer_no_jobs_selected.tsx b/...c/application/explorer/components/explorer_no_jobs_selected/explorer_no_jobs_selected.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+/*
+ * React component for rendering EuiEmptyPrompt when no jobs were found.
+ */
+import React, { FC } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiEmptyPrompt } from '@elastic/eui';
+
+export const ExplorerNoJobsSelected: FC = () => {
+  return (
+    <EuiEmptyPrompt
+      iconType="alert"
+      title={
+        <h2>
+          <FormattedMessage
+            id="xpack.ml.explorer.noJobSelectedLabel"
+            defaultMessage="No jobs selected"
+          />
+        </h2>
+      }
+      data-test-subj="mlNoJobsFound"
+    />
+  );
+};
diff --git a/...omponents/explorer_no_jobs_found/index.js → ...onents/explorer_no_jobs_selected/index.ts b/...omponents/explorer_no_jobs_found/index.js → ...onents/explorer_no_jobs_selected/index.ts
@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { ExplorerNoJobsFound } from './explorer_no_jobs_found';
+export { ExplorerNoJobsSelected } from './explorer_no_jobs_selected';
diff --git a/x-pack/plugins/ml/public/application/explorer/components/index.js b/x-pack/plugins/ml/public/application/explorer/components/index.js
@@ -6,5 +6,5 @@
  */
 
 export { ExplorerNoInfluencersFound } from './explorer_no_influencers_found';
-export { ExplorerNoJobsFound } from './explorer_no_jobs_found';
+export { ExplorerNoJobsSelected } from './explorer_no_jobs_selected';
 export { ExplorerNoResultsFound } from './explorer_no_results_found';
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer.js b/x-pack/plugins/ml/public/application/explorer/explorer.js
@@ -33,7 +33,7 @@ import {
 
 import { AnnotationFlyout } from '../components/annotations/annotation_flyout';
 import { AnnotationsTable } from '../components/annotations/annotations_table';
-import { ExplorerNoJobsFound, ExplorerNoResultsFound } from './components';
+import { ExplorerNoJobsSelected, ExplorerNoResultsFound } from './components';
 import { InfluencersList } from '../components/influencers_list';
 import { explorerService } from './explorer_dashboard_service';
 import { AnomalyResultsViewSelector } from '../components/anomaly_results_view_selector';
@@ -98,6 +98,8 @@ const ExplorerPage = ({
     </MlPageHeader>
     <EuiPageHeader>
       <EuiPageHeaderSection style={{ width: '100%' }}>
+        <JobSelector {...jobSelectorProps} />
+        <EuiHorizontalRule margin="s" />
         {noInfluencersConfigured === false && influencers !== undefined ? (
           <>
             <ExplorerQueryBar
@@ -108,13 +110,11 @@ const ExplorerPage = ({
               updateLanguage={updateLanguage}
             />
             <EuiSpacer size="m" />
+            <EuiHorizontalRule margin="none" />
           </>
         ) : null}
       </EuiPageHeaderSection>
     </EuiPageHeader>
-    <EuiHorizontalRule margin="none" />
-    <JobSelector {...jobSelectorProps} />
-    <EuiHorizontalRule margin="none" />
     {children}
   </>
 );
@@ -260,18 +260,18 @@ export class ExplorerUI extends React.Component {
       dateFormatTz: getDateFormatTz(),
     };
 
-    const noJobsFound = selectedJobs === null || selectedJobs.length === 0;
+    const noJobsSelected = 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;
 
     const hasActiveFilter = isDefined(swimLaneSeverity);
 
-    if (noJobsFound && !loading) {
+    if (noJobsSelected && !loading) {
       return (
         <ExplorerPage jobSelectorProps={jobSelectorProps}>
-          <ExplorerNoJobsFound />
+          <ExplorerNoJobsSelected />
         </ExplorerPage>
       );
     }
@@ -318,6 +318,7 @@ export class ExplorerUI extends React.Component {
 
           {noInfluencersConfigured === false && (
             <div className="column col-xs-2" data-test-subj="mlAnomalyExplorerInfluencerList">
+              <EuiSpacer size={'s'} />
               <EuiTitle className="panel-title">
                 <h2>
                   <FormattedMessage

diff --git a/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx b/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx
@@ -10,6 +10,8 @@ import useObservable from 'react-use/lib/useObservable';
 
 import { i18n } from '@kbn/i18n';
 
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { NavigateToPath } from '../../contexts/kibana';
 
 import { MlJobWithTimeRange } from '../../../../common/types/anomaly_detection_jobs';
@@ -37,6 +39,9 @@ import { MlAnnotationUpdatesContext } from '../../contexts/ml/ml_annotation_upda
 import { AnnotationUpdatesService } from '../../services/annotations_service';
 import { useExplorerUrlState } from '../../explorer/hooks/use_explorer_url_state';
 import { useTimeBuckets } from '../../components/custom_hooks/use_time_buckets';
+import { MlPageHeader } from '../../components/page_header';
+import { AnomalyResultsViewSelector } from '../../components/anomaly_results_view_selector';
+import { AnomalyDetectionEmptyState } from '../../jobs/jobs_list/components/anomaly_detection_empty_state';
 
 export const explorerRouteFactory = (
   navigateToPath: NavigateToPath,
@@ -288,19 +293,33 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
 
   return (
     <div className="ml-explorer">
-      <Explorer
-        {...{
-          explorerState,
-          setSelectedCells,
-          showCharts: explorerState.showCharts,
-          severity: tableSeverity.val,
-          stoppedPartitions,
-          invalidTimeRangeError,
-          selectedJobsRunning,
-          timeBuckets,
-          timefilter,
-        }}
-      />
+      <MlPageHeader>
+        <EuiFlexGroup alignItems="center" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <AnomalyResultsViewSelector viewId="explorer" />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <FormattedMessage id="xpack.ml.explorer.pageTitle" defaultMessage="Anomaly Explorer" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </MlPageHeader>
+      {jobsWithTimeRange.length === 0 ? (
+        <AnomalyDetectionEmptyState />
+      ) : (
+        <Explorer
+          {...{
+            explorerState,
+            setSelectedCells,
+            showCharts: explorerState.showCharts,
+            severity: tableSeverity.val,
+            stoppedPartitions,
+            invalidTimeRangeError,
+            selectedJobsRunning,
+            timeBuckets,
+            timefilter,
+          }}
+        />
+      )}
     </div>
   );
 };