Graph empty state, line graphics on builder half
Alex P
Andrew Watkins
parent
c14ac402cd
commit
69a9e0e842
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue