Polish optional alert rules
Alex P
parent
404b151db5
commit
0445d4722f
|
|
@ -51,59 +51,45 @@ class RuleMessageOptions extends Component {
|
||||||
<div>
|
<div>
|
||||||
{args
|
{args
|
||||||
? <div className="rule-section--row rule-section--border-bottom">
|
? <div className="rule-section--row rule-section--border-bottom">
|
||||||
<p>
|
<p>Optional Alert Parameters:</p>
|
||||||
{args.label}
|
<div className="optional-alert-parameters">
|
||||||
</p>
|
<div className="form-group">
|
||||||
<input
|
<input
|
||||||
id="alert-input"
|
name={args.label}
|
||||||
className="form-control input-sm form-malachite"
|
id="alert-input"
|
||||||
style={{flex: '1 0 0%'}}
|
className="form-control input-sm form-malachite"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder={args.placeholder}
|
placeholder={args.placeholder}
|
||||||
onChange={this.handleUpdateAlertNodes}
|
onChange={this.handleUpdateAlertNodes}
|
||||||
value={ALERT_NODES_ACCESSORS[alertNodeName](rule)}
|
value={ALERT_NODES_ACCESSORS[alertNodeName](rule)}
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
spellCheck="false"
|
spellCheck="false"
|
||||||
/>
|
/>
|
||||||
|
<label htmlFor={args.label}>
|
||||||
|
{args.label}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
: null}
|
: null}
|
||||||
{properties && properties.length
|
{properties && properties.length
|
||||||
? <div
|
? <div className="rule-section--row rule-section--border-bottom">
|
||||||
className="rule-section--row rule-section--border-bottom"
|
<p>Optional Alert Parameters:</p>
|
||||||
style={{display: 'block'}}
|
<div className="optional-alert-parameters">
|
||||||
>
|
|
||||||
<p>Optional Alert Parameters</p>
|
|
||||||
<div style={{display: 'flex', flexWrap: 'wrap'}}>
|
|
||||||
{properties.map(({name: propertyName, label, placeholder}) =>
|
{properties.map(({name: propertyName, label, placeholder}) =>
|
||||||
<div
|
<div key={propertyName} className="form-group">
|
||||||
key={propertyName}
|
<input
|
||||||
style={{display: 'block', flex: '0 0 33.33%'}}
|
name={label}
|
||||||
>
|
className="form-control input-sm form-malachite"
|
||||||
<label
|
type="text"
|
||||||
htmlFor={label}
|
placeholder={placeholder}
|
||||||
style={{
|
onChange={this.handleUpdateAlertProperty(propertyName)}
|
||||||
display: 'flex',
|
value={this.getAlertPropertyValue(propertyName)}
|
||||||
width: '100%',
|
autoComplete="off"
|
||||||
alignItems: 'center',
|
spellCheck="false"
|
||||||
}}
|
/>
|
||||||
>
|
<label htmlFor={label}>
|
||||||
<span style={{flex: '0 0 auto'}}>
|
{label}
|
||||||
{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"
|
|
||||||
/>
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -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
|
Color coding for alerts in Alert History table
|
||||||
-----------------------------------------------------------------------------
|
-----------------------------------------------------------------------------
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue