[ML] Overview Page - follow-ups (#47637)

* add tooltip, fix sort, style tweaks

* show alert icon if group max score error

* remove unnecessary comment

* update max score tooltip text

x-pack/legacy/plugins/ml/public/overview/components/_index.scss

@@ -2,10 +2,23 @@
   padding-top: 0;
 }
 
+.mlOverviewPanel__isLoading {
+  text-align: center;
+  padding: 10%;
+}
+
 .mlOverviewPanel__buttons {
   float: right;
 }
 
+.mlOverviewPanel__spinner {
+  display: inline-block;
+}
+
+.mlOverviewPanel__refreshButton {
+  padding-right: $euiSizeM;
+}
+
 .mlOverviewPanel__statsBar {
   margin-top: 0;
   margin-right: 0

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

@@ -52,10 +52,15 @@ export const AnalyticsPanel: FC = () => {
     </Fragment>
   );
 
+  const panelClass = isInitialized === false ? 'mlOverviewPanel__isLoading' : 'mlOverviewPanel';
+
   return (
-    <EuiPanel className="mlOverviewPanel">
+    <EuiPanel className={panelClass}>
       {typeof errorMessage !== 'undefined' && errorDisplay}
-      {isInitialized === false && <EuiLoadingSpinner />}     
+      {isInitialized === false && (
+        <EuiLoadingSpinner className="mlOverviewPanel__spinner" size="xl" />
+      )}
+
       {isInitialized === true && analytics.length === 0 && (
         <EuiEmptyPrompt
           iconType="createAdvancedJob"
@@ -89,7 +94,7 @@ export const AnalyticsPanel: FC = () => {
           <AnalyticsTable items={analytics} />
           <EuiSpacer size="m" />
           <div className="mlOverviewPanel__buttons">
-            <EuiButtonEmpty size="s" onClick={onRefresh}>
+            <EuiButtonEmpty size="s" onClick={onRefresh} className="mlOverviewPanel__refreshButton">
               {i18n.translate('xpack.ml.overview.analyticsList.refreshJobsButtonText', {
                 defaultMessage: 'Refresh',
               })}

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

@@ -22,8 +22,8 @@ function getAnalyticsStats(analyticsList: any[]) {
       show: true,
     },
     started: {
-      label: i18n.translate('xpack.ml.overview.statsBar.startedAnalyticsLabel', {
-        defaultMessage: 'Started',
+      label: i18n.translate('xpack.ml.overview.statsBar.runningAnalyticsLabel', {
+        defaultMessage: 'Running',
       }),
       value: 0,
       show: true,

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

@@ -98,7 +98,7 @@ export const AnomalyDetectionPanel: FC = () => {
           return ml.results.getMaxAnomalyScore(group.jobIds, twentyFourHoursAgo, latestTimestamp);
         });
 
-      const results = await Promise.all(promises);
+      const results = await Promise.all(promises.map(p => p.catch(() => undefined)));
       const tempGroups = { ...groupsObject };
       // Check results for each group's promise index and update state
       Object.keys(scores).forEach(groupId => {
@@ -143,10 +143,12 @@ export const AnomalyDetectionPanel: FC = () => {
     </Fragment>
   );
 
+  const panelClass = isLoading ? 'mlOverviewPanel__isLoading' : 'mlOverviewPanel';
+
   return (
-    <EuiPanel className="mlOverviewPanel">
+    <EuiPanel className={panelClass}>
       {typeof errorMessage !== 'undefined' && errorDisplay}
-      {isLoading && <EuiLoadingSpinner />}   
+      {isLoading && <EuiLoadingSpinner className="mlOverviewPanel__spinner" size="xl" />}   
       {isLoading === false && typeof errorMessage === 'undefined' && groupsCount === 0 && (
         <EuiEmptyPrompt
           iconType="createSingleMetricJob"
@@ -180,7 +182,7 @@ export const AnomalyDetectionPanel: FC = () => {
           <AnomalyDetectionTable items={groups} jobsList={jobsList} statsBarData={statsBarData} />
           <EuiSpacer size="m" />
           <div className="mlOverviewPanel__buttons">
-            <EuiButtonEmpty size="s" onClick={onRefresh}>
+            <EuiButtonEmpty size="s" onClick={onRefresh} className="mlOverviewPanel__refreshButton">
               {i18n.translate('xpack.ml.overview.anomalyDetection.refreshJobsButtonText', {
                 defaultMessage: 'Refresh',
               })}

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

@@ -9,9 +9,11 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiHealth,
+  EuiIcon,
   EuiLoadingSpinner,
   EuiSpacer,
   EuiText,
+  EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
@@ -40,6 +42,7 @@ export enum AnomalyDetectionListColumns {
   jobIds = 'jobIds',
   latestTimestamp = 'latest_timestamp',
   docsProcessed = 'docs_processed',
+  jobsInGroup = 'jobs_in_group',
 }
 
 interface Props {
@@ -70,13 +73,40 @@ export const AnomalyDetectionTable: FC<Props> = ({ items, jobsList, statsBarData
     },
     {
       field: AnomalyDetectionListColumns.maxAnomalyScore,
-      name: i18n.translate('xpack.ml.overview.anomalyDetection.tableMaxScore', {
-        defaultMessage: 'Max anomaly score',
-      }),
+      name: (
+        <EuiToolTip
+          content={i18n.translate('xpack.ml.overview.anomalyDetection.tableMaxScoreTooltip', {
+            defaultMessage:
+              'Maximum score across all jobs in the group over its most recent 24 hour period',
+          })}
+        >
+          <span>
+            {i18n.translate('xpack.ml.overview.anomalyDetection.tableMaxScore', {
+              defaultMessage: 'Max anomaly score',
+            })}{' '}
+            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
+          </span>
+        </EuiToolTip>
+      ),
       sortable: true,
       render: (score: Group['max_anomaly_score']) => {
         if (score === null) {
+          // score is not loaded yet
           return <EuiLoadingSpinner />;
+        } else if (score === undefined) {
+          // an error occurred for this group's score
+          return (
+            <EuiToolTip
+              content={i18n.translate(
+                'xpack.ml.overview.anomalyDetection.tableMaxScoreErrorTooltip',
+                {
+                  defaultMessage: 'There was a problem loading the maximum anomaly score',
+                }
+              )}
+            >
+              <EuiIcon type="alert" />
+            </EuiToolTip>
+          );
         } else {
           const color: string = getSeverityColor(score);
           return (
@@ -91,11 +121,10 @@ export const AnomalyDetectionTable: FC<Props> = ({ items, jobsList, statsBarData
       width: '150px',
     },
     {
-      field: AnomalyDetectionListColumns.jobIds,
+      field: AnomalyDetectionListColumns.jobsInGroup,
       name: i18n.translate('xpack.ml.overview.anomalyDetection.tableNumJobs', {
         defaultMessage: 'Jobs in group',
       }),
-      render: (jobIds: Group['jobIds']) => jobIds.length,
       sortable: true,
       truncateText: true,
       width: '100px',
@@ -127,6 +156,7 @@ export const AnomalyDetectionTable: FC<Props> = ({ items, jobsList, statsBarData
       }),
       render: (group: Group) => <ExplorerLink jobsList={getJobsFromGroup(group, jobsList)} />,
       width: '100px',
+      align: 'right',
     },
   ];
 

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

@@ -19,6 +19,7 @@ export function getGroupsFromJobs(
       docs_processed: 0,
       latest_timestamp: 0,
       max_anomaly_score: null,
+      jobs_in_group: 0,
     },
   };
 
@@ -33,10 +34,12 @@ export function getGroupsFromJobs(
             docs_processed: job.processed_record_count,
             latest_timestamp: job.latestTimestampMs,
             max_anomaly_score: null,
+            jobs_in_group: 1,
           };
         } else {
           groups[g].jobIds.push(job.id);
           groups[g].docs_processed += job.processed_record_count;
+          groups[g].jobs_in_group++;
           // if incoming job latest timestamp is greater than the last saved one, replace it
           if (groups[g].latest_timestamp === undefined) {
             groups[g].latest_timestamp = job.latestTimestampMs;
@@ -48,6 +51,7 @@ export function getGroupsFromJobs(
     } else {
       groups.ungrouped.jobIds.push(job.id);
       groups.ungrouped.docs_processed += job.processed_record_count;
+      groups.ungrouped.jobs_in_group++;
       // if incoming job latest timestamp is greater than the last saved one, replace it
       if (job.latestTimestampMs > groups.ungrouped.latest_timestamp) {
         groups.ungrouped.latest_timestamp = job.latestTimestampMs;