[Endpoint] add policy data to Host list UI

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/host_details.tsx

@@ -93,13 +93,40 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
 
   const policyStatusClickHandler = useNavigateByRouterEventHandler(policyResponseRoutePath);
 
+  const [policyDetailsUri, policyDetailsRoutePath] = useMemo(() => {
+    return [
+      getManagementUrl({
+        name: 'policyDetails',
+        policyId: details.endpoint.policy.applied.id,
+        excludePrefix: true,
+      }),
+      getManagementUrl({
+        name: 'policyDetails',
+        policyId: details.endpoint.policy.applied.id,
+      }),
+    ];
+  }, [details.endpoint.policy.applied.id]);
+
+  const policyDetailsClickHandler = useNavigateByRouterEventHandler(policyDetailsUri);
+
   const detailsResultsPolicy = useMemo(() => {
     return [
       {
         title: i18n.translate('xpack.securitySolution.endpoint.host.details.policy', {
           defaultMessage: 'Policy',
         }),
-        description: details.endpoint.policy.applied.id,
+        description: (
+          <>
+            {/* eslint-disable-next-line @elastic/eui/href-or-on-click */}
+            <EuiLink
+              data-test-subj="policyDetailsValue"
+              href={policyDetailsRoutePath}
+              onClick={policyDetailsClickHandler}
+            >
+              {details.endpoint.policy.applied.name}
+            </EuiLink>
+          </>
+        ),
       },
       {
         title: i18n.translate('xpack.securitySolution.endpoint.host.details.policyStatus', {
@@ -128,7 +155,14 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
         ),
       },
     ];
-  }, [details, policyResponseUri, policyStatus, policyStatusClickHandler]);
+  }, [
+    details,
+    policyResponseUri,
+    policyStatus,
+    policyStatusClickHandler,
+    policyDetailsRoutePath,
+    policyDetailsClickHandler,
+  ]);
   const detailsResultsLower = useMemo(() => {
     return [
       {

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/host_constants.ts

@@ -23,3 +23,11 @@ export const POLICY_STATUS_TO_HEALTH_COLOR = Object.freeze<
   warning: 'warning',
   failure: 'danger',
 });
+
+export const POLICY_STATUS_TO_TEXT = Object.freeze<
+  { [key in keyof typeof HostPolicyResponseActionStatus]: string }
+>({
+  success: 'Success',
+  warning: 'Warning',
+  failure: 'Failure',
+});

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../../../../common/endpoint/types';
 import { EndpointDocGenerator } from '../../../../../common/endpoint/generate_data';
 import { AppAction } from '../../../../common/store/actions';
+import { POLICY_STATUS_TO_HEALTH_COLOR, POLICY_STATUS_TO_TEXT } from './host_constants';
 
 describe('when on the hosts page', () => {
   const docGenerator = new EndpointDocGenerator();
@@ -47,15 +48,23 @@ describe('when on the hosts page', () => {
       });
     });
     describe('when list data loads', () => {
+      const generatedPolicyStatuses: Array<
+        HostInfo['metadata']['endpoint']['policy']['applied']['status']
+      > = [];
+      let firstPolicyID: string;
       beforeEach(() => {
         reactTestingLibrary.act(() => {
           const hostListData = mockHostResultList({ total: 3 });
+          firstPolicyID = hostListData.hosts[0].metadata.endpoint.policy.applied.id;
           [HostStatus.ERROR, HostStatus.ONLINE, HostStatus.OFFLINE].forEach((status, index) => {
             hostListData.hosts[index] = {
               metadata: hostListData.hosts[index].metadata,
               host_status: status,
             };
           });
+          hostListData.hosts.forEach((item, index) => {
+            generatedPolicyStatuses[index] = item.metadata.endpoint.policy.applied.status;
+          });
           const action: AppAction = {
             type: 'serverReturnedHostList',
             payload: hostListData,
@@ -92,6 +101,29 @@ describe('when on the hosts page', () => {
         ).not.toBeNull();
       });
 
+      it('should display correct policy status', async () => {
+        const renderResult = render();
+        const policyStatuses = await renderResult.findAllByTestId('rowPolicyStatus');
+
+        policyStatuses.forEach((status, index) => {
+          expect(status.textContent).toEqual(POLICY_STATUS_TO_TEXT[generatedPolicyStatuses[index]]);
+          expect(
+            status.querySelector(
+              `[data-euiicon-type][color=${
+                POLICY_STATUS_TO_HEALTH_COLOR[generatedPolicyStatuses[index]]
+              }]`
+            )
+          ).not.toBeNull();
+        });
+      });
+
+      it('should display policy name as a link', async () => {
+        const renderResult = render();
+        const firstPolicyName = (await renderResult.findAllByTestId('policyNameCellLink'))[0];
+        expect(firstPolicyName).not.toBeNull();
+        expect(firstPolicyName.getAttribute('href')).toContain(`policy/${firstPolicyID}`);
+      });
+
       describe('when the user clicks the first hostname in the table', () => {
         let renderResult: reactTestingLibrary.RenderResult;
         beforeEach(async () => {
@@ -197,6 +229,26 @@ describe('when on the hosts page', () => {
         expect(flyout).not.toBeNull();
       });
     });
+    it('should display policy name value as a link', async () => {
+      const renderResult = render();
+      const policyDetailsLink = await renderResult.findByTestId('policyDetailsValue');
+      expect(policyDetailsLink).not.toBeNull();
+      expect(policyDetailsLink.getAttribute('href')).toEqual(
+        `#/management/policy/${hostDetails.metadata.endpoint.policy.applied.id}`
+      );
+    });
+    it('should update the URL when policy name link is clicked', async () => {
+      const renderResult = render();
+      const policyDetailsLink = await renderResult.findByTestId('policyDetailsValue');
+      const userChangedUrlChecker = middlewareSpy.waitForAction('userChangedUrl');
+      reactTestingLibrary.act(() => {
+        reactTestingLibrary.fireEvent.click(policyDetailsLink);
+      });
+      const changedUrlAction = await userChangedUrlChecker;
+      expect(changedUrlAction.payload.pathname).toEqual(
+        `/management/policy/${hostDetails.metadata.endpoint.policy.applied.id}`
+      );
+    });
     it('should display policy status value as a link', async () => {
       const renderResult = render();
       const policyStatusLink = await renderResult.findByTestId('policyStatusValue');

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx

@@ -22,7 +22,11 @@ import { createStructuredSelector } from 'reselect';
 import { HostDetailsFlyout } from './details';
 import * as selectors from '../store/selectors';
 import { useHostSelector } from './hooks';
-import { HOST_STATUS_TO_HEALTH_COLOR } from './host_constants';
+import {
+  HOST_STATUS_TO_HEALTH_COLOR,
+  POLICY_STATUS_TO_HEALTH_COLOR,
+  POLICY_STATUS_TO_TEXT,
+} from './host_constants';
 import { useNavigateByRouterEventHandler } from '../../../../common/hooks/endpoint/use_navigate_by_router_event_handler';
 import { CreateStructuredSelector } from '../../../../common/store';
 import { Immutable, HostInfo } from '../../../../../common/endpoint/types';
@@ -31,17 +35,18 @@ import { ManagementPageView } from '../../../components/management_page_view';
 import { getManagementUrl } from '../../..';
 import { FormattedDate } from '../../../../common/components/formatted_date';
 
-const HostLink = memo<{
+const HostListNavLink = memo<{
   name: string;
   href: string;
   route: string;
-}>(({ name, href, route }) => {
+  dataTestSubj: string;
+}>(({ name, href, route, dataTestSubj }) => {
   const clickHandler = useNavigateByRouterEventHandler(route);
 
   return (
     // eslint-disable-next-line @elastic/eui/href-or-on-click
     <EuiLink
-      data-test-subj="hostnameCellLink"
+      data-test-subj={dataTestSubj}
       className="eui-textTruncate"
       href={href}
       onClick={clickHandler}
@@ -50,7 +55,7 @@ const HostLink = memo<{
     </EuiLink>
   );
 });
-HostLink.displayName = 'HostLink';
+HostListNavLink.displayName = 'HostListNavLink';
 
 const selector = (createStructuredSelector as CreateStructuredSelector)(selectors);
 export const HostList = () => {
@@ -116,7 +121,14 @@ export const HostList = () => {
             name: 'endpointDetails',
             selected_host: id,
           });
-          return <HostLink name={hostname} href={toRouteUrl} route={toRoutePath} />;
+          return (
+            <HostListNavLink
+              name={hostname}
+              href={toRouteUrl}
+              route={toRoutePath}
+              dataTestSubj="hostnameCellLink"
+            />
+          );
         },
       },
       {
@@ -142,43 +154,64 @@ export const HostList = () => {
         },
       },
       {
-        field: '',
+        field: 'metadata.endpoint.policy.applied',
         name: i18n.translate('xpack.securitySolution.endpointList.policy', {
           defaultMessage: 'Policy',
         }),
         truncateText: true,
         // eslint-disable-next-line react/display-name
-        render: () => {
-          return <span className="eui-textTruncate">{'Policy Name'}</span>;
+        render: (policy: HostInfo['metadata']['endpoint']['policy']['applied']) => {
+          const toRoutePath = getManagementUrl({
+            name: 'policyDetails',
+            policyId: policy.id,
+            excludePrefix: true,
+          });
+          const toRouteUrl = getManagementUrl({
+            name: 'policyDetails',
+            policyId: policy.id,
+          });
+          return (
+            <HostListNavLink
+              name={policy.name}
+              href={toRouteUrl}
+              route={toRoutePath}
+              dataTestSubj="policyNameCellLink"
+            />
+          );
         },
       },
       {
-        field: '',
+        field: 'metadata.endpoint.policy.applied',
         name: i18n.translate('xpack.securitySolution.endpointList.policyStatus', {
           defaultMessage: 'Policy Status',
         }),
         // eslint-disable-next-line react/display-name
-        render: () => {
+        render: (policy: HostInfo['metadata']['endpoint']['policy']['applied'], item: HostInfo) => {
+          const toRoutePath = getManagementUrl({
+            name: 'endpointPolicyResponse',
+            selected_host: item.metadata.host.id,
+            excludePrefix: true,
+          });
+          const toRouteUrl = getManagementUrl({
+            name: 'endpointPolicyResponse',
+            selected_host: item.metadata.host.id,
+          });
           return (
-            <EuiHealth color="success" className="eui-textTruncate">
-              <FormattedMessage
-                id="xpack.securitySolution.endpointList.policyStatus"
-                defaultMessage="Policy Status"
+            <EuiHealth
+              color={POLICY_STATUS_TO_HEALTH_COLOR[policy.status]}
+              className="eui-textTruncate"
+              data-test-subj="rowPolicyStatus"
+            >
+              <HostListNavLink
+                name={POLICY_STATUS_TO_TEXT[policy.status]}
+                href={toRouteUrl}
+                route={toRoutePath}
+                dataTestSubj="policyStatusCellLink"
               />
             </EuiHealth>
           );
         },
       },
-      {
-        field: '',
-        name: i18n.translate('xpack.securitySolution.endpointList.alerts', {
-          defaultMessage: 'Alerts',
-        }),
-        dataType: 'number',
-        render: () => {
-          return '0';
-        },
-      },
       {
         field: 'metadata.host.os.name',
         name: i18n.translate('xpack.securitySolution.endpointList.os', {

x-pack/plugins/security_solution/public/management/pages/policy/store/policy_details/middleware.ts

@@ -45,7 +45,7 @@ export const policyDetailsMiddlewareFactory: ImmutableMiddlewareFactory<PolicyDe
 
       // Until we get the Default configuration into the Endpoint package so that the datasource has
       // the expected data structure, we will add it here manually.
-      if (!policyItem.inputs.length) {
+      if (policyItem && !policyItem.inputs.length) {
         policyItem.inputs = [
           {
             type: 'endpoint',
@@ -69,7 +69,7 @@ export const policyDetailsMiddlewareFactory: ImmutableMiddlewareFactory<PolicyDe
 
       // Agent summary is secondary data, so its ok for it to come after the details
       // page is populated with the main content
-      if (policyItem.config_id) {
+      if (policyItem && policyItem.config_id) {
         const { results } = await sendGetFleetAgentStatusForConfig(http, policyItem.config_id);
         dispatch({
           type: 'serverReturnedPolicyDetailsAgentSummaryData',