Replace Kapacitor Alert Endpoint Dropdown with Radio Buttons (#1258)

* Replace Endpoint Dropdown with Radio Buttons

* Update CHANGELOG

* Update CHANGELOG

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Bug Fixes
 ### Features
 ### UI Improvements
+  1. [#1258](https://github.com/influxdata/chronograf/pull/1258): Display Kapacitor alert endpoint options as radio button group
 
 ## v1.2.0-beta8 [2017-04-07]
 

ui/src/kapacitor/components/RuleMessage.js

@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react'
+import classnames from 'classnames'
 import ReactTooltip from 'react-tooltip'
 
-import Dropdown from 'shared/components/Dropdown'
 import RuleMessageAlertConfig from 'src/kapacitor/components/RuleMessageAlertConfig'
 
 import {
@@ -55,17 +55,25 @@ export const RuleMessage = React.createClass({
       return {text, ruleID: rule.id}
     }).concat(defaultAlertEndpoints)
 
-    const selectedAlert = rule.alerts[0]
+    const selectedAlert = rule.alerts[0] || alerts[0].text
 
     return (
       <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 className="kapacitor-values-tabs">
+            <p>Send this Alert to:</p>
+            <ul className="btn-group btn-group-lg tab-group">
+              {alerts.map(alert =>
+                <li
+                  key={alert.text}
+                  className={classnames('btn tab', {active: alert.text === selectedAlert})}
+                  onClick={() => this.handleChooseAlert(alert)}
+                >
+                  {alert.text}
+                </li>
+              )}
+            </ul>
           </div>
           <RuleMessageAlertConfig
             updateAlertNodes={actions.updateAlertNodes}

ui/src/style/pages/kapacitor.scss

@@ -511,6 +511,7 @@ div.qeditor.kapacitor-metric-selector {
 }
 
 .kapacitor-values-tabs,
+.kapacitor-alert-message,
 .value-selector {
   background-color: $kapacitor-graphic-color;
   padding: ($kap-padding-sm - 2px) $kap-padding-lg;
@@ -556,11 +557,14 @@ div.qeditor.kapacitor-metric-selector {
   }
 }
 
-.kapacitor-values-tabs {
+.kapacitor-values-tabs,
+.kapacitor-alert-message, {
   border-radius: $kap-radius-lg $kap-radius-lg 0 0;
   border-bottom: 2px solid $kapacitor-divider-color;
 
   .tab-group {
+    padding: 0;
+
     > .btn.tab {
       padding: 0 $kap-padding-md;
       height: $kap-input-height;
@@ -627,8 +631,8 @@ div.qeditor.kapacitor-metric-selector {
       color: $c-honeydew !important;
     }
   }
-  
-  
+
+
   .size-486 {
     width: 486px;
   }
@@ -656,4 +660,4 @@ div.qeditor.kapacitor-metric-selector {
   .size-49 {
     width: 49px;
   }
-}
+}