Show all partitions and overall anomaly score in annotation tooltip for overall chart

Author: Kerry350

x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/anomalies/chart.tsx

@@ -33,7 +33,8 @@ export const AnomaliesChart: React.FunctionComponent<{
   timeRange: TimeRange;
   series: Array<{ time: number; value: number }>;
   annotations: Record<MLSeverityScoreCategories, RectAnnotationDatum[]>;
-}> = ({ chartId, series, annotations, setTimeRange, timeRange }) => {
+  renderAnnotationTooltip?: (details?: string) => JSX.Element;
+}> = ({ chartId, series, annotations, setTimeRange, timeRange, renderAnnotationTooltip }) => {
   const [dateFormat] = useKibanaUiSetting('dateFormat');
   const [isDarkMode] = useKibanaUiSetting('theme:darkMode');
 
@@ -96,21 +97,25 @@ export const AnomaliesChart: React.FunctionComponent<{
           dataValues={annotations.warning}
           annotationId={warningAnnotationsId}
           style={{ fill: '#006BB4', opacity: 0.8 }}
+          renderTooltip={renderAnnotationTooltip}
         />
         <RectAnnotation
           dataValues={annotations.minor}
           annotationId={minorAnnotationsId}
           style={{ fill: '#017D73', opacity: 0.8 }}
+          renderTooltip={renderAnnotationTooltip}
         />
         <RectAnnotation
           dataValues={annotations.major}
           annotationId={majorAnnotationsId}
           style={{ fill: '#F5A700', opacity: 0.8 }}
+          renderTooltip={renderAnnotationTooltip}
         />
         <RectAnnotation
           dataValues={annotations.critical}
           annotationId={criticalAnnotationsId}
           style={{ fill: '#BD271E', opacity: 0.8 }}
+          renderTooltip={renderAnnotationTooltip}
         />
         <Settings
           onBrushEnd={handleBrushEnd}

x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/anomalies/index.tsx

@@ -117,6 +117,7 @@ export const AnomaliesResults = ({
             timeRange={timeRange}
             series={logEntryRateSeries}
             annotations={anomalyAnnotations}
+            renderAnnotationTooltip={renderAnnotationTooltip}
           />
           <EuiSpacer size="l" />
           <AnomaliesTable results={results} setTimeRange={setTimeRange} timeRange={timeRange} />
@@ -125,3 +126,50 @@ export const AnomaliesResults = ({
     </>
   );
 };
+
+interface ParsedAnnotationDetails {
+  overallAnomalyScore: number;
+  anomalyScoresByPartition: Record<string, number>;
+}
+
+const AnnotationTooltip: React.FunctionComponent<{ details: string }> = ({ details }) => {
+  const parsedDetails: ParsedAnnotationDetails = JSON.parse(details);
+  return (
+    <div>
+      <span>{`Overall anomaly score: ${parsedDetails.overallAnomalyScore}`}</span>
+      <ul>
+        {Object.entries(parsedDetails.anomalyScoresByPartition).map((entry, index) => {
+          return (
+            <li key={`${index}-overall-anomaly-chart-${entry[0]}-partition-score-${entry[1]}`}>
+              <>
+                <span>{entry[0]}</span>
+                {': '}
+                <span>
+                  <b>{entry[1]}</b>
+                </span>
+              </>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+const renderAnnotationTooltip = (details?: string) => {
+  // Seems to be necessary to get things typed correctly all the way through to elastic-charts components
+  if (!details) {
+    return <div></div>;
+  }
+  return <AnnotationTooltip details={details} />;
+};
+
+// i18n.translate(
+//   'xpack.infra.logs.analysis.logRateBucketMaxAnomalyScoreAnnotationLabel',
+//   {
+//     defaultMessage: 'Anomaly score: {sumPartitionMaxAnomalyScores}',
+//     values: {
+//       sumPartitionMaxAnomalyScores: Number(sumPartitionMaxAnomalyScores).toFixed(0),
+//     },
+//   }
+// ),

x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/helpers/data_formatters.tsx

@@ -149,9 +149,24 @@ export const getAnnotationsForPartition = (
 export const getAnnotationsForAll = (results: GetLogEntryRateSuccessResponsePayload['data']) => {
   return results.histogramBuckets.reduce<Record<MLSeverityScoreCategories, RectAnnotationDatum[]>>(
     (annotatedBucketsBySeverity, bucket) => {
-      const sumPartitionMaxAnomalyScores = bucket.partitions.reduce<number>(
-        (scoreSum, partition) => {
-          return scoreSum + partition.maximumAnomalyScore;
+      const maxAnomalyScoresByPartition = bucket.partitions.reduce<Record<string, number>>(
+        (bucketMaxAnomalyScoresByPartition, partition) => {
+          if (partition.maximumAnomalyScore < ML_SEVERITY_SCORES.warning) {
+            return bucketMaxAnomalyScoresByPartition;
+          }
+          return {
+            ...bucketMaxAnomalyScoresByPartition,
+            [partition.partitionId ? partition.partitionId : 'unknown']: parseInt(
+              Number(partition.maximumAnomalyScore).toFixed(0),
+              10
+            ),
+          };
+        },
+        {}
+      );
+      const sumPartitionMaxAnomalyScores = Object.entries(maxAnomalyScoresByPartition).reduce(
+        (sumMaxAnomalyScore, entry) => {
+          return (sumMaxAnomalyScore += entry[1]);
         },
         0
       );
@@ -172,15 +187,10 @@ export const getAnnotationsForAll = (results: GetLogEntryRateSuccessResponsePayl
               x0: bucket.startTime,
               x1: bucket.startTime + results.bucketDuration,
             },
-            details: i18n.translate(
-              'xpack.infra.logs.analysis.logRateBucketMaxAnomalyScoreAnnotationLabel',
-              {
-                defaultMessage: 'Anomaly score: {sumPartitionMaxAnomalyScores}',
-                values: {
-                  sumPartitionMaxAnomalyScores: Number(sumPartitionMaxAnomalyScores).toFixed(0),
-                },
-              }
-            ),
+            details: JSON.stringify({
+              overallAnomalyScore: parseInt(Number(sumPartitionMaxAnomalyScores).toFixed(0), 10),
+              anomalyScoresByPartition: maxAnomalyScoresByPartition,
+            }),
           },
         ],
       };