Task/malware protections (#62326)

Malware Protections form for endpoint policy details
elastic · Apr 3, 2020 · a44b020 · a44b020
1 parent cb9d263
commit a44b020
Show file tree

Hide file tree

Showing 6 changed files with 281 additions and 53 deletions.
diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/models/policy.ts b/x-pack/plugins/endpoint/public/applications/endpoint/models/policy.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { PolicyConfig } from '../types';
+import { PolicyConfig, ProtectionModes } from '../types';
 
 /**
  * Generate a new Policy model.
@@ -19,7 +19,7 @@ export const generatePolicy = (): PolicyConfig => {
         network: true,
       },
       malware: {
-        mode: 'prevent',
+        mode: ProtectionModes.prevent,
       },
       logging: {
         stdout: 'debug',
@@ -44,7 +44,7 @@ export const generatePolicy = (): PolicyConfig => {
         process: true,
       },
       malware: {
-        mode: 'detect',
+        mode: ProtectionModes.detect,
       },
       logging: {
         stdout: 'debug',

diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/types.ts b/x-pack/plugins/endpoint/public/applications/endpoint/types.ts
@@ -123,10 +123,8 @@ export interface PolicyConfig {
       process: boolean;
       network: boolean;
     };
-    /** malware mode can be detect, prevent or prevent and notify user */
-    malware: {
-      mode: string;
-    };
+    /** malware mode can be off, detect, prevent or prevent and notify user */
+    malware: MalwareFields;
     logging: {
       stdout: string;
       file: string;
@@ -137,9 +135,7 @@ export interface PolicyConfig {
     events: {
       process: boolean;
     };
-    malware: {
-      mode: string;
-    };
+    malware: MalwareFields;
     logging: {
       stdout: string;
       file: string;
@@ -209,6 +205,44 @@ export enum EventingFields {
   network = 'network',
 }
 
+/**
+ * Returns the keys of an object whose values meet a criteria.
+ *  Ex) interface largeNestedObject = {
+ *         a: {
+ *           food: Foods;
+ *           toiletPaper: true;
+ *         };
+ *         b: {
+ *           food: Foods;
+ *           streamingServices: Streams;
+ *         };
+ *         c: {};
+ *    }
+ *
+ *    type hasFoods = KeysByValueCriteria<largeNestedObject, { food: Foods }>;
+ *    The above type will be: [a, b] only, and will not include c.
+ *
+ */
+export type KeysByValueCriteria<O, Criteria> = {
+  [K in keyof O]: O[K] extends Criteria ? K : never;
+}[keyof O];
+
+/** Returns an array of the policy OSes that have a malware protection field */
+
+export type MalwareProtectionOSes = KeysByValueCriteria<UIPolicyConfig, { malware: MalwareFields }>;
+/** Policy: Malware protection fields */
+export interface MalwareFields {
+  mode: ProtectionModes;
+}
+
+/** Policy protection mode options */
+export enum ProtectionModes {
+  detect = 'detect',
+  prevent = 'prevent',
+  preventNotify = 'preventNotify',
+  off = 'off',
+}
+
 export interface GlobalState {
   readonly hostList: HostListState;
   readonly alertList: AlertListState;

diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_details.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_details.tsx
@@ -35,6 +35,7 @@ import { AppAction } from '../../types';
 import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
 import { AgentsSummary } from './agents_summary';
 import { VerticalDivider } from './vertical_divider';
+import { MalwareProtections } from './policy_forms/protections/malware';
 
 export const PolicyDetails = React.memo(() => {
   const dispatch = useDispatch<(action: AppAction) => void>();
@@ -181,6 +182,17 @@ export const PolicyDetails = React.memo(() => {
         headerLeft={headerLeftContent}
         headerRight={headerRightContent}
       >
+        <EuiText size="xs" color="subdued">
+          <h4>
+            <FormattedMessage
+              id="xpack.endpoint.policy.details.protections"
+              defaultMessage="Protections"
+            />
+          </h4>
+        </EuiText>
+        <EuiSpacer size="xs" />
+        <MalwareProtections />
+        <EuiSpacer size="l" />
         <EuiText size="xs" color="subdued">
           <h4>
             <FormattedMessage

diff --git a/...ck/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/config_form.tsx b/...ck/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/config_form.tsx
@@ -11,7 +11,6 @@ import {
   EuiFlexItem,
   EuiTitle,
   EuiHorizontalRule,
-  EuiSpacer,
   EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -30,9 +29,9 @@ export const ConfigForm: React.FC<{
   supportedOss: string[];
   children: React.ReactNode;
   id: string;
-  selectedEventing: number;
-  totalEventing: number;
-}> = React.memo(({ type, supportedOss, children, id, selectedEventing, totalEventing }) => {
+  /** Takes a react component to be put on the right corner of the card */
+  rightCorner: React.ReactNode;
+}> = React.memo(({ type, supportedOss, children, id, rightCorner }) => {
   const typeTitle = () => {
     return (
       <EuiFlexGroup direction="row" gutterSize="none" alignItems="center">
@@ -63,32 +62,11 @@ export const ConfigForm: React.FC<{
             <EuiText>{supportedOss.join(', ')}</EuiText>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiFlexItem grow={false}>
-          <EuiText size="s" color="subdued">
-            <FormattedMessage
-              id="xpack.endpoint.policy.details.eventCollectionsEnabled"
-              defaultMessage="{selectedEventing} / {totalEventing} event collections enabled"
-              values={{ selectedEventing, totalEventing }}
-            />
-          </EuiText>
-        </EuiFlexItem>
+        <EuiFlexItem grow={false}>{rightCorner}</EuiFlexItem>
       </EuiFlexGroup>
     );
   };
 
-  const events = () => {
-    return (
-      <EuiTitle size="xxs">
-        <h5>
-          <FormattedMessage
-            id="xpack.endpoint.policyDetailsConfig.eventingEvents"
-            defaultMessage="Events"
-          />
-        </h5>
-      </EuiTitle>
-    );
-  };
-
   return (
     <PolicyDetailCard>
       <EuiCard
@@ -99,8 +77,6 @@ export const ConfigForm: React.FC<{
         children={
           <>
             <EuiHorizontalRule margin="m" />
-            {events()}
-            <EuiSpacer size="s" />
             {children}
           </>
         }

diff --git a/...ugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/windows.tsx b/...ugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/windows.tsx
@@ -6,6 +6,8 @@
 
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiTitle, EuiText, EuiSpacer } from '@elastic/eui';
 import { EventingCheckbox } from './checkbox';
 import { OS, EventingFields } from '../../../../types';
 import { usePolicyDetailsSelector } from '../../policy_hooks';
@@ -16,6 +18,9 @@ import {
 import { ConfigForm } from '../config_form';
 
 export const WindowsEventing = React.memo(() => {
+  const selected = usePolicyDetailsSelector(selectedWindowsEventing);
+  const total = usePolicyDetailsSelector(totalWindowsEventing);
+
   const checkboxes = useMemo(
     () => [
       {
@@ -37,21 +42,43 @@ export const WindowsEventing = React.memo(() => {
   );
 
   const renderCheckboxes = () => {
-    return checkboxes.map((item, index) => {
-      return (
-        <EventingCheckbox
-          id={`eventing${item.name}`}
-          name={item.name}
-          key={index}
-          os={item.os}
-          protectionField={item.protectionField}
-        />
-      );
-    });
+    return (
+      <>
+        <EuiTitle size="xxs">
+          <h5>
+            <FormattedMessage
+              id="xpack.endpoint.policyDetailsConfig.eventingEvents"
+              defaultMessage="Events"
+            />
+          </h5>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        {checkboxes.map((item, index) => {
+          return (
+            <EventingCheckbox
+              id={`eventing${item.name}`}
+              name={item.name}
+              key={index}
+              os={item.os}
+              protectionField={item.protectionField}
+            />
+          );
+        })}
+      </>
+    );
   };
 
-  const selected = usePolicyDetailsSelector(selectedWindowsEventing);
-  const total = usePolicyDetailsSelector(totalWindowsEventing);
+  const collectionsEnabled = () => {
+    return (
+      <EuiText size="s" color="subdued">
+        <FormattedMessage
+          id="xpack.endpoint.policy.details.eventCollectionsEnabled"
+          defaultMessage="{selected} / {total} event collections enabled"
+          values={{ selected, total }}
+        />
+      </EuiText>
+    );
+  };
 
   return (
     <ConfigForm
@@ -62,9 +89,8 @@ export const WindowsEventing = React.memo(() => {
         i18n.translate('xpack.endpoint.policy.details.windows', { defaultMessage: 'Windows' }),
       ]}
       id="windowsEventingForm"
+      rightCorner={collectionsEnabled()}
       children={renderCheckboxes()}
-      selectedEventing={selected}
-      totalEventing={total}
     />
   );
 });