From 82012f8846b0d8bd7ea876a1731e32a1a9cc8901 Mon Sep 17 00:00:00 2001 From: Candace Park Date: Mon, 6 Apr 2020 13:24:38 -0400 Subject: [PATCH] wip fixing checkbox types --- .../store/policy_details/selectors.ts | 26 +++++ .../public/applications/endpoint/types.ts | 6 ++ .../endpoint/view/policy/policy_details.tsx | 4 +- .../policy/policy_forms/eventing/checkbox.tsx | 25 ++--- .../policy/policy_forms/eventing/index.tsx | 8 ++ .../view/policy/policy_forms/eventing/mac.tsx | 101 ++++++++++++++++++ .../policy/policy_forms/eventing/windows.tsx | 4 +- 7 files changed, 159 insertions(+), 15 deletions(-) create mode 100644 x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/index.tsx create mode 100644 x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/mac.tsx diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/store/policy_details/selectors.ts b/x-pack/plugins/endpoint/public/applications/endpoint/store/policy_details/selectors.ts index 0d505931c9ec5ed..17a89d7ff525b34 100644 --- a/x-pack/plugins/endpoint/public/applications/endpoint/store/policy_details/selectors.ts +++ b/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; diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/types.ts b/x-pack/plugins/endpoint/public/applications/endpoint/types.ts index d4f6d2457254e2f..9d901232d66e5fc 100644 --- a/x-pack/plugins/endpoint/public/applications/endpoint/types.ts +++ b/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 = 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', } /** 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 index 2dba301bf453763..eb444e40ea4dde3 100644 --- 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 @@ -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(() => { + + ); diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/checkbox.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/checkbox.tsx index 8b7fb89ed16464b..abb1dd53a290b17 100644 --- a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/checkbox.tsx +++ b/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({ + id, + name, + os, + protectionField, +}: { id: string; name: string; - os: OS; - protectionField: EventingFields; -}> = React.memo(({ id, name, os, protectionField }) => { + os: T; + protectionField: nerds; +}) { const policyDetailsConfig = usePolicyDetailsSelector(policyConfig); const eventing = usePolicyDetailsSelector(windowsEventing); const dispatch = useDispatch<(action: PolicyDetailsAction) => void>(); - const handleRadioChange = useCallback( + const handleCheckboxChange = useCallback( (event: React.ChangeEvent) => { 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} /> ); }); diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/index.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/index.tsx new file mode 100644 index 000000000000000..58b4af46c6e3454 --- /dev/null +++ b/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'; diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/mac.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/mac.tsx new file mode 100644 index 000000000000000..b373dd6b32782aa --- /dev/null +++ b/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 ( + <> + +
+ +
+ + + {checkboxes.map((item, index) => { + return ( + htmlIdGenerator()(), [])} + name={item.name} + key={index} + os={item.os} + protectionField={item.protectionField} + /> + ); + })} + + ); + }; + + const collectionsEnabled = () => { + return ( + + + + ); + }; + + return ( + + ); +}); diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/windows.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/windows.tsx index 7bec2c4c742d2b5..3585407011a572e 100644 --- a/x-pack/plugins/endpoint/public/applications/endpoint/view/policy/policy_forms/eventing/windows.tsx +++ b/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,