Skip to content

Commit

Permalink
[ML] Explain log rate spikes: Mini histogram fixes. (#137266) (#137479)
Browse files Browse the repository at this point in the history
- 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 3117f67)

Co-authored-by: Walter Rafelsberger <[email protected]>
  • Loading branch information
kibanamachine and walterra authored Jul 28, 2022
1 parent 3062f7c commit 114d1b8
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 20 deletions.
2 changes: 1 addition & 1 deletion x-pack/plugins/aiops/common/api/stream_reducer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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);
Expand All @@ -72,6 +78,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
sortable: true,
},
{
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
Expand All @@ -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
Expand All @@ -126,6 +136,7 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
sortable: true,
},
{
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
Expand Down Expand Up @@ -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,
};
Expand Down
25 changes: 25 additions & 0 deletions x-pack/plugins/aiops/public/hooks/use_eui_theme.ts
Original file line number Diff line number Diff line change
@@ -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]
);
}

0 comments on commit 114d1b8

Please sign in to comment.