Apply UI fixes and updates

m3db · Oct 16, 2017 · 51e18c3 · 51e18c3
1 parent 989b21a
commit 51e18c3
Show file tree

Hide file tree

Showing 11 changed files with 456 additions and 174 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -7,6 +7,7 @@
     "antd": "^2.12.5",
     "axios": "^0.16.2",
     "basscss": "^8.0.3",
+    "formik": "^0.9.4",
     "lodash": "^4.17.4",
     "moment": "2.18.1",
     "nprogress": "^0.2.0",
@@ -16,7 +17,8 @@
     "react-refetch": "^1.0.0",
     "react-router-dom": "^4.1.2",
     "react-scripts": "1.0.10",
-    "recompose": "^0.24.0"
+    "recompose": "^0.24.0",
+    "yup": "^0.22.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/ui/public/index.html b/ui/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>M3Ctrl</title>
+    <title>R2Ctrl</title>
   </head>
   <body>
     <noscript>

diff --git a/ui/src/components/MappingRuleEditor.js b/ui/src/components/MappingRuleEditor.js
@@ -19,113 +19,109 @@
 // THE SOFTWARE.
 
 import React from 'react';
-import {Button, Input, Form, Select} from 'antd';
+import {Button, Input, Form} from 'antd';
+import {withFormik} from 'formik';
+import _ from 'lodash';
+import * as util from 'utils';
+import yup from 'yup';
+import PoliciesEditor from './PolicyEditor';
+
+const schema = yup.object().shape({
+  name: yup.string('Name filter is required').required(),
+  filter: yup.string().required('Metric filter is required'),
+});
 
 const FormItem = Form.Item;
-const Option = Select.Option;
 const formItemLayout = {
   labelCol: {
     xs: {span: 24},
-    sm: {span: 6},
+    sm: {span: 4},
   },
   wrapperCol: {
     xs: {span: 24},
-    sm: {span: 14},
+    sm: {span: 18},
   },
 };
-function MappingRuleEditor({mappingRule, form, onSubmit}) {
-  const {getFieldDecorator} = form;
+function MappingRuleEditor({
+  mappingRule,
+  values,
+  handleChange,
+  handleSubmit,
+  setFieldValue,
+  ...rest
+}) {
+  const typeTag = util.getTypeTag(values.filter);
+
   return (
-    <Form
-      layout="horizontal"
-      onSubmit={e => {
-        e.preventDefault();
-        form.validateFields((err, values) => {
-          if (!err) {
-            onSubmit({
-              ...mappingRule,
-              ...values,
-            });
-          }
-        });
-      }}>
+    <Form layout="horizontal" onSubmit={handleSubmit}>
       <div className="clearfix">
         <div className="col col-12">
-          <FormItem colon={false} label="Name" {...formItemLayout}>
-            {getFieldDecorator('name', {
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(<Input autoComplete="off" />)}
+          <FormItem
+            required="true"
+            colon={false}
+            label="Name"
+            {...formItemLayout}>
+            <Input
+              name="name"
+              autoComplete="off"
+              value={values.name}
+              onChange={handleChange}
+            />
           </FormItem>
         </div>
         <div className="col col-12">
           <FormItem
+            required="true"
             colon={false}
             label="Metric Filter"
             {...formItemLayout}
             help="eg. tag1:value1 tag2:value2">
-            {getFieldDecorator('filter', {
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(<Input autoComplete="off" />)}
+            <Input
+              name="filter"
+              autoComplete="off"
+              value={values.filter}
+              onChange={(...e) => {
+                const newTypeTag = util.getTypeTag(e[0].target.value);
+                if (!_.includes(['gauge', 'counter'], newTypeTag)) {
+                  const newValues = values.policies.filter(
+                    p => !p.startsWith('10m'),
+                  );
+                  setFieldValue('policies', newValues);
+                }
+                handleChange(...e);
+              }}
+            />
           </FormItem>
         </div>
         <div className="col col-12">
           <FormItem
             colon={false}
+            required={true}
             label="Policies"
             {...formItemLayout}
-            help="eg:1m:10d = 1 min granularity for 10 days">
-            {getFieldDecorator('policies', {
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(
-              <Select
-                autoComplete="off"
-                mode="tags"
-                style={{width: '100%'}}
-                tokenSeparators={[',']}
-                notFoundContent={false}>
-                {['1m:10d'].map(opt =>
-                  <Option key={opt}>
-                    {opt}
-                  </Option>,
-                )}
-              </Select>,
-            )}
+            help="eg:1m:10d = 1 min resolution for 10 days">
+            <PoliciesEditor
+              typeTag={typeTag}
+              value={values.policies}
+              onChange={e => setFieldValue('policies', e)}
+            />
           </FormItem>
         </div>
-        <div className="clearfix my1">
-          <Button type="primary" htmlType="submit" className="right">
-            Add
-          </Button>
-        </div>
+        <Button type="primary" htmlType="submit" className="right">
+          Add
+        </Button>
       </div>
     </Form>
   );
 }
 
-export default Form.create({
-  mapPropsToFields({mappingRule = {}}) {
-    return {
-      name: {
-        value: mappingRule.name,
-      },
-      filter: {
-        value: mappingRule.filter,
-      },
-      policies: {
-        value: mappingRule.policies,
-      },
-    };
+export default withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({mappingRule}) => {
+    return mappingRule;
+  },
+  handleSubmit: (values, {props}) => {
+    props.onSubmit(values);
   },
+  validationSchema: schema,
 })(MappingRuleEditor);
diff --git a/ui/src/components/MappingRulesTable.js b/ui/src/components/MappingRulesTable.js
@@ -32,6 +32,7 @@ function MappingRuleHistoryBase(props) {
   const mappingRules = _.get(props.mappingRuleHistory, 'value.mappingRules');
   return (
     <MappingRulesTable
+      rowKey={(__, index) => index}
       mappingRules={mappingRules}
       loading={loading}
       showActions={false}
@@ -65,7 +66,7 @@ function MappingRulesTable(props) {
       dataSource={mappingRules}
       rowKey={rowKey}
       locale={{emptyText: 'No mapping rules'}}>
-      <Column title="Name" dataIndex="name" />
+      <Column title="Rule Name" dataIndex="name" />
       <Column
         title="Metric Filter"
         dataIndex="filter"
@@ -78,6 +79,11 @@ function MappingRulesTable(props) {
           return _.map(policies, policy => <Tag key={policy}>{policy}</Tag>);
         }}
       />
+      <Column
+        title="Last Updated By"
+        dataIndex="lastUpdatedBy"
+        render={user => user || 'N/A'}
+      />
       {showActions && (
         <Column
           width={200}