From 51e18c3db6f7f267297adb0fd0d698d5877303ce Mon Sep 17 00:00:00 2001
From: Xi Chen <xichen@uber.com>
Date: Sun, 15 Oct 2017 21:43:03 -0400
Subject: [PATCH] Apply UI fixes and updates

---
 ui/package.json                        |   4 +-
 ui/public/index.html                   |   2 +-
 ui/src/components/MappingRuleEditor.js | 142 ++++++++--------
 ui/src/components/MappingRulesTable.js |   8 +-
 ui/src/components/PolicyEditor.js      | 226 +++++++++++++++++++++++++
 ui/src/components/RollupRuleEditor.js  | 148 ++++++++--------
 ui/src/components/RollupRulesTable.js  |   9 +-
 ui/src/pages/Namespace.js              |  31 ++--
 ui/src/utils/index.js                  |   7 +
 ui/src/utils/index.test.js             |   8 +
 ui/yarn.lock                           |  45 ++++-
 11 files changed, 456 insertions(+), 174 deletions(-)
 create mode 100644 ui/src/components/PolicyEditor.js
 create mode 100644 ui/src/utils/index.js
 create mode 100644 ui/src/utils/index.test.js
diff --git a/ui/package.json b/ui/package.json
index 8a212f2..767ac63 100644
--- 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
index 7574cca..680570d 100644
--- 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
index 26425a7..f594767 100644
--- 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
index 080521b..21404c7 100644
--- 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}
diff --git a/ui/src/components/PolicyEditor.js b/ui/src/components/PolicyEditor.js
new file mode 100644
index 0000000..3048a91
--- /dev/null
+++ b/ui/src/components/PolicyEditor.js
@@ -0,0 +1,226 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import {Select, Icon, Button} from 'antd';
+import _ from 'lodash';
+
+export const AGGREGATION_FUNCTIONS = [
+  'Min',
+  'Max',
+  'Mean',
+  'Median',
+  'Count',
+  'Sum',
+  'SumSq',
+  'Stdev',
+  'P10',
+  'P20',
+  'P30',
+  'P40',
+  'P50',
+  'P60',
+  'P70',
+  'P80',
+  'P90',
+  'P95',
+  'P99',
+  'P999',
+  'P9999',
+];
+
+export const POLICIES = [
+  '1s:1h',
+  '10s:6h',
+  '10s:12h',
+  '10s:1d',
+  '10s:2d',
+  '1m:2d',
+  '1m:7d',
+  '1m:14d',
+  '1m:40d',
+  '10m:2d',
+  '10m:7d',
+  '10m:14d',
+  '10m:40d',
+];
+
+const Option = Select.Option;
+
+type Props = {
+  value: any,
+  onChange: e => any,
+  showDelete: boolean,
+  onDeleteClicked: () => any,
+  typeTag: string,
+};
+
+type PolicyObject = {
+  timePolicy: string,
+  aggFunctions: array<string>,
+};
+
+export function parsePolicy(policy: string): PolicyObject {
+  const policyParsed = policy.split('|');
+  return {
+    timePolicy: _.first(policyParsed),
+    aggFunctions: _.chain(policyParsed)
+      .nth(1)
+      .thru(value => {
+        if (_.isEmpty(value)) {
+          return [];
+        }
+        return value.split(',');
+      })
+      .value(),
+  };
+}
+
+export function stringifyPolicy(policy: PolicyObject): string {
+  return `${policy.timePolicy}${_.isEmpty(policy.aggFunctions)
+    ? ''
+    : `|${policy.aggFunctions.join(',')}`}`;
+}
+
+export function PolicyEditor(props: Props) {
+  const {
+    value = _.first(POLICIES),
+    onDeleteClicked = noop => noop,
+    showDelete = false,
+    onChange = noop => noop,
+    typeTag = '',
+    policyList = POLICIES,
+  } = props;
+  const policy = parsePolicy(value);
+  const handleChange = (field, newValue) => {
+    onChange(
+      stringifyPolicy({
+        ...policy,
+        [field]: newValue,
+      }),
+    );
+  };
+  const showAggs = typeTag === 'timer';
+  let policies = policyList;
+  if (!_.includes(['gauge', 'counter'], typeTag)) {
+    policies = policies.filter(p => !p.startsWith('10m'));
+  }
+
+  return (
+    <div className="clearfix p1 relative" style={{}}>
+      {showDelete && (
+        <a
+          className="absolute"
+          style={{right: 10, top: 10, zIndex: 100}}
+          onClick={onDeleteClicked}>
+          <Icon type="close-circle-o" />
+        </a>
+      )}
+      <div className="col col-6 px1">
+        <label className="block pb1">Resolution:Retention Period</label>
+        <Select
+          placeholder="Select a policy"
+          value={policy.timePolicy}
+          autoComplete="off"
+          onChange={e => {
+            handleChange('timePolicy', e);
+          }}
+          style={{width: '100%'}}
+          notFoundContent={false}>
+          {policies.map(opt => <Option key={opt}>{opt}</Option>)}
+        </Select>
+      </div>
+      <div className="col col-6" style={{opacity: showAggs ? 1 : 0.5}}>
+        <label className="block pb1">Aggregation Functions</label>
+        {showAggs ? (
+          <Select
+            placeholder="Use default if none selected"
+            value={policy.aggFunctions}
+            onChange={e => {
+              handleChange('aggFunctions', e);
+            }}
+            autoComplete="off"
+            mode="tags"
+            style={{width: '100%'}}
+            tokenSeparators={[',']}
+            notFoundContent={false}>
+            {AGGREGATION_FUNCTIONS.map(opt => <Option key={opt}>{opt}</Option>)}
+          </Select>
+        ) : (
+          <small style={{color: 'gray'}}>Only supported for timers</small>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function PoliciesEditor(props) {
+  const {value: policies, onChange, typeTag} = props;
+  return (
+    <div
+      className="clearfix p1"
+      style={{
+        border: '1px solid whitesmoke',
+        lineHeight: 'normal',
+      }}>
+      {_.map(policies, (p, i) => {
+        return (
+          <div
+            key={i}
+            className="clearfix relative mb1"
+            style={{
+              backgroundColor: 'whitesmoke',
+              lineHeight: 'normal',
+            }}>
+            <PolicyEditor
+              onDeleteClicked={() => {
+                _.pullAt(policies, i);
+                onChange(policies);
+              }}
+              showDelete={_.size(policies) > 1}
+              value={p}
+              typeTag={typeTag}
+              onChange={e => {
+                policies[i] = e;
+                onChange(policies);
+              }}
+            />
+          </div>
+        );
+      })}
+      <div className="col col-12">
+        <Button
+          className="right"
+          size="small"
+          type="dashed"
+          onClick={() => {
+            policies.push(_.first(POLICIES));
+            onChange(policies);
+          }}>
+          Add Policy
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default PoliciesEditor;
diff --git a/ui/src/components/RollupRuleEditor.js b/ui/src/components/RollupRuleEditor.js
index 6dae69e..b41c6e4 100644
--- a/ui/src/components/RollupRuleEditor.js
+++ b/ui/src/components/RollupRuleEditor.js
@@ -22,67 +22,78 @@ import React from 'react';
 import {Button, Input, Form, Icon, Select, Card} from 'antd';
 import {toClass} from 'recompose';
 import _ from 'lodash';
+import {withFormik} from 'formik';
+import * as util from 'utils';
+import PoliciesEditor from './PolicyEditor';
+
 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 RollupRuleEditor({form, rollupRule, onSubmit}) {
-  const {getFieldDecorator} = form;
+function RollupRuleEditor({values, handleChange, handleSubmit, setFieldValue}) {
+  const typeTag = util.getTypeTag(values.filter);
   return (
-    <Form
-      onSubmit={e => {
-        e.preventDefault();
-        form.validateFields((err, values) => {
-          if (!err) {
-            onSubmit({
-              ...rollupRule,
-              ...values,
-            });
-          }
-        });
-      }}>
+    <Form onSubmit={handleSubmit}>
       <div className="clearfix">
         <div className="col col-12 px1">
-          <FormItem colon={false} label="Metric Name" {...formItemLayout}>
-            {getFieldDecorator('name', {
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(<Input autoComplete={false} />)}
+          <FormItem
+            required
+            colon={false}
+            label="Rule Name"
+            {...formItemLayout}>
+            <Input
+              name="name"
+              autoComplete="off"
+              value={values.name}
+              onChange={handleChange}
+            />
           </FormItem>
         </div>
         <div className="col col-12 px1">
-          <FormItem colon={false} label="Metric Filter" {...formItemLayout}>
-            {getFieldDecorator('filter', {
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(<Input />)}
+          <FormItem
+            required
+            colon={false}
+            label="Metric Filter"
+            help="eg. tag1:value1 tag2:value2"
+            {...formItemLayout}>
+            <Input
+              name="filter"
+              autoComplete="off"
+              value={values.filter}
+              onChange={(...e) => {
+                const newTypeTag = util.getTypeTag(e[0].target.value);
+                if (!_.includes(['gauge', 'counter'], newTypeTag)) {
+                  const targets = _.map(values.targets, t => {
+                    const newPolicies = t.policies.filter(
+                      p => !p.startsWith('10m'),
+                    );
+                    return {
+                      ...t,
+                      policies: newPolicies,
+                    };
+                  });
+                  setFieldValue('targets', targets);
+                }
+                handleChange(...e);
+              }}
+            />
           </FormItem>
         </div>
         <div className="col col-12 px1">
-          <FormItem label="Targets" colon={false} {...formItemLayout}>
-            {getFieldDecorator('targets', {
-              initialValue: [],
-              rules: [
-                {
-                  required: true,
-                },
-              ],
-            })(<TargetsEditor />)}
+          <FormItem required label="Targets" colon={false} {...formItemLayout}>
+            <TargetsEditor
+              typeTag={typeTag}
+              value={values.targets}
+              onChange={e => setFieldValue('targets', e)}
+            />
           </FormItem>
         </div>
         <div className="clearfix my2">
@@ -96,7 +107,7 @@ function RollupRuleEditor({form, rollupRule, onSubmit}) {
 }
 
 const TargetsEditorBase = props => {
-  const {value: targets = [], onChange, onBlur = noop => noop} = props;
+  const {value: targets = [], onChange, typeTag} = props;
   const handleChange = (index, property, newValue) => {
     targets[index][property] = newValue;
     onChange(targets);
@@ -109,6 +120,7 @@ const TargetsEditorBase = props => {
           <Card
             className="mb1"
             key={i}
+            title={t.name}
             extra={
               <a
                 onClick={() => {
@@ -117,30 +129,13 @@ const TargetsEditorBase = props => {
                 <Icon type="delete" />
               </a>
             }>
-            <label>Name</label>
+            <label>Metric Name</label>
             <Input
-              onBlur={onBlur}
               value={t.name}
               onChange={e => handleChange(i, 'name', e.target.value)}
             />
-            <label>Policy</label>
+            <label>Rollup Tags</label>
             <Select
-              onChange={e => handleChange(i, 'policies', e)}
-              value={t.policies}
-              autoComplete="off"
-              mode="tags"
-              style={{width: '100%'}}
-              tokenSeparators={[',']}
-              notFoundContent={false}>
-              {['1m:10d|Max'].map(opt =>
-                <Option key={opt}>
-                  {opt}
-                </Option>,
-              )}
-            </Select>
-            <label>Tags</label>
-            <Select
-              onBlur={onBlur}
               onChange={e => handleChange(i, 'tags', e)}
               value={t.tags}
               autoComplete="off"
@@ -149,6 +144,12 @@ const TargetsEditorBase = props => {
               tokenSeparators={[',']}
               notFoundContent={false}
             />
+            <label>Policies</label>
+            <PoliciesEditor
+              typeTag={typeTag}
+              value={t.policies}
+              onChange={e => handleChange(i, 'policies', e)}
+            />
           </Card>
         );
       })}
@@ -163,21 +164,12 @@ const TargetsEditorBase = props => {
 };
 const TargetsEditor = toClass(TargetsEditorBase);
 
-export default Form.create({
-  mapPropsToFields({rollupRule = {name: '', filter: '', targets: []}}) {
-    return {
-      name: {
-        value: rollupRule.name,
-      },
-      filter: {
-        value: rollupRule.filter,
-      },
-      targets2: {
-        value: rollupRule.targets,
-      },
-      targets: {
-        value: rollupRule.targets,
-      },
-    };
+export default withFormik({
+  enableReinitialize: true,
+  mapPropsToValues: ({rollupRule}) => {
+    return rollupRule;
+  },
+  handleSubmit: (values, {props}) => {
+    props.onSubmit(values);
   },
 })(RollupRuleEditor);
diff --git a/ui/src/components/RollupRulesTable.js b/ui/src/components/RollupRulesTable.js
index 12ae113..db14ef3 100644
--- a/ui/src/components/RollupRulesTable.js
+++ b/ui/src/components/RollupRulesTable.js
@@ -57,6 +57,7 @@ function RollupRuleHistoryBase(props) {
 
   return (
     <RollupRulesTable
+      rowKey={(__, index) => index}
       rollupRules={rollupRules}
       loading={loading}
       showActions={false}
@@ -102,7 +103,7 @@ function RollupRulesTable(props) {
       dataSource={rollupRules}
       rowKey={rowKey}
       locale={{emptyText: 'No rollup rules'}}>
-      <Column title="Name" dataIndex="name" />
+      <Column title="Rule Name" dataIndex="name" />
       <Column
         title="Metric Filter"
         dataIndex="filter"
@@ -117,6 +118,12 @@ function RollupRulesTable(props) {
           ));
         }}
       />
+      <Column
+        title="Last Updated By"
+        dataIndex="lastUpdatedBy"
+        render={user => user || 'N/A'}
+      />
+
       {showActions && (
         <Column
           width={200}
diff --git a/ui/src/pages/Namespace.js b/ui/src/pages/Namespace.js
index 7ca4f19..254f702 100644
--- a/ui/src/pages/Namespace.js
+++ b/ui/src/pages/Namespace.js
@@ -36,16 +36,12 @@ function Namespace(props) {
   return (
     <div>
       <div className="mb2">
-        <h2>
-          Namespace: {namespaceID}
-        </h2>
+        <h2>Namespace: {namespaceID}</h2>
         <Breadcrumb>
           <Breadcrumb.Item>
             <Link to="/namespaces">All Namespaces</Link>
           </Breadcrumb.Item>
-          <Breadcrumb.Item>
-            {namespaceID}
-          </Breadcrumb.Item>
+          <Breadcrumb.Item>{namespaceID}</Breadcrumb.Item>
         </Breadcrumb>
       </div>
       <Card className="mb2" style={{minHeight: 500}}>
@@ -194,7 +190,7 @@ export default compose(
         return {
           saveRollupRuleFetch: {
             meta: {
-              successMessage: 'Mapping rule saved!',
+              successMessage: 'Rollup rule saved!',
             },
             url: `/namespaces/${namespaceID}/rollup-rules${urlPath}`,
             method,
@@ -243,15 +239,14 @@ export default compose(
     },
     props => ({open: false, content: null}),
   ),
-  withPromiseStateChangeCallback(
-    ['saveMappingRuleFetch', 'saveRollupRuleFetch'],
-    props => {
-      if (
-        props.saveMappingRuleFetch.fulfilled ||
-        props.saveRollupRuleFetch.fulfilled
-      ) {
-        props.setModal({open: false});
-      }
-    },
-  ),
+  withPromiseStateChangeCallback(['saveRollupRuleFetch'], props => {
+    if (props.saveRollupRuleFetch.fulfilled) {
+      props.setModal({open: false});
+    }
+  }),
+  withPromiseStateChangeCallback(['saveMappingRuleFetch'], props => {
+    if (props.saveMappingRuleFetch.fulfilled) {
+      props.setModal({open: false});
+    }
+  }),
 )(Namespace);
diff --git a/ui/src/utils/index.js b/ui/src/utils/index.js
new file mode 100644
index 0000000..230add8
--- /dev/null
+++ b/ui/src/utils/index.js
@@ -0,0 +1,7 @@
+import _ from 'lodash';
+
+export function getTypeTag(tagString) {
+  const regex = /type:([^\s]*)/g;
+  const results = regex.exec(tagString);
+  return _.nth(results, 1) || null;
+}
diff --git a/ui/src/utils/index.test.js b/ui/src/utils/index.test.js
new file mode 100644
index 0000000..c53e1a4
--- /dev/null
+++ b/ui/src/utils/index.test.js
@@ -0,0 +1,8 @@
+import {getTypeTag} from './index';
+
+test('getTypeTag', () => {
+  expect(getTypeTag('type:timer')).toBe('timer');
+  expect(getTypeTag('type:a')).toBe('a');
+  expect(getTypeTag('this:test type')).toBe(null);
+  expect(getTypeTag('type:counts ')).toBe('counts');
+});
diff --git a/ui/yarn.lock b/ui/yarn.lock
index c64315c..d057baa 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1432,6 +1432,10 @@ case-sensitive-paths-webpack-plugin@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.1.1.tgz#3d29ced8c1f124bf6f53846fb3f5894731fdc909"
 
+case@^1.2.1:
+  version "1.5.3"
+  resolved "https://unpm.uberinternal.com/case/-/case-1.5.3.tgz#b201631ac42e6e5b41b8baaf46f25006676e15c6"
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -2870,6 +2874,10 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+fn-name@~1.0.1:
+  version "1.0.1"
+  resolved "https://unpm.uberinternal.com/fn-name/-/fn-name-1.0.1.tgz#de8d8a15388b33cbf2145782171f73770c6030f0"
+
 follow-redirects@^1.2.3:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.2.4.tgz#355e8f4d16876b43f577b0d5ce2668b9723214ea"
@@ -2910,6 +2918,14 @@ form-data@~2.3.1:
     combined-stream "^1.0.5"
     mime-types "^2.1.12"
 
+formik@^0.9.4:
+  version "0.9.4"
+  resolved "https://unpm.uberinternal.com/formik/-/formik-0.9.4.tgz#e284620539c54d7d052c1950230b1e44c5acc6a4"
+  dependencies:
+    lodash.isequal "4.5.0"
+    prop-types "^15.5.10"
+    warning "^3.0.0"
+
 forwarded@~0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -4295,6 +4311,10 @@ lodash.isarray@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
 
+lodash.isequal@4.5.0:
+  version "4.5.0"
+  resolved "https://unpm.uberinternal.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+
 lodash.keys@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
@@ -4328,7 +4348,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.11.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.5, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
+"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.11.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.5, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -5364,6 +5384,10 @@ prop-types@15.x, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, pr
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
 
+property-expr@^1.2.0:
+  version "1.3.1"
+  resolved "https://unpm.uberinternal.com/property-expr/-/property-expr-1.3.1.tgz#53f4af8ecd3c6db00ed98b8e0f6affbe880faa0a"
+
 proxy-addr@~1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.5.tgz#71c0ee3b102de3f202f3b64f608d173fcba1a918"
@@ -6886,6 +6910,10 @@ to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
 
+toposort@^0.2.10:
+  version "0.2.12"
+  resolved "https://unpm.uberinternal.com/toposort/-/toposort-0.2.12.tgz#c7d2984f3d48c217315cc32d770888b779491e81"
+
 toposort@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.3.tgz#f02cd8a74bd8be2fc0e98611c3bacb95a171869c"
@@ -6939,6 +6967,10 @@ type-is@~1.6.15:
     media-typer "0.3.0"
     mime-types "~2.1.15"
 
+type-name@^2.0.1:
+  version "2.0.2"
+  resolved "https://unpm.uberinternal.com/type-name/-/type-name-2.0.2.tgz#efe7d4123d8ac52afff7f40c7e4dec5266008fb4"
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -7441,3 +7473,14 @@ yargs@~3.10.0:
     cliui "^2.1.0"
     decamelize "^1.0.0"
     window-size "0.1.0"
+
+yup@^0.22.0:
+  version "0.22.0"
+  resolved "https://unpm.uberinternal.com/yup/-/yup-0.22.0.tgz#d25e226fdf2508a8eea3ff1eac20c5e1bb488bc3"
+  dependencies:
+    case "^1.2.1"
+    fn-name "~1.0.1"
+    lodash "^4.17.0"
+    property-expr "^1.2.0"
+    toposort "^0.2.10"
+    type-name "^2.0.1"
