mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 01:13:23 -04:00
[Security Solution][THI] - replace usages of EUI vis colors (#205218)
## Summary This PR is part of a list of PRs to perform the changes necessary to get the new Borealis theme working correctly. It focuses on replace the vis colors for non-visualization usages by correct EUI color tokens. 2 places have been impacted: - the alerts data table in grouping mode (for host, user and network). The background colors are removed as they don't really mean anything, and are not used anywhere else in Kibana. Also the icons have been updated to match the ones used in other places (like in the flyout) #### Host | before | after | | ------------- | ------------- | |  |  | #### User | before | after | | ------------- | ------------- | | |  | #### Network | before | after | | ------------- | ------------- | |  |  | - the dataprovider badge in timeline #### Dark mode | before | after | | ------------- | ------------- | |  |  | #### Light mode | before | after | | ------------- | ------------- | |  |  | The changes have been reviewed and approved by @codearos 😄 https://github.com/elastic/kibana/issues/201883
This commit is contained in:
Philippe Oberti
GitHub
parent
80baa2cd9e
commit
cebd201981
4 changed files with 59 additions and 107 deletions
|
|
@ -6,7 +6,6 @@
|
|||
*/
|
||||
|
||||
import {
|
||||
EuiAvatar,
|
||||
EuiBadge,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
|
|
@ -15,9 +14,7 @@ import {
|
|||
EuiText,
|
||||
EuiTextColor,
|
||||
EuiTitle,
|
||||
useEuiTheme,
|
||||
} from '@elastic/eui';
|
||||
import { euiThemeVars } from '@kbn/ui-theme';
|
||||
import { isArray } from 'lodash/fp';
|
||||
import React from 'react';
|
||||
import type { GroupPanelRenderer } from '@kbn/grouping/src';
|
||||
|
|
@ -44,11 +41,32 @@ export const renderGroupPanel: GroupPanelRenderer<AlertsGroupingAggregation> = (
|
|||
/>
|
||||
) : undefined;
|
||||
case 'host.name':
|
||||
return <HostNameGroupContent hostName={bucket.key} nullGroupMessage={nullGroupMessage} />;
|
||||
return (
|
||||
<GroupContent
|
||||
title={bucket.key}
|
||||
icon="storage"
|
||||
nullGroupMessage={nullGroupMessage}
|
||||
dataTestSubj="host-name"
|
||||
/>
|
||||
);
|
||||
case 'user.name':
|
||||
return <UserNameGroupContent userName={bucket.key} nullGroupMessage={nullGroupMessage} />;
|
||||
return (
|
||||
<GroupContent
|
||||
title={bucket.key}
|
||||
icon="user"
|
||||
nullGroupMessage={nullGroupMessage}
|
||||
dataTestSubj="user-name"
|
||||
/>
|
||||
);
|
||||
case 'source.ip':
|
||||
return <SourceIpGroupContent sourceIp={bucket.key} nullGroupMessage={nullGroupMessage} />;
|
||||
return (
|
||||
<GroupContent
|
||||
title={bucket.key}
|
||||
icon="globe"
|
||||
nullGroupMessage={nullGroupMessage}
|
||||
dataTestSubj="source-ip"
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -64,7 +82,7 @@ const RuleNameGroupContent = React.memo<{
|
|||
);
|
||||
return (
|
||||
<div style={{ display: 'table', tableLayout: 'fixed', width: '100%' }}>
|
||||
<EuiFlexGroup data-test-subj="rule-name-group-renderer" gutterSize="m" alignItems="center">
|
||||
<EuiFlexGroup data-test-subj="rule-name-group-renderer" gutterSize="s" alignItems="center">
|
||||
<EuiFlexItem grow={false} style={{ display: 'contents' }}>
|
||||
<EuiTitle size="xs">
|
||||
<h5 className="eui-textTruncate">{ruleName.trim()}</h5>
|
||||
|
|
@ -94,87 +112,30 @@ const RuleNameGroupContent = React.memo<{
|
|||
});
|
||||
RuleNameGroupContent.displayName = 'RuleNameGroup';
|
||||
|
||||
const HostNameGroupContent = React.memo<{ hostName: string | string[]; nullGroupMessage?: string }>(
|
||||
({ hostName, nullGroupMessage }) => {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
return (
|
||||
<EuiFlexGroup data-test-subj="host-name-group-renderer" gutterSize="s" alignItems="center">
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
style={{
|
||||
backgroundColor: euiTheme.colors.vis.euiColorVis1,
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
>
|
||||
<EuiIcon type="database" size="l" style={{ padding: 4 }} />
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle size="xs">
|
||||
<h5>{hostName}</h5>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
{nullGroupMessage && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIconTip content={nullGroupMessage} position="right" />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
}
|
||||
);
|
||||
HostNameGroupContent.displayName = 'HostNameGroupContent';
|
||||
|
||||
const UserNameGroupContent = React.memo<{ userName: string | string[]; nullGroupMessage?: string }>(
|
||||
({ userName, nullGroupMessage }) => {
|
||||
const userNameValue = firstNonNullValue(userName) ?? '-';
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
return (
|
||||
<EuiFlexGroup data-test-subj="user-name-group-renderer" gutterSize="s" alignItems="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiAvatar name={userNameValue} color={euiTheme.colors.accentSecondary} />
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle size="xs">
|
||||
<h5>{userName}</h5>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
{nullGroupMessage && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIconTip content={nullGroupMessage} position="right" />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
}
|
||||
);
|
||||
UserNameGroupContent.displayName = 'UserNameGroupContent';
|
||||
|
||||
const SourceIpGroupContent = React.memo<{ sourceIp: string | string[]; nullGroupMessage?: string }>(
|
||||
({ sourceIp, nullGroupMessage }) => (
|
||||
<EuiFlexGroup data-test-subj="source-ip-group-renderer" gutterSize="s" alignItems="center">
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
style={{
|
||||
backgroundColor: euiThemeVars.euiColorVis3_behindText,
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
>
|
||||
<EuiIcon style={{ padding: 4 }} type="ip" size="l" />
|
||||
</EuiFlexItem>
|
||||
const GroupContent = React.memo<{
|
||||
title: string | string[];
|
||||
icon: string;
|
||||
nullGroupMessage?: string;
|
||||
dataTestSubj?: string;
|
||||
}>(({ title, icon, nullGroupMessage, dataTestSubj }) => (
|
||||
<EuiFlexGroup
|
||||
data-test-subj={`${dataTestSubj}-group-renderer`}
|
||||
gutterSize="s"
|
||||
alignItems="center"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIcon type={icon} size="m" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle size="xs">
|
||||
<h5>{title}</h5>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
{nullGroupMessage && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle size="xs">
|
||||
<h5>{sourceIp}</h5>
|
||||
</EuiTitle>
|
||||
<EuiIconTip content={nullGroupMessage} position="right" />
|
||||
</EuiFlexItem>
|
||||
{nullGroupMessage && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIconTip content={nullGroupMessage} position="right" />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
)
|
||||
);
|
||||
SourceIpGroupContent.displayName = 'SourceIpGroupContent';
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
));
|
||||
GroupContent.displayName = 'GroupContent';
|
||||
|
|
|
|||
|
|
@ -56,10 +56,6 @@ export const usePaneStyles = () => {
|
|||
&:not(.timeline-portal-overlay-mask--full-screen) .timeline-container {
|
||||
margin: ${euiTheme.size.m};
|
||||
border-radius: ${euiTheme.border.radius.medium};
|
||||
|
||||
.timeline-template-badge {
|
||||
border-radius: ${euiTheme.border.radius.medium} ${euiTheme.border.radius.medium} 0 0; // top corners only
|
||||
}
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -63,13 +63,13 @@ ProviderBadgeStyled.displayName = 'ProviderBadgeStyled';
|
|||
|
||||
const ProviderFieldBadge = styled.div`
|
||||
display: block;
|
||||
color: #fff;
|
||||
padding: 6px 8px;
|
||||
padding: ${({ theme }) => `${theme.eui.euiSizeXS} ${theme.eui.euiSizeS}`};
|
||||
font-size: 0.6em;
|
||||
`;
|
||||
|
||||
const StyledTemplateFieldBadge = styled(ProviderFieldBadge)`
|
||||
background: ${({ theme }) => theme.eui.euiColorVis3_behindText};
|
||||
background: ${({ theme }) => theme.eui.euiPanelBackgroundColorModifiers.accent};
|
||||
color: ${({ theme }) => theme.eui.euiColorAccentText};
|
||||
text-transform: uppercase;
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
import { pick } from 'lodash/fp';
|
||||
import { EuiProgress } from '@elastic/eui';
|
||||
import { EuiPanel, EuiProgress, EuiText } from '@elastic/eui';
|
||||
import React, { useCallback, useEffect, useMemo, useRef, createContext } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import styled from 'styled-components';
|
||||
|
|
@ -31,13 +31,6 @@ import { useResolveConflict } from '../../../common/hooks/use_resolve_conflict';
|
|||
import { sourcererSelectors } from '../../../common/store';
|
||||
import { defaultUdtHeaders } from './body/column_headers/default_headers';
|
||||
|
||||
const TimelineTemplateBadge = styled.div`
|
||||
background: ${({ theme }) => theme.eui.euiColorVis3_behindText};
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
font-size: 0.8em;
|
||||
`;
|
||||
|
||||
const TimelineBody = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -206,9 +199,11 @@ const StatefulTimelineComponent: React.FC<Props> = ({
|
|||
<TimelineSavingProgress timelineId={timelineId} />
|
||||
<TimelineBody data-test-subj="timeline-body">
|
||||
{timelineType === TimelineTypeEnum.template && (
|
||||
<TimelineTemplateBadge className="timeline-template-badge">
|
||||
{i18n.TIMELINE_TEMPLATE}
|
||||
</TimelineTemplateBadge>
|
||||
<EuiPanel color="accent" grow={false} paddingSize="s">
|
||||
<EuiText size="xs" color="accent">
|
||||
{i18n.TIMELINE_TEMPLATE}
|
||||
</EuiText>
|
||||
</EuiPanel>
|
||||
)}
|
||||
{resolveConflictComponent}
|
||||
<HideShowContainer
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue