- 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