wip fixing checkbox types

x-pack/plugins/endpoint/public/applications/endpoint/store/policy_details/selectors.ts

@@ -105,6 +105,32 @@ export const selectedWindowsEventing = (state: PolicyDetailsState): number => {
   return 0;
 };
 
+/** Returns an object of all the mac eventing configurations */
+export const macEventing = (state: PolicyDetailsState) => {
+  const config = policyConfig(state);
+  return config && config.mac.events;
+};
+
+/** Returns the total number of possible mac eventing configurations */
+export const totalMacEventing = (state: PolicyDetailsState): number => {
+  const config = policyConfig(state);
+  if (config) {
+    return Object.keys(config.mac.events).length;
+  }
+  return 0;
+};
+
+/** Returns the number of selected mac eventing configurations */
+export const selectedMacEventing = (state: PolicyDetailsState): number => {
+  const config = policyConfig(state);
+  if (config) {
+    return Object.values(config.mac.events).reduce((count, event) => {
+      return event === true ? count + 1 : count;
+    }, 0);
+  }
+  return 0;
+};
+
 /** is there an api call in flight */
 export const isLoading = (state: PolicyDetailsState) => state.isLoading;
 

x-pack/plugins/endpoint/public/applications/endpoint/types.ts

@@ -133,7 +133,9 @@ export interface PolicyConfig {
   };
   mac: {
     events: {
+      file: boolean;
       process: boolean;
+      network: boolean;
     };
     malware: MalwareFields;
     logging: {
@@ -144,7 +146,9 @@ export interface PolicyConfig {
   };
   linux: {
     events: {
+      file: boolean;
       process: boolean;
+      network: boolean;
     };
     logging: {
       stdout: string;
@@ -191,6 +195,7 @@ export interface UIPolicyConfig {
   mac: MacPolicyConfig;
   linux: LinuxPolicyConfig;
 }
+export type nerds<t extends keyof UIPolicyConfig> = keyof UIPolicyConfig[t]['events'];
 
 /** OS used in Policy */
 export enum OS {
@@ -203,6 +208,7 @@ export enum OS {
 export enum EventingFields {
   process = 'process',
   network = 'network',
+  file = 'file',
 }
 
 /**

x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_details.tsx

@@ -29,12 +29,12 @@ import {
   isLoading,
   apiError,
 } from '../../store/policy_details/selectors';
-import { WindowsEventing } from './policy_forms/eventing/windows';
 import { PageView, PageViewHeaderTitle } from '../../components/page_view';
 import { AppAction } from '../../types';
 import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public';
 import { AgentsSummary } from './agents_summary';
 import { VerticalDivider } from './vertical_divider';
+import { WindowsEventing, MacEventing } from './policy_forms/eventing';
 import { MalwareProtections } from './policy_forms/protections/malware';
 
 export const PolicyDetails = React.memo(() => {
@@ -203,6 +203,8 @@ export const PolicyDetails = React.memo(() => {
         </EuiText>
         <EuiSpacer size="xs" />
         <WindowsEventing />
+        <EuiSpacer size="l" />
+        <MacEventing />
       </PageView>
     </>
   );

x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/checkbox.tsx

@@ -10,28 +10,29 @@ import { useDispatch } from 'react-redux';
 import { usePolicyDetailsSelector } from '../../policy_hooks';
 import { policyConfig, windowsEventing } from '../../../../store/policy_details/selectors';
 import { PolicyDetailsAction } from '../../../../store/policy_details';
-import { OS, EventingFields } from '../../../../types';
+import { OS, UIPolicyConfig, nerds } from '../../../../types';
 import { clone } from '../../../../models/policy_details_config';
 
-export const EventingCheckbox: React.FC<{
+export const EventingCheckbox = React.memo(function<T extends keyof UIPolicyConfig>({
+  id,
+  name,
+  os,
+  protectionField,
+}: {
   id: string;
   name: string;
-  os: OS;
-  protectionField: EventingFields;
-}> = React.memo(({ id, name, os, protectionField }) => {
+  os: T;
+  protectionField: nerds<T>;
+}) {
   const policyDetailsConfig = usePolicyDetailsSelector(policyConfig);
   const eventing = usePolicyDetailsSelector(windowsEventing);
   const dispatch = useDispatch<(action: PolicyDetailsAction) => void>();
 
-  const handleRadioChange = useCallback(
+  const handleCheckboxChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       if (policyDetailsConfig) {
         const newPayload = clone(policyDetailsConfig);
-        if (os === OS.linux || os === OS.mac) {
-          newPayload[os].events.process = event.target.checked;
-        } else {
-          newPayload[os].events[protectionField] = event.target.checked;
-        }
+        newPayload[os].events[protectionField] = event.target.checked;
 
         dispatch({
           type: 'userChangedPolicyConfig',
@@ -47,7 +48,7 @@ export const EventingCheckbox: React.FC<{
       id={id}
       label={name}
       checked={eventing && eventing[protectionField]}
-      onChange={handleRadioChange}
+      onChange={handleCheckboxChange}
     />
   );
 });

x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/index.tsx

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { WindowsEventing } from './windows';
+export { MacEventing } from './mac';

x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/mac.tsx

@@ -0,0 +1,101 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { htmlIdGenerator } from '@elastic/eui';
+import { EuiTitle, EuiText, EuiSpacer } from '@elastic/eui';
+import { EventingCheckbox } from './checkbox';
+import { OS, EventingFields } from '../../../../types';
+import { usePolicyDetailsSelector } from '../../policy_hooks';
+import { selectedMacEventing, totalMacEventing } from '../../../../store/policy_details/selectors';
+import { ConfigForm } from '../config_form';
+
+export const MacEventing = React.memo(() => {
+  const selected = usePolicyDetailsSelector(selectedMacEventing);
+  const total = usePolicyDetailsSelector(totalMacEventing);
+
+  const checkboxes = useMemo(
+    () => [
+      {
+        name: i18n.translate('xpack.endpoint.policyDetailsConfig.mac.events.file', {
+          defaultMessage: 'File',
+        }),
+        os: OS.mac,
+        protectionField: EventingFields.file,
+      },
+      {
+        name: i18n.translate('xpack.endpoint.policyDetailsConfig.mac.events.process', {
+          defaultMessage: 'Process',
+        }),
+        os: OS.mac,
+        protectionField: EventingFields.process,
+      },
+      {
+        name: i18n.translate('xpack.endpoint.policyDetailsConfig.mac.events.network', {
+          defaultMessage: 'Network',
+        }),
+        os: OS.mac,
+        protectionField: EventingFields.network,
+      },
+    ],
+    []
+  );
+
+  const renderCheckboxes = () => {
+    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={useMemo(() => htmlIdGenerator()(), [])}
+              name={item.name}
+              key={index}
+              os={item.os}
+              protectionField={item.protectionField}
+            />
+          );
+        })}
+      </>
+    );
+  };
+
+  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
+      type={i18n.translate('xpack.endpoint.policy.details.eventCollection', {
+        defaultMessage: 'Event Collection',
+      })}
+      supportedOss={[
+        i18n.translate('xpack.endpoint.policy.details.mac', { defaultMessage: 'Mac' }),
+      ]}
+      id="macEventingForm"
+      rightCorner={collectionsEnabled()}
+      children={renderCheckboxes()}
+    />
+  );
+});

x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/windows.tsx

@@ -24,14 +24,14 @@ export const WindowsEventing = React.memo(() => {
   const checkboxes = useMemo(
     () => [
       {
-        name: i18n.translate('xpack.endpoint.policyDetailsConfig.eventingProcess', {
+        name: i18n.translate('xpack.endpoint.policyDetailsConfig.windows.events.process', {
           defaultMessage: 'Process',
         }),
         os: OS.windows,
         protectionField: EventingFields.process,
       },
       {
-        name: i18n.translate('xpack.endpoint.policyDetailsConfig.eventingNetwork', {
+        name: i18n.translate('xpack.endpoint.policyDetailsConfig.windows.events.network', {
           defaultMessage: 'Network',
         }),
         os: OS.windows,