diff --git a/frontend/public/locales/en-GB/channels.json b/frontend/public/locales/en-GB/channels.json index 807b7a6e3b..6ce4b6f2c1 100644 --- a/frontend/public/locales/en-GB/channels.json +++ b/frontend/public/locales/en-GB/channels.json @@ -18,6 +18,13 @@ "field_send_resolved": "Send resolved alerts", "field_channel_type": "Type", "field_webhook_url": "Webhook URL", + "tooltip_webhook_url": "The URL of the webhook to send alerts to. Learn more about webhook integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/webhook/). Integrates with [Incident.io](https://signoz.io/docs/alerts-management/notification-channel/incident-io/), [Rootly](https://signoz.io/docs/alerts-management/notification-channel/rootly/), [Zenduty](https://signoz.io/docs/alerts-management/notification-channel/zenduty/) and [more](https://signoz.io/docs/alerts-management/notification-channel/webhook/#my-incident-management-tool-is-not-listed-can-i-still-integrate).", + "tooltip_slack_url": "The URL of the slack [incoming webhook](https://docs.slack.dev/messaging/sending-messages-using-incoming-webhooks/) to send alerts to. Learn more about slack integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/slack/).", + "tooltip_pager_routing_key": "Learn how to obtain the routing key from your PagerDuty account [here](https://signoz.io/docs/alerts-management/notification-channel/pagerduty/#obtaining-integration-or-routing-key).", + "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).", + "tooltip_email_to": "Enter email addresses separated by commas.", + "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).", + "field_slack_recipient": "Recipient", "field_slack_title": "Title", "field_slack_description": "Description", diff --git a/frontend/public/locales/en/channels.json b/frontend/public/locales/en/channels.json index 0d9387d329..1cbc4cf46d 100644 --- a/frontend/public/locales/en/channels.json +++ b/frontend/public/locales/en/channels.json @@ -18,6 +18,12 @@ "field_send_resolved": "Send resolved alerts", "field_channel_type": "Type", "field_webhook_url": "Webhook URL", + "tooltip_webhook_url": "The URL of the webhook to send alerts to. Learn more about webhook integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/webhook/). Integrates with [Incident.io](https://signoz.io/docs/alerts-management/notification-channel/incident-io/), [Rootly](https://signoz.io/docs/alerts-management/notification-channel/rootly/), [Zenduty](https://signoz.io/docs/alerts-management/notification-channel/zenduty/) and [more](https://signoz.io/docs/alerts-management/notification-channel/webhook/#my-incident-management-tool-is-not-listed-can-i-still-integrate).", + "tooltip_slack_url": "The URL of the slack [incoming webhook](https://docs.slack.dev/messaging/sending-messages-using-incoming-webhooks/) to send alerts to. Learn more about slack integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/slack/).", + "tooltip_pager_routing_key": "Learn how to obtain the routing key from your PagerDuty account [here](https://signoz.io/docs/alerts-management/notification-channel/pagerduty/#obtaining-integration-or-routing-key).", + "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).", + "tooltip_email_to": "Enter email addresses separated by commas.", + "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).", "field_slack_recipient": "Recipient", "field_slack_title": "Title", "field_slack_description": "Description", diff --git a/frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx b/frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx index 1292df6374..b851acf878 100644 --- a/frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx +++ b/frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx @@ -31,6 +31,10 @@ jest.mock('hooks/useNotifications', () => ({ })), })); +jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({ + MarkdownRenderer: jest.fn(() =>
Mocked MarkdownRenderer
), +})); + describe('Create Alert Channel', () => { afterEach(() => { jest.clearAllMocks(); diff --git a/frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx b/frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx index d08ae52923..e9761e8df0 100644 --- a/frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx +++ b/frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx @@ -18,6 +18,10 @@ import { render, screen } from 'tests/test-utils'; import { testLabelInputAndHelpValue } from './testUtils'; +jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({ + MarkdownRenderer: jest.fn(() =>
Mocked MarkdownRenderer
), +})); + describe('Create Alert Channel (Normal User)', () => { afterEach(() => { jest.clearAllMocks(); diff --git a/frontend/src/container/AllAlertChannels/__tests__/EditAlertChannel.test.tsx b/frontend/src/container/AllAlertChannels/__tests__/EditAlertChannel.test.tsx index a833169066..0c58900be6 100644 --- a/frontend/src/container/AllAlertChannels/__tests__/EditAlertChannel.test.tsx +++ b/frontend/src/container/AllAlertChannels/__tests__/EditAlertChannel.test.tsx @@ -20,6 +20,10 @@ jest.mock('hooks/useNotifications', () => ({ })), })); +jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({ + MarkdownRenderer: jest.fn(() =>
Mocked MarkdownRenderer
), +})); + describe('Should check if the edit alert channel is properly displayed ', () => { beforeEach(() => { render(); diff --git a/frontend/src/container/FormAlertChannels/Settings/MsTeams.tsx b/frontend/src/container/FormAlertChannels/Settings/MsTeams.tsx index 52ef85acff..b34c01a86c 100644 --- a/frontend/src/container/FormAlertChannels/Settings/MsTeams.tsx +++ b/frontend/src/container/FormAlertChannels/Settings/MsTeams.tsx @@ -1,4 +1,5 @@ import { Form, Input } from 'antd'; +import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer'; import React from 'react'; import { useTranslation } from 'react-i18next'; @@ -9,7 +10,20 @@ function MsTeams({ setSelectedConfig }: MsTeamsProps): JSX.Element { return ( <> - + + ), + overlayInnerStyle: { maxWidth: 400 }, + placement: 'right', + }} + > { setSelectedConfig((value) => ({ diff --git a/frontend/src/container/FormAlertChannels/Settings/Opsgenie.tsx b/frontend/src/container/FormAlertChannels/Settings/Opsgenie.tsx index 1472ca0b4e..6eefed1110 100644 --- a/frontend/src/container/FormAlertChannels/Settings/Opsgenie.tsx +++ b/frontend/src/container/FormAlertChannels/Settings/Opsgenie.tsx @@ -1,4 +1,5 @@ import { Form, Input } from 'antd'; +import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer'; import { useTranslation } from 'react-i18next'; import { OpsgenieChannel } from '../../CreateAlertChannels/config'; @@ -19,7 +20,21 @@ function OpsgenieForm({ setSelectedConfig }: OpsgenieFormProps): JSX.Element { return ( <> - + + ), + overlayInnerStyle: { maxWidth: 400 }, + placement: 'right', + }} + required + > - + + ), + overlayInnerStyle: { maxWidth: 400 }, + placement: 'right', + }} + > { setSelectedConfig((value) => ({ diff --git a/frontend/src/container/FormAlertChannels/Settings/Slack.tsx b/frontend/src/container/FormAlertChannels/Settings/Slack.tsx index 5321fa5fe6..3f17e32528 100644 --- a/frontend/src/container/FormAlertChannels/Settings/Slack.tsx +++ b/frontend/src/container/FormAlertChannels/Settings/Slack.tsx @@ -1,4 +1,5 @@ import { Form, Input } from 'antd'; +import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer'; import { Dispatch, SetStateAction } from 'react'; import { useTranslation } from 'react-i18next'; @@ -11,7 +12,20 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element { return ( <> - + + ), + overlayInnerStyle: { maxWidth: 400 }, + placement: 'right', + }} + > { setSelectedConfig((value) => ({ diff --git a/frontend/src/container/FormAlertChannels/Settings/Webhook.tsx b/frontend/src/container/FormAlertChannels/Settings/Webhook.tsx index 4031babd82..22c8576ac7 100644 --- a/frontend/src/container/FormAlertChannels/Settings/Webhook.tsx +++ b/frontend/src/container/FormAlertChannels/Settings/Webhook.tsx @@ -1,4 +1,5 @@ import { Form, Input } from 'antd'; +import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer'; import { Dispatch, SetStateAction } from 'react'; import { useTranslation } from 'react-i18next'; @@ -9,7 +10,20 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element { return ( <> - + + ), + overlayInnerStyle: { maxWidth: 400 }, + placement: 'right', + }} + > { setSelectedConfig((value) => ({