github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[SECURITY_SOLUTION] 524: Advanced Policy callout and documentation tooltips (#84926)

Browse source 
* 524 added EuiIconTip

* 524 conditional tooltip, caution callout

* 524 help->alert

* 524 paul's PR feedback
This commit is contained in:
Jane Miller 2020-12-08 15:07:20 -05:00 • committed by GitHub
parent 72ed936aa5
commit 3826283c74
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

45
x-pack/plugins/security_solution/public/management/pages/policy/view/policy_advanced.tsx
View file

@ -6,9 +6,20 @@
import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { EuiFieldText, EuiFormRow, EuiPanel, EuiText } from '@elastic/eui';
import {
EuiCallOut,
EuiFieldText,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
EuiIconTip,
EuiPanel,
EuiSpacer,
EuiText,
} from '@elastic/eui';
import { cloneDeep } from 'lodash';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { policyConfig } from '../store/policy_details/selectors';
import { usePolicyDetailsSelector } from './policy_hooks';
import { AdvancedPolicySchema } from '../models/advanced_policy_schema';
@ -68,10 +79,28 @@ function getValue(obj: Record<string, unknown>, path: string[]) {
}
return currentPolicyConfig[path[path.length - 1]];
}
const calloutTitle = i18n.translate(
'xpack.securitySolution.endpoint.policy.advanced.calloutTitle',
{
defaultMessage: 'Proceed with caution!',
}
);
const warningMessage = i18n.translate(
'xpack.securitySolution.endpoint.policy.advanced.warningMessage',
{
defaultMessage: `This section contains policy values that support advanced use cases. If not configured
properly, these values can cause unpredictable behavior. Please consult documentation
carefully or contact support before editing these values.`,
}
);
export const AdvancedPolicyForms = React.memo(() => {
return (
<>
<EuiCallOut title={calloutTitle} color="warning" iconType="alert">
<p>{warningMessage}</p>
</EuiCallOut>
<EuiSpacer />
<EuiText size="xs" color="subdued">
<h4>
<FormattedMessage
@ -89,6 +118,7 @@ export const AdvancedPolicyForms = React.memo(() => {
configPath={configPath}
firstSupportedVersion={advancedField.first_supported_version}
lastSupportedVersion={advancedField.last_supported_version}
documentation={advancedField.documentation}
/>
);
})}
@ -104,10 +134,12 @@ const PolicyAdvanced = React.memo(
configPath,
firstSupportedVersion,
lastSupportedVersion,
documentation,
}: {
configPath: string[];
firstSupportedVersion: string;
lastSupportedVersion?: string;
documentation: string;
}) => {
const dispatch = useDispatch();
const policyDetailsConfig = usePolicyDetailsSelector(policyConfig);
@ -137,7 +169,16 @@ const PolicyAdvanced = React.memo(
<>
<EuiFormRow
fullWidth
label={configPath.join('.')}
label={
<EuiFlexGroup>
<EuiFlexItem>{configPath.join('.')}</EuiFlexItem>
{documentation && (
<EuiFlexItem>
<EuiIconTip content={documentation} position="right" />
</EuiFlexItem>
)}
</EuiFlexGroup>
}
labelAppend={
<EuiText size="xs">
{lastSupportedVersion