From e42a87746f87db18abcd0072461fe135c4778154 Mon Sep 17 00:00:00 2001
From: deniz kusefoglu <denizk@gmail.com>
Date: Tue, 5 Dec 2017 11:25:14 -0800
Subject: [PATCH] HandlerOptions styling

---
 .../components/handlers/AlertaHandler.js      | 123 +++++++++---------
 .../components/handlers/EmailHandler.js       |  78 +++++------
 .../components/handlers/ExecHandler.js        |  20 +--
 .../components/handlers/HipchatHandler.js     |  50 +++----
 .../components/handlers/LogHandler.js         |  18 +--
 .../components/handlers/OpsgenieHandler.js    |  56 ++++----
 .../components/handlers/PagerDutyHandler.js   |  20 +--
 .../components/handlers/PostHandler.js        |  18 +--
 .../components/handlers/PushoverHandler.js    | 110 ++++++++--------
 .../components/handlers/SensuHandler.js       |  52 ++++----
 .../components/handlers/SlackHandler.js       |  72 +++++-----
 .../components/handlers/TalkHandler.js        |  36 ++---
 .../components/handlers/TcpHandler.js         |  18 +--
 .../components/handlers/TelegramHandler.js    |  76 ++++++-----
 .../components/handlers/VictoropsHandler.js   |  40 +++---
 ui/src/style/pages/kapacitor.scss             |  11 +-
 ui/src/style/unsorted.scss                    |  59 +++++++++
 17 files changed, 483 insertions(+), 374 deletions(-)

diff --git a/ui/src/kapacitor/components/handlers/AlertaHandler.js b/ui/src/kapacitor/components/handlers/AlertaHandler.js
index a01f2e92fc..2462bc76f7 100644
--- a/ui/src/kapacitor/components/handlers/AlertaHandler.js
+++ b/ui/src/kapacitor/components/handlers/AlertaHandler.js
@@ -7,68 +7,73 @@ const AlertaHandler = ({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="token"
-            fieldDisplay="Token"
-            placeholder="ex: my_token"
-            redacted={true}
-            fieldColumns="col-md-12"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="environment"
-            fieldDisplay="Environment"
-            placeholder="ex: environment"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="origin"
-            fieldDisplay="Origin"
-            placeholder="ex: origin"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="token"
+              fieldDisplay="Token"
+              placeholder="ex: my_token"
+              redacted={true}
+              fieldColumns="col-md-12"
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="environment"
+              fieldDisplay="Environment"
+              placeholder="ex: environment"
+            />
+
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="origin"
+              fieldDisplay="Origin"
+              placeholder="ex: origin"
+            />
+          </div>
         </div>
         <div className="endpoint-tab--parameters">
           <h4>Parameters for this Alert Handler</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="resource"
-            fieldDisplay="Resource"
-            placeholder=""
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="event"
-            fieldDisplay="Event"
-            placeholder=""
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="group"
-            fieldDisplay="Group"
-            placeholder=""
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="value"
-            fieldDisplay="Value"
-            placeholder=""
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="service"
-            fieldDisplay="Service"
-            placeholder=""
-            parseToArray={true}
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="resource"
+              fieldDisplay="Resource"
+              placeholder=""
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="event"
+              fieldDisplay="Event"
+              placeholder=""
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="group"
+              fieldDisplay="Group"
+              placeholder=""
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="value"
+              fieldDisplay="Value"
+              placeholder=""
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="service"
+              fieldDisplay="Service"
+              placeholder=""
+              parseToArray={true}
+            />
+          </div>
         </div>
       </div>
     : <HandlerEmpty configLink={configLink} />
diff --git a/ui/src/kapacitor/components/handlers/EmailHandler.js b/ui/src/kapacitor/components/handlers/EmailHandler.js
index 31863193d1..22d42c4940 100644
--- a/ui/src/kapacitor/components/handlers/EmailHandler.js
+++ b/ui/src/kapacitor/components/handlers/EmailHandler.js
@@ -14,46 +14,50 @@ const EmailHandler = ({
     ? <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}
-            fieldName="host"
-            fieldDisplay="SMTP Host"
-            placeholder=""
-            disabled={true}
-            fieldColumns="col-md-4"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="port"
-            fieldDisplay="SMTP Port"
-            placeholder=""
-            disabled={true}
-            fieldColumns="col-md-4"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="from"
+              fieldDisplay="From E-mail"
+              placeholder=""
+              disabled={true}
+              fieldColumns="col-md-4"
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="host"
+              fieldDisplay="SMTP Host"
+              placeholder=""
+              disabled={true}
+              fieldColumns="col-md-4"
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="port"
+              fieldDisplay="SMTP Port"
+              placeholder=""
+              disabled={true}
+              fieldColumns="col-md-4"
+            />
+          </div>
         </div>
         <div className="endpoint-tab--parameters">
           <h4>Parameters for this Alert Handler</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="to"
-            fieldDisplay="Recipient E-mail Addresses: (separated by spaces)"
-            placeholder="ex: bob@domain.com susan@domain.com"
-            parseToArray={true}
-            fieldColumns="col-md-12"
-          />
-          <RuleDetailsText rule={rule} updateDetails={updateDetails} />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="to"
+              fieldDisplay="Recipient E-mail Addresses: (separated by spaces)"
+              placeholder="ex: bob@domain.com susan@domain.com"
+              parseToArray={true}
+              fieldColumns="col-md-12"
+            />
+            <RuleDetailsText rule={rule} updateDetails={updateDetails} />
+          </div>
         </div>
       </div>
     : <HandlerEmpty configLink={configLink} />
diff --git a/ui/src/kapacitor/components/handlers/ExecHandler.js b/ui/src/kapacitor/components/handlers/ExecHandler.js
index d13993e479..422fffc61b 100644
--- a/ui/src/kapacitor/components/handlers/ExecHandler.js
+++ b/ui/src/kapacitor/components/handlers/ExecHandler.js
@@ -6,15 +6,17 @@ const ExecHandler = ({selectedHandler, handleModifyHandler}) => {
     <div className="endpoint-tab-contents">
       <div className="endpoint-tab--parameters">
         <h4>Parameters for this Alert Handler</h4>
-        <HandlerInput
-          selectedHandler={selectedHandler}
-          handleModifyHandler={handleModifyHandler}
-          fieldName="command"
-          fieldDisplay="Command (arguments separated by spaces):"
-          placeholder="ex: command argument"
-          fieldColumns="col-md-12"
-          parseToArray={true}
-        />
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="command"
+            fieldDisplay="Command (arguments separated by spaces):"
+            placeholder="ex: command argument"
+            fieldColumns="col-md-12"
+            parseToArray={true}
+          />
+        </div>
       </div>
     </div>
   )
diff --git a/ui/src/kapacitor/components/handlers/HipchatHandler.js b/ui/src/kapacitor/components/handlers/HipchatHandler.js
index ca205cab94..cc53f1dc92 100644
--- a/ui/src/kapacitor/components/handlers/HipchatHandler.js
+++ b/ui/src/kapacitor/components/handlers/HipchatHandler.js
@@ -7,30 +7,32 @@ const HipchatHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
           <h4>Parameters for this Alert Handler</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="token"
-            fieldDisplay="Token:"
-            placeholder="ex: the_token"
-            redacted={true}
-            fieldColumns="col-md-12"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="url"
-            fieldDisplay="Subdomain Url"
-            placeholder="ex: hipchat_subdomain"
-            disabled={true}
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="room"
-            fieldDisplay="Room:"
-            placeholder="ex: room_name"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="token"
+              fieldDisplay="Token:"
+              placeholder="ex: the_token"
+              redacted={true}
+              fieldColumns="col-md-12"
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="url"
+              fieldDisplay="Subdomain Url"
+              placeholder="ex: hipchat_subdomain"
+              disabled={true}
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="room"
+              fieldDisplay="Room:"
+              placeholder="ex: room_name"
+            />
+          </div>
         </div>
       </div>
     : <HandlerEmpty configLink={configLink} />
diff --git a/ui/src/kapacitor/components/handlers/LogHandler.js b/ui/src/kapacitor/components/handlers/LogHandler.js
index 9c8e9d3843..a3209e7b82 100644
--- a/ui/src/kapacitor/components/handlers/LogHandler.js
+++ b/ui/src/kapacitor/components/handlers/LogHandler.js
@@ -6,14 +6,16 @@ const LogHandler = ({selectedHandler, handleModifyHandler}) => {
     <div className="endpoint-tab-contents">
       <div className="endpoint-tab--parameters">
         <h4>Parameters for this Alert Handler</h4>
-        <HandlerInput
-          selectedHandler={selectedHandler}
-          handleModifyHandler={handleModifyHandler}
-          fieldName="filePath"
-          fieldDisplay="File Path for Log File:"
-          placeholder="ex: /tmp/alerts.log"
-          fieldColumns="col-md-12"
-        />
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="filePath"
+            fieldDisplay="File Path for Log File:"
+            placeholder="ex: /tmp/alerts.log"
+            fieldColumns="col-md-12"
+          />
+        </div>
       </div>
     </div>
   )
diff --git a/ui/src/kapacitor/components/handlers/OpsgenieHandler.js b/ui/src/kapacitor/components/handlers/OpsgenieHandler.js
index 74430e5e5d..3ab439f1cc 100644
--- a/ui/src/kapacitor/components/handlers/OpsgenieHandler.js
+++ b/ui/src/kapacitor/components/handlers/OpsgenieHandler.js
@@ -11,35 +11,39 @@ const OpsgenieHandler = ({
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
           <h4>Parameters from Kapacitor Configuration</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="api-key"
-            fieldDisplay="API-key"
-            placeholder=""
-            redacted={true}
-            disabled={true}
-            fieldColumns="col-md-12"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="api-key"
+              fieldDisplay="API-key"
+              placeholder=""
+              redacted={true}
+              disabled={true}
+              fieldColumns="col-md-12"
+            />
+          </div>
         </div>
         <div className="endpoint-tab--parameters">
           <h4>Parameters for this Alert Handler:</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="teams"
-            fieldDisplay="Teams"
-            placeholder="ex: teams_name"
-            parseToArray={true}
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="recipients"
-            fieldDisplay="Recipients"
-            placeholder="ex: recipients_name"
-            parseToArray={true}
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="teams"
+              fieldDisplay="Teams"
+              placeholder="ex: teams_name"
+              parseToArray={true}
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="recipients"
+              fieldDisplay="Recipients"
+              placeholder="ex: recipients_name"
+              parseToArray={true}
+            />
+          </div>
         </div>
       </div>
     : <HandlerEmpty configLink={configLink} />
diff --git a/ui/src/kapacitor/components/handlers/PagerDutyHandler.js b/ui/src/kapacitor/components/handlers/PagerDutyHandler.js
index adbe0167b4..4a720783e5 100644
--- a/ui/src/kapacitor/components/handlers/PagerDutyHandler.js
+++ b/ui/src/kapacitor/components/handlers/PagerDutyHandler.js
@@ -11,15 +11,17 @@ const PagerdutyHandler = ({
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
           <h4>Parameters for this Alert Handler</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="serviceKey"
-            fieldDisplay="Service Key:"
-            placeholder="ex: service_key"
-            redacted={true}
-            fieldColumns="col-md-12"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="serviceKey"
+              fieldDisplay="Service Key:"
+              placeholder="ex: service_key"
+              redacted={true}
+              fieldColumns="col-md-12"
+            />
+          </div>
         </div>
       </div>
     : <HandlerEmpty configLink={configLink} />
diff --git a/ui/src/kapacitor/components/handlers/PostHandler.js b/ui/src/kapacitor/components/handlers/PostHandler.js
index f5851ee0c0..5c4f107954 100644
--- a/ui/src/kapacitor/components/handlers/PostHandler.js
+++ b/ui/src/kapacitor/components/handlers/PostHandler.js
@@ -6,14 +6,16 @@ const HttpHandler = ({selectedHandler, handleModifyHandler}) => {
     <div className="endpoint-tab-contents">
       <div className="endpoint-tab--parameters">
         <h4>Parameters for this Alert Handler</h4>
-        <HandlerInput
-          selectedHandler={selectedHandler}
-          handleModifyHandler={handleModifyHandler}
-          fieldName="url"
-          fieldDisplay="HTTP endpoint for POST request"
-          placeholder="ex: http://example.com/api/alert"
-          fieldColumns="col-md-12"
-        />
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="url"
+            fieldDisplay="HTTP endpoint for POST request"
+            placeholder="ex: http://example.com/api/alert"
+            fieldColumns="col-md-12"
+          />
+        </div>
       </div>
     </div>
   )
diff --git a/ui/src/kapacitor/components/handlers/PushoverHandler.js b/ui/src/kapacitor/components/handlers/PushoverHandler.js
index a7dfe6b523..36d505cb9d 100644
--- a/ui/src/kapacitor/components/handlers/PushoverHandler.js
+++ b/ui/src/kapacitor/components/handlers/PushoverHandler.js
@@ -11,62 +11,66 @@ const PushoverHandler = ({
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
           <h4>Parameters from Kapacitor Configuration</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="token"
-            fieldDisplay="Token"
-            placeholder=""
-            disabled={true}
-            redacted={true}
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="userKey"
-            fieldDisplay="User Key"
-            placeholder=""
-            redacted={true}
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="token"
+              fieldDisplay="Token"
+              placeholder=""
+              disabled={true}
+              redacted={true}
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="userKey"
+              fieldDisplay="User Key"
+              placeholder=""
+              redacted={true}
+            />
+          </div>
         </div>
         <div className="endpoint-tab--parameters">
           <h4>Parameters for this Alert Handler</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="title"
-            fieldDisplay="Alert Title:"
-            placeholder="ex: Important Alert"
-            fieldColumns="col-md-12"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="url"
-            fieldDisplay="URL:"
-            placeholder="ex: https://influxdata.com"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="urlTitle"
-            fieldDisplay="URL Title:"
-            placeholder="ex: InfluxData"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="device"
-            fieldDisplay="Devices: (comma separated)"
-            placeholder="ex: dv1, dv2"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="sound"
-            fieldDisplay="Alert Sound:"
-            placeholder="ex: alien"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="title"
+              fieldDisplay="Alert Title:"
+              placeholder="ex: Important Alert"
+              fieldColumns="col-md-12"
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="url"
+              fieldDisplay="URL:"
+              placeholder="ex: https://influxdata.com"
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="urlTitle"
+              fieldDisplay="URL Title:"
+              placeholder="ex: InfluxData"
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="device"
+              fieldDisplay="Devices: (comma separated)"
+              placeholder="ex: dv1, dv2"
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="sound"
+              fieldDisplay="Alert Sound:"
+              placeholder="ex: alien"
+            />
+          </div>
         </div>
       </div>
     : <HandlerEmpty configLink={configLink} />
diff --git a/ui/src/kapacitor/components/handlers/SensuHandler.js b/ui/src/kapacitor/components/handlers/SensuHandler.js
index 066bc90180..fe28895d1f 100644
--- a/ui/src/kapacitor/components/handlers/SensuHandler.js
+++ b/ui/src/kapacitor/components/handlers/SensuHandler.js
@@ -7,33 +7,37 @@ const SensuHandler = ({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="addr"
-            fieldDisplay="Address"
-            placeholder=""
-            disabled={true}
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="source"
-            fieldDisplay="Source"
-            placeholder="ex: my_source"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="addr"
+              fieldDisplay="Address"
+              placeholder=""
+              disabled={true}
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="source"
+              fieldDisplay="Source"
+              placeholder="ex: my_source"
+            />
+          </div>
         </div>
         <div className="endpoint-tab--parameters">
           <h4>Parameters for this Alert Handler</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="handlers"
-            fieldDisplay="Handlers"
-            placeholder="ex: my_handlers"
-            fieldColumns="col-md-12"
-            parseToArray={true}
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="handlers"
+              fieldDisplay="Handlers"
+              placeholder="ex: my_handlers"
+              fieldColumns="col-md-12"
+              parseToArray={true}
+            />
+          </div>
         </div>
       </div>
     : <HandlerEmpty configLink={configLink} />
diff --git a/ui/src/kapacitor/components/handlers/SlackHandler.js b/ui/src/kapacitor/components/handlers/SlackHandler.js
index 7541a0f7bc..619326e992 100644
--- a/ui/src/kapacitor/components/handlers/SlackHandler.js
+++ b/ui/src/kapacitor/components/handlers/SlackHandler.js
@@ -7,43 +7,47 @@ const SlackHandler = ({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="url"
-            fieldDisplay="Webhook URL:"
-            placeholder=""
-            disabled={true}
-            redacted={true}
-            fieldColumns="col-md-12"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="url"
+              fieldDisplay="Webhook URL:"
+              placeholder=""
+              disabled={true}
+              redacted={true}
+              fieldColumns="col-md-12"
+            />
+          </div>
         </div>
         <div className="endpoint-tab--parameters">
           <h4>Parameters for this Alert Handler</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="channel"
-            fieldDisplay="Channel:"
-            placeholder="ex: #my_favorite_channel"
-            fieldColumns="col-md-4"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="username"
-            fieldDisplay="Username:"
-            placeholder="ex: my_favorite_username"
-            fieldColumns="col-md-4"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="iconEmoji"
-            fieldDisplay="Emoji:"
-            placeholder="ex: :thumbsup:"
-            fieldColumns="col-md-4"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="channel"
+              fieldDisplay="Channel:"
+              placeholder="ex: #my_favorite_channel"
+              fieldColumns="col-md-4"
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="username"
+              fieldDisplay="Username:"
+              placeholder="ex: my_favorite_username"
+              fieldColumns="col-md-4"
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="iconEmoji"
+              fieldDisplay="Emoji:"
+              placeholder="ex: :thumbsup:"
+              fieldColumns="col-md-4"
+            />
+          </div>
         </div>
       </div>
     : <HandlerEmpty configLink={configLink} />
diff --git a/ui/src/kapacitor/components/handlers/TalkHandler.js b/ui/src/kapacitor/components/handlers/TalkHandler.js
index c8dfa46be5..b39746e66b 100644
--- a/ui/src/kapacitor/components/handlers/TalkHandler.js
+++ b/ui/src/kapacitor/components/handlers/TalkHandler.js
@@ -7,23 +7,25 @@ const TalkHandler = ({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="url"
-            fieldDisplay="URL"
-            placeholder=""
-            disabled={true}
-            redacted={true}
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="author_name"
-            fieldDisplay="Author Name"
-            placeholder=""
-            disabled={true}
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="url"
+              fieldDisplay="URL"
+              placeholder=""
+              disabled={true}
+              redacted={true}
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="author_name"
+              fieldDisplay="Author Name"
+              placeholder=""
+              disabled={true}
+            />
+          </div>
         </div>
       </div>
     : <HandlerEmpty configLink={configLink} />
diff --git a/ui/src/kapacitor/components/handlers/TcpHandler.js b/ui/src/kapacitor/components/handlers/TcpHandler.js
index 4b17790fad..57f3be13ed 100644
--- a/ui/src/kapacitor/components/handlers/TcpHandler.js
+++ b/ui/src/kapacitor/components/handlers/TcpHandler.js
@@ -6,14 +6,16 @@ const TcpHandler = ({selectedHandler, handleModifyHandler}) => {
     <div className="endpoint-tab-contents">
       <div className="endpoint-tab--parameters">
         <h4>Parameters for this Alert Handler</h4>
-        <HandlerInput
-          selectedHandler={selectedHandler}
-          handleModifyHandler={handleModifyHandler}
-          fieldName="address"
-          fieldDisplay="Address"
-          placeholder="ex: exampleendpoint.com:5678"
-          fieldColumns="col-md-12"
-        />
+        <div className="faux-form">
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="address"
+            fieldDisplay="Address"
+            placeholder="ex: exampleendpoint.com:5678"
+            fieldColumns="col-md-12"
+          />
+        </div>
       </div>
     </div>
   )
diff --git a/ui/src/kapacitor/components/handlers/TelegramHandler.js b/ui/src/kapacitor/components/handlers/TelegramHandler.js
index 07a0ddc640..4f584d0180 100644
--- a/ui/src/kapacitor/components/handlers/TelegramHandler.js
+++ b/ui/src/kapacitor/components/handlers/TelegramHandler.js
@@ -12,45 +12,49 @@ const TelegramHandler = ({
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
           <h4>Parameters from Kapacitor Configuration</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="token"
-            fieldDisplay="Token"
-            placeholder=""
-            disabled={true}
-            redacted={true}
-            fieldColumns="col-md-12"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="token"
+              fieldDisplay="Token"
+              placeholder=""
+              disabled={true}
+              redacted={true}
+              fieldColumns="col-md-12"
+            />
+          </div>
         </div>
         <div className="endpoint-tab--parameters">
           <h4>Parameters for this Alert Handler</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="chatId"
-            fieldDisplay="Chat ID:"
-            placeholder="ex: chat_id"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="parseMode"
-            fieldDisplay="Parse Mode:"
-            placeholder="ex: Markdown or HTML"
-          />
-          <HandlerCheckbox
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="disableWebPagePreview"
-            fieldDisplay="Disable web page preview"
-          />
-          <HandlerCheckbox
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="disableNotification"
-            fieldDisplay="Disable notification"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="chatId"
+              fieldDisplay="Chat ID:"
+              placeholder="ex: chat_id"
+            />
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="parseMode"
+              fieldDisplay="Parse Mode:"
+              placeholder="ex: Markdown or HTML"
+            />
+            <HandlerCheckbox
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="disableWebPagePreview"
+              fieldDisplay="Disable web page preview"
+            />
+            <HandlerCheckbox
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="disableNotification"
+              fieldDisplay="Disable notification"
+            />
+          </div>
         </div>
       </div>
     : <HandlerEmpty configLink={configLink} />
diff --git a/ui/src/kapacitor/components/handlers/VictoropsHandler.js b/ui/src/kapacitor/components/handlers/VictoropsHandler.js
index d88e28dc5d..6cf683794c 100644
--- a/ui/src/kapacitor/components/handlers/VictoropsHandler.js
+++ b/ui/src/kapacitor/components/handlers/VictoropsHandler.js
@@ -11,27 +11,31 @@ const VictoropsHandler = ({
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
           <h4>Parameters from Kapacitor Configuration</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="api-key"
-            fieldDisplay="API key"
-            placeholder="ex: api_key"
-            disabled={true}
-            redacted={true}
-            fieldColumns="col-md-12"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="api-key"
+              fieldDisplay="API key"
+              placeholder="ex: api_key"
+              disabled={true}
+              redacted={true}
+              fieldColumns="col-md-12"
+            />
+          </div>
         </div>
         <div className="endpoint-tab--parameters">
           <h4>Parameters for this Alert Handler</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="routingKey"
-            fieldDisplay="Routing Key:"
-            placeholder="ex: routing_key"
-            fieldColumns="col-md-12"
-          />
+          <div className="faux-form">
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="routingKey"
+              fieldDisplay="Routing Key:"
+              placeholder="ex: routing_key"
+              fieldColumns="col-md-12"
+            />
+          </div>
         </div>
       </div>
     : <HandlerEmpty configLink={configLink} />
diff --git a/ui/src/style/pages/kapacitor.scss b/ui/src/style/pages/kapacitor.scss
index d14269a530..b3420c2a7b 100644
--- a/ui/src/style/pages/kapacitor.scss
+++ b/ui/src/style/pages/kapacitor.scss
@@ -542,9 +542,11 @@ $rule-builder--radius-lg: 5px;
     padding-bottom: $rule-builder--padding-lg;
   }
 }
-.endpoint-tab--parameters .form-group {
-  margin-left: -18px;
-  margin-right: 18px;
+.endpoint-tab--parameters .faux-form {
+  margin-left: -6px;
+  margin-right: -6px;
+  width: calc(100% + 12px);
+  display: inline-block;
 }
 .endpoint-tab--parameters--empty {
   align-items: center;
@@ -579,7 +581,7 @@ $rule-builder--radius-lg: 5px;
 }
 
 /*
-  Section 3 - Rule Details
+ Rule Details
   -----------------------------------------------------------------------------
 */
 .rule-builder--details {
@@ -595,6 +597,7 @@ $rule-builder--radius-lg: 5px;
   height: 100px;
   min-width: 100%;
   max-width: 100%;
+  width: 100% !important;
   @include custom-scrollbar($rule-builder--section-bg,$rule-builder--accent-color);
 }
 .rule-builder--details-template {
diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss
index 781fd65024..63d303a9de 100644
--- a/ui/src/style/unsorted.scss
+++ b/ui/src/style/unsorted.scss
@@ -468,3 +468,62 @@ $dash-editable-header-padding: 7px;
     }
   }
 }
+
+/*
+  Fake form padding without <form>
+
+*/
+
+div.faux-form {
+  .form-group.col-xs-1,
+  .form-group.col-xs-2,
+  .form-group.col-xs-3,
+  .form-group.col-xs-4,
+  .form-group.col-xs-5,
+  .form-group.col-xs-6,
+  .form-group.col-xs-7,
+  .form-group.col-xs-8,
+  .form-group.col-xs-9,
+  .form-group.col-xs-10,
+  .form-group.col-xs-11,
+  .form-group.col-xs-12,
+  .form-group.col-sm-1,
+  .form-group.col-sm-2,
+  .form-group.col-sm-3,
+  .form-group.col-sm-4,
+  .form-group.col-sm-5,
+  .form-group.col-sm-6,
+  .form-group.col-sm-7,
+  .form-group.col-sm-8,
+  .form-group.col-sm-9,
+  .form-group.col-sm-10,
+  .form-group.col-sm-11,
+  .form-group.col-sm-12,
+  .form-group.col-md-1,
+  .form-group.col-md-2,
+  .form-group.col-md-3,
+  .form-group.col-md-4,
+  .form-group.col-md-5,
+  .form-group.col-md-6,
+  .form-group.col-md-7,
+  .form-group.col-md-8,
+  .form-group.col-md-9,
+  .form-group.col-md-10,
+  .form-group.col-md-11,
+  .form-group.col-md-12,
+  .form-group.col-lg-1,
+  .form-group.col-lg-2,
+  .form-group.col-lg-3,
+  .form-group.col-lg-4,
+  .form-group.col-lg-5,
+  .form-group.col-lg-6,
+  .form-group.col-lg-7,
+  .form-group.col-lg-8,
+  .form-group.col-lg-9,
+  .form-group.col-lg-10,
+  .form-group.col-lg-11,
+  .form-group.col-lg-12 {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+}