Add button to config from each configured handler

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

@@ -11,7 +11,13 @@ const AlertaHandler = ({
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Parameters from Kapacitor Configuration</h4>
+          <h4 className="u-flex u-jc-space-between">
+            Parameters from Kapacitor Configuration
+            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+              <span className="icon cog-thick" />
+              Edit Kapacitor Configuration
+            </div>
+          </h4>
           <div className="faux-form">
             <HandlerInput
               selectedHandler={selectedHandler}

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

@@ -14,7 +14,13 @@ const EmailHandler = ({
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Parameters from Kapacitor Configuration</h4>
+          <h4 className="u-flex u-jc-space-between">
+            Parameters from Kapacitor Configuration
+            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+              <span className="icon cog-thick" />
+              Edit Kapacitor Configuration
+            </div>
+          </h4>
           <div className="faux-form">
             <HandlerInput
               selectedHandler={selectedHandler}

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

@@ -11,7 +11,13 @@ const HipchatHandler = ({
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Parameters for this Alert Handler</h4>
+          <h4 className="u-flex u-jc-space-between">
+            Parameters from Kapacitor Configuration
+            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+              <span className="icon cog-thick" />
+              Edit Kapacitor Configuration
+            </div>
+          </h4>
           <div className="faux-form">
             <HandlerInput
               selectedHandler={selectedHandler}

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

@@ -11,7 +11,13 @@ const OpsgenieHandler = ({
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Parameters from Kapacitor Configuration</h4>
+          <h4 className="u-flex u-jc-space-between">
+            Parameters from Kapacitor Configuration
+            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+              <span className="icon cog-thick" />
+              Edit Kapacitor Configuration
+            </div>
+          </h4>
           <div className="faux-form">
             <HandlerInput
               selectedHandler={selectedHandler}

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

@@ -11,7 +11,13 @@ const PagerdutyHandler = ({
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Parameters for this Alert Handler</h4>
+          <h4 className="u-flex u-jc-space-between">
+            Parameters from Kapacitor Configuration
+            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+              <span className="icon cog-thick" />
+              Edit Kapacitor Configuration
+            </div>
+          </h4>
           <HandlerInput
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}

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

@@ -11,7 +11,13 @@ const PushoverHandler = ({
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Parameters from Kapacitor Configuration</h4>
+          <h4 className="u-flex u-jc-space-between">
+            Parameters from Kapacitor Configuration
+            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+              <span className="icon cog-thick" />
+              Edit Kapacitor Configuration
+            </div>
+          </h4>
           <div className="faux-form">
             <HandlerInput
               selectedHandler={selectedHandler}

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

@@ -11,7 +11,13 @@ const SensuHandler = ({
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Parameters from Kapacitor Configuration</h4>
+          <h4 className="u-flex u-jc-space-between">
+            Parameters from Kapacitor Configuration
+            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+              <span className="icon cog-thick" />
+              Edit Kapacitor Configuration
+            </div>
+          </h4>
           <div className="faux-form">
             <HandlerInput
               selectedHandler={selectedHandler}

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

@@ -11,7 +11,13 @@ const SlackHandler = ({
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Parameters from Kapacitor Configuration</h4>
+          <h4 className="u-flex u-jc-space-between">
+            Parameters from Kapacitor Configuration
+            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+              <span className="icon cog-thick" />
+              Edit Kapacitor Configuration
+            </div>
+          </h4>
           <div className="faux-form">
             <HandlerInput
               selectedHandler={selectedHandler}

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

@@ -11,7 +11,13 @@ const TalkHandler = ({
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Parameters from Kapacitor Configuration</h4>
+          <h4 className="u-flex u-jc-space-between">
+            Parameters from Kapacitor Configuration
+            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+              <span className="icon cog-thick" />
+              Edit Kapacitor Configuration
+            </div>
+          </h4>
           <div className="faux-form">
             <HandlerInput
               selectedHandler={selectedHandler}

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

@@ -12,7 +12,13 @@ const TelegramHandler = ({
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Parameters from Kapacitor Configuration</h4>
+          <h4 className="u-flex u-jc-space-between">
+            Parameters from Kapacitor Configuration
+            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+              <span className="icon cog-thick" />
+              Edit Kapacitor Configuration
+            </div>
+          </h4>
           <div className="faux-form">
             <HandlerInput
               selectedHandler={selectedHandler}

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

@@ -11,7 +11,13 @@ const VictoropsHandler = ({
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Parameters from Kapacitor Configuration</h4>
+          <h4 className="u-flex u-jc-space-between">
+            Parameters from Kapacitor Configuration
+            <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+              <span className="icon cog-thick" />
+              Edit Kapacitor Configuration
+            </div>
+          </h4>
           <div className="faux-form">
             <HandlerInput
               selectedHandler={selectedHandler}

ui/src/style/pages/kapacitor.scss

@@ -579,6 +579,9 @@ $rule-builder--radius-lg: 5px;
   align-items: center;
   justify-content: space-between;
 }
+.endpoint-tab--parameters h4 .btn {
+  margin-left: 6px;
+}
 
 /*
  Rule Details