github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution][Alerts] - change top alerts by chart color (#209031)

Browse source 
## Summary

This PR makes the smallest change requested by the UIUX team, to the
_Top alerts by_ chart on the Alert page. The `vis9` color is changed to
`vis6`.

| Before  | After |
| ------------- | ------------- |
| ![Screenshot 2025-01-30 at 4 51
05 PM](https://github.com/user-attachments/assets/5b06932d-ef68-4a3d-a778-bb3043fce7b1)
| ![Screenshot 2025-01-30 at 4 51
54 PM](https://github.com/user-attachments/assets/2385a5af-fe4a-40ce-b5d5-fee7fd44aae1)
|
This commit is contained in:
Philippe Oberti 2025-02-03 19:17:59 +01:00 • committed by GitHub
parent 9078a2bf69
commit 04eebd2cba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 20 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

29
x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/alerts_progress_bar.tsx
View file

@ -5,18 +5,19 @@
* 2.0.
*/
import {
EuiButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiLink,
EuiPopover,
EuiPopoverTitle,
EuiProgress,
EuiSpacer,
EuiText,
EuiHorizontalRule,
EuiPopoverTitle,
EuiLink,
EuiFlexGroup,
EuiFlexItem,
EuiPopover,
EuiButtonIcon,
useEuiTheme,
} from '@elastic/eui';
import React, { useState } from 'react';
import React, { useMemo, useState } from 'react';
import styled from 'styled-components';
import { TableId } from '@kbn/securitysolution-data-table';
import type { AlertsProgressBarData, GroupBySelection } from './types';
@ -45,6 +46,7 @@ const StyledEuiProgress = styled(EuiProgress)`
const DataStatsWrapper = styled.div`
width: 250px;
`;
export interface AlertsProcessBarProps {
data: AlertsProgressBarData[];
isLoading: boolean;
@ -58,6 +60,7 @@ export const AlertsProgressBar: React.FC<AlertsProcessBarProps> = ({
addFilter,
groupBySelection,
}) => {
const { euiTheme } = useEuiTheme();
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const onButtonClick = () => setIsPopoverOpen(!isPopoverOpen);
const closePopover = () => setIsPopoverOpen(false);
@ -113,6 +116,14 @@ export const AlertsProgressBar: React.FC<AlertsProcessBarProps> = ({
);
};
const color = useMemo(
() =>
euiTheme.themeName === 'EUI_THEME_BOREALIS'
? euiTheme.colors.vis.euiColorVis6
: euiTheme.colors.vis.euiColorVis9,
[euiTheme]
);
return (
<>
<StyledEuiFlexGroup alignItems="center" gutterSize="xs">
@ -159,7 +170,7 @@ export const AlertsProgressBar: React.FC<AlertsProcessBarProps> = ({
</EuiText>
}
max={1}
color={`vis9`}
color={color}
size="s"
value={item.percentage}
label={