Polish optional alert rules

ui/src/kapacitor/components/RuleMessageOptions.js

@@ -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>
                 )}

ui/src/style/pages/kapacitor.scss

@@ -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
   -----------------------------------------------------------------------------