-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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.
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
[Security Solution] Updates the text in the Actions log and Status command to match UX #135935
Changes from 8 commits
0a2773a
ee6c089
681e121
8244a73
9b26a65
013cdd0
84a9842
788df06
2bd50b7
6930af9
c39f25b
2fef0af
107effc
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0; you may not use this file except in compliance with the Elastic License | ||
* 2.0. | ||
*/ | ||
|
||
import { i18n } from '@kbn/i18n'; | ||
import { HostStatus } from '../../../../common/endpoint/types'; | ||
|
||
export const agentStatusText = (hostStatus: HostStatus) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Since there is no JSX code here this file can be a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Name suggestion: |
||
return i18n.translate('xpack.securitySolution.endpoint.list.hostStatusValue', { | ||
defaultMessage: | ||
'{hostStatus, select, healthy {Healthy} unhealthy {Unhealthy} updating {Updating} offline {Offline} inactive {Inactive} unenrolled {Unenrolled} other {Unhealthy}}', | ||
values: { hostStatus }, | ||
}); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,7 +6,7 @@ | |
*/ | ||
|
||
import React, { memo, useMemo } from 'react'; | ||
import { EuiDescriptionList, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui'; | ||
import { EuiDescriptionList, EuiPanel, EuiSpacer } from '@elastic/eui'; | ||
import { i18n } from '@kbn/i18n'; | ||
import { ConsoleCodeBlock } from './console_code_block'; | ||
import { getArgumentsForCommand } from '../service/parsed_command_input'; | ||
|
@@ -20,11 +20,12 @@ const additionalProps = { | |
|
||
export const CommandInputUsage = memo<Pick<CommandUsageProps, 'commandDef'>>(({ commandDef }) => { | ||
const usageHelp = useMemo(() => { | ||
return getArgumentsForCommand(commandDef).map((usage) => { | ||
return getArgumentsForCommand(commandDef).map((usage, index) => { | ||
return ( | ||
<EuiText size="s"> | ||
<> | ||
{index > 0 && <EuiSpacer size="xs" />} | ||
<ConsoleCodeBlock>{`${commandDef.name} ${usage}`}</ConsoleCodeBlock> | ||
</EuiText> | ||
</> | ||
); | ||
}); | ||
}, [commandDef]); | ||
|
@@ -129,7 +130,7 @@ export const CommandUsage = memo<CommandUsageProps>(({ commandDef }) => { | |
}, [commandDef.args, hasArgs]); | ||
|
||
const parametersDescriptionList = (title: string, parameters: CommandDetails) => { | ||
const description = parameters.map((item) => ( | ||
const description = parameters.map((item, index) => ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
<div> | ||
<ConsoleCodeBlock bold inline> | ||
{item.title} | ||
|
@@ -139,7 +140,7 @@ export const CommandUsage = memo<CommandUsageProps>(({ commandDef }) => { | |
)); | ||
return ( | ||
<> | ||
<EuiSpacer /> | ||
<EuiSpacer size="s" /> | ||
{commandDef.args && ( | ||
<EuiDescriptionList | ||
compressed | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,8 +6,7 @@ | |
*/ | ||
|
||
import React, { memo, useEffect, useMemo } from 'react'; | ||
import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; | ||
import { FormattedMessage } from '@kbn/i18n-react'; | ||
import { EuiDescriptionList } from '@elastic/eui'; | ||
import { i18n } from '@kbn/i18n'; | ||
import type { HttpFetchError } from '@kbn/core/public'; | ||
import { v4 as uuidV4 } from 'uuid'; | ||
|
@@ -16,11 +15,12 @@ import type { EndpointCommandDefinitionMeta } from './types'; | |
import { EndpointHostIsolationStatusProps } from '../../../common/components/endpoint/host_isolation'; | ||
import { useGetEndpointPendingActionsSummary } from '../../hooks/endpoint/use_get_endpoint_pending_actions_summary'; | ||
import { FormattedDate } from '../../../common/components/formatted_date'; | ||
import { EndpointAppliedPolicyStatus } from '../endpoint_applied_policy_status'; | ||
import { EndpointAgentAndIsolationStatus } from '../endpoint_agent_and_isolation_status'; | ||
import { useGetEndpointDetails } from '../../hooks'; | ||
import type { CommandExecutionComponentProps } from '../console/types'; | ||
import { FormattedError } from '../formatted_error'; | ||
import { ConsoleCodeBlock } from '../console/components/console_code_block'; | ||
import { POLICY_STATUS_TO_TEXT } from '../../pages/endpoint_hosts/view/host_constants'; | ||
import { agentStatusText } from '../../../common/components/endpoint/agent_status_text'; | ||
|
||
export const EndpointStatusActionResult = memo< | ||
CommandExecutionComponentProps< | ||
|
@@ -50,7 +50,7 @@ export const EndpointStatusActionResult = memo< | |
|
||
const { data: fetchedPendingActionsSummary } = useGetEndpointPendingActionsSummary([endpointId], { | ||
enabled: isPending, | ||
queryKey, | ||
queryKey: [queryKey, endpointId], | ||
}); | ||
|
||
const pendingIsolationActions = useMemo< | ||
|
@@ -127,50 +127,83 @@ export const EndpointStatusActionResult = memo< | |
return <ResultComponent showAs="pending" />; | ||
} | ||
|
||
return ( | ||
<ResultComponent showTitle={false}> | ||
<EuiFlexGroup wrap={false} responsive={false}> | ||
<EuiFlexItem grow={false}> | ||
<EuiText size="s"> | ||
<FormattedMessage | ||
id="xpack.securitySolution.endpointResponseActions.status.agentStatus" | ||
defaultMessage="Agent status" | ||
/> | ||
</EuiText> | ||
<EndpointAgentAndIsolationStatus | ||
status={endpointDetails.host_status} | ||
isIsolated={Boolean(endpointDetails.metadata.Endpoint.state?.isolation)} | ||
{...pendingIsolationActions} | ||
/> | ||
</EuiFlexItem> | ||
<EuiFlexItem grow={false}> | ||
<EuiText size="s"> | ||
<FormattedMessage | ||
id="xpack.securitySolution.endpointResponseActions.status.version" | ||
defaultMessage="Version" | ||
/> | ||
</EuiText> | ||
<EuiText>{endpointDetails.metadata.agent.version}</EuiText> | ||
</EuiFlexItem> | ||
<EuiFlexItem grow={false}> | ||
<EuiText size="s"> | ||
<FormattedMessage | ||
id="xpack.securitySolution.endpointResponseActions.status.policyStatus" | ||
defaultMessage="Policy status" | ||
/> | ||
</EuiText> | ||
<EndpointAppliedPolicyStatus | ||
policyApplied={endpointDetails.metadata.Endpoint.policy.applied} | ||
/> | ||
</EuiFlexItem> | ||
<EuiFlexItem> | ||
<EuiText size="s"> | ||
<FormattedMessage | ||
id="xpack.securitySolution.endpointResponseActions.status.lastActive" | ||
defaultMessage="Last active" | ||
/> | ||
</EuiText> | ||
<EuiText> | ||
const statusDescriptionList = () => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would suggest you move this inside a |
||
const agentStatus = () => { | ||
let isolateStatus = ''; | ||
|
||
if (pendingIsolationActions.pendingIsolate > 0) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's not hold up on this PR, but this logic here for actions no longer makes sense now that we introduced more actions. Not sure that (FYI: I also found that our component that normally show the isolation status/pending actions is not showing all pending actions in the tooltip - opening issue now) |
||
isolateStatus = i18n.translate( | ||
'xpack.securitySolution.endpointResponseActions.status.isolating', | ||
{ | ||
defaultMessage: 'Isolating', | ||
} | ||
); | ||
} else if (pendingIsolationActions.pendingUnIsolate > 0) { | ||
isolateStatus = i18n.translate( | ||
'xpack.securitySolution.endpointResponseActions.status.releasing', | ||
{ | ||
defaultMessage: 'Releasing', | ||
} | ||
); | ||
} else if (endpointDetails.metadata.Endpoint.state?.isolation) { | ||
isolateStatus = i18n.translate( | ||
'xpack.securitySolution.endpointResponseActions.status.isolated', | ||
{ | ||
defaultMessage: 'Isolated', | ||
} | ||
); | ||
} | ||
|
||
return `${agentStatusText(endpointDetails.host_status)}${ | ||
isolateStatus.length > 0 ? ` - ${isolateStatus}` : '' | ||
}`; | ||
}; | ||
|
||
const statusData = [ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This has also a dynamic result, move it in a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @dasansol92 if I wrap the containing function into the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ohh! You are totally right! Github diff hided me the |
||
{ | ||
title: ( | ||
<ConsoleCodeBlock> | ||
{i18n.translate('xpack.securitySolution.endpointResponseActions.status.agentStatus', { | ||
defaultMessage: 'Agent status', | ||
})} | ||
</ConsoleCodeBlock> | ||
), | ||
description: <ConsoleCodeBlock>{agentStatus()}</ConsoleCodeBlock>, | ||
}, | ||
{ | ||
title: ( | ||
<ConsoleCodeBlock> | ||
{i18n.translate('xpack.securitySolution.endpointResponseActions.status.version', { | ||
defaultMessage: 'Version', | ||
})} | ||
</ConsoleCodeBlock> | ||
), | ||
description: endpointDetails.metadata.agent.version, | ||
}, | ||
{ | ||
title: ( | ||
<ConsoleCodeBlock> | ||
{i18n.translate('xpack.securitySolution.endpointResponseActions.status.policyStatus', { | ||
defaultMessage: 'Policy status', | ||
})} | ||
</ConsoleCodeBlock> | ||
), | ||
description: ( | ||
<ConsoleCodeBlock> | ||
{POLICY_STATUS_TO_TEXT[endpointDetails.metadata.Endpoint.policy.applied.status]} | ||
</ConsoleCodeBlock> | ||
), | ||
}, | ||
{ | ||
title: ( | ||
<ConsoleCodeBlock> | ||
{i18n.translate('xpack.securitySolution.endpointResponseActions.status.lastActive', { | ||
defaultMessage: 'Last active', | ||
})} | ||
</ConsoleCodeBlock> | ||
), | ||
description: ( | ||
<ConsoleCodeBlock> | ||
<FormattedDate | ||
fieldName={i18n.translate( | ||
'xpack.securitySolution.endpointResponseActions.status.lastActive', | ||
|
@@ -179,10 +212,21 @@ export const EndpointStatusActionResult = memo< | |
value={endpointDetails.metadata['@timestamp']} | ||
className="eui-textTruncate" | ||
/> | ||
</EuiText> | ||
</EuiFlexItem> | ||
</EuiFlexGroup> | ||
</ResultComponent> | ||
); | ||
</ConsoleCodeBlock> | ||
), | ||
}, | ||
]; | ||
return ( | ||
<EuiDescriptionList | ||
compressed | ||
type="column" | ||
className="descriptionList-20_80" | ||
listItems={statusData} | ||
data-test-subj={'agent-status-console-output'} | ||
/> | ||
); | ||
}; | ||
|
||
return <ResultComponent showTitle={false}>{statusDescriptionList()}</ResultComponent>; | ||
}); | ||
EndpointStatusActionResult.displayName = 'EndpointStatusActionResult'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.