add handler parameters from config and style handler parameter inputs

2017-11-28 14:11:28 -08:00 · 2017-11-28 14:11:28 -08:00 · 6d0b3fcb4b
parent bb99d4b107
commit 6d0b3fcb4b
19 changed files with 318 additions and 148 deletions
--- a/ui/src/kapacitor/components/HandlerEmpty.js
+++ b/ui/src/kapacitor/components/HandlerEmpty.js
@ -5,10 +5,14 @@ const HandlerEmpty = ({configLink}) => {
  return (
    <div className="endpoint-tab-contents">
      <div className="endpoint-tab--parameters">
-        <div className="form-group">
-          This handler does not seem to be configured.
+        <div className="endpoint-tab--parameters--empty">
+          <p>This handler does not seem to be configured.</p>
          <Link to={configLink} title="Configuration Page">
-            Configure it here.
+            <div className="form-group-submit col-xs-12 text-center">
+              <button className="btn btn-primary" type="submit">
+                Configure Alert Handlers
+              </button>
+            </div>
          </Link>
        </div>
      </div>
--- a/ui/src/kapacitor/components/HandlerInput.js
+++ b/ui/src/kapacitor/components/HandlerInput.js
@ -7,25 +7,37 @@ const HandlerInput = ({
  selectedHandler,
  handleModifyHandler,
  redacted = false,
-  editable = true,
+  disabled = false,
+  fieldColumns = 'col-md-6',
 }) => {
+  const formGroupClass = `form-group ${fieldColumns}`
  return (
-    <div className="form-group">
-      <label htmlFor={fieldName}>
-        {fieldDisplay}
-      </label>
-      <input
-        name={fieldName}
-        id={fieldName}
-        className="form-control input-sm form-malachite"
-        type="text"
-        placeholder={placeholder}
-        onChange={handleModifyHandler(selectedHandler, fieldName)}
-        value={selectedHandler[fieldName]}
-        autoComplete="off"
-        spellCheck="false"
-      />
-    </div>
+    <form>
+      <div className={formGroupClass}>
+        <label htmlFor={fieldName}>
+          {fieldDisplay}
+        </label>
+        <div className={redacted ? 'form-control-static redacted-input' : null}>
+          <input
+            name={fieldName}
+            id={fieldName}
+            className="form-control input-sm form-malachite"
+            type={redacted ? 'hidden' : 'text'}
+            placeholder={placeholder}
+            onChange={handleModifyHandler(selectedHandler, fieldName)}
+            value={selectedHandler[fieldName]}
+            autoComplete="off"
+            spellCheck="false"
+            disabled={disabled}
+          />
+          {redacted
+            ? <span className="alert-value-set">
+                <span className="icon checkmark" /> Value set in Config
+              </span>
+            : null}
+        </div>
+      </div>
+    </form>
  )
 }

@ -35,10 +47,11 @@ HandlerInput.propTypes = {
  fieldName: string.isRequired,
  fieldDisplay: string,
  placeholder: string,
+  disabled: bool,
  redacted: bool,
-  editable: bool,
  selectedHandler: shape({}).isRequired,
  handleModifyHandler: func.isRequired,
+  fieldColumns: string,
 }

 export default HandlerInput
--- a/ui/src/kapacitor/components/RuleHandlers.js
+++ b/ui/src/kapacitor/components/RuleHandlers.js
@ -56,7 +56,7 @@ class RuleHandlers extends Component {
  handleAddEndpoint = selectedItem => {
    const {handlersOnThisAlert, handlersOfKind} = this.state
    const newItemNumbering = _.get(handlersOfKind, selectedItem.type, 0) + 1
-    const newItemName = selectedItem.type + newItemNumbering
+    const newItemName = `${selectedItem.type}-${newItemNumbering}`
    const newEndpoint = {
      ...selectedItem,
      alias: newItemName,
--- a/ui/src/kapacitor/components/handlers/AlertaHandler.js
+++ b/ui/src/kapacitor/components/handlers/AlertaHandler.js
@ -7,66 +7,69 @@ 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"
+            placeholder="ex: environment"
          />
          <HandlerInput
            selectedHandler={selectedHandler}
            handleModifyHandler={handleModifyHandler}
            fieldName="origin"
            fieldDisplay="Origin"
-            placeholder="Ex: origin"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="token"
-            fieldDisplay="Token"
-            placeholder="Ex: my_token"
-            redacted={true}
+            placeholder="ex: origin"
          />
        </div>
        <div className="endpoint-tab--parameters">
-          <h4>Optional Parameters</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="resource"
-            fieldDisplay="Resource"
-            placeholder="Ex: my_resource"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="event"
-            fieldDisplay="Event"
-            placeholder="Ex: event"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="group"
-            fieldDisplay="Group"
-            placeholder="Ex: group_name"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="value"
-            fieldDisplay="Value"
-            placeholder="Ex: value"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="service"
-            fieldDisplay="Service"
-            placeholder="Ex: service_name"
-          />
+          <h4>Parameters for this Alert Handler</h4>
+          <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=""
+            />
+          </form>
        </div>
      </div>
    : <HandlerEmpty configLink={configLink} />
--- a/ui/src/kapacitor/components/handlers/ExecHandler.js
+++ b/ui/src/kapacitor/components/handlers/ExecHandler.js
@ -5,13 +5,14 @@ const ExecHandler = ({selectedHandler, handleModifyHandler}) => {
  return (
    <div className="endpoint-tab-contents">
      <div className="endpoint-tab--parameters">
-        <h4>Optional Parameters</h4>
+        <h4>Parameters for this Alert Handler</h4>
        <HandlerInput
          selectedHandler={selectedHandler}
          handleModifyHandler={handleModifyHandler}
          fieldName="command"
          fieldDisplay="Command (arguments separated by spaces):"
-          placeholder="Ex: command argument"
+          placeholder="ex: command argument"
+          fieldColumns="col-md-12"
        />
      </div>
    </div>
--- a/ui/src/kapacitor/components/handlers/HipchatHandler.js
+++ b/ui/src/kapacitor/components/handlers/HipchatHandler.js
@ -1,13 +1,7 @@
 import React, {PropTypes} from 'react'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
-// import RedactedInput from './RedactedInput'

-// <RedactedInput
-//   defaultValue={token}
-//   id="token"
-//   refFunc={this.handleTokenRef}
-// />
 const HipchatHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
  return selectedHandler.enabled
    ? <div className="endpoint-tab-contents">
@ -18,22 +12,23 @@ const HipchatHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
            handleModifyHandler={handleModifyHandler}
            fieldName="url"
            fieldDisplay="Subdomain Url"
-            placeholder="Ex: hipchat_subdomain"
+            placeholder="ex: hipchat_subdomain"
            editable={false}
+            fieldColumns="col-md-12"
          />
          <HandlerInput
            selectedHandler={selectedHandler}
            handleModifyHandler={handleModifyHandler}
            fieldName="room"
            fieldDisplay="Room:"
-            placeholder="Ex: room_name"
+            placeholder="ex: room_name"
          />
          <HandlerInput
            selectedHandler={selectedHandler}
            handleModifyHandler={handleModifyHandler}
            fieldName="token"
            fieldDisplay="Token:"
-            placeholder="Ex: the_token"
+            placeholder="ex: the_token"
            redacted={true}
          />
        </div>
--- a/ui/src/kapacitor/components/handlers/LogHandler.js
+++ b/ui/src/kapacitor/components/handlers/LogHandler.js
@ -5,13 +5,14 @@ const LogHandler = ({selectedHandler, handleModifyHandler}) => {
  return (
    <div className="endpoint-tab-contents">
      <div className="endpoint-tab--parameters">
-        <h4>Optional Parameters</h4>
+        <h4>Parameters for this Alert Handler</h4>
        <HandlerInput
          selectedHandler={selectedHandler}
          handleModifyHandler={handleModifyHandler}
          fieldName="filePath"
-          fieldDisplay="Log File Path:"
-          placeholder="Ex: /tmp/alerts.log"
+          fieldDisplay="File Path for Log File:"
+          placeholder="ex: /tmp/alerts.log"
+          fieldColumns="col-md-12"
        />
      </div>
    </div>
--- a/ui/src/kapacitor/components/handlers/OpsGenieHandler.js
+++ b/ui/src/kapacitor/components/handlers/OpsGenieHandler.js
@ -10,20 +10,32 @@ const OpsgenieHandler = ({
  return selectedHandler.enabled
    ? <div className="endpoint-tab-contents">
        <div className="endpoint-tab--parameters">
-          <h4>Optional Parameters</h4>
+          <h4>Parameters from Kapacitor Configuration</h4>
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="api-key"
+            fieldDisplay="API-key"
+            placeholder=""
+            redacted={true}
+            disabled={true}
+          />
+        </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"
+            placeholder="ex: teams_name"
          />
          <HandlerInput
            selectedHandler={selectedHandler}
            handleModifyHandler={handleModifyHandler}
            fieldName="recipients"
            fieldDisplay="Recipients"
-            placeholder="Ex: recipients_name"
+            placeholder="ex: recipients_name"
          />
        </div>
      </div>
--- a/ui/src/kapacitor/components/handlers/PagerDutyHandler.js
+++ b/ui/src/kapacitor/components/handlers/PagerDutyHandler.js
@ -10,14 +10,18 @@ const PagerdutyHandler = ({
  return selectedHandler.enabled
    ? <div className="endpoint-tab-contents">
        <div className="endpoint-tab--parameters">
-          <h4>Optional Parameters</h4>
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="serviceKey"
-            fieldDisplay="Service Key:"
-            placeholder="Ex: service_key"
-          />
+          <h4>Parameters</h4>
+          <form>
+            <HandlerInput
+              selectedHandler={selectedHandler}
+              handleModifyHandler={handleModifyHandler}
+              fieldName="serviceKey"
+              fieldDisplay="Service Key:"
+              placeholder="ex: service_key"
+              redacted={true}
+              fieldColumns="col-md-12"
+            />
+          </form>
        </div>
      </div>
    : <HandlerEmpty configLink={configLink} />
--- a/ui/src/kapacitor/components/handlers/PostHandler.js
+++ b/ui/src/kapacitor/components/handlers/PostHandler.js
@ -1,24 +1,18 @@
 import React, {PropTypes} from 'react'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
-import HandlerCheckbox from 'src/kapacitor/components/HandlerCheckbox'

 const HttpHandler = ({selectedHandler, handleModifyHandler}) => {
  return (
    <div className="endpoint-tab-contents">
      <div className="endpoint-tab--parameters">
-        <h4>Optional Parameters</h4>
+        <h4>Parameters for this Alert Handler</h4>
        <HandlerInput
          selectedHandler={selectedHandler}
          handleModifyHandler={handleModifyHandler}
          fieldName="url"
-          fieldDisplay="POST URL"
-          placeholder="Ex: http://example.com/api/alert"
-        />
-        <HandlerCheckbox
-          selectedHandler={selectedHandler}
-          handleModifyHandler={handleModifyHandler}
-          fieldName="captureResponse"
-          fieldDisplay="Capture response"
+          fieldDisplay="HTTP endpoint for POST request"
+          placeholder="ex: http://example.com/api/alert"
+          fieldColumns="col-md-12"
        />
      </div>
    </div>
--- a/ui/src/kapacitor/components/handlers/PushoverHandler.js
+++ b/ui/src/kapacitor/components/handlers/PushoverHandler.js
@ -10,50 +10,62 @@ const PushoverHandler = ({
  return selectedHandler.enabled
    ? <div className="endpoint-tab-contents">
        <div className="endpoint-tab--parameters">
-          <h4>Optional Parameters</h4>
+          <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="Ex: the_key"
-          />
-          <HandlerInput
-            selectedHandler={selectedHandler}
-            handleModifyHandler={handleModifyHandler}
-            fieldName="device"
-            fieldDisplay="Device: (comma separated)"
-            placeholder="Ex: dv1, dv2"
+            placeholder=""
+            redacted={true}
          />
+        </div>
+        <div className="endpoint-tab--parameters">
+          <h4>Parameters for this Alert Handler</h4>
          <HandlerInput
            selectedHandler={selectedHandler}
            handleModifyHandler={handleModifyHandler}
            fieldName="title"
-            fieldDisplay="Title:"
-            placeholder="Ex: Important Alert"
+            fieldDisplay="Alert Title:"
+            placeholder="ex: Important Alert"
+            fieldColumns="col-md-12"
          />
-        </div>
-        <div className="optional-alert-parameters">
          <HandlerInput
            selectedHandler={selectedHandler}
            handleModifyHandler={handleModifyHandler}
            fieldName="url"
            fieldDisplay="URL:"
-            placeholder="Ex: https://influxdata.com"
+            placeholder="ex: https://influxdata.com"
          />
          <HandlerInput
            selectedHandler={selectedHandler}
            handleModifyHandler={handleModifyHandler}
            fieldName="urlTitle"
            fieldDisplay="URL Title:"
-            placeholder="Ex: InfluxData"
+            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="Sound:"
-            placeholder="Ex: alien"
+            fieldDisplay="Alert Sound:"
+            placeholder="ex: alien"
          />
        </div>
      </div>
--- a/ui/src/kapacitor/components/handlers/SMTPHandler.js
+++ b/ui/src/kapacitor/components/handlers/SMTPHandler.js
@ -6,13 +6,40 @@ const SmtpHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
  return selectedHandler.enabled
    ? <div className="endpoint-tab-contents">
        <div className="endpoint-tab--parameters">
-          <h4>Optional Parameters</h4>
+          <h4>Parameters from Kapacitor Configuration</h4>
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="host"
+            fieldDisplay="SMTP Host"
+            placeholder=""
+            disabled={true}
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="port"
+            fieldDisplay="SMTP Port"
+            placeholder=""
+            disabled={true}
+          />
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="from"
+            fieldDisplay="from"
+            placeholder=""
+            disabled={true}
+          />
+        </div>
+        <div className="endpoint-tab--parameters">
+          <h4>Parameters for this Alert Handler</h4>
          <HandlerInput
            selectedHandler={selectedHandler}
            handleModifyHandler={handleModifyHandler}
            fieldName="to"
            fieldDisplay="E-mail Addresses: (separated by spaces)"
-            placeholder="Ex: bob@domain.com susan@domain.com"
+            placeholder="ex: bob@domain.com susan@domain.com"
          />
        </div>
      </div>
--- a/ui/src/kapacitor/components/handlers/SensuHandler.js
+++ b/ui/src/kapacitor/components/handlers/SensuHandler.js
@ -6,20 +6,32 @@ const SensuHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
  return selectedHandler.enabled
    ? <div className="endpoint-tab-contents">
        <div className="endpoint-tab--parameters">
-          <h4>Optional Parameters</h4>
+          <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"
+            placeholder="ex: my_source"
          />
+        </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"
+            placeholder="ex: my_handlers"
+            fieldColumns="col-md-12"
          />
        </div>
      </div>
--- a/ui/src/kapacitor/components/handlers/SlackHandler.js
+++ b/ui/src/kapacitor/components/handlers/SlackHandler.js
@ -6,27 +6,43 @@ const SlackHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
  return selectedHandler.enabled
    ? <div className="endpoint-tab-contents">
        <div className="endpoint-tab--parameters">
-          <h4>Optional Parameters</h4>
+          <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>
+        <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"
+            placeholder="ex: #my_favorite_channel"
+            fieldColumns="col-md-4"
          />
          <HandlerInput
            selectedHandler={selectedHandler}
            handleModifyHandler={handleModifyHandler}
            fieldName="username"
            fieldDisplay="Username:"
-            placeholder="Ex: my_favorite_username"
+            placeholder="ex: my_favorite_username"
+            fieldColumns="col-md-4"
          />
          <HandlerInput
            selectedHandler={selectedHandler}
            handleModifyHandler={handleModifyHandler}
            fieldName="iconEmoji"
            fieldDisplay="Emoji:"
-            placeholder="Ex: :thumbsup:"
+            placeholder="ex: :thumbsup:"
+            fieldColumns="col-md-4"
          />
        </div>
      </div>
--- a/ui/src/kapacitor/components/handlers/TalkHandler.js
+++ b/ui/src/kapacitor/components/handlers/TalkHandler.js
@ -1,10 +1,30 @@
 import React, {PropTypes} from 'react'
+import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'

-const TalkHandler = ({selectedHandler, configLink}) => {
+const TalkHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
  return selectedHandler.enabled
-    ? <div className="rule-section--row rule-section--border-bottom">
-        <p>Talk requires no additional alert parameters.</p>
+    ? <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>
      </div>
    : <HandlerEmpty configLink={configLink} />
 }
--- a/ui/src/kapacitor/components/handlers/TcpHandler.js
+++ b/ui/src/kapacitor/components/handlers/TcpHandler.js
@ -5,13 +5,13 @@ const TcpHandler = ({selectedHandler, handleModifyHandler}) => {
  return (
    <div className="endpoint-tab-contents">
      <div className="endpoint-tab--parameters">
-        <h4>Optional Parameters</h4>
+        <h4>Parameters for this Alert Handler</h4>
        <HandlerInput
          selectedHandler={selectedHandler}
          handleModifyHandler={handleModifyHandler}
          fieldName="address"
-          fieldDisplay="address"
-          placeholder="Ex: exampleendpoint.com:5678"
+          fieldDisplay="Address"
+          placeholder="ex: exampleendpoint.com:5678"
        />
      </div>
    </div>
--- a/ui/src/kapacitor/components/handlers/TelegramHandler.js
+++ b/ui/src/kapacitor/components/handlers/TelegramHandler.js
@ -11,20 +11,33 @@ const TelegramHandler = ({
  return selectedHandler.enabled
    ? <div className="endpoint-tab-contents">
        <div className="endpoint-tab--parameters">
-          <h4>Optional Parameters</h4>
+          <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>
+        <div className="endpoint-tab--parameters">
+          <h4>Parameters for this Alert Handler</h4>
          <HandlerInput
            selectedHandler={selectedHandler}
            handleModifyHandler={handleModifyHandler}
            fieldName="chatId"
            fieldDisplay="Chat ID:"
-            placeholder="Ex: ??????"
+            placeholder="ex: chat_id"
          />
          <HandlerInput
            selectedHandler={selectedHandler}
            handleModifyHandler={handleModifyHandler}
            fieldName="parseMode"
            fieldDisplay="Parse Mode:"
-            placeholder="Ex: Markdown"
+            placeholder="ex: Markdown or HTML"
          />
          <HandlerCheckbox
            selectedHandler={selectedHandler}
--- a/ui/src/kapacitor/components/handlers/VictorOpsHandler.js
+++ b/ui/src/kapacitor/components/handlers/VictorOpsHandler.js
@ -10,13 +10,25 @@ const VictoropsHandler = ({
  return selectedHandler.enabled
    ? <div className="endpoint-tab-contents">
        <div className="endpoint-tab--parameters">
-          <h4>Optional Parameters</h4>
+          <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}
+          />
+        </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"
+            placeholder="ex: routing_key"
          />
        </div>
      </div>
--- a/ui/src/style/pages/kapacitor.scss
+++ b/ui/src/style/pages/kapacitor.scss
@ -260,7 +260,7 @@ $rule-builder--radius-lg: 5px;
    top: ($rule-builder--padding-lg * 2);
    left: $rule-builder--padding-sm;
    width: calc(100% - #{$rule-builder--padding-sm * 2});
-    height: calc(100% - #{$rule-builder--padding-lg * 2}) !important;;
+    height: calc(100% - #{$rule-builder--padding-lg * 2}) !important;
  }
  > .dygraph > .dygraph-child {
    position: absolute;
@ -290,7 +290,10 @@ $rule-builder--radius-lg: 5px;
 }
 .rule-builder--graph-options {
  width: 100%;
-  padding: $rule-builder--padding-sm ($rule-builder--padding-lg - $rule-builder--padding-sm);
+  padding: $rule-builder--padding-sm
+    (
+      $rule-builder--padding-lg - $rule-builder--padding-sm
+    );
  display: flex;
  align-items: center;
  height: ($rule-builder--padding-lg * 2);
@ -422,7 +425,7 @@ $rule-builder--radius-lg: 5px;
 }

 .endpoint-tabs {
-  width: 260px;
+  width: 150px;
  background-color: $rule-builder--section-border;
  border-bottom-left-radius: $rule-builder--radius-lg;
  display: flex;
@ -448,9 +451,7 @@ $rule-builder--radius-lg: 5px;
  font-size: 14.5px;
  font-weight: 600;
  border-right: 2px solid $rule-builder--section-border;
-  transition:
-    color 0.25s ease,
-    background-color 0.25s ease,
+  transition: color 0.25s ease, background-color 0.25s ease,
    border-color 0.25s ease;

  &:last-child {
@ -490,7 +491,7 @@ $rule-builder--radius-lg: 5px;
    left: 50%;
    background-color: $g8-storm;
    border-radius: 1px;
-    transform: translate(-50%,-50%) rotate(45deg);
+    transform: translate(-50%, -50%) rotate(45deg);
    transition: background-color 0.25s ease;
  }
  &:before {
@ -506,7 +507,9 @@ $rule-builder--radius-lg: 5px;
    background-color: $g5-pepper;
    cursor: pointer;
    &:before,
-    &:after {background-color: $g20-white;}
+    &:after {
+      background-color: $g20-white;
+    }
  }
  &:hover:active {
    background-color: $c-curacao;
@ -519,6 +522,7 @@ $rule-builder--radius-lg: 5px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
+  min-height: 350px;

  h4 {
    width: 100%;
@ -532,4 +536,31 @@ $rule-builder--radius-lg: 5px;
 }
 .endpoint-tab--parameters {
  padding: $rule-builder--padding-lg;
+  padding-bottom: 0;
+
+  &:last-child {
+    padding-bottom: $rule-builder--padding-lg;
+  }
+}
+.endpoint-tab--parameters form {
+  margin-left: -7px;
+  margin-right: -7px;
+}
+.endpoint-tab--parameters--empty {
+  align-items: center;
+  justify-content: center;
+  @include no-user-select();
+
+  p {
+    margin: 0;
+    font-size: 16px;
+    line-height: 23px;
+    text-align: center;
+    color: $g12-forge;
+
+    strong {
+      color: $g18-cloud;
+      font-weight: 900;
+    }
+  }
 }