diff --git a/docs/sources/alerting/configure-notifications/manage-contact-points/integrations/configure-telegram.md b/docs/sources/alerting/configure-notifications/manage-contact-points/integrations/configure-telegram.md index e0c237211de..4b95b3c52ac 100644 --- a/docs/sources/alerting/configure-notifications/manage-contact-points/integrations/configure-telegram.md +++ b/docs/sources/alerting/configure-notifications/manage-contact-points/integrations/configure-telegram.md @@ -22,6 +22,11 @@ Use the Grafana Alerting - Telegram integration to send [Telegram](https://teleg ## Before you begin +### Telegram limitation + +Telegram messages are limited to 4096 UTF-8 characters. If you use a `parse_mode` other than `None`, truncation may result in an invalid message, causing the notification to fail. +For longer messages, we recommend using an alternative contact method. + ### Telegram bot API token and chat ID To integrate Grafana with Telegram, you need to obtain a Telegram **bot API token** and a **chat ID** (i.e., the ID of the Telegram chat where you want to receive the alert notifications). diff --git a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx index 14a5db7e24b..8a9050c6355 100644 --- a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx +++ b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/css'; import { sortBy } from 'lodash'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { useFormContext, FieldErrors, FieldValues, Controller } from 'react-hook-form'; +import { Controller, FieldErrors, FieldValues, useFormContext } from 'react-hook-form'; import { GrafanaTheme2, SelectableValue } from '@grafana/data'; import { Alert, Button, Field, Select, useStyles2 } from '@grafana/ui'; @@ -53,6 +53,7 @@ export function ChannelSubForm({ const { control, watch, register, trigger, formState, setValue } = useFormContext(); const selectedType = watch(fieldName('type')) ?? defaultValues.type; // nope, setting "default" does not work at all. + const parse_mode = watch(fieldName('settings.parse_mode')); const { loading: testingReceiver } = useUnifiedAlertingSelector((state) => state.testReceivers); // TODO I don't like integration specific code here but other ways require a bigger refactoring @@ -122,13 +123,14 @@ export function ChannelSubForm({ }; const notifier = notifiers.find(({ dto: { type } }) => type === selectedType); + const isTelegram = selectedType === 'telegram'; + const isParseModeNone = parse_mode === 'None'; // if there are mandatory options defined, optional options will be hidden by a collapse // if there aren't mandatory options, all options will be shown without collapse const mandatoryOptions = notifier?.dto.options.filter((o) => o.required); const optionalOptions = notifier?.dto.options.filter((o) => !o.required); const contactPointTypeInputId = `contact-point-type-${pathPrefix}`; - return (
@@ -188,6 +190,14 @@ export function ChannelSubForm({
{notifier && (
+ {isTelegram && !isParseModeNone && ( + + )} defaultValues={defaultValues} selectedChannelOptions={mandatoryOptions?.length ? mandatoryOptions! : optionalOptions!}