WIP Move sections around

ui/src/kapacitor/components/KapacitorRule.js

@@ -1,6 +1,5 @@
 import React, {PropTypes, Component} from 'react'
 
-import DataSection from 'src/kapacitor/components/DataSection'
 import ValuesSection from 'src/kapacitor/components/ValuesSection'
 import RuleHeader from 'src/kapacitor/components/RuleHeader'
 import RuleGraph from 'src/kapacitor/components/RuleGraph'
@@ -132,14 +131,14 @@ class KapacitorRule extends Component {
 
   render() {
     const {
-      queryConfigActions,
-      source,
-      enabledAlerts,
-      queryConfigs,
-      query,
       rule,
-      ruleActions,
+      query,
+      source,
       isEditing,
+      ruleActions,
+      queryConfigs,
+      enabledAlerts,
+      queryConfigActions,
     } = this.props
     const {chooseTrigger, updateRuleValues} = ruleActions
     const {timeRange} = this.state
@@ -162,27 +161,17 @@ class KapacitorRule extends Component {
                 <div className="rule-builder">
                   <ValuesSection
                     rule={rule}
-                    query={queryConfigs[rule.queryID]}
+                    source={source}
+                    timeRange={timeRange}
                     onChooseTrigger={chooseTrigger}
-                    onUpdateValues={updateRuleValues}
-                    onDeadmanChange={this.handleDeadmanChange}
-                    onRuleTypeDropdownChange={this.handleRuleTypeDropdownChange}
-                    onRuleTypeInputChange={this.handleRuleTypeInputChange}
-                  />
-                  <DataSection
-                    timeRange={timeRange}
-                    source={source}
-                    query={query}
-                    actions={queryConfigActions}
                     onAddEvery={this.handleAddEvery}
+                    onUpdateValues={updateRuleValues}
+                    query={queryConfigs[rule.queryID]}
                     onRemoveEvery={this.handleRemoveEvery}
-                    isKapacitorRule={true}
-                  />
-                  <RuleGraph
-                    timeRange={timeRange}
-                    source={source}
-                    query={query}
-                    rule={rule}
+                    queryConfigActions={queryConfigActions}
+                    onDeadmanChange={this.handleDeadmanChange}
+                    onRuleTypeInputChange={this.handleRuleTypeInputChange}
+                    onRuleTypeDropdownChange={this.handleRuleTypeDropdownChange}
                   />
                   <RuleMessage
                     rule={rule}

ui/src/kapacitor/components/ValuesSection.js

@@ -5,6 +5,8 @@ import _ from 'lodash'
 import Deadman from 'src/kapacitor/components/Deadman'
 import Threshold from 'src/kapacitor/components/Threshold'
 import Relative from 'src/kapacitor/components/Relative'
+import DataSection from 'src/kapacitor/components/DataSection'
+import RuleGraph from 'src/kapacitor/components/RuleGraph'
 
 import {Tab, TabList, TabPanels, TabPanel, Tabs} from 'shared/components/Tabs'
 
@@ -27,9 +29,14 @@ export const ValuesSection = React.createClass({
     const {
       rule,
       query,
+      source,
+      timeRange,
+      onAddEvery,
+      onRemoveEvery,
       onDeadmanChange,
-      onRuleTypeDropdownChange,
+      queryConfigActions,
       onRuleTypeInputChange,
+      onRuleTypeDropdownChange,
     } = this.props
     const initialIndex = TABS.indexOf(_.startCase(rule.trigger))
 
@@ -45,6 +52,14 @@ export const ValuesSection = React.createClass({
                 </Tab>
               )}
             </TabList>
+            <DataSection
+              query={query}
+              timeRange={timeRange}
+              isKapacitorRule={true}
+              actions={queryConfigActions}
+              onAddEvery={onAddEvery}
+              onRemoveEvery={onRemoveEvery}
+            />
 
             <TabPanels>
               <TabPanel>
@@ -66,6 +81,12 @@ export const ValuesSection = React.createClass({
                 <Deadman rule={rule} onChange={onDeadmanChange} />
               </TabPanel>
             </TabPanels>
+            <RuleGraph
+              rule={rule}
+              query={query}
+              source={source}
+              timeRange={timeRange}
+            />
           </Tabs>
         </div>
       </div>