Rearranged rule message UI

Dropdown is at the top, so less likely to push down the page

ui/src/kapacitor/components/RuleMessage.js

@@ -61,6 +61,29 @@ export const RuleMessage = React.createClass({
       <div className="kapacitor-rule-section">
         <h3 className="rule-section-heading">Alert Message</h3>
         <div className="rule-section-body">
+          <div className="rule-section--item alert-message--endpoint">
+            <div>
+              <p>Send this Alert to:</p>
+              <Dropdown className="dropdown-kapacitor size-136" selected={selectedAlert || 'Choose an output'} items={alerts} onChoose={this.handleChooseAlert} />
+            </div>
+          </div>
+          <RuleMessageAlertConfig
+            updateAlertNodes={actions.updateAlertNodes}
+            alert={selectedAlert}
+            rule={rule}
+          />
+          {
+            selectedAlert === 'smtp' ?
+            <div className="alert-message--email-body">
+              <textarea
+                className="alert-text details"
+                placeholder="Email body text goes here"
+                ref={(r) => this.details = r}
+                onChange={() => actions.updateDetails(rule.id, this.details.value)}
+                value={rule.details}
+              />
+            </div> : null
+          }
           <textarea
             className="alert-text message"
             ref={(r) => this.message = r}
@@ -83,27 +106,6 @@ export const RuleMessage = React.createClass({
             }
             <ReactTooltip effect="solid" html={true} offset={{top: -4}} class="influx-tooltip kapacitor-tooltip" />
           </div>
-          {
-            selectedAlert === 'smtp' ?
-            <textarea
-              className="alert-text details"
-              placeholder="Put email body text here"
-              ref={(r) => this.details = r}
-              onChange={() => actions.updateDetails(rule.id, this.details.value)}
-              value={rule.details}
-            /> : null
-          }
-          <div className="rule-section--item bottom alert-message--endpoint">
-            <div>
-              <p>Send this Alert to:</p>
-              <Dropdown className="dropdown-kapacitor size-136" selected={selectedAlert || 'Choose an output'} items={alerts} onChoose={this.handleChooseAlert} />
-            </div>
-            <RuleMessageAlertConfig
-              updateAlertNodes={actions.updateAlertNodes}
-              alert={selectedAlert}
-              rule={rule}
-            />
-          </div>
         </div>
       </div>
     );

ui/src/kapacitor/components/RuleMessageAlertConfig.js

@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react';
 
 import {
   DEFAULT_ALERT_PLACEHOLDERS,
+  DEFAULT_ALERT_LABELS,
   ALERT_NODES_ACCESSORS,
 } from '../constants';
 
@@ -13,23 +14,22 @@ const RuleMessageAlertConfig = ({
   if (!Object.keys(DEFAULT_ALERT_PLACEHOLDERS).find((a) => a === alert)) {
     return null;
   }
+  if (!Object.keys(DEFAULT_ALERT_LABELS).find((a) => a === alert)) {
+    return null;
+  }
   return (
-    <form className="form-group col-xs-12" style={{marginTop: '8px'}}>
-      <div>
-        <label htmlFor="alert-input">{DEFAULT_ALERT_PLACEHOLDERS[alert]}</label>
-      </div>
-      <div>
-        <input
-          id="alert-input"
-          className="form-control"
-          type="text"
-          placeholder={DEFAULT_ALERT_PLACEHOLDERS[alert]}
-          name="alertProperty"
-          onChange={(evt) => updateAlertNodes(rule.id, alert, evt.target.form.alertProperty.value)}
-          value={ALERT_NODES_ACCESSORS[alert](rule)}
-        />
-      </div>
-    </form>
+    <div className="rule-section--item alert-message--config">
+      <p>{DEFAULT_ALERT_LABELS[alert]}</p>
+      <input
+        id="alert-input"
+        className="form-control size-486"
+        type="text"
+        placeholder={DEFAULT_ALERT_PLACEHOLDERS[alert]}
+        name="alertProperty"
+        onChange={(evt) => updateAlertNodes(rule.id, alert, evt.target.form.alertProperty.value)}
+        value={ALERT_NODES_ACCESSORS[alert](rule)}
+      />
+    </div>
   );
 };
 

ui/src/kapacitor/constants/index.js

@@ -41,12 +41,20 @@ export const RULE_MESSAGE_TEMPLATES = {
 
 export const DEFAULT_ALERTS = ['http', 'tcp', 'exec'];
 
+
+export const DEFAULT_ALERT_LABELS = {
+  http: 'URL:',
+  tcp: 'Address:',
+  exec: 'Add Command (Arguments separated by Spaces):',
+  smtp: 'Email Addresses (Separated by Spaces):',
+  alerta: 'Paste Alerta TICKscript:',
+};
 export const DEFAULT_ALERT_PLACEHOLDERS = {
-  http: 'URL',
-  tcp: 'Address',
-  exec: 'Add command with arguments separated by spaces',
-  smtp: 'Add email addresses separated by spaces',
-  alerta: 'Paste Alerta tick script here',
+  http: 'http://',
+  tcp: 'Address:',
+  exec: 'Ex: woogie boogie',
+  smtp: 'Ex: benedict@domain.com delaney@domain.com susan@domain.com',
+  alerta: 'alerta()',
 };
 
 export const ALERT_NODES_ACCESSORS = {

ui/src/style/pages/kapacitor.scss

@@ -401,8 +401,9 @@ div.qeditor.kapacitor-metric-selector {
   font-size: $kapacitor-font-sm;
   line-height: 17px;
   transition:
-  color 0.25s ease,
-  border-color 0.25s ease;
+    color 0.25s ease,
+    border-color 0.25s ease;
+  border-radius: 0;
 
   @include custom-scrollbar($kapacitor-graphic-color,$kapacitor-accent);
 
@@ -418,19 +419,12 @@ div.qeditor.kapacitor-metric-selector {
   &::-moz-placeholder { color: $g9-mountain; }
   &:-ms-input-placeholder { color: $g9-mountain; }
   &:-moz-placeholder { color: $g9-mountain; }
-
-  &.message {
-    border-radius: $kap-radius-lg $kap-radius-lg 0 0;
-  }
-
-  &.details {
-    border-radius: 0;
-  }
 }
 
 .alert-message--endpoint {
   width: auto;
-  border-top: 2px solid $kapacitor-divider-color;
+  border-radius: $kap-radius-lg $kap-radius-lg 0 0;
+  border-bottom: 2px solid $kapacitor-divider-color;
 
   & > div {
     display: flex;
@@ -447,6 +441,7 @@ div.qeditor.kapacitor-metric-selector {
   align-items: center;
   flex-wrap: wrap;
   border-top: 2px solid $kapacitor-divider-color;
+  border-radius: 0 0 $kap-radius-lg $kap-radius-lg;
 
   > p {
     margin: 0 ($kap-padding-sm - 2px) 0 0;
@@ -476,6 +471,20 @@ div.qeditor.kapacitor-metric-selector {
     }
   }
 }
+.alert-message--config {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  border-bottom: 2px solid $kapacitor-divider-color;
+
+  & > p {
+    margin-right: ($kap-padding-sm - 2px);
+  }
+}
+.alert-message--email-body {
+  border-bottom: 2px solid $kapacitor-divider-color;
+}
 
 .rule-section--item {
   background-color: $kapacitor-graphic-color;
@@ -617,6 +626,14 @@ div.qeditor.kapacitor-metric-selector {
       color: $c-honeydew !important;
     }
   }
+  
+  
+  .size-486 {
+    width: 486px;
+  }
+  .size-384 {
+    width: 384px;
+  }
   .size-256 {
     width: 256px;
   }

ui/src/style/theme/theme-dark.scss

@@ -93,7 +93,8 @@ button.btn.btn-sm > span.icon {
 }
 
 .btn.disabled,
-.btn[disabled="true"] {
+.btn[disabled="true"],
+.btn[disabled] {
   &.btn-success,
   &.btn-success:hover,
   &.btn-success:focus,