Add time range selection to RulePage

ui/src/kapacitor/components/DataSection.js

@@ -34,6 +34,7 @@ export const DataSection = React.createClass({
       groupByTime: PropTypes.func.isRequired,
       toggleTagAcceptance: PropTypes.func.isRequired,
     }).isRequired,
+    timeRange: PropTypes.shape({}).isRequired,
   },
 
   childContextTypes: {
@@ -96,9 +97,8 @@ export const DataSection = React.createClass({
   },
 
   render() {
-    const {query} = this.props;
-    const timeRange = {lower: 'now() - 15m', upper: null};
-    const statement = query.rawText || selectStatement(timeRange, query) || `SELECT "fields" FROM "db"."rp"."measurement"`;
+    const {query, timeRange} = this.props;
+    const statement = query.rawText || selectStatement({lower: timeRange.queryValue}, query) || `SELECT "fields" FROM "db"."rp"."measurement"`;
 
     return (
       <div className="kapacitor-rule-section">

ui/src/kapacitor/components/KapacitorRule.js

@@ -6,6 +6,7 @@ import RuleGraph from 'src/kapacitor/components/RuleGraph';
 import RuleMessage from 'src/kapacitor/components/RuleMessage';
 import {createRule, editRule} from 'src/kapacitor/apis';
 import selectStatement from '../../chronograf/utils/influxql/select';
+import timeRanges from 'hson!../../shared/data/timeRanges.hson';
 
 export const KapacitorRule = React.createClass({
   propTypes: {
@@ -24,10 +25,18 @@ export const KapacitorRule = React.createClass({
     kapacitor: PropTypes.shape({}).isRequired,
   },
 
+  getInitialState() {
+    const fifteenMinutesIndex = 1;
+    return {
+      timeRange: timeRanges[fifteenMinutesIndex],
+    };
+  },
+
   render() {
     const {queryActions, source, enabledAlerts, queryConfigs, query,
       rule, kapacitorActions, isEditing} = this.props;
     const {chooseTrigger, updateRuleValues} = kapacitorActions;
+    const {timeRange} = this.state;
 
     return (
       <div className="page">
@@ -35,21 +44,23 @@ export const KapacitorRule = React.createClass({
           rule={rule}
           actions={kapacitorActions}
           onSave={isEditing ? this.handleEdit : this.handleCreate}
+          onChooseTimeRange={this.handleChooseTimeRange}
           validationError={this.validationError()}
+          timeRange={timeRange}
         />
         <div className="page-contents page-contents--green-scrollbar">
           <div className="container-fluid">
             <div className="row">
               <div className="col-xs-12">
                 <div className="rule-builder">
-                  <DataSection source={source} query={query} actions={queryActions} />
+                  <DataSection timeRange={timeRange} source={source} query={query} actions={queryActions} />
                   <ValuesSection
                     rule={rule}
                     query={queryConfigs[rule.queryID]}
                     onChooseTrigger={chooseTrigger}
                     onUpdateValues={updateRuleValues}
                   />
-                  <RuleGraph source={source} query={query} rule={rule} />
+                  <RuleGraph timeRange={timeRange} source={source} query={query} rule={rule} />
                   <RuleMessage rule={rule} actions={kapacitorActions} enabledAlerts={enabledAlerts} />
                 </div>
               </div>
@@ -60,6 +71,11 @@ export const KapacitorRule = React.createClass({
     );
   },
 
+  handleChooseTimeRange({lower}) {
+    const timeRange = timeRanges.find((range) => range.queryValue === lower);
+    this.setState({timeRange});
+  },
+
   handleCreate() {
     const {addFlashMessage, queryConfigs, rule, source, router, kapacitor} = this.props;
 

ui/src/kapacitor/components/RuleGraph.js

@@ -13,6 +13,7 @@ export const RuleGraph = React.createClass({
     }).isRequired,
     query: PropTypes.shape({}).isRequired,
     rule: PropTypes.shape({}).isRequired,
+    timeRange: PropTypes.shape({}).isRequired,
   },
 
   render() {
@@ -24,9 +25,9 @@ export const RuleGraph = React.createClass({
   },
 
   renderGraph() {
-    const {query, source} = this.props;
+    const {query, source, timeRange} = this.props;
     const autoRefreshMs = 30000;
-    const queryText = selectStatement({lower: 'now() - 15m'}, query);
+    const queryText = selectStatement({lower: timeRange.queryValue}, query);
     const queries = [{host: source.links.proxy, text: queryText}];
     const kapacitorLineColors = ["#4ED8A0"];
 

ui/src/kapacitor/components/RuleHeader.js

@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react';
 import ReactTooltip from 'react-tooltip';
+import TimeRangeDropdown from '../../shared/components/TimeRangeDropdown';
 
 export const RuleHeader = React.createClass({
   propTypes: {
@@ -9,6 +10,8 @@ export const RuleHeader = React.createClass({
       updateRuleName: PropTypes.func.isRequired,
     }).isRequired,
     validationError: PropTypes.string.isRequired,
+    onChooseTimeRange: PropTypes.func.isRequired,
+    timeRange: PropTypes.shape({}).isRequired,
   },
 
   getInitialState() {
@@ -41,7 +44,6 @@ export const RuleHeader = React.createClass({
     this.setState({isEditingName: !this.state.isEditingName});
   },
 
-
   render() {
     return (
       <div className="page-header">
@@ -49,22 +51,22 @@ export const RuleHeader = React.createClass({
           <div className="page-header__left">
             {this.renderEditName()}
           </div>
-          <div className="page-header__right">
-            {this.renderSave()}
-          </div>
+          {this.renderSave()}
         </div>
       </div>
     );
   },
 
   renderSave() {
-    const {validationError, onSave} = this.props;
+    const {validationError, onSave, timeRange, onChooseTimeRange} = this.props;
+
     if (!validationError) {
       return <button className="btn btn-success btn-sm" onClick={onSave}>Save Rule</button>;
     }
 
     return (
-      <div>
+      <div className="page-header__right">
+        <TimeRangeDropdown onChooseTimeRange={onChooseTimeRange} selected={timeRange.inputValue} />
         <button className="btn btn-sm btn-default disabled" data-for="save-kapacitor-tooltip" data-tip={validationError}>
           Save Rule
         </button>