From 78e8191c35b44fe7650a4a45827ab2134ae9bf99 Mon Sep 17 00:00:00 2001
From: Phillip Burch <phillip.burch@live.com>
Date: Mon, 28 Sep 2020 11:21:08 -0500
Subject: [PATCH] Fix typos

---
 .../ml/anomaly_detection/flyout_home.tsx      |  2 +-
 .../ml/anomaly_detection/job_setup_screen.tsx |  2 +-
 .../components/timeline/timeline.tsx          | 40 +++++++++++--------
 .../hooks/use_metrics_hosts_anomalies.ts      |  4 --
 .../hooks/use_metrics_k8s_anomalies.ts        |  4 --
 5 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/flyout_home.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/flyout_home.tsx
index 9cf898b684336..801dff9c4a17a 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/flyout_home.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/flyout_home.tsx
@@ -84,7 +84,7 @@ export const FlyoutHome = (props: Props) => {
     return (
       <LoadingPage
         message={i18n.translate('xpack.infra.ml.anomalyFlyout.jobStatusLoadingMessage', {
-          defaultMessage: 'Checking status of metris jobs...',
+          defaultMessage: 'Checking status of metrics jobs...',
         })}
       />
     );
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/job_setup_screen.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/job_setup_screen.tsx
index 730cd7b6e9ef5..428c002da6383 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/job_setup_screen.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/ml/anomaly_detection/job_setup_screen.tsx
@@ -223,7 +223,7 @@ export const JobSetupScreen = (props: Props) => {
                   label={
                     <FormattedMessage
                       id="xpack.infra.ml.steps.setupProcess.partition.label"
-                      defaultMessage="Partition filed"
+                      defaultMessage="Partition field"
                     />
                   }
                   compressed
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
index 8a861bb30e070..2c070434d5d4f 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import moment from 'moment';
 import { first, last } from 'lodash';
-import { EuiLoadingChart, EuiText, EuiEmptyPrompt, EuiButton, EuiIcon } from '@elastic/eui';
+import { EuiLoadingChart, EuiText, EuiEmptyPrompt, EuiButton } from '@elastic/eui';
 import {
   Axis,
   Chart,
@@ -189,8 +189,15 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
     );
   }
 
-  function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
-    return values.map((value, index) => ({ dataValue: value, details: `detail-${index}` }));
+  function generateAnnotationData(results: number[][]): LineAnnotationDatum[] {
+    return results.map((anomaly, index) => {
+      const [val, score] = anomaly;
+      return {
+        dataValue: val,
+        details: `Score: ${score}`,
+        header: `Anomaly`,
+      };
+    });
   }
 
   return (
@@ -208,19 +215,18 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
       </TimelineHeader>
       <TimelineChartContainer>
         <Chart>
-          {(anomalies || []).map((a) => {
-            return (
-              <LineAnnotation
-                key={a.id}
-                id={a.id}
-                domainType={AnnotationDomainTypes.XDomain}
-                dataValues={generateAnnotationData([a.startTime, 0])}
-                style={annotationStyle}
-                marker={<EuiIcon onClick={() => alert('clicked')} type="alert" />}
-                markerPosition={'bottom'}
-              />
-            );
-          })}
+          {anomalies && (
+            <LineAnnotation
+              id={'anomalies'}
+              domainType={AnnotationDomainTypes.XDomain}
+              dataValues={generateAnnotationData(
+                anomalies.map((a) => [a.startTime, a.anomalyScore])
+              )}
+              style={annotationStyle}
+              marker={<div style={{ background: 'red', padding: 5 }} />}
+              markerPosition={'bottom'}
+            />
+          )}
           <MetricExplorerSeriesChart
             type={MetricsExplorerChartType.area}
             metric={chartMetric}
@@ -257,7 +263,7 @@ const annotationStyle = {
   line: {
     strokeWidth: 3,
     stroke: '#f00',
-    opacity: 1,
+    opacity: 0,
   },
   details: {
     fontSize: 12,
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_metrics_hosts_anomalies.ts b/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_metrics_hosts_anomalies.ts
index e6f3185a509ac..f33e3ea16b389 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_metrics_hosts_anomalies.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_metrics_hosts_anomalies.ts
@@ -251,10 +251,6 @@ export const useMetricsHostsAnomaliesResults = ({
     });
   }, [filteredDatasets]);
 
-  // useEffect(() => {
-  //   getMetricsHostsAnomalies();
-  // }, [getMetricsHostsAnomalies]); // TODO: FIgure out the deps here.
-
   const handleFetchNextPage = useCallback(() => {
     if (reducerState.lastReceivedCursors) {
       dispatch({ type: 'fetchNextPage' });
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_metrics_k8s_anomalies.ts b/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_metrics_k8s_anomalies.ts
index 7c292800c7d75..89e70c4c5c4c7 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_metrics_k8s_anomalies.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_metrics_k8s_anomalies.ts
@@ -253,10 +253,6 @@ export const useMetricsK8sAnomaliesResults = ({
     });
   }, [filteredDatasets]);
 
-  // useEffect(() => {
-  //   getMetricsK8sAnomalies();
-  // }, [getMetricsK8sAnomalies]);
-
   const handleFetchNextPage = useCallback(() => {
     if (reducerState.lastReceivedCursors) {
       dispatch({ type: 'fetchNextPage' });