[Infra] Fix types in alerting Threshold (#206133)

## Summary

This fixes bad typings for `chartProps` from
https://github.com/elastic/kibana/pull/202405. At some point we started
passing the eui theme to the chart props in
`x-pack/solutions/observability/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/index.tsx`.

The `chartProps.theme` is meant only to be the chart `PartialTheme`
which can override settings from the `baseTheme`.
This commit is contained in:
Nick Partridge 2025-01-10 09:47:36 -06:00 committed by GitHub
parent eddbbb1895
commit 03e299f202
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 5 additions and 7 deletions

View file

@ -7,13 +7,13 @@
import React from 'react';
import { Chart, Metric, Settings } from '@elastic/charts';
import { EuiIcon, EuiPanel, type UseEuiTheme, useEuiTheme } from '@elastic/eui';
import { EuiIcon, EuiPanel, useEuiTheme } from '@elastic/eui';
import type { PartialTheme, Theme } from '@elastic/charts';
import { i18n } from '@kbn/i18n';
import type { COMPARATORS } from '@kbn/alerting-comparators';
export interface ChartProps {
theme?: UseEuiTheme<{}>;
theme?: PartialTheme;
baseTheme: Theme;
}
@ -57,7 +57,7 @@ export const Threshold = ({
data-test-subj={`threshold-${thresholds.join('-')}-${value}`}
>
<Chart>
<Settings theme={theme as PartialTheme} baseTheme={baseTheme} locale={i18n.getLocale()} />
<Settings theme={theme} baseTheme={baseTheme} locale={i18n.getLocale()} />
<Metric
id={id}
data={[

View file

@ -14,7 +14,6 @@ import {
ALERT_START,
} from '@kbn/rule-data-utils';
import moment from 'moment';
import { useTheme } from '@emotion/react';
import { EuiTitle } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { getPaddedAlertTimeRange } from '@kbn/observability-get-padded-alert-time-range-util';
@ -39,7 +38,6 @@ const formatThreshold = (threshold: number) => String(threshold);
const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) => {
const { logsShared } = useKibanaContextForPlugin().services;
const theme = useTheme();
const baseTheme = useElasticChartsTheme();
const timeRange = getPaddedAlertTimeRange(alert.fields[ALERT_START]!, alert.fields[ALERT_END]);
const alertEnd = alert.fields[ALERT_END] ? moment(alert.fields[ALERT_END]).valueOf() : undefined;
@ -94,7 +92,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
<EuiSpacer size="s" />
<Threshold
title={`Threshold breached`}
chartProps={{ theme, baseTheme }}
chartProps={{ baseTheme }}
comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
id={'threshold-ratio-chart'}
thresholds={[rule.params.count.value]}
@ -161,7 +159,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
<EuiSpacer size="s" />
<Threshold
title={`Threshold breached`}
chartProps={{ theme, baseTheme }}
chartProps={{ baseTheme }}
comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
id="logCountThreshold"
thresholds={[rule.params.count.value]}