From 6aac3f16e8c4d5ab530f855e785fac404dc04501 Mon Sep 17 00:00:00 2001 From: Yulia Shanyrova Date: Tue, 18 Oct 2022 17:09:15 +0200 Subject: [PATCH] Telegram redesign --- .../TelegramIntegrationButton.module.css | 10 ++ .../TelegramIntegrationButton.tsx | 170 +++++++----------- .../tabs/TelegramInfo/TelegramInfo.module.css | 11 ++ .../parts/tabs/TelegramInfo/TelegramInfo.tsx | 99 ++++++---- grafana-plugin/src/icons/index.tsx | 20 +++ .../TelegramSettings.module.css | 9 + .../TelegramSettings/TelegramSettings.tsx | 94 ++++++---- 7 files changed, 244 insertions(+), 169 deletions(-) diff --git a/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.module.css b/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.module.css index 59d60c4e..818c6064 100644 --- a/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.module.css +++ b/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.module.css @@ -19,3 +19,13 @@ .telegram-instruction-cancel { margin-top: 24px; } + +.telegram-block { + width: 100%; +} + +.field-command { + margin-top: 8px; + width: 100%; + display: inline-block; +} diff --git a/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.tsx b/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.tsx index 4e5524ae..0a2e5f2a 100644 --- a/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.tsx +++ b/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.tsx @@ -1,12 +1,13 @@ import React, { useCallback, useState, useEffect } from 'react'; -import { Button, Modal, Icon, HorizontalGroup } from '@grafana/ui'; +import { Button, Modal, Icon, HorizontalGroup, VerticalGroup, Field, Input } from '@grafana/ui'; import cn from 'classnames/bind'; import { observer } from 'mobx-react'; import CopyToClipboard from 'react-copy-to-clipboard'; import Text from 'components/Text/Text'; import WithConfirm from 'components/WithConfirm/WithConfirm'; +import Block from 'components/GBlock/Block'; import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl'; import { useStore } from 'state/useStore'; import { UserAction } from 'state/userAction'; @@ -47,7 +48,7 @@ const TelegramIntegrationButton = observer((props: TelegramIntegrationProps) => <> {showModal && } @@ -76,110 +77,77 @@ const TelegramModal = (props: TelegramModalProps) => { }, []); return ( - -
- Follow these steps to create and connect to a dedicated OnCall channel. -
- -
- - If you already have a dedicated channel to use with OnCall, you can use the following activation code:{' '} - {verificationCode} - - { - openNotification('Verification code copied'); - }} - > - - - + + + + + If you already have a private channel to work with OnCall, use the following activation code: + + + { + openNotification('Code is copied'); + }} + > + + + } + /> + + + Setup new channel. + + 1. Open Telegram, create a new Private Channel and enable{' '} + Sign Messages in settings. -
- -
- 1. Create a New Channel, and set it to Private. -
- -
- - 2. In Manage Channel, make sure Sign messages is enabled. + + 2. Create a new Discussion group. This group handles alert actions and comments.{' '} -
- -
- 3. Create a new discussion group. This group handles alert actions and comments. -
- -
- - 4. Add the discussion group to the channel. In Manage Channel, click Discussion to find and add - the new group. + + 3. Connect the discussion group with the channel. In Manage Channel, click{' '} + Discussion to find and add your group.{' '} -
- -
- - 5. Click{' '} - - {botLink} - {' '} - to add the OnCall bot to your contacts. Add the bot to your channel as an Admin. Allow it to{' '} - Post Messages. + + 4. Go to {botLink} to add the OnCall bot to your contacts. Then add the bot to your + channel as an Admin and allow it to Post Messages. -
- -
- 6. Add the bot to the discussion group. -
- -
- - 7. Send the verification code, {verificationCode} - - { - openNotification('Verification code copied'); - }} - > - - - {' '} - , to the channel and wait for the confirmation message. + 5. Add the bot to the discussion group. + + 6. Send this verification code to the channel and wait for the confirmation message: + + { + openNotification('Code is copied'); + }} + > + + + } + /> + -
- -
- 8. Make sure users connect their Telegram accounts in their OnCall user profile. -
- -
- 9. Done! Now you can manage alerts in your Telegram workspace. -
- -
- - Each alert group notification is assigned a dedicated discussion. Users can perform notification actions - (acknowledge, resolve, silence) and discuss alerts in the comments section of the discussions. - - -
- -
- - - - -
+ 7. Start to manage alerts in your team Telegram workspace. +
+ + + + +
+ ); }; diff --git a/grafana-plugin/src/containers/UserSettings/parts/tabs/TelegramInfo/TelegramInfo.module.css b/grafana-plugin/src/containers/UserSettings/parts/tabs/TelegramInfo/TelegramInfo.module.css index b5c7e681..29eec363 100644 --- a/grafana-plugin/src/containers/UserSettings/parts/tabs/TelegramInfo/TelegramInfo.module.css +++ b/grafana-plugin/src/containers/UserSettings/parts/tabs/TelegramInfo/TelegramInfo.module.css @@ -6,3 +6,14 @@ display: flex; justify-content: space-between; } + +.automatic-connect-telegram-block { + width: 100%; + display: flex; + justify-content: space-between; +} + +.field-command { + width: 100%; + display: inline-block; +} \ No newline at end of file diff --git a/grafana-plugin/src/containers/UserSettings/parts/tabs/TelegramInfo/TelegramInfo.tsx b/grafana-plugin/src/containers/UserSettings/parts/tabs/TelegramInfo/TelegramInfo.tsx index 633c9d8b..b191f4dd 100644 --- a/grafana-plugin/src/containers/UserSettings/parts/tabs/TelegramInfo/TelegramInfo.tsx +++ b/grafana-plugin/src/containers/UserSettings/parts/tabs/TelegramInfo/TelegramInfo.tsx @@ -1,15 +1,17 @@ import React, { HTMLAttributes, useEffect, useState } from 'react'; -import { Alert, Button, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui'; +import { Alert, Button, HorizontalGroup, Icon, VerticalGroup, Field, Input } from '@grafana/ui'; import cn from 'classnames/bind'; import { observer } from 'mobx-react'; import CopyToClipboard from 'react-copy-to-clipboard'; import PluginLink from 'components/PluginLink/PluginLink'; import Text from 'components/Text/Text'; +import Block from 'components/GBlock/Block'; import { AppFeature } from 'state/features'; import { useStore } from 'state/useStore'; import { openNotification } from 'utils'; +import { TelegramColorIcon } from 'icons'; import styles from './TelegramInfo.module.css'; @@ -37,45 +39,66 @@ const TelegramInfo = observer((props: TelegramInfoProps) => { <> {telegramConfigured || !store.hasFeature(AppFeature.LiveSettings) ? ( - - - - Or add bot manually: - - - 1) Go to{' '} - - {botLink} - - - - - 2) Send - {verificationCode} - { - openNotification('Verification code copied'); - }} - > - - - to telegram bot - + Connect personal Telegram + + Connect Telegram automatically + + + + + Manual connection: + + + 1. Go to{' '} + + {botLink} + + + + + 2. Send this verification code to the bot and wait for the confirmation message: + + + { + openNotification('Code is copied'); + }} + > + + + } + /> + + 3. Refresh the page and start to manage alerts in your personal Telegram. ) : ( - - Can't connect Telegram. Check ENV variables{' '} - related to Telegram. - - } - /> + + Connect Telegram workspace + + + + You can manage incidents in your team Telegram channel or from personal direct messages. + + + To connect channel setup Telegram environment first, which includes connection to your bot and host URL. + + + More details in{' '} + + our documentation + + + + + + + + )} ); diff --git a/grafana-plugin/src/icons/index.tsx b/grafana-plugin/src/icons/index.tsx index ff0afb08..aca2e3d3 100644 --- a/grafana-plugin/src/icons/index.tsx +++ b/grafana-plugin/src/icons/index.tsx @@ -269,3 +269,23 @@ export const IsOncallIcon = (props: IsOncallIconProps) => { ); }; + +export const TelegramColorIcon = () => { + return ( + + + + + + + ); +}; diff --git a/grafana-plugin/src/pages/chat-ops/parts/tabs/TelegramSettings/TelegramSettings.module.css b/grafana-plugin/src/pages/chat-ops/parts/tabs/TelegramSettings/TelegramSettings.module.css index 837f409b..b84ff65e 100644 --- a/grafana-plugin/src/pages/chat-ops/parts/tabs/TelegramSettings/TelegramSettings.module.css +++ b/grafana-plugin/src/pages/chat-ops/parts/tabs/TelegramSettings/TelegramSettings.module.css @@ -6,3 +6,12 @@ display: flex; justify-content: space-between; } + +.telegram-infoblock { + text-align: center; + width: 725px; +} + +ul { + margin: 20px 30px; +} \ No newline at end of file diff --git a/grafana-plugin/src/pages/chat-ops/parts/tabs/TelegramSettings/TelegramSettings.tsx b/grafana-plugin/src/pages/chat-ops/parts/tabs/TelegramSettings/TelegramSettings.tsx index d8b694c6..37eb8165 100644 --- a/grafana-plugin/src/pages/chat-ops/parts/tabs/TelegramSettings/TelegramSettings.tsx +++ b/grafana-plugin/src/pages/chat-ops/parts/tabs/TelegramSettings/TelegramSettings.tsx @@ -1,12 +1,13 @@ import React, { Component } from 'react'; -import { Alert, Button, HorizontalGroup, Icon, LoadingPlaceholder, VerticalGroup } from '@grafana/ui'; +import { Alert, Badge, Button, HorizontalGroup, Icon, LoadingPlaceholder, VerticalGroup } from '@grafana/ui'; import cn from 'classnames/bind'; import { observer } from 'mobx-react'; import GTable from 'components/GTable/GTable'; import PluginLink from 'components/PluginLink/PluginLink'; import Text from 'components/Text/Text'; +import Block from 'components/GBlock/Block'; import Tutorial from 'components/Tutorial/Tutorial'; import { TutorialStep } from 'components/Tutorial/Tutorial.types'; import WithConfirm from 'components/WithConfirm/WithConfirm'; @@ -15,6 +16,7 @@ import { TelegramChannel } from 'models/telegram_channel/telegram_channel.types' import { AppFeature } from 'state/features'; import { WithStoreProps } from 'state/types'; import { withMobXProviderContext } from 'state/withStore'; +import { TelegramColorIcon } from 'icons'; import styles from './TelegramSettings.module.css'; @@ -47,16 +49,28 @@ class TelegramSettings extends Component { if (!telegramConfigured && store.hasFeature(AppFeature.LiveSettings)) { return ( - - Can't connect Telegram. Check ENV variables{' '} - related to Telegram. - - } - /> + + Connect Telegram workspace + + + + You can manage incidents in your team Telegram channel or from personal direct messages. + + + To connect channel setup Telegram environment first, which includes connection to your bot and host URL. + + + More details in{' '} + + our documentation + + + + + + + + ); } @@ -66,38 +80,51 @@ class TelegramSettings extends Component { if (!connectedChannels.length) { return ( - + Connect Telegram workspace + + + You can manage incidents in your team Telegram channel or from personal direct messages. - Bring the whole incident lifecycle into your chat workspace. Everything from alerts, monitoring, and - escalations to reports. + More details in{' '} + + our documentation + - - } - /> + + + Features +
    +
  • perform actions (acknowledge, resolve, silence)
    • +
  • discuss alerts in comments
    • +
  • notifications to users accounts will be served as links to the main channel
    • +
+ Make sure your team connects Telegram in their OnCall user profiles too or they cannot manage incidents. + + + + + + + + ); } const columns = [ { - width: '30%', - title: 'Channel name', - dataIndex: 'channel_name', + width: '35%', + title: 'Channel', + key: 'name', + render: this.renderChannelName, }, { - width: '30%', - title: 'Discussion group name', + width: '35%', + title: 'Discussion group', dataIndex: 'discussion_group_name', }, - { - width: '10%', - title: 'Is default channel', - dataIndex: 'is_default_channel', - render: this.renderDefaultChannel, - }, { width: '30%', key: 'action', @@ -126,6 +153,13 @@ class TelegramSettings extends Component { ); } + renderChannelName = (record: TelegramChannel) => { + return ( + <> + {record.channel_name} {record.is_default_channel && } + + ); + }; renderDefaultChannel = (isDefault: boolean) => { return <>{isDefault && }; };