Fix Inspect modal header should be in single linear of Host and User risk (#135710)

This commit is contained in:
Pablo Machado 2022-07-06 09:36:09 +02:00 committed by GitHub
parent aef5c9a0da
commit 113391618f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 10 deletions

View file

@ -9,6 +9,7 @@ import React, { useMemo, useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
import styled from 'styled-components';
import {
Columns,
Criteria,
@ -46,6 +47,10 @@ export const rowItems: ItemsPerRow[] = [
},
];
const IconWrapper = styled.span`
margin-left: ${({ theme }) => theme.eui.euiSizeS};
`;
const tableType = hostsModel.HostsTableType.risk;
interface HostRiskScoreTableProps {
@ -150,9 +155,9 @@ const HostRiskScoreTableComponent: React.FC<HostRiskScoreTableProps> = ({
);
const headerTitle = (
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem grow={false}>{i18nHosts.HOST_RISK_TITLE}</EuiFlexItem>
<EuiFlexItem grow={false}>
<>
{i18nHosts.HOST_RISK_TITLE}
<IconWrapper>
<EuiIconTip
color="subdued"
content={i18nHosts.HOST_RISK_TABLE_TOOLTIP}
@ -160,8 +165,8 @@ const HostRiskScoreTableComponent: React.FC<HostRiskScoreTableProps> = ({
size="l"
type="iInCircle"
/>
</EuiFlexItem>
</EuiFlexGroup>
</IconWrapper>
</>
);
const getHostRiskScoreFilterQuerySelector = useMemo(

View file

@ -9,6 +9,7 @@ import React, { useMemo, useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
import styled from 'styled-components';
import {
Columns,
Criteria,
@ -37,6 +38,10 @@ import {
UsersRiskScore,
} from '../../../../common/search_strategy';
const IconWrapper = styled.span`
margin-left: ${({ theme }) => theme.eui.euiSizeS};
`;
export const rowItems: ItemsPerRow[] = [
{
text: i18n.ROWS_5,
@ -154,9 +159,9 @@ const UserRiskScoreTableComponent: React.FC<UserRiskScoreTableProps> = ({
);
const headerTitle = (
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem grow={false}>{i18nUsers.NAVIGATION_RISK_TITLE}</EuiFlexItem>
<EuiFlexItem grow={false}>
<>
{i18nUsers.NAVIGATION_RISK_TITLE}
<IconWrapper>
<EuiIconTip
color="subdued"
content={i18n.USER_RISK_TABLE_TOOLTIP}
@ -164,8 +169,8 @@ const UserRiskScoreTableComponent: React.FC<UserRiskScoreTableProps> = ({
size="l"
type="iInCircle"
/>
</EuiFlexItem>
</EuiFlexGroup>
</IconWrapper>
</>
);
const getUserRiskScoreFilterQuerySelector = useMemo(