[UI] Style and Help text changes (#29)

* Move new namespace input
* Help text

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 (
+    <Popover
+      title={title}
+      content={<div style={{maxWidth: 200}}>{getHelpText(helpTextKey)}</div>}
+      trigger="click"
+      {...rest}>
+      <Icon
+        style={{cursor: 'pointer', color: 'rgba(0,0,0,0.3)'}}
+        type="question-circle-o"
+      />
+    </Popover>
+  );
+}

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({
           <FormItem
             required="true"
             colon={false}
-            label="Name"
+            label="Rule Name"
             {...formItemLayout}>
             <Input
               name="name"
@@ -75,7 +75,7 @@ function MappingRuleEditor({
             colon={false}
             label="Metric Filter"
             {...formItemLayout}
-            help="eg. tag1:value1 tag2:value2">
+            help={getHelpText('metric-filter')}>
             <Input
               name="filter"
               autoComplete="off"
@@ -97,7 +97,7 @@ function MappingRuleEditor({
             required={true}
             label="Policies"
             {...formItemLayout}
-            help="eg:1m:10d = 1 min resolution for 10 days">
+            help={getHelpText('policy')}>
             <PoliciesEditor
               typeTag={typeTag}
               value={values.policies}

src/ctl/ui/src/components/MappingRulesTable.js

@@ -26,7 +26,7 @@ import TableActions from './TableActions';
 import {compose} from 'recompose';
 import {connectR2API} from 'hocs';
 import {formatTimestampMilliseconds} from 'utils';
-
+import HelpTooltip from './HelpTooltip';
 const {Column} = Table;
 
 function MappingRuleHistoryBase(props) {
@@ -71,12 +71,20 @@ function MappingRulesTable(props) {
       locale={{emptyText: 'No mapping rules'}}>
       <Column fixed="left" title="Rule Name" dataIndex="name" width={100} />
       <Column
-        title="Metric Filter"
+        title={
+          <div>
+            Metric Filter <HelpTooltip helpTextKey="metric-filter" />
+          </div>
+        }
         dataIndex="filter"
         render={filter => <code>{filter}</code>}
       />
       <Column
-        title="Policies"
+        title={
+          <div>
+            Policies <HelpTooltip helpTextKey="policy" />
+          </div>
+        }
         dataIndex="policies"
         render={policies => {
           return _.map(policies, policy => <Tag key={policy}>{policy}</Tag>);
@@ -93,7 +101,11 @@ function MappingRulesTable(props) {
         render={timestamp => formatTimestampMilliseconds(timestamp)}
       />
       <Column
-        title="Effective Time (Local)"
+        title={
+          <div>
+            Effective Time (Local) <HelpTooltip helpTextKey="effective-time" />
+          </div>
+        }
         dataIndex="cutoverMillis"
         render={cutoverMillis => formatTimestampMilliseconds(cutoverMillis)}
       />

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) {
         </a>
       )}
       <div className="col col-6 px1">
-        <label className="block pb1">Resolution:Retention Period</label>
+        <label className="block pb1">
+          Resolution:Retention Period{' '}
+          <HelpTooltip helpTextKey="resolution:retention-period" />
+        </label>
         <Select
           placeholder="Select a policy"
           value={policy.timePolicy}
@@ -155,7 +160,10 @@ export function PolicyEditor(props: Props) {
         )}
       </div>
       <div className="col col-6" style={{opacity: showAggs ? 1 : 0.5}}>
-        <label className="block pb1">Aggregation Functions</label>
+        <label className="block pb1">
+          Aggregation Functions{' '}
+          <HelpTooltip helpTextKey="aggregation-function" />
+        </label>
         {showAggs ? (
           <Select
             placeholder="Use default if none selected"
@@ -218,7 +226,7 @@ function PoliciesEditor(props) {
           size="small"
           type="dashed"
           onClick={() => {
-            onChange(policies.concat(_.first(POLICIES)));
+            onChange((policies || []).concat(_.first(POLICIES)));
           }}>
           Add Policy
         </Button>

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}>
             <Input
               name="filter"
@@ -86,14 +88,22 @@ function RollupRuleEditor({values, handleChange, handleSubmit, setFieldValue}) {
                   ...t,
                   policies: filterPoliciesBasedOnTag(t.policies, newTypeTag),
                 }));
-                setFieldValue('targets', targets);
+                setFieldValue('target', targets);
                 handleChange(e);
               }}
             />
           </FormItem>
         </div>
         <div className="col col-12 px1">
-          <FormItem required label="Targets" colon={false} {...formItemLayout}>
+          <FormItem
+            required
+            label={
+              <span>
+                Targets <HelpTooltip helpTextKey="target" />
+              </span>
+            }
+            colon={false}
+            {...formItemLayout}>
             <TargetsEditor
               typeTag={typeTag}
               value={values.targets}
@@ -134,13 +144,16 @@ const TargetsEditorBase = props => {
                 <Icon type="delete" />
               </a>
             }>
-            <label>New Rollup Metric Name</label>
+            <label className="mb1">Rollup Metric Name</label>
             <Input
+              className="mb2"
               value={t.name}
               onChange={e => handleChange(i, 'name', e.target.value)}
             />
-            <label>Rollup Tags</label>
-            <div>
+            <label>
+              Rollup Tags <HelpTooltip helpTextKey="rollup-tag" />
+            </label>
+            <div className="mb2">
               {_.map(REQUIRED_TAGS, requiredTag => <Tag>{requiredTag}</Tag>)}
               <Select
                 className="inline-block"
@@ -155,7 +168,9 @@ const TargetsEditorBase = props => {
                 notFoundContent={false}
               />
             </div>
-            <label>Policies</label>
+            <label>
+              Policies <HelpTooltip helpTextKey="policy" />
+            </label>
             <PoliciesEditor
               typeTag={typeTag}
               value={t.policies}

src/ctl/ui/src/components/RollupRulesTable.js

@@ -24,6 +24,7 @@ import _ from 'lodash';
 
 import RollupRuleEditor from 'components/RollupRuleEditor';
 import TableActions from './TableActions';
+import HelpTooltip from './HelpTooltip';
 import {compose} from 'recompose';
 import {connectR2API} from 'hocs';
 import {formatTimestampMilliseconds} from 'utils';
@@ -109,12 +110,20 @@ function RollupRulesTable(props) {
       locale={{emptyText: 'No rollup rules'}}>
       <Column fixed="left" title="Rule Name" dataIndex="name" width={100} />
       <Column
-        title="Metric Filter"
+        title={
+          <div>
+            Metric Filter <HelpTooltip helpTextKey="metric-filter" />
+          </div>
+        }
         dataIndex="filter"
         render={filter => <code>{filter}</code>}
       />
       <Column
-        title="Targets"
+        title={
+          <div>
+            Target <HelpTooltip helpTextKey="target" />
+          </div>
+        }
         dataIndex="targets"
         render={targets => {
           return _.map(targets, (target, i) => (
@@ -133,7 +142,11 @@ function RollupRulesTable(props) {
         render={timestamp => formatTimestampMilliseconds(timestamp)}
       />
       <Column
-        title="Effective Time (Local)"
+        title={
+          <div>
+            Effective Time (Local) <HelpTooltip helpTextKey="effective-time" />
+          </div>
+        }
         dataIndex="cutoverMillis"
         render={cutoverMillis => formatTimestampMilliseconds(cutoverMillis)}
       />

src/ctl/ui/src/index.css

@@ -7,3 +7,6 @@ body {
   height: 100%
 }
 
+.ant-form-item-control {
+  line-height: inherit
+}

src/ctl/ui/src/pages/Namespace.js

@@ -28,6 +28,7 @@ import MappingRuleEditor from 'components/MappingRuleEditor';
 import MappingRulesTable from 'components/MappingRulesTable';
 import RollupRuleEditor from 'components/RollupRuleEditor';
 import RollupRulesTable from 'components/RollupRulesTable';
+import {getHelpText} from 'utils/helpText';
 
 const TabPane = Tabs.TabPane;
 
@@ -66,11 +67,13 @@ function Namespace(props) {
           }}>
           <TabPane tab="Mapping Rules" key="mapping-rules">
             <div className="mb2 clearfix">
-              <div className="left">
+              <div className="col col-9">
                 <h3>Mapping Rules</h3>
+                <p>{getHelpText('mapping-rule')}</p>
               </div>
-              <div className="right">
+              <div className="col col-3">
                 <Button
+                  className="right"
                   icon="plus"
                   onClick={() =>
                     props.setModal({
@@ -103,11 +106,13 @@ function Namespace(props) {
           </TabPane>
           <TabPane tab="Rollup Rules" key="rollup-rules">
             <div className="mb2 clearfix">
-              <div className="left">
+              <div className="col col-9">
                 <h3>Rollup Rules</h3>
+                <p>{getHelpText('rollup-rule')}</p>
               </div>
-              <div className="right">
+              <div className="col col-3">
                 <Button
+                  className="right"
                   icon="plus"
                   onClick={() =>
                     props.setModal({

src/ctl/ui/src/pages/Namespaces.js

@@ -24,7 +24,7 @@ import {Button, Card, Input, Popconfirm, Table, Icon} from 'antd';
 import _ from 'lodash';
 import {Link} from 'react-router-dom';
 import {connectR2API, withFilter} from 'hocs';
-
+import {getHelpText} from 'utils/helpText';
 const {Column} = Table;
 
 function NamespaceTable(props) {
@@ -68,8 +68,9 @@ function NamespaceTable(props) {
 function CreateNamespaceFormBase(props) {
   const {namespace, onNamespaceChange, onSaveClick} = props;
   return (
-    <div>
+    <div className="mb1">
       <Input
+        placeholder="Namespace Name"
         onPressEnter={onSaveClick}
         style={{width: 200}}
         className="inline-block mr1"
@@ -104,17 +105,18 @@ function Namespaces(props) {
     <div>
       <div className="mb2">
         <h2>Namespaces</h2>
-        <p style={{color: 'gray'}}>A list of all namespaces</p>
+        <p style={{color: 'gray'}}>{getHelpText('namespace')}</p>
       </div>
       <Card>
+        <CreateNamespaceForm onSaveNamespace={props.saveNamespace} />
+
         <Input
           className="mb1"
           value={props.nameFilter}
           onChange={e => props.setNameFilter(e.target.value)}
           placeholder="Namespace Filter"
         />
         <NamespaceTable {...props} />
-        <CreateNamespaceForm onSaveNamespace={props.saveNamespace} />
       </Card>
     </div>
   );

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] || '';
+}