From c0182922edec40058bb151480bc485c115db7591 Mon Sep 17 00:00:00 2001 From: Hunter Trujillo Date: Wed, 25 Jan 2017 16:22:59 -0700 Subject: [PATCH 1/4] Fix format sent to Kapacitor for Telegram. --- ui/src/kapacitor/components/TelegramConfig.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/src/kapacitor/components/TelegramConfig.js b/ui/src/kapacitor/components/TelegramConfig.js index 917a41ae5..ce3dcddaf 100644 --- a/ui/src/kapacitor/components/TelegramConfig.js +++ b/ui/src/kapacitor/components/TelegramConfig.js @@ -19,10 +19,10 @@ const TelegramConfig = React.createClass({ e.preventDefault(); 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': this.parseMode.checked.toString(), token: this.token.value, url: this.url.value, }; From d166dcf7307592bed6d863f823b47a247e65c73d Mon Sep 17 00:00:00 2001 From: Hunter Trujillo Date: Thu, 26 Jan 2017 17:31:51 -0700 Subject: [PATCH 2/4] Fix Telegram parse-mode support for HTML and Markdown. --- ui/src/kapacitor/components/TelegramConfig.js | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/ui/src/kapacitor/components/TelegramConfig.js b/ui/src/kapacitor/components/TelegramConfig.js index ce3dcddaf..bac11f229 100644 --- a/ui/src/kapacitor/components/TelegramConfig.js +++ b/ui/src/kapacitor/components/TelegramConfig.js @@ -18,11 +18,15 @@ const TelegramConfig = React.createClass({ handleSaveAlert(e) { e.preventDefault(); + let parseMode + if (this.parseModeHTML.checked) parseMode = 'HTML' + if (this.parseModeMarkdown.checked) parseMode = 'Markdown' + const properties = { 'chat-id': this.chatID.value, 'disable-notification': this.disableNotification.checked, 'disable-web-page-preview': this.disableWebPagePreview.checked, - 'parse-mode': this.parseMode.checked.toString(), + 'parse-mode': parseMode, token: this.token.value, url: this.url.value, }; @@ -62,8 +66,19 @@ const TelegramConfig = React.createClass({
- this.parseMode = r} /> - +
+ +
+
+ +
+
From 36fab8dadf3e4099b95aebe00a2fceb6fcbeed6d Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 27 Jan 2017 14:14:48 -0800 Subject: [PATCH 3/4] Style radio buttons in config --- ui/src/kapacitor/components/TelegramConfig.js | 14 ++-- ui/src/style/theme/theme-dark.scss | 77 +++++++++++++++++++ 2 files changed, 82 insertions(+), 9 deletions(-) diff --git a/ui/src/kapacitor/components/TelegramConfig.js b/ui/src/kapacitor/components/TelegramConfig.js index bac11f229..7837e1173 100644 --- a/ui/src/kapacitor/components/TelegramConfig.js +++ b/ui/src/kapacitor/components/TelegramConfig.js @@ -65,20 +65,16 @@ const TelegramConfig = React.createClass({
+
- + this.parseModeHTML = r} /> +
- + this.parseModeMarkdown = r} /> +
-
diff --git a/ui/src/style/theme/theme-dark.scss b/ui/src/style/theme/theme-dark.scss index bfd042d7b..80fccd25d 100644 --- a/ui/src/style/theme/theme-dark.scss +++ b/ui/src/style/theme/theme-dark.scss @@ -528,6 +528,83 @@ $form-static-checkbox-size: 16px; &:checked + label { color: $g20-white; + &:after { + opacity: 1; + transform: translate(-50%,-50%) scale(1,1); + } + } + } +} + +.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); From 37970761a9a7986a809398de8dafee32cb4abd3a Mon Sep 17 00:00:00 2001 From: Hunter Trujillo Date: Fri, 27 Jan 2017 15:36:39 -0700 Subject: [PATCH 4/4] Fix linting. --- ui/src/kapacitor/components/TelegramConfig.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/ui/src/kapacitor/components/TelegramConfig.js b/ui/src/kapacitor/components/TelegramConfig.js index 7837e1173..11e3147a1 100644 --- a/ui/src/kapacitor/components/TelegramConfig.js +++ b/ui/src/kapacitor/components/TelegramConfig.js @@ -18,9 +18,13 @@ const TelegramConfig = React.createClass({ handleSaveAlert(e) { e.preventDefault(); - let parseMode - if (this.parseModeHTML.checked) parseMode = 'HTML' - if (this.parseModeMarkdown.checked) parseMode = 'Markdown' + let parseMode; + if (this.parseModeHTML.checked) { + parseMode = 'HTML'; + } + if (this.parseModeMarkdown.checked) { + parseMode = 'Markdown'; + } const properties = { 'chat-id': this.chatID.value,