Graph empty state, line graphics on builder half

pull/438/head
Alex P 2016-11-07 14:23:35 -08:00 committed by Andrew Watkins
parent c14ac402cd
commit 69a9e0e842
2 changed files with 257 additions and 24 deletions

View File

@ -134,15 +134,11 @@ export const KapacitorRulePage = React.createClass({
const {rules, queryConfigs, source, params} = this.props;
const rule = this.isEditing() ? rules[params.ruleID] : rules[DEFAULT_RULE_ID];
const query = rule && queryConfigs[rule.queryID];
const autoRefreshMs = 30000;
if (!query) {
return <div className="page-spinner"></div>;
}
const queryText = selectStatement({lower: 'now() - 15m'}, query);
const queries = [{host: source.links.proxy, text: queryText}];
return (
<div className="kapacitor-rule-page">
<div className="enterprise-header">
@ -164,22 +160,18 @@ export const KapacitorRulePage = React.createClass({
</div>
<div className="rule-preview">
<div className="rule-preview--graph">
{
queryText ?
<RefreshingLineGraph
queries={queries}
autoRefresh={autoRefreshMs}
underlayCallback={this.createUnderlayCallback(rule)}
/>
: null
}
</div>
<h1 className="rule-preview--graph-heading">Alert Preview</h1>
<div className="rule-preview--graph-container">
{this.renderGraph(query, this.createUnderlayCallback(rule))}
</div>
</div>
</div>
</div>
</div>
);
},
<<<<<<< HEAD
renderEditName(rule) {
if (!this.state.isEditingName) {
return (
@ -194,6 +186,24 @@ export const KapacitorRulePage = React.createClass({
autoFocus={true}
defaultValue={rule.name}
ref={r => this.ruleName = r} onKeyDown={(e) => this.handleEditName(e, rule)} onBlur={() => this.handleEditNameBlur(rule)}
=======
renderGraph(query, underlayCallback) {
const autoRefreshMs = 30000;
const queryText = selectStatement({lower: 'now() - 15m'}, query);
const queries = [{host: this.props.source.links.proxy, text: queryText}];
if (!queryText) {
return (
<div className="rule-preview--graph-empty">
<p>Select a metric from<br/>the <strong>Data</strong> section on the left</p>
</div>
);
}
return (
<RefreshingLineGraph
queries={queries}
autoRefresh={autoRefreshMs}
underlayCallback={underlayCallback}
>>>>>>> Graph empty state, line graphics on builder half
/>
);
},
@ -201,8 +211,10 @@ export const KapacitorRulePage = React.createClass({
renderDataSection(query) {
return (
<div className="kapacitor-rule-section">
<h3>Data</h3>
<DataSection source={this.props.source} query={query} actions={this.props.queryActions} />
<h3 className="rule-section-heading">Choose a Metric</h3>
<div className="rule-section-body">
<DataSection source={this.props.source} query={query} actions={this.props.queryActions} />
</div>
</div>
);
},
@ -211,8 +223,10 @@ export const KapacitorRulePage = React.createClass({
const {chooseTrigger, updateRuleValues} = this.props.kapacitorActions;
return (
<div className="kapacitor-rule-section">
<h3>Values</h3>
<ValuesSection rule={rule} onChooseTrigger={chooseTrigger} onUpdateValues={updateRuleValues} />
<h3 className="rule-section-heading">Values</h3>
<div className="rule-section-body">
<ValuesSection rule={rule} onChooseTrigger={chooseTrigger} onUpdateValues={updateRuleValues} />
</div>
</div>
);
},
@ -220,8 +234,15 @@ export const KapacitorRulePage = React.createClass({
renderMessageSection(rule) {
return (
<div className="kapacitor-rule-section">
<<<<<<< HEAD
<h3>Message</h3>
<textarea ref={(r) => this.message = r} value={rule.message} onChange={() => this.handleMessageChange(rule)} />
=======
<h3 className="rule-section-heading">Alert Message</h3>
<div className="rule-section-body">
<textarea ref={(r) => this.message = r} onChange={() => this.handleMessageChange(rule)} />
</div>
>>>>>>> Graph empty state, line graphics on builder half
</div>
);
},
@ -233,9 +254,11 @@ export const KapacitorRulePage = React.createClass({
return (
<div className="kapacitor-rule-section">
<h3>Alerts</h3>
The Alert should
<Dropdown selected={rule.alerts[0] || 'Choose an output'} items={alerts} onChoose={this.handleChooseAlert} />
<h3 className="rule-section-heading">Alert Endpoint</h3>
<div className="rule-section-body">
The Alert should
<Dropdown selected={rule.alerts[0] || 'Choose an output'} items={alerts} onChoose={this.handleChooseAlert} />
</div>
</div>
);
},

View File

@ -744,6 +744,11 @@ table .monotype {
----------------------------------------------
*/
$kapacitor-page-padding: ($enterprise-page-header-height / 2);
$kapacitor-page-gutter: 46px;
$kapacitor-dot-size: 18px;
$kapacitor-graphic-color: $g1-raven;
$kapacitor-line-width: 3px;
$rule-preview-width: 488px;
.kapacitor-rule-page {
@ -787,6 +792,10 @@ $rule-preview-width: 488px;
.rule-builder {
width: calc(100% - #{$rule-preview-width});
padding: $kapacitor-page-padding;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
background: $g2-kevlar;
background: -moz-linear-gradient(top, $g5-pepper 0%, $g3-castle 100%);
background: -webkit-linear-gradient(top, $g5-pepper 0%, $g3-castle 100%);
@ -800,9 +809,210 @@ $rule-preview-width: 488px;
justify-content: center;
align-content: center;
align-items: center;
}
.rule-preview--graph {
width: 100%;
background-color: $g3-castle;
border-radius: 4px;
}
.rule-preview--graph-heading {
width: 100%;
height: 44px;
line-height: 44px;
padding: 0 13px;
font-size: 16px;
color: $g17-whisper;
background-color: $g5-pepper;
border-radius: 4px 4px 0 0;
font-weight: 600;
margin: 0;
}
.rule-preview--graph-container {
width: 100%;
padding: 9px 13px;
height: (320px + (9px * 2));
position: relative;
}
.rule-preview--graph-empty {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
&--graph {
background-color: $g3-castle;
border-radius: 4px;
p {
margin: 0;
font-size: 16px;
line-height: 23px;
text-align: center;
color: $g12-forge;
strong {
color: $g18-cloud;
font-weight: 900;
}
}
}
.rule-section-heading {
margin: 0;
padding: $kapacitor-page-padding 0 11px $kapacitor-page-gutter;
font-weight: 400;
color: $g13-mist;
position: relative;
&:before,
&:after {
content: '';
display: block;
position: absolute;
transform: translateX(-50%);
}
// Vertical Line
&:before {
width: $kapacitor-line-width;
height: 100%;
background-color: $kapacitor-graphic-color;
top: 0;
left: ($kapacitor-dot-size/2);
}
// Dot
&:after {
width: $kapacitor-dot-size;
height: $kapacitor-dot-size;
background-color: $c-rainforest;
border: 6px solid $kapacitor-graphic-color;
border-radius: 50%;
top: ($kapacitor-page-padding + 3px);
left: ($kapacitor-dot-size / 2);
}
}
.rule-section-body {
padding: 0 0 0 $kapacitor-page-gutter;
margin: 0;
position: relative;
// Vertical Line
&:before {
content: '';
display: block;
position: absolute;
transform: translateX(-50%);
width: $kapacitor-line-width;
height: 100%;
background-color: $kapacitor-graphic-color;
top: 0;
left: ($kapacitor-dot-size / 2);
}
}
.kapacitor-rule-section {
// Override appearance of lines and dots for first child
&:first-of-type {
.rule-section-heading:before {
top: ($kapacitor-page-padding + 5px);
height: calc(100% - #{$kapacitor-page-padding} - 5px);
}
}
// Override appearance of lines and dots for last child
&:last-of-type {
.rule-section-heading:before {
top: 0;
height: ($kapacitor-page-padding + 3px + 3px);
}
.rule-section-body:before {
display: none;
}
}
}
$metric-selector-height: 156px;
div.query-editor.kapacitor-metric-selector {
border-radius: 0;
background-color: transparent;
padding: 0;
// Query sample
.query-editor__code pre {
white-space: pre-wrap;
background-color: $kapacitor-graphic-color;
color: $c-rainforest;
border-radius: 5px 5px 0 0;
border: 0;
padding: 8px 13px;
}
// Tabs
.query-editor__tabs {
background-color: $kapacitor-graphic-color;
padding: 0 13px;
}
.query-editor__tab {
background-color: $kapacitor-graphic-color;
font-weight: 500;
padding-left: 11px;
padding-right: 11px;
&.active {
background-color: $g3-castle;
}
}
// Editor List
.query-editor__list {
background-color: $g3-castle;
min-height: $metric-selector-height;
max-height: $metric-selector-height;
height: $metric-selector-height;
// Custom Scrollbar styles, pretty sure these only work in chrome
&::-webkit-scrollbar {
width: 14px;
border-bottom-right-radius: $radius;
&-button {
background-color: $g3-castle;
}
&-track {
background-color: $g3-castle;
border-bottom-right-radius: $radius;
}
&-track-piece {
background-color: $g2-kevlar;
border: 4px solid $g3-castle;
border-radius: 8px;
}
&-thumb {
background-color: $c-rainforest;
border: 4px solid $g3-castle;
border-radius: 8px;
}
&-corner {
background-color: $g3-castle;
}
}
&::-webkit-resizer {
background-color: $g6-smoke;
}
}
.query-editor__list-header {
background-color: $g3-castle;
padding: 8px 24px 0 24px;
}
.query-editor__list-item {
padding-left: 24px;
padding-right: 24px;
&:hover {
background-color: $g5-pepper;
}
&.active {
background-color: $g5-pepper;
color: $c-rainforest;
}
}
}