Skip to content

Commit 879b1a4

Browse files
paul-tavarespaul-tavares
authored
[Security Solution][Endpoint] Fix UI inconsistency between isolation forms and remove display of Pending isolation statuses (#106118)
* comment out UI display of pending isolation statuses and associated tests * Change un-isolate form to use `EuiForm` and `EuiFormRow` * Fix: move component `displayName` to file that has that component's src
1 parent fc49ae1 commit 879b1a4

File tree

7 files changed

+151
-129
lines changed

7 files changed

+151
-129
lines changed

‎x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ describe('when using the EndpointHostIsolationStatus component', () => {
4343
expect(getByTestId('test').textContent).toBe('Isolated');
4444
});
4545

46-
it.each([
46+
// FIXME: un-skip when we bring back the pending isolation statuses
47+
it.skip.each([
4748
['Isolating', { pendingIsolate: 2 }],
4849
['Releasing', { pendingUnIsolate: 2 }],
4950
['4 actions pending', { isIsolated: true, pendingUnIsolate: 2, pendingIsolate: 2 }],

‎x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/endpoint_host_isolation_status.tsx‎

Lines changed: 100 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
*/
77

88
import React, { memo, useMemo } from 'react';
9-
import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiTextColor, EuiToolTip } from '@elastic/eui';
9+
import { EuiBadge } from '@elastic/eui';
1010
import { FormattedMessage } from '@kbn/i18n/react';
11-
import { useTestIdGenerator } from '../../../../management/components/hooks/use_test_id_generator';
11+
// import { useTestIdGenerator } from '../../../../management/components/hooks/use_test_id_generator';
1212

1313
export interface EndpointHostIsolationStatusProps {
1414
isIsolated: boolean;
@@ -25,94 +25,114 @@ export interface EndpointHostIsolationStatusProps {
2525
* (`null` is returned)
2626
*/
2727
export const EndpointHostIsolationStatus = memo<EndpointHostIsolationStatusProps>(
28-
({ isIsolated, pendingIsolate = 0, pendingUnIsolate = 0, 'data-test-subj': dataTestSubj }) => {
29-
const getTestId = useTestIdGenerator(dataTestSubj);
28+
({
29+
isIsolated,
30+
/* pendingIsolate = 0, pendingUnIsolate = 0,*/ 'data-test-subj': dataTestSubj,
31+
}) => {
32+
// const getTestId = useTestIdGenerator(dataTestSubj);
3033

3134
return useMemo(() => {
3235
// If nothing is pending and host is not currently isolated, then render nothing
33-
if (!isIsolated && !pendingIsolate && !pendingUnIsolate) {
36+
if (!isIsolated) {
3437
return null;
3538
}
39+
// if (!isIsolated && !pendingIsolate && !pendingUnIsolate) {
40+
// return null;
41+
// }
3642

37-
// If nothing is pending, but host is isolated, then show isolation badge
38-
if (!pendingIsolate && !pendingUnIsolate) {
39-
return (
40-
<EuiBadge color="hollow" data-test-subj={dataTestSubj}>
41-
<FormattedMessage
42-
id="xpack.securitySolution.endpoint.hostIsolationStatus.isolated"
43-
defaultMessage="Isolated"
44-
/>
45-
</EuiBadge>
46-
);
47-
}
48-
49-
// If there are multiple types of pending isolation actions, then show count of actions with tooltip that displays breakdown
50-
if (pendingIsolate && pendingUnIsolate) {
51-
return (
52-
<EuiBadge color="hollow" data-test-subj={dataTestSubj}>
53-
<EuiToolTip
54-
display="block"
55-
anchorClassName="eui-textTruncate"
56-
content={
57-
<div data-test-subj={getTestId('tooltipContent')}>
58-
<div>
59-
<FormattedMessage
60-
id="xpack.securitySolution.endpoint.hostIsolationStatus.tooltipPendingActions"
61-
defaultMessage="Pending actions:"
62-
/>
63-
</div>
64-
<EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
65-
<EuiFlexItem grow>
66-
<FormattedMessage
67-
id="xpack.securitySolution.endpoint.hostIsolationStatus.tooltipPendingIsolate"
68-
defaultMessage="Isolate"
69-
/>
70-
</EuiFlexItem>
71-
<EuiFlexItem grow={false}>{pendingIsolate}</EuiFlexItem>
72-
</EuiFlexGroup>
73-
<EuiFlexGroup gutterSize="none">
74-
<EuiFlexItem grow>
75-
<FormattedMessage
76-
id="xpack.securitySolution.endpoint.hostIsolationStatus.tooltipPendingUnIsolate"
77-
defaultMessage="Release"
78-
/>
79-
</EuiFlexItem>
80-
<EuiFlexItem grow={false}>{pendingUnIsolate}</EuiFlexItem>
81-
</EuiFlexGroup>
82-
</div>
83-
}
84-
>
85-
<EuiTextColor color="subdued" data-test-subj={getTestId('pending')}>
86-
<FormattedMessage
87-
id="xpack.securitySolution.endpoint.hostIsolationStatus.multiplePendingActions"
88-
defaultMessage="{count} actions pending"
89-
values={{ count: pendingIsolate + pendingUnIsolate }}
90-
/>
91-
</EuiTextColor>
92-
</EuiToolTip>
93-
</EuiBadge>
94-
);
95-
}
96-
97-
// Show 'pending [un]isolate' depending on what's pending
9843
return (
9944
<EuiBadge color="hollow" data-test-subj={dataTestSubj}>
100-
<EuiTextColor color="subdued" data-test-subj={getTestId('pending')}>
101-
{pendingIsolate ? (
102-
<FormattedMessage
103-
id="xpack.securitySolution.endpoint.hostIsolationStatus.isIsolating"
104-
defaultMessage="Isolating"
105-
/>
106-
) : (
107-
<FormattedMessage
108-
id="xpack.securitySolution.endpoint.hostIsolationStatus.isUnIsolating"
109-
defaultMessage="Releasing"
110-
/>
111-
)}
112-
</EuiTextColor>
45+
<FormattedMessage
46+
id="xpack.securitySolution.endpoint.hostIsolationStatus.isolated"
47+
defaultMessage="Isolated"
48+
/>
11349
</EuiBadge>
11450
);
115-
}, [dataTestSubj, getTestId, isIsolated, pendingIsolate, pendingUnIsolate]);
51+
52+
// If nothing is pending and host is not currently isolated, then render nothing
53+
// if (!isIsolated && !pendingIsolate && !pendingUnIsolate) {
54+
// return null;
55+
// }
56+
//
57+
// // If nothing is pending, but host is isolated, then show isolation badge
58+
// if (!pendingIsolate && !pendingUnIsolate) {
59+
// return (
60+
// <EuiBadge color="hollow" data-test-subj={dataTestSubj}>
61+
// <FormattedMessage
62+
// id="xpack.securitySolution.endpoint.hostIsolationStatus.isolated"
63+
// defaultMessage="Isolated"
64+
// />
65+
// </EuiBadge>
66+
// );
67+
// }
68+
//
69+
// // If there are multiple types of pending isolation actions, then show count of actions with tooltip that displays breakdown
70+
// if (pendingIsolate && pendingUnIsolate) {
71+
// return (
72+
// <EuiBadge color="hollow" data-test-subj={dataTestSubj}>
73+
// <EuiToolTip
74+
// display="block"
75+
// anchorClassName="eui-textTruncate"
76+
// content={
77+
// <div data-test-subj={getTestId('tooltipContent')}>
78+
// <div>
79+
// <FormattedMessage
80+
// id="xpack.securitySolution.endpoint.hostIsolationStatus.tooltipPendingActions"
81+
// defaultMessage="Pending actions:"
82+
// />
83+
// </div>
84+
// <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
85+
// <EuiFlexItem grow>
86+
// <FormattedMessage
87+
// id="xpack.securitySolution.endpoint.hostIsolationStatus.tooltipPendingIsolate"
88+
// defaultMessage="Isolate"
89+
// />
90+
// </EuiFlexItem>
91+
// <EuiFlexItem grow={false}>{pendingIsolate}</EuiFlexItem>
92+
// </EuiFlexGroup>
93+
// <EuiFlexGroup gutterSize="none">
94+
// <EuiFlexItem grow>
95+
// <FormattedMessage
96+
// id="xpack.securitySolution.endpoint.hostIsolationStatus.tooltipPendingUnIsolate"
97+
// defaultMessage="Release"
98+
// />
99+
// </EuiFlexItem>
100+
// <EuiFlexItem grow={false}>{pendingUnIsolate}</EuiFlexItem>
101+
// </EuiFlexGroup>
102+
// </div>
103+
// }
104+
// >
105+
// <EuiTextColor color="subdued" data-test-subj={getTestId('pending')}>
106+
// <FormattedMessage
107+
// id="xpack.securitySolution.endpoint.hostIsolationStatus.multiplePendingActions"
108+
// defaultMessage="{count} actions pending"
109+
// values={{ count: pendingIsolate + pendingUnIsolate }}
110+
// />
111+
// </EuiTextColor>
112+
// </EuiToolTip>
113+
// </EuiBadge>
114+
// );
115+
// }
116+
//
117+
// // Show 'pending [un]isolate' depending on what's pending
118+
// return (
119+
// <EuiBadge color="hollow" data-test-subj={dataTestSubj}>
120+
// <EuiTextColor color="subdued" data-test-subj={getTestId('pending')}>
121+
// {pendingIsolate ? (
122+
// <FormattedMessage
123+
// id="xpack.securitySolution.endpoint.hostIsolationStatus.isIsolating"
124+
// defaultMessage="Isolating"
125+
// />
126+
// ) : (
127+
// <FormattedMessage
128+
// id="xpack.securitySolution.endpoint.hostIsolationStatus.isUnIsolating"
129+
// defaultMessage="Releasing"
130+
// />
131+
// )}
132+
// </EuiTextColor>
133+
// </EuiBadge>
134+
// );
135+
}, [dataTestSubj, isIsolated /* , getTestId , pendingIsolate, pendingUnIsolate*/]);
116136
}
117137
);
118138

‎x-pack/plugins/security_solution/public/common/components/endpoint/host_isolation/unisolate_form.tsx‎

Lines changed: 43 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import {
1111
EuiButtonEmpty,
1212
EuiFlexGroup,
1313
EuiFlexItem,
14-
EuiSpacer,
14+
EuiForm,
15+
EuiFormRow,
1516
EuiText,
1617
EuiTextArea,
17-
EuiTitle,
1818
} from '@elastic/eui';
1919
import { FormattedMessage } from '@kbn/i18n/react';
2020
import { CANCEL, COMMENT, COMMENT_PLACEHOLDER, CONFIRM, UNISOLATE, ISOLATED } from './translations';
@@ -30,50 +30,49 @@ export const EndpointUnisolateForm = memo<EndpointIsolatedFormProps>(
3030
);
3131

3232
return (
33-
<>
34-
<EuiText size="s">
35-
<p>
36-
<FormattedMessage
37-
id="xpack.securitySolution.endpoint.hostIsolation.unIsolateThisHost"
38-
defaultMessage="{hostName} is currently {isolated}. Are you sure you want to {unisolate} this host?"
39-
values={{
40-
hostName: <b>{hostName}</b>,
41-
isolated: <b>{ISOLATED}</b>,
42-
unisolate: <b>{UNISOLATE}</b>,
43-
}}
44-
/>{' '}
45-
{messageAppend}
46-
</p>
47-
</EuiText>
33+
<EuiForm>
34+
<EuiFormRow fullWidth>
35+
<EuiText size="s">
36+
<p>
37+
<FormattedMessage
38+
id="xpack.securitySolution.endpoint.hostIsolation.unIsolateThisHost"
39+
defaultMessage="{hostName} is currently {isolated}. Are you sure you want to {unisolate} this host?"
40+
values={{
41+
hostName: <b>{hostName}</b>,
42+
isolated: <b>{ISOLATED}</b>,
43+
unisolate: <b>{UNISOLATE}</b>,
44+
}}
45+
/>{' '}
46+
{messageAppend}
47+
</p>
48+
</EuiText>
49+
</EuiFormRow>
4850

49-
<EuiSpacer size="m" />
51+
<EuiFormRow label={COMMENT} fullWidth>
52+
<EuiTextArea
53+
data-test-subj="host_isolation_comment"
54+
fullWidth
55+
placeholder={COMMENT_PLACEHOLDER}
56+
value={comment}
57+
onChange={handleCommentChange}
58+
/>
59+
</EuiFormRow>
5060

51-
<EuiTitle size="xs">
52-
<h4>{COMMENT}</h4>
53-
</EuiTitle>
54-
<EuiTextArea
55-
data-test-subj="host_isolation_comment"
56-
fullWidth
57-
placeholder={COMMENT_PLACEHOLDER}
58-
value={comment}
59-
onChange={handleCommentChange}
60-
/>
61-
62-
<EuiSpacer size="m" />
63-
64-
<EuiFlexGroup justifyContent="flexEnd">
65-
<EuiFlexItem grow={false}>
66-
<EuiButtonEmpty onClick={onCancel} disabled={isLoading}>
67-
{CANCEL}
68-
</EuiButtonEmpty>
69-
</EuiFlexItem>
70-
<EuiFlexItem grow={false}>
71-
<EuiButton fill onClick={onConfirm} disabled={isLoading} isLoading={isLoading}>
72-
{CONFIRM}
73-
</EuiButton>
74-
</EuiFlexItem>
75-
</EuiFlexGroup>
76-
</>
61+
<EuiFormRow fullWidth>
62+
<EuiFlexGroup justifyContent="flexEnd">
63+
<EuiFlexItem grow={false}>
64+
<EuiButtonEmpty onClick={onCancel} disabled={isLoading}>
65+
{CANCEL}
66+
</EuiButtonEmpty>
67+
</EuiFlexItem>
68+
<EuiFlexItem grow={false}>
69+
<EuiButton fill onClick={onConfirm} disabled={isLoading} isLoading={isLoading}>
70+
{CONFIRM}
71+
</EuiButton>
72+
</EuiFlexItem>
73+
</EuiFlexGroup>
74+
</EuiFormRow>
75+
</EuiForm>
7776
);
7877
}
7978
);

‎x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/context_menu_item_nav_by_rotuer.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,5 @@ export const ContextMenuItemNavByRouter = memo<ContextMenuItemNavByRouterProps>(
3434
);
3535
}
3636
);
37+
38+
ContextMenuItemNavByRouter.displayName = 'EuiContextMenuItemNavByRouter';

‎x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/endpoint_agent_status.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@ describe('When using the EndpointAgentStatus component', () => {
5757
expect(renderResult.getByTestId('rowHostStatus').textContent).toEqual(expectedLabel);
5858
});
5959

60-
describe('and host is isolated or pending isolation', () => {
60+
// FIXME: un-skip test once Islation pending statuses are supported
61+
describe.skip('and host is isolated or pending isolation', () => {
6162
beforeEach(async () => {
6263
// Ensure pending action api sets pending action for the test endpoint metadata
6364
const pendingActionsResponseProvider = httpMocks.responseProvider.pendingActions.getMockImplementation();

‎x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/table_row_actions.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,5 +62,3 @@ export const TableRowActions = memo<TableRowActionProps>(({ endpointMetadata })
6262
);
6363
});
6464
TableRowActions.displayName = 'EndpointTableRowActions';
65-
66-
ContextMenuItemNavByRouter.displayName = 'EuiContextMenuItemNavByRouter';

‎x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,8 @@ describe('EndpointOverview Component', () => {
7171
expect(findData.at(3).text()).toEqual('HealthyIsolated');
7272
});
7373

74-
test.each([
74+
// FIXME: un-skip once pending isolation status are supported again
75+
test.skip.each([
7576
['isolate', 'Isolating'],
7677
['unisolate', 'Releasing'],
7778
])('it shows pending %s status', (action, expectedLabel) => {

0 commit comments

Comments
 (0)