[ML] Explain log rate spikes: Mini histogram fixes. (#137266) (#137479)

- Disables tooltips in mini histograms to avoid bug with sticky tooltips and to be in line with APM sparkline behavior.
- Fix to set mini histogram background to transparent so the chart background picks up the background of a hovered table row.
- Fix some hard coded values by using values provided by EUI.
- Fixes an issue where histograms were assigned to the wrong table rows.
- Support for loading indicator and empty chart state.
- Tweaks analysis table column widths.

(cherry picked from commit 3117f671e2)

Co-authored-by: Walter Rafelsberger <walter@elastic.co>

x-pack/plugins/aiops/common/api/stream_reducer.ts

@@ -37,7 +37,7 @@ export function streamReducer(
     case API_ACTION_NAME.ADD_CHANGE_POINTS_HISTOGRAM:
       const changePoints = state.changePoints.map((cp) => {
         const cpHistogram = action.payload.find(
-          (h) => h.fieldName === cp.fieldName && h.fieldValue && cp.fieldName
+          (h) => h.fieldName === cp.fieldName && h.fieldValue === cp.fieldValue
         );
         if (cpHistogram) {
           cp.histogram = cpHistogram.histogram;

x-pack/plugins/aiops/public/components/mini_histogram/mini_histogram.tsx

@@ -6,18 +6,32 @@
  */
 
 import React, { FC } from 'react';
+import { css } from '@emotion/react';
 
 import { Chart, BarSeries, PartialTheme, ScaleType, Settings } from '@elastic/charts';
+import { EuiLoadingChart, EuiTextColor } from '@elastic/eui';
 
+import { FormattedMessage } from '@kbn/i18n-react';
 import type { ChangePointHistogramItem } from '@kbn/ml-agg-utils';
 
+import { useAiOpsKibana } from '../../kibana_context';
+import { useEuiTheme } from '../../hooks/use_eui_theme';
+
 interface MiniHistogramProps {
-  chartData: ChangePointHistogramItem[];
+  chartData?: ChangePointHistogramItem[];
+  isLoading: boolean;
   label: string;
 }
 
-export const MiniHistogram: FC<MiniHistogramProps> = ({ chartData, label }) => {
-  const theme: PartialTheme = {
+export const MiniHistogram: FC<MiniHistogramProps> = ({ chartData, isLoading, label }) => {
+  const {
+    services: { charts },
+  } = useAiOpsKibana();
+
+  const euiTheme = useEuiTheme();
+  const defaultChartTheme = charts.theme.useChartsTheme();
+
+  const miniHistogramChartTheme: PartialTheme = {
     chartMargins: {
       left: 0,
       right: 0,
@@ -33,18 +47,49 @@ export const MiniHistogram: FC<MiniHistogramProps> = ({ chartData, label }) => {
     scales: {
       barsPadding: 0.1,
     },
+    background: {
+      color: 'transparent',
+    },
   };
 
+  const cssChartSize = css({
+    width: '80px',
+    height: euiTheme.euiSizeL,
+    margin: '0px',
+  });
+
+  const cssCenter = css({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  });
+
+  if (isLoading) {
+    return (
+      <div css={[cssChartSize, cssCenter]}>
+        <EuiLoadingChart mono />
+      </div>
+    );
+  }
+
+  if (!chartData) {
+    return (
+      <div css={[cssChartSize, cssCenter]}>
+        <EuiTextColor color="subdued">
+          <FormattedMessage id="xpack.aiops.miniHistogram.noDataLabel" defaultMessage="N/A" />
+        </EuiTextColor>
+      </div>
+    );
+  }
+
   return (
-    <div
-      style={{
-        width: '80px',
-        height: '24px',
-        margin: '0px',
-      }}
-    >
+    <div css={cssChartSize}>
       <Chart>
-        <Settings theme={theme} showLegend={false} />
+        <Settings
+          theme={[miniHistogramChartTheme, defaultChartTheme]}
+          showLegend={false}
+          tooltip="none"
+        />
         <BarSeries
           id="doc_count_overall"
           xScaleType={ScaleType.Time}

x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table.tsx

@@ -20,10 +20,14 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { ChangePoint } from '@kbn/ml-agg-utils';
 
+import { useEuiTheme } from '../../hooks/use_eui_theme';
+
 import { MiniHistogram } from '../mini_histogram';
 
 import { getFailedTransactionsCorrelationImpactLabel } from './get_failed_transactions_correlation_impact_label';
 
+const NARROW_COLUMN_WIDTH = '120px';
+
 const PAGINATION_SIZE_OPTIONS = [5, 10, 20, 50];
 const noDataText = i18n.translate('xpack.aiops.correlations.correlationsTable.noDataText', {
   defaultMessage: 'No data',
@@ -48,6 +52,8 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
   onSelectedChangePoint,
   selectedChangePoint,
 }) => {
+  const euiTheme = useEuiTheme();
+
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(10);
   const [sortField, setSortField] = useState<keyof ChangePoint>(DEFAULT_SORT_FIELD);
@@ -72,6 +78,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
       sortable: true,
     },
     {
+      width: NARROW_COLUMN_WIDTH,
       field: 'pValue',
       name: (
         <EuiToolTip
@@ -93,14 +100,17 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
           </>
         </EuiToolTip>
       ),
-      render: (_, { histogram, fieldName, fieldValue }) => {
-        return histogram ? (
-          <MiniHistogram chartData={histogram} label={`${fieldName}:${fieldValue}`} />
-        ) : null;
-      },
+      render: (_, { histogram, fieldName, fieldValue }) => (
+        <MiniHistogram
+          chartData={histogram}
+          isLoading={loading && histogram === undefined}
+          label={`${fieldName}:${fieldValue}`}
+        />
+      ),
       sortable: false,
     },
     {
+      width: NARROW_COLUMN_WIDTH,
       field: 'pValue',
       name: (
         <EuiToolTip
@@ -126,6 +136,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
       sortable: true,
     },
     {
+      width: NARROW_COLUMN_WIDTH,
       field: 'pValue',
       name: (
         <EuiToolTip
@@ -228,9 +239,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
             selectedChangePoint.fieldValue === changePoint.fieldValue &&
             selectedChangePoint.fieldName === changePoint.fieldName
               ? {
-                  // TODO use euiTheme
-                  // backgroundColor: euiTheme.eui.euiColorLightestShade,
-                  backgroundColor: '#ddd',
+                  backgroundColor: euiTheme.euiColorLightestShade,
                 }
               : null,
         };

x-pack/plugins/aiops/public/hooks/use_eui_theme.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+import { useMemo } from 'react';
+
+import { euiLightVars as euiThemeLight, euiDarkVars as euiThemeDark } from '@kbn/ui-theme';
+
+import { useAiOpsKibana } from '../kibana_context';
+
+export type EuiThemeType = typeof euiThemeLight | typeof euiThemeDark;
+
+export function useEuiTheme() {
+  const {
+    services: { uiSettings },
+  } = useAiOpsKibana();
+
+  return useMemo(
+    () => (uiSettings.get('theme:darkMode') ? euiThemeDark : euiThemeLight),
+    [uiSettings]
+  );
+}