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

Polish optional alert rules

pull/1942/head
Alex P 2017-08-29 12:44:32 -07:00
parent 404b151db5
commit 0445d4722f
2 changed files with 90 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
ui/src/kapacitor/components/RuleMessageOptions.js
View File

@ -51,59 +51,45 @@ class RuleMessageOptions extends Component {
<div>
{args
? <div className="rule-section--row rule-section--border-bottom">
<p>
{args.label}
</p>
<input
id="alert-input"
className="form-control input-sm form-malachite"
style={{flex: '1 0 0%'}}
type="text"
placeholder={args.placeholder}
onChange={this.handleUpdateAlertNodes}
value={ALERT_NODES_ACCESSORS[alertNodeName](rule)}
autoComplete="off"
spellCheck="false"
/>
<p>Optional Alert Parameters:</p>
<div className="optional-alert-parameters">
<div className="form-group">
<input
name={args.label}
id="alert-input"
className="form-control input-sm form-malachite"
type="text"
placeholder={args.placeholder}
onChange={this.handleUpdateAlertNodes}
value={ALERT_NODES_ACCESSORS[alertNodeName](rule)}
autoComplete="off"
spellCheck="false"
/>
<label htmlFor={args.label}>
{args.label}
</label>
</div>
</div>
</div>
: null}
{properties && properties.length
? <div
className="rule-section--row rule-section--border-bottom"
style={{display: 'block'}}
>
<p>Optional Alert Parameters</p>
<div style={{display: 'flex', flexWrap: 'wrap'}}>
? <div className="rule-section--row rule-section--border-bottom">
<p>Optional Alert Parameters:</p>
<div className="optional-alert-parameters">
{properties.map(({name: propertyName, label, placeholder}) =>
<div
key={propertyName}
style={{display: 'block', flex: '0 0 33.33%'}}
>
<label
htmlFor={label}
style={{
display: 'flex',
width: '100%',
alignItems: 'center',
}}
>
<span style={{flex: '0 0 auto'}}>
{label}
</span>
<input
name={label}
className="form-control input-sm form-malachite"
style={{
margin: '0 15px 0 5px',
flex: '1 0 0%',
}}
type="text"
placeholder={placeholder}
onChange={this.handleUpdateAlertProperty(propertyName)}
value={this.getAlertPropertyValue(propertyName)}
autoComplete="off"
spellCheck="false"
/>
<div key={propertyName} className="form-group">
<input
name={label}
className="form-control input-sm form-malachite"
type="text"
placeholder={placeholder}
onChange={this.handleUpdateAlertProperty(propertyName)}
value={this.getAlertPropertyValue(propertyName)}
autoComplete="off"
spellCheck="false"
/>
<label htmlFor={label}>
{label}
</label>
</div>
)}

55
ui/src/style/pages/kapacitor.scss
View File

@ -311,6 +311,61 @@ textarea.rule-builder--message {
}
}
/*
Section 3 - Optional Alert Parameters
-----------------------------------------------------------------------------
*/
.optional-alert-parameters {
flex: 1 0 0;
display: flex;
flex-wrap: nowrap;
.form-group {
flex: 1 0 0;
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
padding-right: 8px;
position: relative;
&:last-of-type {
padding-right: 0;
}
}
.form-group > input.form-control {
order: 2;
border-top-left-radius: 0;
position: relative;
z-index: 1;
}
.form-group > label {
position: relative;
z-index: 2;
order: 1;
background-color: $g5-pepper;
border-radius: 4px 4px 0 0;
margin: 0;
height: 18px;
line-height: 20px;
transition:
background-color 0.4s ease,
color 0.4s ease,
box-shadow 0.4s ease;
}
.form-group > input.form-control:hover + label {
background-color: $g6-smoke;
color: $g13-mist;
}
.form-group > input.form-control:focus + label {
background-color: $c-rainforest;
color: $g2-kevlar;
box-shadow: 0 0 8px $c-rainforest;
}
}
/*
Color coding for alerts in Alert History table
-----------------------------------------------------------------------------