[Security Solution] Updates the text in the Actions log and Status co…

…mmand to match UX (#135935)
elastic · Jul 11, 2022 · c7f5a20 · c7f5a20
1 parent 06d8522
commit c7f5a20
Show file tree

Hide file tree

Showing 10 changed files with 193 additions and 144 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/agent_status.tsx b/x-pack/plugins/security_solution/public/common/components/endpoint/agent_status.tsx
@@ -7,9 +7,9 @@
 
 import React from 'react';
 import { EuiBadge } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
 import type { HostStatus } from '../../../../common/endpoint/types';
 import { HOST_STATUS_TO_BADGE_COLOR } from '../../../management/pages/endpoint_hosts/view/host_constants';
+import { getAgentStatusText } from './agent_status_text';
 
 export const AgentStatus = React.memo(({ hostStatus }: { hostStatus: HostStatus }) => {
   return (
@@ -18,11 +18,7 @@ export const AgentStatus = React.memo(({ hostStatus }: { hostStatus: HostStatus
       data-test-subj="rowHostStatus"
       className="eui-textTruncate"
     >
-      <FormattedMessage
-        id="xpack.securitySolution.endpoint.list.hostStatusValue"
-        defaultMessage="{hostStatus, select, healthy {Healthy} unhealthy {Unhealthy} updating {Updating} offline {Offline} inactive {Inactive} unenrolled {Unenrolled} other {Unhealthy}}"
-        values={{ hostStatus }}
-      />
+      {getAgentStatusText(hostStatus)}
     </EuiBadge>
   );
 });

diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/agent_status_text.ts b/x-pack/plugins/security_solution/public/common/components/endpoint/agent_status_text.ts
@@ -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 type { HostStatus } from '../../../../common/endpoint/types';
+
+export const getAgentStatusText = (hostStatus: HostStatus) => {
+  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 },
+  });
+};
diff --git a/...lugins/security_solution/public/management/components/console/components/bad_argument.tsx b/...lugins/security_solution/public/management/components/console/components/bad_argument.tsx
@@ -54,6 +54,7 @@ export const BadArgument = memo<CommandExecutionComponentProps<{}, { errorMessag
           </div>
           <div>
             <ConsoleCodeBlock>
+              <EuiSpacer size="m" />
               <FormattedMessage
                 id="xpack.securitySolution.console.badArgument.helpMessage"
                 defaultMessage="Enter {helpCmd} for further assistance."

diff --git a/...ugins/security_solution/public/management/components/console/components/command_usage.tsx b/...ugins/security_solution/public/management/components/console/components/command_usage.tsx
@@ -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]);
@@ -139,7 +140,7 @@ export const CommandUsage = memo<CommandUsageProps>(({ commandDef }) => {
     ));
     return (
       <>
-        <EuiSpacer />
+        <EuiSpacer size="s" />
         {commandDef.args && (
           <EuiDescriptionList
             compressed

diff --git a/..._solution/public/management/components/console/components/unsupported_message_callout.tsx b/..._solution/public/management/components/console/components/unsupported_message_callout.tsx
@@ -7,7 +7,7 @@
 
 import type { ReactNode } from 'react';
 import React, { memo } from 'react';
-import { EuiText, EuiTextColor } from '@elastic/eui';
+import { EuiText, EuiTextColor, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 const UNSUPPORTED_LABEL = i18n.translate(
@@ -28,9 +28,8 @@ export const UnsupportedMessageCallout = memo<UnsupportedMessageCalloutProps>(
         <EuiText size="s">
           <EuiTextColor color="danger">{header}</EuiTextColor>
         </EuiText>
-        <EuiText size="s">
-          <EuiTextColor color="subdued">{children}</EuiTextColor>
-        </EuiText>
+        <EuiSpacer size="s" />
+        {children}
       </div>
     );
   }

diff --git a/x-pack/plugins/security_solution/public/management/components/console/console.tsx b/x-pack/plugins/security_solution/public/management/components/console/console.tsx
@@ -85,10 +85,12 @@ const ConsoleWindow = styled.div`
     &.euiDescriptionList {
       > .euiDescriptionList__title {
         width: 20%;
+        margin-top: ${({ theme: { eui } }) => eui.euiSizeS};
       }
 
       > .euiDescriptionList__description {
         width: 80%;
+        margin-top: ${({ theme: { eui } }) => eui.euiSizeS};
       }
     }
   }

diff --git a/...ic/management/components/endpoint_responder/endpoint_response_actions_console_commands.ts b/...ic/management/components/endpoint_responder/endpoint_response_actions_console_commands.ts
@@ -74,7 +74,7 @@ export const getEndpointResponseActionsConsoleCommands = (
     {
       name: 'kill-process',
       about: i18n.translate('xpack.securitySolution.endpointConsoleCommands.killProcess.about', {
-        defaultMessage: 'Kill a running process',
+        defaultMessage: 'Kill a running process. Accepts either a PID or an entity id.',
       }),
       RenderComponent: KillProcessActionResult,
       meta: {
@@ -97,8 +97,7 @@ export const getEndpointResponseActionsConsoleCommands = (
           allowMultiples: false,
           exclusiveOr: true,
           about: i18n.translate('xpack.securitySolution.endpointConsoleCommands.pid.arg.comment', {
-            defaultMessage:
-              'A PID representing the process to kill.  You can enter a pid or an entity id, but not both.',
+            defaultMessage: 'A PID representing the process to kill',
           }),
           validate: emptyArgumentValidator,
         },
@@ -109,8 +108,7 @@ export const getEndpointResponseActionsConsoleCommands = (
           about: i18n.translate(
             'xpack.securitySolution.endpointConsoleCommands.entityId.arg.comment',
             {
-              defaultMessage:
-                'An entity id representing the process to kill.  You can enter a pid or an entity id, but not both.',
+              defaultMessage: 'An entity id representing the process to kill',
             }
           ),
           validate: emptyArgumentValidator,
@@ -120,7 +118,7 @@ export const getEndpointResponseActionsConsoleCommands = (
     {
       name: 'suspend-process',
       about: i18n.translate('xpack.securitySolution.endpointConsoleCommands.suspendProcess.about', {
-        defaultMessage: 'Suspend a running process',
+        defaultMessage: 'Suspend a running process. Accepts either a PID or an entity id.',
       }),
       RenderComponent: SuspendProcessActionResult,
       meta: {
@@ -145,8 +143,7 @@ export const getEndpointResponseActionsConsoleCommands = (
           about: i18n.translate(
             'xpack.securitySolution.endpointConsoleCommands.suspendProcess.pid.arg.comment',
             {
-              defaultMessage:
-                'A PID representing the process to suspend.  You can enter a pid or an entity id, but not both.',
+              defaultMessage: 'A PID representing the process to suspend',
             }
           ),
           validate: emptyArgumentValidator,
@@ -158,8 +155,7 @@ export const getEndpointResponseActionsConsoleCommands = (
           about: i18n.translate(
             'xpack.securitySolution.endpointConsoleCommands.suspendProcess.entityId.arg.comment',
             {
-              defaultMessage:
-                'An entity id representing the process to suspend.  You can enter a pid or an entity id, but not both.',
+              defaultMessage: 'An entity id representing the process to suspend',
             }
           ),
           validate: emptyArgumentValidator,

diff --git a/...ugins/security_solution/public/management/components/endpoint_responder/status_action.tsx b/...ugins/security_solution/public/management/components/endpoint_responder/status_action.tsx
@@ -5,9 +5,8 @@
  * 2.0.
  */
 
-import React, { memo, useEffect, useMemo } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
+import React, { memo, useEffect, useMemo, useCallback } from '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 type { 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 { getAgentStatusText } 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<
@@ -115,6 +115,114 @@ export const EndpointStatusActionResult = memo<
     }
   }, [fetchedPendingActionsSummary, setStore]);
 
+  const getStatusDescriptionList = useCallback(() => {
+    if (!endpointDetails) {
+      return undefined;
+    }
+
+    const agentStatus = () => {
+      let isolateStatus = '';
+
+      if (pendingIsolationActions.pendingIsolate > 0) {
+        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 `${getAgentStatusText(endpointDetails.host_status)}${
+        isolateStatus.length > 0 ? ` - ${isolateStatus}` : ''
+      }`;
+    };
+
+    const statusData = [
+      {
+        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',
+                { defaultMessage: 'Last active' }
+              )}
+              value={endpointDetails.metadata['@timestamp']}
+              className="eui-textTruncate"
+            />
+          </ConsoleCodeBlock>
+        ),
+      },
+    ];
+    return (
+      <EuiDescriptionList
+        compressed
+        type="column"
+        className="descriptionList-20_80"
+        listItems={statusData}
+        data-test-subj={'agent-status-console-output'}
+      />
+    );
+  }, [
+    pendingIsolationActions.pendingIsolate,
+    pendingIsolationActions.pendingUnIsolate,
+    endpointDetails,
+  ]);
+
   if (detailsFetchError) {
     return (
       <ResultComponent showAs="failure">
@@ -127,62 +235,6 @@ 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>
-            <FormattedDate
-              fieldName={i18n.translate(
-                'xpack.securitySolution.endpointResponseActions.status.lastActive',
-                { defaultMessage: 'Last active' }
-              )}
-              value={endpointDetails.metadata['@timestamp']}
-              className="eui-textTruncate"
-            />
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </ResultComponent>
-  );
+  return <ResultComponent showTitle={false}>{getStatusDescriptionList()}</ResultComponent>;
 });
 EndpointStatusActionResult.displayName = 'EndpointStatusActionResult';