add policy data to UI

elastic · Jun 15, 2020 · 3d916d5 · 3d916d5
1 parent 533046f
commit 3d916d5
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 20 deletions.
diff --git a/...k/plugins/security_solution/public/management/pages/endpoint_hosts/view/host_constants.ts b/...k/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',
+});
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
@@ -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';
@@ -52,6 +56,48 @@ const HostLink = memo<{
 });
 HostLink.displayName = 'HostLink';
 
+const PolicyDetailsLink = memo<{
+  name: string;
+  href: string;
+  route: string;
+}>(({ name, href, route }) => {
+  const clickHandler = useNavigateByRouterEventHandler(route);
+
+  return (
+    // eslint-disable-next-line @elastic/eui/href-or-on-click
+    <EuiLink
+      data-test-subj="policyNameCellLink"
+      className="eui-textTruncate"
+      href={href}
+      onClick={clickHandler}
+    >
+      {name}
+    </EuiLink>
+  );
+});
+PolicyDetailsLink.displayName = 'PolicyDetailsLink';
+
+const PolicyResponseLink = memo<{
+  name: string;
+  href: string;
+  route: string;
+}>(({ name, href, route }) => {
+  const clickHandler = useNavigateByRouterEventHandler(route);
+
+  return (
+    // eslint-disable-next-line @elastic/eui/href-or-on-click
+    <EuiLink
+      data-test-subj="policyStatusCellLink"
+      className="eui-textTruncate"
+      href={href}
+      onClick={clickHandler}
+    >
+      {name}
+    </EuiLink>
+  );
+});
+PolicyResponseLink.displayName = 'PolicyResponseLink';
+
 const selector = (createStructuredSelector as CreateStructuredSelector)(selectors);
 export const HostList = () => {
   const history = useHistory();
@@ -142,43 +188,55 @@ 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 <PolicyDetailsLink name={policy.name} href={toRouteUrl} route={toRoutePath} />;
         },
       },
       {
-        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"
+            >
+              <PolicyResponseLink
+                name={POLICY_STATUS_TO_TEXT[policy.status]}
+                href={toRouteUrl}
+                route={toRoutePath}
               />
             </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', {