diff --git a/engine/apps/slack/views.py b/engine/apps/slack/views.py index 217b0f7c..8d4ca3c1 100644 --- a/engine/apps/slack/views.py +++ b/engine/apps/slack/views.py @@ -501,8 +501,8 @@ class SlackEventApiEndpointView(APIView): return text = ( - "Your Grafana account is not connected to your Slack account. :flushed:\n" - "That's very easy to fix. Please go to the *Grafana* -> *OnCall* -> *Users*, " + "The information in workspace is read-only. To be able to intercat with OnCall alert groups you need to connect a personal account.\n" + "Please go to the *Grafana* -> *OnCall* -> *Users*, " "choose *your profile* and click the *connect* button.\n" ":rocket: :rocket: :rocket:" ) diff --git a/grafana-plugin/src/components/GBlock/Block.module.css b/grafana-plugin/src/components/GBlock/Block.module.css index cb56c069..49f4ed2d 100644 --- a/grafana-plugin/src/components/GBlock/Block.module.css +++ b/grafana-plugin/src/components/GBlock/Block.module.css @@ -4,11 +4,11 @@ } :global(.theme-dark) .root_bordered { - border: var(--border); + border: var(--border-weak); } :global(.theme-light) .root_bordered { - border: var(--border); + border: var(--border-weak); } :global(.theme-dark) .root_shadowed { diff --git a/grafana-plugin/src/components/Text/Text.module.scss b/grafana-plugin/src/components/Text/Text.module.scss index febd6c75..158155bb 100644 --- a/grafana-plugin/src/components/Text/Text.module.scss +++ b/grafana-plugin/src/components/Text/Text.module.scss @@ -17,7 +17,6 @@ } &--link { color: var(--primary-text-link); - text-decoration: underline; } &--success { color: var(--green-5); diff --git a/grafana-plugin/src/containers/SlackInstructions/SlackInstructions.module.css b/grafana-plugin/src/containers/SlackInstructions/SlackInstructions.module.css new file mode 100644 index 00000000..0083dc6f --- /dev/null +++ b/grafana-plugin/src/containers/SlackInstructions/SlackInstructions.module.css @@ -0,0 +1,11 @@ +.slack-infoblock { + width: 725px; +} + +.slack-infoblock input { + color: var(--primary-text-link); +} + +.slack-icon { + width: 60px; +} diff --git a/grafana-plugin/src/containers/SlackInstructions/SlackInstructions.tsx b/grafana-plugin/src/containers/SlackInstructions/SlackInstructions.tsx new file mode 100644 index 00000000..edd7a21b --- /dev/null +++ b/grafana-plugin/src/containers/SlackInstructions/SlackInstructions.tsx @@ -0,0 +1,71 @@ +import React, { FC } from 'react'; + +import { Button, VerticalGroup, Icon, Field, Input } from '@grafana/ui'; +import cn from 'classnames/bind'; +import { observer } from 'mobx-react'; + +import Block from 'components/GBlock/Block'; +import Text from 'components/Text/Text'; +import { SlackNewIcon } from 'icons'; + +import styles from './SlackInstructions.module.css'; + +const cx = cn.bind(styles); + +interface SlackInstructionsProps {} +/* This component will be used when we will work on moving ENV variables to chat-ops, but we need to do work on backend side first */ +const SlackInstructions: FC = observer(() => { + return ( +
+ + Connect Slack workspace + + + + + You can manage alert groups in your Slack workspace. + Before start you need to connect your Slack bot to Grafana OnCall. + + For bot creating instructions and additional information please read{' '} + + our documentation + + {' '} + + + Setup environment + + Create OnCall Slack bot using{' '} + + our instructions + {' '} + and fill out app credentials below. + +
+ + {}} defaultValue={'appId'} /> + + + {}} defaultValue={'clientsecret'} /> + + + {}} defaultValue={'signingsecret'} /> + + + {}} defaultValue={'https://'} /> + +
+ + + Your host to Slack must start with “https://” and be publicly available (meaning + that it can be reached by Slack servers). If your host is private or local, you can use redirecting services + like Ngrok. + + + + +
+ ); +}); + +export default SlackInstructions; diff --git a/grafana-plugin/src/containers/SlackIntegrationButton/SlackIntegrationButton.tsx b/grafana-plugin/src/containers/SlackIntegrationButton/SlackIntegrationButton.tsx index f5e9d366..2b1fdbc5 100644 --- a/grafana-plugin/src/containers/SlackIntegrationButton/SlackIntegrationButton.tsx +++ b/grafana-plugin/src/containers/SlackIntegrationButton/SlackIntegrationButton.tsx @@ -63,7 +63,7 @@ const SlackIntegrationButton = observer((props: { className: string; disabled?: disabled={disabled} onClick={onInstallModalCallback} > - Install Slack integration + Connect Slack {showModal && } @@ -80,8 +80,8 @@ const SlackModal = (props: SlackModalProps) => { const { onHide, onConfirm } = props; return ( - -
+ +
You can view your Slack Workspace at the top-right corner after you are redirected. It should be a Workspace with App Bot installed:
diff --git a/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.module.css b/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.module.css index 59d60c4e..8ec18f73 100644 --- a/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.module.css +++ b/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.module.css @@ -19,3 +19,18 @@ .telegram-instruction-cancel { margin-top: 24px; } + +.telegram-block { + width: 100%; +} + +.field-command { + margin-top: 8px; + width: 100%; + display: inline-block; +} + +.infoblock-text { + margin-left: 48px; + margin-right: 48px; +} diff --git a/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.tsx b/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.tsx index 692e1fd7..4c307180 100644 --- a/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.tsx +++ b/grafana-plugin/src/containers/TelegramIntegrationButton/TelegramIntegrationButton.tsx @@ -1,10 +1,11 @@ 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 Block from 'components/GBlock/Block'; import Text from 'components/Text/Text'; import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl'; import { useStore } from 'state/useStore'; @@ -44,7 +45,7 @@ const TelegramIntegrationButton = observer((props: TelegramIntegrationProps) => <> {showModal && } @@ -73,101 +74,66 @@ 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/SlackTab/SlackTab.module.css b/grafana-plugin/src/containers/UserSettings/parts/tabs/SlackTab/SlackTab.module.css index ce2afbc6..51473abb 100644 --- a/grafana-plugin/src/containers/UserSettings/parts/tabs/SlackTab/SlackTab.module.css +++ b/grafana-plugin/src/containers/UserSettings/parts/tabs/SlackTab/SlackTab.module.css @@ -2,3 +2,13 @@ display: flex; justify-content: flex-end; } + +.slack-infoblock { + text-align: center; + width: 725px; +} + +.external-link-style { + margin-right: 4px; + align-self: baseline; +} diff --git a/grafana-plugin/src/containers/UserSettings/parts/tabs/SlackTab/SlackTab.tsx b/grafana-plugin/src/containers/UserSettings/parts/tabs/SlackTab/SlackTab.tsx index 4edd5ab5..3a305949 100644 --- a/grafana-plugin/src/containers/UserSettings/parts/tabs/SlackTab/SlackTab.tsx +++ b/grafana-plugin/src/containers/UserSettings/parts/tabs/SlackTab/SlackTab.tsx @@ -1,9 +1,11 @@ import React, { useCallback } from 'react'; -import { Button, VerticalGroup } from '@grafana/ui'; +import { Button, VerticalGroup, Icon } from '@grafana/ui'; import cn from 'classnames/bind'; +import Block from 'components/GBlock/Block'; import Text from 'components/Text/Text'; +import { SlackNewIcon } from 'icons'; import { useStore } from 'state/useStore'; import styles from './SlackTab.module.css'; @@ -18,20 +20,32 @@ export const SlackTab = () => { }, [slackStore]); return ( - - - You can view your Slack Workspace at the top-right corner after you are redirected. It should be a Workspace - with App Bot installed: - - -
- -
+ + + + + + Personal Slack connection will allow you to manage alert grouops in your connected team Internal Slack + workspace. + + To setup personal Slack click the button below, choose workspace and click Allow. + + + More details in{' '} + + our documentation + + + + + + + ); }; 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..fea6889e 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,15 @@ display: flex; justify-content: space-between; } + +.automatic-connect-telegram-block { + width: 100%; + display: flex; + justify-content: space-between; + margin-bottom: 24px; +} + +.field-command { + width: 100%; + display: inline-block; +} 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 c0378cae..f0750886 100644 --- a/grafana-plugin/src/containers/UserSettings/parts/tabs/TelegramInfo/TelegramInfo.tsx +++ b/grafana-plugin/src/containers/UserSettings/parts/tabs/TelegramInfo/TelegramInfo.tsx @@ -1,12 +1,14 @@ import React, { HTMLAttributes, useEffect, useState } from 'react'; -import { Alert, Button, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui'; +import { Button, 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 Block from 'components/GBlock/Block'; import PluginLink from 'components/PluginLink/PluginLink'; import Text from 'components/Text/Text'; +import { TelegramColorIcon } from 'icons'; import { AppFeature } from 'state/features'; import { useStore } from 'state/useStore'; import { openNotification } from 'utils'; @@ -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 alert groups 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 896d4576..c5675c28 100644 --- a/grafana-plugin/src/icons/index.tsx +++ b/grafana-plugin/src/icons/index.tsx @@ -273,3 +273,59 @@ export const IsOncallIcon = (props: IsOncallIconProps) => { ); }; + +export const TelegramColorIcon = () => { + return ( + + + + + + + ); +}; +export const SlackNewIcon = () => ( + + + + + + + + + + +); diff --git a/grafana-plugin/src/img/slack_instructions.png b/grafana-plugin/src/img/slack_instructions.png new file mode 100644 index 00000000..0093b533 Binary files /dev/null and b/grafana-plugin/src/img/slack_instructions.png differ diff --git a/grafana-plugin/src/pages/chat-ops/parts/tabs/SlackSettings/SlackSettings.module.css b/grafana-plugin/src/pages/chat-ops/parts/tabs/SlackSettings/SlackSettings.module.css index b9ab506c..49111eb0 100644 --- a/grafana-plugin/src/pages/chat-ops/parts/tabs/SlackSettings/SlackSettings.module.css +++ b/grafana-plugin/src/pages/chat-ops/parts/tabs/SlackSettings/SlackSettings.module.css @@ -15,3 +15,27 @@ margin-bottom: 20px; border-bottom: 1px solid rgba(204, 204, 220, 0.25); } + +.slack-infoblock { + text-align: center; + width: 725px; +} + +.external-link-style { + margin-right: 4px; + align-self: baseline; +} + +.team_workspace { + height: 30px; +} + +.infoblock-text { + margin-left: 48px; + margin-right: 48px; + margin-top: 24px; +} + +.infoblock-icon { + margin-top: 24px; +} diff --git a/grafana-plugin/src/pages/chat-ops/parts/tabs/SlackSettings/SlackSettings.tsx b/grafana-plugin/src/pages/chat-ops/parts/tabs/SlackSettings/SlackSettings.tsx index 67abb7d5..e09f41f8 100644 --- a/grafana-plugin/src/pages/chat-ops/parts/tabs/SlackSettings/SlackSettings.tsx +++ b/grafana-plugin/src/pages/chat-ops/parts/tabs/SlackSettings/SlackSettings.tsx @@ -1,17 +1,17 @@ import React, { Component } from 'react'; -import { Field, HorizontalGroup, LoadingPlaceholder, VerticalGroup } from '@grafana/ui'; +import { Field, HorizontalGroup, LoadingPlaceholder, VerticalGroup, Icon, Button } from '@grafana/ui'; import cn from 'classnames/bind'; import { observer } from 'mobx-react'; +import Block from 'components/GBlock/Block'; import PluginLink from 'components/PluginLink/PluginLink'; import Text from 'components/Text/Text'; -import Tutorial from 'components/Tutorial/Tutorial'; -import { TutorialStep } from 'components/Tutorial/Tutorial.types'; +import WithConfirm from 'components/WithConfirm/WithConfirm'; import GSelect from 'containers/GSelect/GSelect'; import RemoteSelect from 'containers/RemoteSelect/RemoteSelect'; -import SlackIntegrationButton from 'containers/SlackIntegrationButton/SlackIntegrationButton'; import { WithPermissionControl } from 'containers/WithPermissionControl/WithPermissionControl'; +import { SlackNewIcon } from 'icons'; import { PRIVATE_CHANNEL_NAME } from 'models/slack_channel/slack_channel.config'; import { SlackChannel } from 'models/slack_channel/slack_channel.types'; import { AppFeature } from 'state/features'; @@ -25,16 +25,27 @@ const cx = cn.bind(styles); interface SlackProps extends WithStoreProps {} -interface SlackState {} +interface SlackState { + showENVVariablesButton: boolean; +} @observer class SlackSettings extends Component { - state: SlackState = {}; + state: SlackState = { + showENVVariablesButton: false, + }; componentDidMount() { - this.update(); + this.getSlackLiveSettings().then(() => { + this.update(); + }); } + handleOpenSlackInstructions = () => { + const { store } = this.props; + store.slackStore.installSlackIntegration(); + }; + update = () => { const { store } = this.props; @@ -42,6 +53,27 @@ class SlackSettings extends Component { store.slackStore.updateSlackSettings(); }; + getSlackLiveSettings = async () => { + const { store } = this.props; + const results = await store.globalSettingStore.getAll(); + + const slackClientOAUTH = results.find((element: { name: string }) => element.name === 'SLACK_CLIENT_OAUTH_ID'); + const slackClientOAUTHSecret = results.find( + (element: { name: string }) => element.name === 'SLACK_CLIENT_OAUTH_SECRET' + ); + const slackRedirectHost = results.find((element: { name: string }) => element.name === 'SLACK_CLIENT_OAUTH_ID'); + const slackSigningSecret = results.find((element: { name: string }) => element.name === 'SLACK_SIGNING_SECRET'); + + if ( + slackClientOAUTH?.error || + slackClientOAUTHSecret?.error || + slackRedirectHost?.error || + slackSigningSecret?.error + ) { + this.setState({ showENVVariablesButton: true }); + } + }; + render() { const { store } = this.props; const { teamStore } = store; @@ -59,34 +91,47 @@ class SlackSettings extends Component { return (
- - Slack - -
- - - - - +
+ Slack
- + + + +
+ {store.teamStore.currentTeam.slack_team_identity?.cached_name} +
+ + + + + + + + + + + + + +
+
+ Additional settings - + {
- - Remove integration - -
); }; + renderSlackWorkspace = () => { + const { store } = this.props; + return {store.teamStore.currentTeam.slack_team_identity?.cached_name}; + }; + + renderSlackChannels = () => { + const { store } = this.props; + return ( + + + + ); + }; + + renderActionButtons = () => { + + + + + ; + }; + + removeSlackIntegration = () => { + const { store } = this.props; + store.slackStore.removeSlackIntegration().then(() => { + store.teamStore.loadCurrentTeam(); + }); + }; + getSlackSettingsChangeHandler = (field: string) => { const { store } = this.props; const { slackStore } = store; @@ -138,28 +220,54 @@ class SlackSettings extends Component { renderSlackStub = () => { const { store } = this.props; + const { showENVVariablesButton } = this.state; + const isLiveSettingAvailable = store.hasFeature(AppFeature.LiveSettings) && showENVVariablesButton; return ( - - - Bring the whole incident lifecycle to Slack, from alerts, monitoring, escalations to resolution notes and - reports. + + Connect Slack workspace + + +
+ +
+ + Slack connection will allow you to manage alert groups in your team Slack workspace. - - - - {store.hasFeature(AppFeature.LiveSettings) && ( - - Before installing check ENV variables related - to Slack please + + After a basic workspace connection your team members need to connect their personal Slack accounts in + order to be allowed to manage alert groups. + + {isLiveSettingAvailable && ( + + For bot creating instructions and additional information please read{' '} + + our documentation + )} + + - } - /> + + {isLiveSettingAvailable ? ( + + + + ) : ( + + + + + + + )} + ); }; } 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..ecd192db 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,22 @@ display: flex; justify-content: space-between; } + +.telegram-infoblock { + text-align: center; + width: 725px; +} + +ul { + margin: 20px 30px; +} + +.infoblock-text { + margin-left: 48px; + margin-right: 48px; + margin-top: 24px; +} + +.infoblock-icon { + margin-top: 24px; +} 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..8d363099 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,16 +1,16 @@ import React, { Component } from 'react'; -import { Alert, Button, HorizontalGroup, Icon, LoadingPlaceholder, VerticalGroup } from '@grafana/ui'; +import { Badge, Button, HorizontalGroup, Icon, LoadingPlaceholder, VerticalGroup } from '@grafana/ui'; import cn from 'classnames/bind'; import { observer } from 'mobx-react'; +import Block from 'components/GBlock/Block'; import GTable from 'components/GTable/GTable'; import PluginLink from 'components/PluginLink/PluginLink'; import Text from 'components/Text/Text'; -import Tutorial from 'components/Tutorial/Tutorial'; -import { TutorialStep } from 'components/Tutorial/Tutorial.types'; import WithConfirm from 'components/WithConfirm/WithConfirm'; import TelegramIntegrationButton from 'containers/TelegramIntegrationButton/TelegramIntegrationButton'; +import { TelegramColorIcon } from 'icons'; import { TelegramChannel } from 'models/telegram_channel/telegram_channel.types'; import { AppFeature } from 'state/features'; import { WithStoreProps } from 'state/types'; @@ -47,16 +47,32 @@ 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 alert groups 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 +82,55 @@ class TelegramSettings extends Component { if (!connectedChannels.length) { return ( - - - Bring the whole incident lifecycle into your chat workspace. Everything from alerts, monitoring, and - escalations to reports. + + Connect Telegram workspace + + +
+ +
+ + You can manage alert groups in your team Telegram channel or from personal direct messages.{' '} + + + 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 alert groups. + + + + + + + + ); } 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 +159,13 @@ class TelegramSettings extends Component { ); } + renderChannelName = (record: TelegramChannel) => { + return ( + <> + {record.channel_name} {record.is_default_channel && } + + ); + }; renderDefaultChannel = (isDefault: boolean) => { return <>{isDefault && }; };