[SECURITY_SOLUTION] Task/hostname policy response ux updates (#76444) (…

…#77764)
elastic · Sep 17, 2020 · 6633ad8 · 6633ad8
1 parent a3ff68e
commit 6633ad8
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 30 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/formatted_date/index.tsx b/x-pack/plugins/security_solution/public/common/components/formatted_date/index.tsx
@@ -22,6 +22,24 @@ export const PreferenceFormattedDate = React.memo<{ dateFormat?: string; value:
 
 PreferenceFormattedDate.displayName = 'PreferenceFormattedDate';
 
+export const PreferenceFormattedDateFromPrimitive = ({
+  value,
+}: {
+  value?: string | number | null;
+}) => {
+  if (value == null) {
+    return getOrEmptyTagFromValue(value);
+  }
+  const maybeDate = getMaybeDate(value);
+  if (!maybeDate.isValid()) {
+    return getOrEmptyTagFromValue(value);
+  }
+  const date = maybeDate.toDate();
+  return <PreferenceFormattedDate value={date} />;
+};
+
+PreferenceFormattedDateFromPrimitive.displayName = 'PreferenceFormattedDateFromPrimitive';
+
 /**
  * This function may be passed to `Array.find()` to locate the `P1DT`
  * configuration (sub) setting, a string array that contains two entries

diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
@@ -72,6 +72,12 @@ export const patternsError = (state: Immutable<EndpointState>) => state.patterns
 const detailsPolicyAppliedResponse = (state: Immutable<EndpointState>) =>
   state.policyResponse && state.policyResponse.Endpoint.policy.applied;
 
+/**
+ * Returns the policy response timestamp from the endpoint after a user modifies a policy.
+ */
+export const policyResponseTimestamp = (state: Immutable<EndpointState>) =>
+  state.policyResponse && state.policyResponse['@timestamp'];
+
 /**
  * Returns the response configurations from the endpoint after a user modifies a policy.
  */

diff --git a/...ecurity_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx b/...ecurity_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx
@@ -125,7 +125,7 @@ export const EndpointDetails = memo(({ details }: { details: HostMetadata }) =>
     return [
       {
         title: i18n.translate('xpack.securitySolution.endpoint.details.policy', {
-          defaultMessage: 'Integration',
+          defaultMessage: 'Integration Policy',
         }),
         description: (
           <>
@@ -140,7 +140,7 @@ export const EndpointDetails = memo(({ details }: { details: HostMetadata }) =>
       },
       {
         title: i18n.translate('xpack.securitySolution.endpoint.details.policyStatus', {
-          defaultMessage: 'Configuration response',
+          defaultMessage: 'Policy Response',
         }),
         description: (
           <EuiHealth
@@ -219,7 +219,7 @@ export const EndpointDetails = memo(({ details }: { details: HostMetadata }) =>
           <EuiIcon type="savedObjectsApp" className="linkToAppIcon" />
           <FormattedMessage
             id="xpack.securitySolution.endpoint.details.linkToIngestTitle"
-            defaultMessage="Reassign Configuration"
+            defaultMessage="Reassign Policy"
           />
           <EuiIcon type="popout" className="linkToAppPopoutIcon" />
         </LinkToApp>

diff --git a/...k/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx b/...k/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
@@ -32,6 +32,7 @@ import {
   policyResponseFailedOrWarningActionCount,
   policyResponseError,
   policyResponseLoading,
+  policyResponseTimestamp,
 } from '../../store/selectors';
 import { EndpointDetails } from './endpoint_details';
 import { PolicyResponse } from './policy_response';
@@ -41,6 +42,7 @@ import { useNavigateByRouterEventHandler } from '../../../../../common/hooks/end
 import { getEndpointListPath } from '../../../../common/routing';
 import { SecurityPageName } from '../../../../../app/types';
 import { useFormatUrl } from '../../../../../common/components/link_to';
+import { PreferenceFormattedDateFromPrimitive } from '../../../../../common/components/formatted_date';
 
 export const EndpointDetailsFlyout = memo(() => {
   const history = useHistory();
@@ -122,6 +124,7 @@ const PolicyResponseFlyoutPanel = memo<{
   const loading = useEndpointSelector(policyResponseLoading);
   const error = useEndpointSelector(policyResponseError);
   const { formatUrl } = useFormatUrl(SecurityPageName.administration);
+  const responseTimestamp = useEndpointSelector(policyResponseTimestamp);
   const [detailsUri, detailsRoutePath] = useMemo(
     () => [
       formatUrl(
@@ -161,16 +164,21 @@ const PolicyResponseFlyoutPanel = memo<{
           <h4>
             <FormattedMessage
               id="xpack.securitySolution.endpoint.policyResponse.title"
-              defaultMessage="Configuration Response"
+              defaultMessage="Policy Response"
             />
           </h4>
         </EuiText>
+        <EuiSpacer size="s" />
+        <EuiText size="xs" color="subdued" data-test-subj="endpointDetailsPolicyResponseTimestamp">
+          <PreferenceFormattedDateFromPrimitive value={responseTimestamp} />
+        </EuiText>
+        <EuiSpacer size="s" />
         {error && (
           <EuiEmptyPrompt
             title={
               <FormattedMessage
                 id="xpack.securitySolution.endpoint.details.noPolicyResponse"
-                defaultMessage="No configuration response available"
+                defaultMessage="No policy response available"
               />
             }
           />

diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@@ -510,7 +510,7 @@ describe('when on the list page', () => {
       const renderResult = await renderAndWaitForData();
       const linkToReassign = await renderResult.findByTestId('endpointDetailsLinkToIngest');
       expect(linkToReassign).not.toBeNull();
-      expect(linkToReassign.textContent).toEqual('Reassign Configuration');
+      expect(linkToReassign.textContent).toEqual('Reassign Policy');
       expect(linkToReassign.getAttribute('href')).toEqual(
         `/app/ingestManager#/fleet/agents/${agentId}/activity?openReassignFlyout=true`
       );
@@ -572,7 +572,7 @@ describe('when on the list page', () => {
       it('should include the sub-panel title', async () => {
         expect(
           (await renderResult.findByTestId('endpointDetailsPolicyResponseFlyoutTitle')).textContent
-        ).toBe('Configuration Response');
+        ).toBe('Policy Response');
       });
 
       it('should show a configuration section for each protection', async () => {

diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
@@ -270,17 +270,20 @@ export const EndpointList = () => {
           );
           const toRouteUrl = formatUrl(toRoutePath);
           return (
-            <EndpointListNavLink
-              name={hostname}
-              href={toRouteUrl}
-              route={toRoutePath}
-              dataTestSubj="hostnameCellLink"
-            />
+            <EuiToolTip content={hostname} anchorClassName="eui-fullWidth">
+              <EndpointListNavLink
+                name={hostname}
+                href={toRouteUrl}
+                route={toRoutePath}
+                dataTestSubj="hostnameCellLink"
+              />
+            </EuiToolTip>
           );
         },
       },
       {
         field: 'host_status',
+        width: '9%',
         name: i18n.translate('xpack.securitySolution.endpoint.list.hostStatus', {
           defaultMessage: 'Agent Status',
         }),
@@ -303,27 +306,31 @@ export const EndpointList = () => {
       },
       {
         field: 'metadata.Endpoint.policy.applied',
+        width: '15%',
         name: i18n.translate('xpack.securitySolution.endpoint.list.policy', {
-          defaultMessage: 'Integration',
+          defaultMessage: 'Integration Policy',
         }),
         truncateText: true,
         // eslint-disable-next-line react/display-name
         render: (policy: HostInfo['metadata']['Endpoint']['policy']['applied']) => {
           return (
-            <EndpointPolicyLink
-              policyId={policy.id}
-              className="eui-textTruncate"
-              data-test-subj="policyNameCellLink"
-            >
-              {policy.name}
-            </EndpointPolicyLink>
+            <EuiToolTip content={policy.name} anchorClassName="eui-fullWidth">
+              <EndpointPolicyLink
+                policyId={policy.id}
+                className="eui-textTruncate"
+                data-test-subj="policyNameCellLink"
+              >
+                {policy.name}
+              </EndpointPolicyLink>
+            </EuiToolTip>
           );
         },
       },
       {
         field: 'metadata.Endpoint.policy.applied',
+        width: '9%',
         name: i18n.translate('xpack.securitySolution.endpoint.list.policyStatus', {
-          defaultMessage: 'Configuration Status',
+          defaultMessage: 'Policy Status',
         }),
         render: (policy: HostInfo['metadata']['Endpoint']['policy']['applied'], item: HostInfo) => {
           const toRoutePath = getEndpointDetailsPath({
@@ -350,6 +357,7 @@ export const EndpointList = () => {
       },
       {
         field: 'metadata.host.os.name',
+        width: '10%',
         name: i18n.translate('xpack.securitySolution.endpoint.list.os', {
           defaultMessage: 'Operating System',
         }),
@@ -375,6 +383,7 @@ export const EndpointList = () => {
       },
       {
         field: 'metadata.agent.version',
+        width: '5%',
         name: i18n.translate('xpack.securitySolution.endpoint.list.endpointVersion', {
           defaultMessage: 'Version',
         }),
@@ -394,6 +403,7 @@ export const EndpointList = () => {
       },
       {
         field: '',
+        width: '5%',
         name: i18n.translate('xpack.securitySolution.endpoint.list.actions', {
           defaultMessage: 'Actions',
         }),

diff --git a/x-pack/test/security_solution_endpoint/apps/endpoint/endpoint_list.ts b/x-pack/test/security_solution_endpoint/apps/endpoint/endpoint_list.ts
@@ -22,8 +22,8 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     [
       'Hostname',
       'Agent Status',
-      'Integration',
-      'Configuration Status',
+      'Integration Policy',
+      'Policy Status',
       'Operating System',
       'IP Address',
       'Version',
@@ -189,8 +189,8 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
             'OS',
             'Last Seen',
             'Alerts',
-            'Integration',
-            'Configuration Status',
+            'Integration Policy',
+            'Policy Status',
             'IP Address',
             'Hostname',
             'Sensor Version',
@@ -237,8 +237,8 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           [
             'Hostname',
             'Agent Status',
-            'Integration',
-            'Configuration Status',
+            'Integration Policy',
+            'Policy Status',
             'Operating System',
             'IP Address',
             'Version',
@@ -268,8 +268,8 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           [
             'Hostname',
             'Agent Status',
-            'Integration',
-            'Configuration Status',
+            'Integration Policy',
+            'Policy Status',
             'Operating System',
             'IP Address',
             'Version',