github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Alerting] update colors for alert summary chart to euitheme (#211097)

Browse source 
## Summary

Resolves [#211010](https://github.com/elastic/kibana/issues/211010)
Old
<img width="2560" alt="Screenshot 2025-02-13 at 3 26 58 PM"
src="https://github.com/user-attachments/assets/3d44611a-331f-49a1-bf29-2a2975dd036f"
/>

New
<img width="2547" alt="Screenshot 2025-02-13 at 3 28 38 PM"
src="https://github.com/user-attachments/assets/1f9d317c-a3e3-44e6-bde3-3b6981ef1df5"
/>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Bailey Cash 2025-02-19 09:53:36 -05:00 • committed by GitHub
parent 7a168b3852
commit 56c57c75b9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 19 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

3
x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx
View file

@ -12,7 +12,6 @@ import {
ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ,
ACTIVE_NOW_LABEL,
ALERTS_LABEL,
ALL_ALERT_COLOR,
TOTAL_ALERT_COUNT_DATA_TEST_SUBJ,
} from './constants';
import { AlertItem } from './alert_item';
@ -34,7 +33,7 @@ export const AlertCounts = ({ activeAlertCount, recoveredAlertCount, handleClick
<AlertItem
label={ALERTS_LABEL}
count={activeAlertCount + recoveredAlertCount}
color={ALL_ALERT_COLOR}
color={euiTheme.colors.vis.euiColorVis0}
data-test-subj={TOTAL_ALERT_COUNT_DATA_TEST_SUBJ}
handleClick={handleClick}
/>

16
x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx
View file

@ -6,7 +6,15 @@
*/
import React, { MouseEvent } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiSpacer,
EuiText,
EuiTitle,
useEuiTheme,
} from '@elastic/eui';
import {
Axis,
Chart,
@ -21,7 +29,7 @@ import {
import { AlertStatus } from '@kbn/rule-data-utils';
import { i18n } from '@kbn/i18n';
import { AlertCounts } from './alert_counts';
import { ALL_ALERT_COLOR, WIDGET_TITLE } from './constants';
import { WIDGET_TITLE } from './constants';
import { Alert, ChartProps, DependencyProps } from '../types';
export interface AlertSummaryWidgetCompactProps {
@ -43,6 +51,8 @@ export const AlertSummaryWidgetCompact = ({
onClick,
dependencyProps: { baseTheme, sparklineTheme },
}: AlertSummaryWidgetCompactProps) => {
const { euiTheme } = useEuiTheme();
const handleClick = (
event: MouseEvent<HTMLAnchorElement | HTMLDivElement>,
status?: AlertStatus
@ -119,7 +129,7 @@ export const AlertSummaryWidgetCompact = ({
lineSeriesStyle={{
line: {
strokeWidth: 2,
stroke: ALL_ALERT_COLOR,
stroke: euiTheme.colors.vis.euiColorVis0,
},
}}
curve={CurveType.CURVE_MONOTONE_X}

9
x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx
View file

@ -17,10 +17,10 @@ import {
Settings,
Tooltip,
} from '@elastic/charts';
import { EuiFlexItem, EuiPanel, EuiSpacer } from '@elastic/eui';
import { EuiFlexItem, EuiPanel, EuiSpacer, useEuiTheme } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { AlertCounts } from './alert_counts';
import { ALL_ALERT_COLOR, TOOLTIP_DATE_FORMAT } from './constants';
import { TOOLTIP_DATE_FORMAT } from './constants';
import { Alert, ChartProps, DependencyProps } from '../types';
export interface AlertSummaryWidgetFullSizeProps {
@ -46,6 +46,8 @@ export const AlertSummaryWidgetFullSize = ({
hideStats,
dependencyProps: { baseTheme },
}: AlertSummaryWidgetFullSizeProps) => {
const { euiTheme } = useEuiTheme();
const chartData = activeAlerts.map((alert) => alert.doc_count);
const domain = {
max: Math.max(...chartData) * 1.1, // add 10% headroom
@ -90,7 +92,6 @@ export const AlertSummaryWidgetFullSize = ({
},
},
]}
baseTheme={baseTheme}
onBrushEnd={onBrushEnd}
locale={i18n.getLocale()}
/>
@ -127,7 +128,7 @@ export const AlertSummaryWidgetFullSize = ({
yScaleType={ScaleType.Linear}
xAccessor="key"
yAccessors={['doc_count']}
color={[ALL_ALERT_COLOR]}
color={[euiTheme.colors.vis.euiColorVis0]}
data={activeAlerts}
lineSeriesStyle={{
line: {

4
x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/alert_summary_widget/components/constants.tsx
View file

@ -5,7 +5,6 @@
* 2.0.
*/
import { euiPaletteColorBlind } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import React from 'react';
@ -15,9 +14,6 @@ export const ALERT_COUNT_FORMAT = '0.[00]a';
export const ACTIVE_ALERT_COUNT_DATA_TEST_SUBJ = 'activeAlertCount';
export const TOTAL_ALERT_COUNT_DATA_TEST_SUBJ = 'totalAlertCount';
const visColors = euiPaletteColorBlind();
export const ALL_ALERT_COLOR = visColors[1];
export const WIDGET_TITLE = (
<FormattedMessage
id="xpack.triggersActionsUI.sections.alertsSummaryWidget.title"