Merge pull request #797 from influxdata/bugfix/telegram#640

Fix format sent to Kapacitor for Telegram.

ui/src/kapacitor/components/TelegramConfig.js

@@ -18,11 +18,19 @@ const TelegramConfig = React.createClass({
   handleSaveAlert(e) {
     e.preventDefault();
 
+    let parseMode;
+    if (this.parseModeHTML.checked) {
+      parseMode = 'HTML';
+    }
+    if (this.parseModeMarkdown.checked) {
+      parseMode = 'Markdown';
+    }
+
     const properties = {
-      chatID: this.chatID.value,
-      disableNotification: this.disableNotification.checked,
-      disableWebPagePreview: this.disableWebPagePreview.checked,
-      parseMode: this.parseMode.checked,
+      'chat-id': this.chatID.value,
+      'disable-notification': this.disableNotification.checked,
+      'disable-web-page-preview': this.disableWebPagePreview.checked,
+      'parse-mode': parseMode,
       token: this.token.value,
       url: this.url.value,
     };
@@ -61,9 +69,16 @@ const TelegramConfig = React.createClass({
           </div>
 
           <div className="form-group col-xs-12">
+            <label htmlFor="parseMode">Parse Mode</label>
             <div className="form-control-static">
-              <input id="enableParseMode" type="checkbox" defaultChecked={parseMode} ref={(r) => this.parseMode = r} />
-              <label htmlFor="enableParseMode">Enable Parse Mode</label>
+              <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>
 

ui/src/style/theme/theme-dark.scss

@@ -535,3 +535,80 @@ $form-static-checkbox-size: 16px;
     }
   }
 }
+
+.form-control-static .radio {
+  margin: 0;
+
+  input[type="radio"] {
+    position: relative;
+    left: -9999px;
+    visibility: hidden;
+    width: 0;
+    height: 0;
+    margin: 0;
+
+    // Faux Checkbox
+    & + label {
+      font-size: 14px !important;
+      line-height: 16px;
+      color: $g11-sidewalk;
+      font-weight: 500;
+      transition: color 0.25s ease;
+      margin: 0;
+      padding: 0 0 0 (12px + $form-static-checkbox-size) !important;
+      user-select: none;
+      -ms-user-select: none;
+      -moz-user-selct: none;
+      -webkit-user-select: none;
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: $form-static-checkbox-size;
+        height: $form-static-checkbox-size;
+        background-color: $g2-kevlar;
+        border: 2px solid $g5-pepper;
+        border-radius: 50%;
+        z-index: 2;
+        transition:
+          border-color 0.25s ease;
+      }
+      &:after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: ($form-static-checkbox-size / 2);
+        transform: translate(-50%,-50%) scale(2,2);
+        opacity: 0;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background-color: $c-pool;
+        z-index: 3;
+        transition:
+          opacity 0.25s ease,
+          transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      }
+      &:hover {
+        cursor: pointer;
+        color: $g20-white;
+
+        &:before {
+          border-color: $g6-smoke;
+        }
+      }
+    }
+    // Faux Checkbox (Checked)
+    &:checked + label {
+      color: $g20-white;
+
+      &:after {
+        opacity: 1;
+        transform: translate(-50%,-50%) scale(1,1);
+      }
+    }
+  }
+}