Skip to content

Commit

Permalink
[Security Solution] Enhancement endpoint flyout UI fixes (elastic#117987
Browse files Browse the repository at this point in the history 
)

* initial UI changes for font size and deprecated dependency

* remove euitext wrapper

* Remove unused dependency

* Remove import

* Add text break word

* inline policy, version and icon

* Allign icon in the out_of_date component

* Remove unncessary wrapper

* Replace style attributes with className

Co-authored-by: Kibana Machine <[email protected]>
  • Loading branch information
@academo @kibanamachine @TinLe
2 people authored and TinLe committed Nov 20, 2021
1 parent 16b613c commit 22edf69
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 86 deletions.
10 changes: 8 additions & 2 deletions .../security_solution/public/management/pages/endpoint_hosts/view/components/out_of_date.tsx
View file
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
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
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
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

0 comments on commit 22edf69

Please sign in to comment.