Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Move style divs into respective components

pull/10616/head
Andrew Watkins 2016-11-11 15:44:12 -08:00
parent 7a8d60796b
commit 732bab640b
3 changed files with 38 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/src/kapacitor/components/DataSection.js
View File

@ -101,11 +101,16 @@ export const DataSection = React.createClass({
const statement = query.rawText || selectStatement(timeRange, query) || `SELECT "fields" FROM "db"."rp"."measurement"`;
return (
<div className="query-editor kapacitor-metric-selector">
<div className="query-editor__code">
<pre className={classNames("", {"rq-mode": query.rawText})}><code>{statement}</code></pre>
<div className="kapacitor-rule-section">
<h3 className="rule-section-heading">Select a Metric</h3>
<div className="rule-section-body">
<div className="query-editor kapacitor-metric-selector">
<div className="query-editor__code">
<pre className={classNames("", {"rq-mode": query.rawText})}><code>{statement}</code></pre>
</div>
{this.renderEditor()}
</div>
</div>
{this.renderEditor()}
</div>
);
},

37
ui/src/kapacitor/components/ValuesSection.js
View File

@ -20,24 +20,27 @@ export const ValuesSection = React.createClass({
const forcedActiveIndex = TABS.indexOf(_.startCase(rule.trigger));
return (
<div>
<Tabs forceActiveIndex={forcedActiveIndex} onSelect={this.handleChooseTrigger}>
<TabList isKapacitorTabs="true">
{TABS.map(tab => <Tab key={tab}>{tab}</Tab>)}
</TabList>
<div className="kapacitor-rule-section">
<h3 className="rule-section-heading">Values</h3>
<div className="rule-section-body">
<Tabs forceActiveIndex={forcedActiveIndex} onSelect={this.handleChooseTrigger}>
<TabList isKapacitorTabs="true">
{TABS.map(tab => <Tab key={tab}>{tab}</Tab>)}
</TabList>
<TabPanels>
<TabPanel>
<Threshold rule={rule} query={query} onChange={this.handleValuesChange} />
</TabPanel>
<TabPanel>
<Relative rule={rule} onChange={this.handleValuesChange} />
</TabPanel>
<TabPanel>
<Deadman rule={rule} onChange={this.handleValuesChange} />
</TabPanel>
</TabPanels>
</Tabs>
<TabPanels>
<TabPanel>
<Threshold rule={rule} query={query} onChange={this.handleValuesChange} />
</TabPanel>
<TabPanel>
<Relative rule={rule} onChange={this.handleValuesChange} />
</TabPanel>
<TabPanel>
<Deadman rule={rule} onChange={this.handleValuesChange} />
</TabPanel>
</TabPanels>
</Tabs>
</div>
</div>
);
},

34
ui/src/kapacitor/containers/KapacitorRulePage.js
View File

@ -132,6 +132,8 @@ export const KapacitorRulePage = React.createClass({
render() {
const {rules, queryConfigs, params, kapacitorActions, source} = this.props;
const {chooseTrigger, updateRuleValues} = this.props.kapacitorActions;
const rule = this.isEditing() ? rules[params.ruleID] : rules[DEFAULT_RULE_ID];
const query = rule && queryConfigs[rule.queryID];
@ -147,8 +149,13 @@ export const KapacitorRulePage = React.createClass({
<div className="row">
<div className="col-xs-12">
<div className="rule-builder">
{this.renderDataSection(query)}
{this.renderValuesSection(rule)}
<DataSection source={this.props.source} query={query} actions={this.props.queryActions} />
<ValuesSection
rule={rule}
query={queryConfigs[rule.queryID]}
onChooseTrigger={chooseTrigger}
onUpdateValues={updateRuleValues}
/>
<RuleGraph source={source} query={query} rule={rule} />
<RuleMessage rule={rule} actions={kapacitorActions} enabledAlerts={this.state.enabledAlerts} />
</div>
@ -159,29 +166,6 @@ export const KapacitorRulePage = React.createClass({
</div>
);
},
renderDataSection(query) {
return (
<div className="kapacitor-rule-section">
<h3 className="rule-section-heading">Select a Metric</h3>
<div className="rule-section-body">
<DataSection source={this.props.source} query={query} actions={this.props.queryActions} />
</div>
</div>
);
},
renderValuesSection(rule) {
const {chooseTrigger, updateRuleValues} = this.props.kapacitorActions;
return (
<div className="kapacitor-rule-section">
<h3 className="rule-section-heading">Values</h3>
<div className="rule-section-body">
<ValuesSection rule={rule} query={this.props.queryConfigs[rule.queryID]} onChooseTrigger={chooseTrigger} onUpdateValues={updateRuleValues} />
</div>
</div>
);
},
});
function mapStateToProps(state) {