[ML] Explain log rate spikes: Mini histogram fixes.

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

@@ -24,6 +24,8 @@ 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',
@@ -72,6 +74,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
       sortable: true,
     },
     {
+      width: NARROW_COLUMN_WIDTH,
       field: 'pValue',
       name: (
         <EuiToolTip
@@ -93,14 +96,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 +132,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
       sortable: true,
     },
     {
+      width: NARROW_COLUMN_WIDTH,
       field: 'pValue',
       name: (
         <EuiToolTip

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]
+  );
+}