diff --git a/src/ctl/ui/src/components/HelpTooltip.js b/src/ctl/ui/src/components/HelpTooltip.js new file mode 100644 index 0000000000..f7fe5f2f41 --- /dev/null +++ b/src/ctl/ui/src/components/HelpTooltip.js @@ -0,0 +1,18 @@ +import React from 'react'; +import {Popover, Icon} from 'antd'; +import {getHelpText} from 'utils/helpText'; + +export default function HelpTooltip({helpTextKey, title, ...rest}) { + return ( + {getHelpText(helpTextKey)}} + trigger="click" + {...rest}> + + + ); +} diff --git a/src/ctl/ui/src/components/MappingRuleEditor.js b/src/ctl/ui/src/components/MappingRuleEditor.js index 6f4ada7541..deaee1e63a 100644 --- a/src/ctl/ui/src/components/MappingRuleEditor.js +++ b/src/ctl/ui/src/components/MappingRuleEditor.js @@ -25,7 +25,7 @@ import * as util from 'utils'; import yup from 'yup'; import PoliciesEditor from './PolicyEditor'; import {filterPoliciesBasedOnTag} from 'utils'; - +import {getHelpText} from 'utils/helpText'; const schema = yup.object().shape({ name: yup.string('Name filter is required').required(), filter: yup.string().required('Metric filter is required'), @@ -59,7 +59,7 @@ function MappingRuleEditor({ + help={getHelpText('metric-filter')}> + help={getHelpText('policy')}> + Metric Filter + + } dataIndex="filter" render={filter => {filter}} /> + Policies + + } dataIndex="policies" render={policies => { return _.map(policies, policy => {policy}); @@ -93,7 +101,11 @@ function MappingRulesTable(props) { render={timestamp => formatTimestampMilliseconds(timestamp)} /> + Effective Time (Local) + + } dataIndex="cutoverMillis" render={cutoverMillis => formatTimestampMilliseconds(cutoverMillis)} /> diff --git a/src/ctl/ui/src/components/PolicyEditor.js b/src/ctl/ui/src/components/PolicyEditor.js index 48749b793a..3c74f21c90 100644 --- a/src/ctl/ui/src/components/PolicyEditor.js +++ b/src/ctl/ui/src/components/PolicyEditor.js @@ -24,6 +24,8 @@ import React from 'react'; import {Select, Icon, Button} from 'antd'; import _ from 'lodash'; +import HelpTooltip from './HelpTooltip'; + export const AGGREGATION_FUNCTIONS = [ 'Min', 'Max', @@ -136,7 +138,10 @@ export function PolicyEditor(props: Props) { )}
- + { - onChange(policies.concat(_.first(POLICIES))); + onChange((policies || []).concat(_.first(POLICIES))); }}> Add Policy diff --git a/src/ctl/ui/src/components/RollupRuleEditor.js b/src/ctl/ui/src/components/RollupRuleEditor.js index d7eecb23d1..4716492bf0 100644 --- a/src/ctl/ui/src/components/RollupRuleEditor.js +++ b/src/ctl/ui/src/components/RollupRuleEditor.js @@ -26,6 +26,8 @@ import {withFormik} from 'formik'; import * as util from 'utils'; import PoliciesEditor from './PolicyEditor'; import {filterPoliciesBasedOnTag} from 'utils'; +import {getHelpText} from 'utils/helpText'; +import HelpTooltip from './HelpTooltip'; // @TODO Move to config service const REQUIRED_TAGS = ['dc', 'env', 'service', 'type']; @@ -74,7 +76,7 @@ function RollupRuleEditor({values, handleChange, handleSubmit, setFieldValue}) { required colon={false} label="Metric Filter" - help="eg. tag1:value1 tag2:value2" + help={getHelpText('metric-filter')} {...formItemLayout}>
- + + Targets + + } + colon={false} + {...formItemLayout}> { }> - + handleChange(i, 'name', e.target.value)} /> - -
+ +
{_.map(REQUIRED_TAGS, requiredTag => {requiredTag})}

Namespaces

-

A list of all namespaces

+

{getHelpText('namespace')}

+ + -
); diff --git a/src/ctl/ui/src/utils/helpText.js b/src/ctl/ui/src/utils/helpText.js new file mode 100644 index 0000000000..67fa55ff21 --- /dev/null +++ b/src/ctl/ui/src/utils/helpText.js @@ -0,0 +1,27 @@ +const helpText = { + namespace: + 'Logical grouping of rules. The namespace name must be a valid service name.', + 'mapping-rule': + 'Configure the resolution, retention, and optional custom aggregation functions for metrics matching the filter.', + 'rollup-rule': + 'Configure how to roll up metrics matching the filter and the corresponding policies. A matching metric triggers the generation of a new rollup metric whose name, tags, and policies are defined by the rollup targets. ', + 'metric-filter': + ' A list of tag name:glob pattern pairs identifying matching metrics.', + policy: + 'Defines the resolution, retention period, and optional custom aggregation functions for given metric.', + target: + 'Defines how a new rollup metric is generated and its policies. The rollup metric will use “Rollup Metric Name” as its name, “Rollup Tags” as its tags, and “Policies” as its policies. ', + 'rollup-tag': 'Tags retained by the generated rollup metric.', + 'resolution:retention-period': + 'Describes the resolution at which the metric will be aggregated, and how long the metric will be stored for. ', + 'aggregation-function': + 'Defines how the given metric is aggregated. For example, an aggregation function of P99 returns the 99th percentile of the given metric.', + 'effective-time': 'The time at which the rule will be in effect', +}; + +export function getHelpText(helpTextKey) { + if (!helpText[helpTextKey]) { + console.error(`The helpKey: ${helpTextKey} does not exist`); // eslint-disable-line + } + return helpText[helpTextKey] || ''; +}