Build markup for values section

ui/src/kapacitor/components/ValuesSection.js

@@ -0,0 +1,146 @@
+import React, {PropTypes} from 'react';
+import Dropdown from 'src/shared/components/Dropdown';
+import {Tab, TabList, TabPanels, TabPanel, Tabs} from 'shared/components/Tabs';
+
+const TABS = ['Threshold', 'Relative', 'Deadman'];
+export const ValuesSection = React.createClass({
+  propTypes: {
+    rule: PropTypes.shape({}).isRequired,
+  },
+
+  render() {
+    return (
+      <div className="container-fluid">
+        <div className="row">
+          <div className="col-md-12">
+            <Tabs onSelect={this.handleActivateTab}>
+              <TabList>
+                {TABS.map(tab => <Tab key={tab}>{tab}</Tab>)}
+              </TabList>
+
+              <TabPanels>
+                <TabPanel>
+                  <Threshold />
+                </TabPanel>
+                <TabPanel>
+                  <Relative />
+                </TabPanel>
+                <TabPanel>
+                  <Deadman />
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </div>
+        </div>
+      </div>
+    );
+  },
+});
+
+const Threshold = React.createClass({
+  getInitialState() {
+    return {
+      operator: 'Greater than',
+      value: null,
+      relation: 'more than',
+      percentile: null,
+      duration: '1m',
+    };
+  },
+
+  handleSelectFromDropdown(stateKey, item) {
+    this.setState({[stateKey]: item.text});
+  },
+
+  handleTypeValue(e) {
+    this.setState({value: e.target.value});
+  },
+
+  render() {
+    const operators = [{text: 'equal to or greater'}, {text: 'greater than'}, {text: 'less than'}, {text: 'equal to'}, {text: 'not equal to'}];
+    const relations = [{text: 'once'}, {text: 'more than '}, {text: 'less than'}];
+    const durations = [{text: '1m'}, {text: '5m'}, {text: '10m'}, {text: '30m'}, {text: '1h'}, {text: '2h'}, {text: '1h'}];
+
+    return (
+      <div className="u-flex u-jc-space-around u-ai-center">
+        Value is
+        <Dropdown items={operators} selected={this.state.operator} onChoose={(i) => this.handleSelectFromDropdown('operator', i)} />
+        <input placeholder="90" onKeyUp={this.handleTypeValue}></input>
+        <Dropdown items={relations} selected={this.state.relation} onChoose={(i) => this.handleSelectFromDropdown('relation', i)} />
+        <input placeholder="50%" onKeyUp={this.handleTypePercentile}></input>
+        during the last
+        <Dropdown items={durations} selected={this.state.duration} onChoose={(i) => this.handleSelectFromDropdown('duration', i)} />
+      </div>
+    );
+  },
+});
+
+const Relative = React.createClass({
+  getInitialState() {
+    return {
+      func: 'average',
+      change: 'change',
+      duration: '1m',
+      compareDuration: '1m',
+      operator: 'greater than',
+      value: null,
+    };
+  },
+
+  handleSelectFromDropdown(stateKey, item) {
+    this.setState({[stateKey]: item.text});
+  },
+
+  handleTypePercentile(e) {
+    this.setState({percentile: e.target.value});
+  },
+
+  render() {
+    const funcs = [{text: 'greater than'}, {text: 'less than'}, {text: 'equal to'}, {text: 'not equal to'}];
+    const changes = [{text: 'change'}, {text: '% change'}];
+    const durations = [{text: '1m'}, {text: '5m'}, {text: '10m'}, {text: '30m'}, {text: '1h'}, {text: '2h'}, {text: '1h'}];
+    const compareDurations = [{text: '1m'}, {text: '5m'}, {text: '10m'}, {text: '30m'}, {text: '1h'}, {text: '2h'}, {text: '1h'}];
+    const operators = [{text: 'greater than'}, {text: 'less than'}, {text: 'equal to'}, {text: 'not equal to'}];
+
+    return (
+      <div className="u-flex u-jc-space-around u-ai-center">
+        The
+        <Dropdown items={funcs} selected={this.state.func} onChoose={(i) => this.handleSelectFromDropdown('func', i)} />
+        of the
+        <Dropdown items={changes} selected={this.state.change} onChoose={(i) => this.handleSelectFromDropdown('change', i)} />
+        over
+        <Dropdown items={durations} selected={this.state.duration} onChoose={(i) => this.handleSelectFromDropdown('duration', i)} />
+        compared to
+        <Dropdown items={compareDurations} selected={this.state.compareDuration} onChoose={(i) => this.handleSelectFromDropdown('compareDuration', i)} />
+        before is
+        <Dropdown items={operators} selected={this.state.operator} onChoose={(i) => this.handleSelectFromDropdown('operator', i)} />
+        <input placeholder="50" onKeyUp={this.handleTypePercentile}></input>%
+      </div>
+    );
+  },
+});
+
+const Deadman = React.createClass({
+  getInitialState() {
+    return {
+      duration: '1m',
+    };
+  },
+
+  handleSelectDuration(item) {
+    this.setState({duration: item.text});
+  },
+
+  render() {
+    const durations = [{text: '1m'}, {text: '5m'}, {text: '10m'}, {text: '30m'}, {text: '1h'}, {text: '2h'}, {text: '1h'}];
+
+    return (
+      <div className="u-flex u-ai-center">
+        Create an alert if data is missing for
+        <Dropdown items={durations} selected={this.state.duration} onChoose={this.handleSelectDuration} />
+      </div>
+    );
+  },
+});
+
+export default ValuesSection;

ui/src/shared/components/Dropdown.js

@@ -8,7 +8,6 @@ const Dropdown = React.createClass({
     })).isRequired,
     onChoose: PropTypes.func.isRequired,
     selected: PropTypes.string.isRequired,
-    children: PropTypes.node,
     className: PropTypes.string,
   },
   getInitialState() {
@@ -16,6 +15,11 @@ const Dropdown = React.createClass({
       isOpen: false,
     };
   },
+  getDefaultProps() {
+    return {
+      actions: [],
+    };
+  },
   handleClickOutside() {
     this.setState({isOpen: false});
   },
@@ -32,7 +36,7 @@ const Dropdown = React.createClass({
   },
   render() {
     const self = this;
-    const {items, selected, className} = self.props;
+    const {items, selected, className, actions} = self.props;
 
     return (
       <div onClick={this.toggleMenu} className={`dropdown ${className}`}>
@@ -49,7 +53,7 @@ const Dropdown = React.createClass({
                     {item.text}
                   </a>
                   <div className="dropdown-item__actions">
-                    {self.props.actions.map((action) => {
+                    {actions.map((action) => {
                       return (
                         <button key={action.text} data-target={action.target} data-toggle="modal" className="dropdown-item__action" onClick={(e) => self.handleAction(e, action, item)}>
                           <span title={action.text} className={`icon ${action.icon}`}></span>
@@ -60,7 +64,6 @@ const Dropdown = React.createClass({
                 </li>
               );
             })}
-            {this.props.children}
           </ul>
           : null}
       </div>