Improve Handler styling

ui/src/kapacitor/components/HandlerCheckbox.js

@@ -7,8 +7,8 @@ const HandlerCheckbox = ({
   handleModifyHandler,
 }) => {
   return (
-    <div className="form-group">
-      <div className="form-control-static">
+    <div className="form-group ">
+      <div className="form-control-static handler-checkbox">
         <input
           name={fieldName}
           id={fieldName}

ui/src/kapacitor/components/HandlerInput.js

@@ -16,7 +16,7 @@ const HandlerInput = ({
       <label htmlFor={fieldName}>
         {fieldDisplay}
       </label>
-      <div className={redacted ? 'form-control-static redacted-input' : null}>
+      <div className={redacted ? 'form-control-static redacted-handler' : null}>
         <input
           name={fieldName}
           id={fieldName}

ui/src/kapacitor/components/handlers/OpsGenieHandler.js

@@ -19,6 +19,7 @@ const OpsgenieHandler = ({
             placeholder=""
             redacted={true}
             disabled={true}
+            fieldColumns="col-md-12"
           />
         </div>
         <div className="endpoint-tab--parameters">

ui/src/kapacitor/components/handlers/SMTPHandler.js

@@ -7,6 +7,15 @@ const SmtpHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
           <h4>Parameters from Kapacitor Configuration</h4>
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="from"
+            fieldDisplay="From E-mail"
+            placeholder=""
+            disabled={true}
+            fieldColumns="col-md-4"
+          />
           <HandlerInput
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
@@ -14,6 +23,7 @@ const SmtpHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
             fieldDisplay="SMTP Host"
             placeholder=""
             disabled={true}
+            fieldColumns="col-md-4"
           />
           <HandlerInput
             selectedHandler={selectedHandler}
@@ -22,14 +32,7 @@ const SmtpHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
             fieldDisplay="SMTP Port"
             placeholder=""
             disabled={true}
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="from"
-            fieldDisplay="from"
-            placeholder=""
-            disabled={true}
+            fieldColumns="col-md-4"
           />
         </div>
         <div className="endpoint-tab--parameters">
@@ -38,7 +41,7 @@ const SmtpHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
             fieldName="to"
-            fieldDisplay="E-mail Addresses: (separated by spaces)"
+            fieldDisplay="Recipient E-mail Addresses: (separated by spaces)"
             placeholder="ex: bob@domain.com susan@domain.com"
           />
         </div>

ui/src/kapacitor/components/handlers/TcpHandler.js

@@ -12,6 +12,7 @@ const TcpHandler = ({selectedHandler, handleModifyHandler}) => {
           fieldName="address"
           fieldDisplay="Address"
           placeholder="ex: exampleendpoint.com:5678"
+          fieldColumns="col-md-12"
         />
       </div>
     </div>

ui/src/kapacitor/components/handlers/VictorOpsHandler.js

@@ -19,6 +19,7 @@ const VictoropsHandler = ({
             placeholder="ex: api_key"
             disabled={true}
             redacted={true}
+            fieldColumns="col-md-12"
           />
         </div>
         <div className="endpoint-tab--parameters">
@@ -29,6 +30,7 @@ const VictoropsHandler = ({
             fieldName="routingKey"
             fieldDisplay="Routing Key:"
             placeholder="ex: routing_key"
+            fieldColumns="col-md-12"
           />
         </div>
       </div>

ui/src/style/pages/kapacitor.scss

@@ -564,3 +564,16 @@ $rule-builder--radius-lg: 5px;
     }
   }
 }
+.endpoint-tab--parameters .form-control-static {
+  min-height: 30px;
+  height: 30px;
+}
+.endpoint-tab--parameters .handler-checkbox {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.redacted-handler {
+  height: 30px;
+  align-items: center;
+  justify-content: space-between;
+}