Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[8.0] [Security Solution] Enhancement endpoint flyout UI fixes (#117987) #118856

Merged
merged 1 commit into from
Nov 17, 2021
Merged

[8.0] [Security Solution] Enhancement endpoint flyout UI fixes (#117987) #118856

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions .../security_solution/public/management/pages/endpoint_hosts/view/components/out_of_date.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,14 @@ import { FormattedMessage } from '@kbn/i18n/react';

export const OutOfDate = React.memo<{ style?: React.CSSProperties }>(({ style, ...otherProps }) => {
return (
<EuiText color="subdued" size="xs" className="eui-textNoWrap" style={style} {...otherProps}>
<EuiIcon size="m" type="alert" color="warning" />
<EuiText
color="subdued"
size="xs"
className="eui-textNoWrap eui-displayInlineBlock"
style={style}
{...otherProps}
>
<EuiIcon className={'eui-alignTop'} size="m" type="alert" color="warning" />
<FormattedMessage id="xpack.securitySolution.outOfDateLabel" defaultMessage="Out-of-date" />
</EuiText>
);
Expand Down
3 changes: 1 addition & 2 deletions .../public/management/pages/endpoint_hosts/view/details/components/endpoint_details_tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import React, { memo, useMemo } from 'react';
import { EuiTab, EuiTabs, EuiFlyoutBody, EuiSpacer } from '@elastic/eui';
import { EuiTab, EuiTabs, EuiFlyoutBody } from '@elastic/eui';
import { EndpointIndexUIQueryParams } from '../../../types';

import { EndpointDetailsFlyoutHeader } from './flyout_header';
Expand Down Expand Up @@ -68,7 +68,6 @@ export const EndpointDetailsFlyoutTabs = memo(
return (
<>
<EndpointDetailsFlyoutHeader hostname={hostname} hasBorder>
<EuiSpacer size="s" />
<EuiTabs style={{ marginBottom: '-25px' }}>{renderTabs}</EuiTabs>
</EndpointDetailsFlyoutHeader>
<EuiFlyoutBody data-test-subj="endpointDetailsFlyoutBody">
Expand Down
2 changes: 1 addition & 1 deletion ...solution/public/management/pages/endpoint_hosts/view/details/components/flyout_header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const EndpointDetailsFlyoutHeader = memo(
<EuiLoadingContent lines={1} />
) : (
<EuiToolTip content={hostname} anchorClassName="eui-textTruncate">
<EuiTitle>
<EuiTitle size="s">
<h2
style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
data-test-subj="endpointDetailsFlyoutTitle"
Expand Down
193 changes: 112 additions & 81 deletions ...solution/public/management/pages/endpoint_hosts/view/details/endpoint_details_content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@
import styled from 'styled-components';
import {
EuiDescriptionList,
EuiListGroup,
EuiListGroupItem,
EuiText,
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -19,26 +17,35 @@ import {
} from '@elastic/eui';
import React, { memo, useMemo } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { isPolicyOutOfDate } from '../../utils';
import { HostInfo, HostMetadata, HostStatus } from '../../../../../../common/endpoint/types';
import { useEndpointSelector } from '../hooks';
import { policyResponseStatus, uiQueryParams } from '../../store/selectors';
import { POLICY_STATUS_TO_BADGE_COLOR } from '../host_constants';
import { FormattedDateAndTime } from '../../../../../common/components/endpoint/formatted_date_time';
import { FormattedDate } from '../../../../../common/components/formatted_date';
import { useNavigateByRouterEventHandler } from '../../../../../common/hooks/endpoint/use_navigate_by_router_event_handler';
import { getEndpointDetailsPath } from '../../../../common/routing';
import { EndpointPolicyLink } from '../components/endpoint_policy_link';
import { OutOfDate } from '../components/out_of_date';
import { EndpointAgentStatus } from '../components/endpoint_agent_status';

const HostIds = styled(EuiListGroupItem)`
margin-top: 0;
.euiListGroupItem__text {
padding: 0;
const EndpointDetailsContentStyled = styled.div`
dl dt {
max-width: 220px;
}
.policyLineText {
padding-right: 5px;
}
`;

const ColumnTitle = ({ children }: { children: React.ReactNode }) => {
return (
<EuiText size="s">
<h5>{children}</h5>
</EuiText>
);
};

export const EndpointDetailsContent = memo(
({
details,
Expand Down Expand Up @@ -70,83 +77,96 @@ export const EndpointDetailsContent = memo(
const detailsResults = useMemo(() => {
return [
{
title: i18n.translate('xpack.securitySolution.endpoint.details.os', {
defaultMessage: 'OS',
}),
description: <EuiText>{details.host.os.full}</EuiText>,
title: (
<ColumnTitle>
<FormattedMessage
id="xpack.securitySolution.endpoint.details.os"
defaultMessage="OS"
/>
</ColumnTitle>
),
description: <EuiText size="xs">{details.host.os.full}</EuiText>,
},
{
title: i18n.translate('xpack.securitySolution.endpoint.details.agentStatus', {
defaultMessage: 'Agent Status',
}),
title: (
<ColumnTitle>
<FormattedMessage
id="xpack.securitySolution.endpoint.details.agentStatus"
defaultMessage="Agent Status"
/>
</ColumnTitle>
),
description: <EndpointAgentStatus hostStatus={hostStatus} endpointMetadata={details} />,
},
{
title: i18n.translate('xpack.securitySolution.endpoint.details.lastSeen', {
defaultMessage: 'Last Seen',
}),
title: (
<ColumnTitle>
<FormattedMessage
id="xpack.securitySolution.endpoint.details.lastSeen"
defaultMessage="Last Seen"
/>
</ColumnTitle>
),
description: (
<EuiText>
{' '}
<FormattedDateAndTime date={new Date(details['@timestamp'])} />
<EuiText size="xs">
<FormattedDate value={details['@timestamp']} fieldName="" />
</EuiText>
),
},
{
title: i18n.translate('xpack.securitySolution.endpoint.details.policy', {
defaultMessage: 'Policy',
}),
title: (
<ColumnTitle>
<FormattedMessage
id="xpack.securitySolution.endpoint.details.policy"
defaultMessage="Policy"
/>
</ColumnTitle>
),
description: (
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={false}>
<EuiText>
<EndpointPolicyLink
policyId={details.Endpoint.policy.applied.id}
data-test-subj="policyDetailsValue"
>
{details.Endpoint.policy.applied.name}
</EndpointPolicyLink>
<EuiText size="xs" className={'eui-textBreakWord'}>
<EndpointPolicyLink
policyId={details.Endpoint.policy.applied.id}
data-test-subj="policyDetailsValue"
className={'policyLineText'}
>
{details.Endpoint.policy.applied.name}
</EndpointPolicyLink>
{details.Endpoint.policy.applied.endpoint_policy_version && (
<EuiText
color="subdued"
size="xs"
className={'eui-displayInlineBlock eui-textNoWrap policyLineText'}
data-test-subj="policyDetailsRevNo"
>
<FormattedMessage
id="xpack.securitySolution.endpoint.details.policy.revisionNumber"
defaultMessage="rev. {revNumber}"
values={{
revNumber: details.Endpoint.policy.applied.endpoint_policy_version,
}}
/>
</EuiText>
</EuiFlexItem>
<EuiFlexGroup gutterSize="s" alignItems="baseline">
{details.Endpoint.policy.applied.endpoint_policy_version && (
<EuiFlexItem grow={false}>
<EuiText
color="subdued"
size="xs"
style={{ whiteSpace: 'nowrap' }}
data-test-subj="policyDetailsRevNo"
>
<FormattedMessage
id="xpack.securitySolution.endpoint.details.policy.revisionNumber"
defaultMessage="rev. {revNumber}"
values={{
revNumber: details.Endpoint.policy.applied.endpoint_policy_version,
}}
/>
</EuiText>
</EuiFlexItem>
)}
{isPolicyOutOfDate(details.Endpoint.policy.applied, policyInfo) && (
<EuiFlexItem grow={false}>
<OutOfDate />
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlexGroup>
)}
{isPolicyOutOfDate(details.Endpoint.policy.applied, policyInfo) && <OutOfDate />}
</EuiText>
),
},
{
title: i18n.translate('xpack.securitySolution.endpoint.details.policyStatus', {
defaultMessage: 'Policy Status',
}),
title: (
<ColumnTitle>
<FormattedMessage
id="xpack.securitySolution.endpoint.details.policyStatus"
defaultMessage="Policy Status"
/>
</ColumnTitle>
),
description: (
<EuiHealth
data-test-subj={`policyStatusValue-${policyStatus}`}
color={POLICY_STATUS_TO_BADGE_COLOR[policyStatus] || 'default'}
>
<EuiLink onClick={policyStatusClickHandler} data-test-subj="policyStatusValue">
<EuiText size="m">
<EuiText size="xs">
<FormattedMessage
id="xpack.securitySolution.endpoint.details.policyStatusValue"
defaultMessage="{policyStatus, select, success {Success} warning {Warning} failure {Failed} other {Unknown}}"
Expand All @@ -158,37 +178,48 @@ export const EndpointDetailsContent = memo(
),
},
{
title: i18n.translate('xpack.securitySolution.endpoint.details.endpointVersion', {
defaultMessage: 'Endpoint Version',
}),
description: <EuiText>{details.agent.version}</EuiText>,
title: (
<ColumnTitle>
<FormattedMessage
id="xpack.securitySolution.endpoint.details.endpointVersion"
defaultMessage="Endpoint Version"
/>
</ColumnTitle>
),
description: <EuiText size="xs">{details.agent.version}</EuiText>,
},
{
title: i18n.translate('xpack.securitySolution.endpoint.details.ipAddress', {
defaultMessage: 'IP Address',
}),
title: (
<ColumnTitle>
<FormattedMessage
id="xpack.securitySolution.endpoint.details.ipAddress"
defaultMessage="IP Address"
/>
</ColumnTitle>
),
description: (
<EuiListGroup flush>
<EuiText size="xs">
{details.host.ip.map((ip: string, index: number) => (
<HostIds key={index} label={ip} />
))}
</EuiText>
</EuiListGroup>
<EuiFlexGroup direction="column" gutterSize="s">
{details.host.ip.map((ip: string, index: number) => (
<EuiFlexItem key={index}>
<EuiText size="xs">{ip}</EuiText>
</EuiFlexItem>
))}
</EuiFlexGroup>
),
},
];
}, [details, hostStatus, policyStatus, policyStatusClickHandler, policyInfo]);

return (
<>
<EuiSpacer size="l" />
<EndpointDetailsContentStyled>
<EuiSpacer size="s" />
<EuiDescriptionList
compressed={true}
type="column"
listItems={detailsResults}
data-test-subj="endpointDetailsList"
/>
</>
</EndpointDetailsContentStyled>
);
}
);
Expand Down