Clean up Kapacitor Alert configuration for Telegram (#1135)

* Text and placeholder updates

* Peel types off PropTypes

* Revert to parseMode

* Update copy to be more descriptive of resulting behavior

* Add question mark tooltips to Chat ID and Token

* Expand tooltips to be hoverable with clickable contents

* Extract QuestionMarkComponent to its own file

* Update CHANGELOG

* url is never changed, so omit this field

* Extract constants to their own file

CHANGELOG.md

@@ -13,8 +13,10 @@
 
 ### UI Improvements
   1. [#1101](https://github.com/influxdata/chronograf/pull/1101): Compress InfluxQL responses with gzip
-  2. [#1132](https://github.com/influxdata/chronograf/pull/1132): All sidebar items show activity with a blue strip
-  3. [#1079](https://github.com/influxdata/chronograf/issues/1079): Remove series highlighting in line graphs
+  1. [#1132](https://github.com/influxdata/chronograf/pull/1132): All sidebar items show activity with a blue strip
+  1. [#1135](https://github.com/influxdata/chronograf/pull/1135): Clarify Kapacitor Alert configuration for Telegram
+  1. [#1079](https://github.com/influxdata/chronograf/issues/1079): Remove series highlighting in line graphs
+
 
 ## v1.2.0-beta7 [2017-03-28]
 ### Bug Fixes

ui/src/kapacitor/components/TelegramConfig.js

@@ -1,18 +1,26 @@
 import React, {PropTypes} from 'react'
+import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
+import {TELEGRAM_CHAT_ID_TIP, TELEGRAM_TOKEN_TIP} from 'src/kapacitor/copy'
+
+const {
+  bool,
+  func,
+  shape,
+  string,
+} = PropTypes
 
 const TelegramConfig = React.createClass({
   propTypes: {
-    config: PropTypes.shape({
-      options: PropTypes.shape({
-        'chat-id': PropTypes.string.isRequired,
-        'disable-notification': PropTypes.bool.isRequired,
-        'disable-web-page-preview': PropTypes.bool.isRequired,
-        'parse-mode': PropTypes.string.isRequired,
-        token: PropTypes.bool.isRequired,
-        url: PropTypes.string.isRequired,
+    config: shape({
+      options: shape({
+        'chat-id': string.isRequired,
+        'disable-notification': bool.isRequired,
+        'disable-web-page-preview': bool.isRequired,
+        'parse-mode': string.isRequired,
+        token: bool.isRequired,
       }).isRequired,
     }).isRequired,
-    onSave: PropTypes.func.isRequired,
+    onSave: func.isRequired,
   },
 
   handleSaveAlert(e) {
@@ -32,7 +40,6 @@ const TelegramConfig = React.createClass({
       'disable-web-page-preview': this.disableWebPagePreview.checked,
       'parse-mode': parseMode,
       token: this.token.value,
-      url: this.url.value,
     }
 
     this.props.onSave(properties)
@@ -40,7 +47,7 @@ const TelegramConfig = React.createClass({
 
   render() {
     const {options} = this.props.config
-    const {url, token} = options
+    const {token} = options
     const chatID = options['chat-id']
     const disableNotification = options['chat-id']
     const disableWebPagePreview = options['disable-web-page-preview']
@@ -50,49 +57,76 @@ const TelegramConfig = React.createClass({
       <div>
         <h4 className="text-center no-user-select">Telegram Alert</h4>
         <br/>
-        <p className="no-user-select">You can have alerts sent to Telegram by entering info below.</p>
+        <p className="no-user-select">
+          Send alert messages to a <a href="https://docs.influxdata.com/kapacitor/v1.2/guides/event-handler-setup/#telegram-bot" target="_blank">Telegram bot</a>.
+        </p>
         <form onSubmit={this.handleSaveAlert}>
           <div className="form-group col-xs-12">
-            <label htmlFor="url">Telegram URL</label>
-            <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
-          </div>
-
-          <div className="form-group col-xs-12">
-            <label htmlFor="token">Token</label>
-            <input className="form-control" id="token" type="text" ref={(r) => this.token = r} defaultValue={token || ''}></input>
+            <label htmlFor="token">
+              Token
+              <QuestionMarkTooltip
+                tipID="token"
+                tipContent={TELEGRAM_TOKEN_TIP}
+              />
+            </label>
+            <input
+              className="form-control"
+              id="token"
+              type="text"
+              placeholder="your-telegram-token"
+              ref={(r) => this.token = r}
+              defaultValue={token || ''}>
+            </input>
             <label className="form-helper">Note: a value of <code>true</code> indicates the Telegram token has been set</label>
           </div>
 
           <div className="form-group col-xs-12">
-            <label htmlFor="chat-id">Chat ID</label>
-            <input className="form-control" id="chat-id" type="text" ref={(r) => this.chatID = r} defaultValue={chatID || ''}></input>
+            <label htmlFor="chat-id">
+              Chat ID
+              <QuestionMarkTooltip
+                tipID="chat-id"
+                tipContent={TELEGRAM_CHAT_ID_TIP}
+              />
+            </label>
+            <input
+              className="form-control"
+              id="chat-id"
+              type="text"
+              placeholder="your-telegram-chat-id"
+              ref={(r) => this.chatID = r}
+              defaultValue={chatID || ''}>
+            </input>
           </div>
 
           <div className="form-group col-xs-12">
-            <label htmlFor="parseMode">Parse Mode</label>
+            <label htmlFor="parseMode">Select the alert message format</label>
             <div className="form-control-static">
+              <div className="radio">
+                <input id="parseModeMarkdown" type="radio" name="parseMode" value="markdown" defaultChecked={parseMode !== 'HTML'} ref={(r) => this.parseModeMarkdown = r} />
+                <label htmlFor="parseModeMarkdown">Markdown</label>
+              </div>
               <div className="radio">
                 <input id="parseModeHTML" type="radio" name="parseMode" value="html" defaultChecked={parseMode === 'HTML'} ref={(r) => this.parseModeHTML = r} />
                 <label htmlFor="parseModeHTML">HTML</label>
               </div>
-              <div className="radio">
-                <input id="parseModeMarkdown" type="radio" name="parseMode" value="markdown" defaultChecked={parseMode === 'Markdown'} ref={(r) => this.parseModeMarkdown = r} />
-                <label htmlFor="parseModeMarkdown">Markdown</label>
-              </div>
             </div>
           </div>
 
           <div className="form-group col-xs-12">
             <div className="form-control-static">
               <input id="disableWebPagePreview" type="checkbox" defaultChecked={disableWebPagePreview} ref={(r) => this.disableWebPagePreview = r} />
-              <label htmlFor="disableWebPagePreview">Disable Web Page Preview</label>
+              <label htmlFor="disableWebPagePreview">
+                Disable <a href="https://telegram.org/blog/link-preview" target="_blank">link previews</a> in alert messages.
+              </label>
             </div>
           </div>
 
           <div className="form-group col-xs-12">
             <div className="form-control-static">
               <input id="disableNotification" type="checkbox" defaultChecked={disableNotification} ref={(r) => this.disableNotification = r} />
-              <label htmlFor="disableNotification">Disable Notification</label>
+              <label htmlFor="disableNotification">
+                Disable notifications on iOS devices and disable sounds on Android devices. Android users continue to receive notifications.
+              </label>
             </div>
           </div>
 

ui/src/kapacitor/copy.js

@@ -0,0 +1,5 @@
+const telegramChatIDLink = 'https://docs.influxdata.com/kapacitor/latest/guides/event-handler-setup/#telegram-chat-id'
+export const TELEGRAM_CHAT_ID_TIP = `<p>Need help finding your chat id? Check out <a target='_blank' href='${telegramChatIDLink}'>these steps</a>.</p>`
+
+const telegramTokenLink = 'https://docs.influxdata.com/kapacitor/latest/guides/event-handler-setup/#telegram-api-access-token'
+export const TELEGRAM_TOKEN_TIP = `<p>Need help finding your token? Check out <a target='_blank' href='${telegramTokenLink}'>these steps</a>.</p>`

ui/src/shared/components/QuestionMarkTooltip.js

@@ -0,0 +1,30 @@
+import React, {PropTypes} from 'react'
+import ReactTooltip from 'react-tooltip'
+
+const QuestionMarkTooltip = ({
+  tipID,
+  tipContent,
+}) => (
+  <div style={{display: "inline-block"}}>
+    <div data-for={`${tipID}-tooltip`} data-tip={tipContent} style={{margin: "0 5px"}}>?</div>
+    <ReactTooltip
+      id={`${tipID}-tooltip`}
+      effect="solid"
+      html={true}
+      offset={{top: 2}}
+      place="bottom"
+      class="influx-tooltip__hover place-bottom"
+    />
+  </div>
+)
+
+const {
+  string,
+} = PropTypes
+
+QuestionMarkTooltip.propTypes = {
+  tipID: string.isRequired,
+  tipContent: string.isRequired,
+}
+
+export default QuestionMarkTooltip

ui/src/style/components/react-tooltips.scss

@@ -86,3 +86,12 @@ $tooltip-code-color: $c-potassium;
     }
   }
 }
+
+.influx-tooltip__hover {
+  @extend .influx-tooltip;
+  pointer-events: auto!important;
+  &:hover {
+    visibility: visible!important;
+    opacity: 1!important;
+  }
+}