diff --git a/grafana-plugin/src/components/Integrations/IntegrationBlock.module.scss b/grafana-plugin/src/components/Integrations/IntegrationBlock.module.scss index fb569479..dc6e9221 100644 --- a/grafana-plugin/src/components/Integrations/IntegrationBlock.module.scss +++ b/grafana-plugin/src/components/Integrations/IntegrationBlock.module.scss @@ -16,5 +16,6 @@ &--collapsedBorder { border-left: none; padding-left: 0; + padding-right: 0; } } diff --git a/grafana-plugin/src/components/Integrations/IntegrationBlockItem.module.scss b/grafana-plugin/src/components/Integrations/IntegrationBlockItem.module.scss index df38ca40..04f5c8c7 100644 --- a/grafana-plugin/src/components/Integrations/IntegrationBlockItem.module.scss +++ b/grafana-plugin/src/components/Integrations/IntegrationBlockItem.module.scss @@ -2,6 +2,7 @@ display: flex; flex-direction: row; margin-bottom: 4px; + max-width: 100%; &__content { width: 100%; diff --git a/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx b/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx index 8a3504ac..d4f1db8b 100644 --- a/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx +++ b/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { ConfirmModal, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui'; import cn from 'classnames/bind'; @@ -26,8 +26,17 @@ interface CollapsedIntegrationRouteDisplayProps { const CollapsedIntegrationRouteDisplay: React.FC = observer( ({ channelFilterId, alertReceiveChannelId, routeIndex, toggle }) => { - const { escalationChainStore, alertReceiveChannelStore } = useStore(); + const store = useStore(); + const { escalationChainStore, alertReceiveChannelStore, telegramChannelStore } = store; const [routeIdForDeletion, setRouteIdForDeletion] = useState(undefined); + const [telegramInfo, setTelegramInfo] = useState>([]); + + useEffect(() => { + (async function () { + const telegram = await telegramChannelStore.getAll(); + setTelegramInfo(telegram); + })(); + }, [channelFilterId]); const channelFilter = alertReceiveChannelStore.channelFilters[channelFilterId]; if (!channelFilter) { @@ -84,15 +93,17 @@ const CollapsedIntegrationRouteDisplay: React.FC - {IntegrationHelper.getChatOpsChannels(channelFilter).map((chatOpsChannel, key) => ( - - Publish to ChatOps - - - {chatOpsChannel.name} - - - ))} + {IntegrationHelper.getChatOpsChannels(channelFilter, telegramInfo, store) + .filter((it) => it) + .map((chatOpsChannel, key) => ( + + Publish to ChatOps + + + {chatOpsChannel.name} + + + ))} diff --git a/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx b/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx index bccbd1c9..d57242dc 100644 --- a/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx +++ b/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx @@ -168,17 +168,6 @@ const ExpandedIntegrationRouteDisplay: React.FC )} - {routeIndex !== channelFiltersTotal.length - 1 && ( - - - - If the Routing template evaluates to True, the alert will be grouped with the Grouping template - and proceed to the following steps - - - - )} - Publish to ChatOps diff --git a/grafana-plugin/src/containers/TeamName/TeamName.tsx b/grafana-plugin/src/containers/TeamName/TeamName.tsx index 77a1744c..8727dc88 100644 --- a/grafana-plugin/src/containers/TeamName/TeamName.tsx +++ b/grafana-plugin/src/containers/TeamName/TeamName.tsx @@ -18,7 +18,7 @@ interface TeamNameProps { } const TeamName = observer((props: TeamNameProps) => { - const { team, size } = props; + const { team, size = 'medium' } = props; if (!team) { return null; } @@ -26,10 +26,10 @@ const TeamName = observer((props: TeamNameProps) => { return ; } return ( - + - {team.name} + {team.name} ); diff --git a/grafana-plugin/src/pages/integration_2/Integration2.helper.ts b/grafana-plugin/src/pages/integration_2/Integration2.helper.ts index 4f0f430c..ef7c6e53 100644 --- a/grafana-plugin/src/pages/integration_2/Integration2.helper.ts +++ b/grafana-plugin/src/pages/integration_2/Integration2.helper.ts @@ -8,6 +8,8 @@ import dayjs from 'dayjs'; import { MaintenanceMode } from 'models/alert_receive_channel/alert_receive_channel.types'; import { ChannelFilter } from 'models/channel_filter/channel_filter.types'; +import { RootStore } from 'state'; +import { AppFeature } from 'state/features'; import { MAX_CHARACTERS_COUNT, TEXTAREA_ROWS_COUNT } from './Integration2.config'; @@ -70,14 +72,31 @@ const IntegrationHelper = { return totalDiffString; }, - getChatOpsChannels(channelFilter: ChannelFilter): Array<{ name: string; icon: IconName }> { + getChatOpsChannels( + channelFilter: ChannelFilter, + telegramInfo: Array<{ id: string; channel_name: string }>, + store: RootStore + ): Array<{ name: string; icon: IconName }> { const channels: Array<{ name: string; icon: IconName }> = []; - if (channelFilter.notify_in_slack && channelFilter.slack_channel?.display_name) { + if ( + store.hasFeature(AppFeature.Slack) && + channelFilter.notify_in_slack && + channelFilter.notify_in_slack && + channelFilter.slack_channel?.display_name + ) { channels.push({ name: channelFilter.slack_channel.display_name, icon: 'slack' }); } - if (channelFilter.telegram_channel) { - channels.push({ name: channelFilter.telegram_channel, icon: 'telegram-alt' }); + + const matchingTelegram = telegramInfo?.find((t) => t.id === channelFilter.telegram_channel); + + if ( + store.hasFeature(AppFeature.Telegram) && + channelFilter.telegram_channel && + channelFilter.notify_in_telegram && + matchingTelegram?.channel_name + ) { + channels.push({ name: matchingTelegram.channel_name, icon: 'telegram-alt' }); } return channels; diff --git a/grafana-plugin/src/pages/integration_2/Integration2.module.scss b/grafana-plugin/src/pages/integration_2/Integration2.module.scss index 13471a86..85a69759 100644 --- a/grafana-plugin/src/pages/integration_2/Integration2.module.scss +++ b/grafana-plugin/src/pages/integration_2/Integration2.module.scss @@ -116,6 +116,7 @@ $LARGE-MARGIN: 24px; .input { flex-grow: 1; + max-width: calc(100% - 80px); } .how-to-connect__container { @@ -200,6 +201,7 @@ $LARGE-MARGIN: 24px; &__item { display: flex; flex-direction: row; + align-items: center; gap: 4px; } } diff --git a/grafana-plugin/src/pages/integration_2/Integration2.tsx b/grafana-plugin/src/pages/integration_2/Integration2.tsx index 33134955..1f52a26d 100644 --- a/grafana-plugin/src/pages/integration_2/Integration2.tsx +++ b/grafana-plugin/src/pages/integration_2/Integration2.tsx @@ -136,6 +136,7 @@ class Integration2 extends React.Component } = this.state; const { store: { alertReceiveChannelStore }, + query: { p }, match: { params: { id }, }, @@ -165,7 +166,7 @@ class Integration2 extends React.Component
{isTemplateSettingsOpen && ( this.setState({ isTemplateSettingsOpen: false })} @@ -187,7 +188,7 @@ class Integration2 extends React.Component )}
- +

@@ -600,9 +601,9 @@ const IntegrationSendDemoPayloadModal: React.FC { const store = useStore(); const { alertReceiveChannelStore } = store; - const [demoPayload, setDemoPayload] = useState( - JSON.stringify(alertReceiveChannel.demo_alert_payload, null, '\t') - ); + const stringifiedJson = JSON.stringify(alertReceiveChannel.demo_alert_payload, null, 2); + const initialDemoJSON = stringifiedJson.substring(1, stringifiedJson.length - 1); + const [demoPayload, setDemoPayload] = useState(alertReceiveChannel.demo_alert_payload); let onPayloadChangeDebounced = debounce(100, onPayloadChange); return ( @@ -611,7 +612,14 @@ const IntegrationSendDemoPayloadModal: React.FC + + Send demo alert to {''} + + + + } > @@ -630,7 +638,7 @@ const IntegrationSendDemoPayloadModal: React.FC = ({

Team: - +
Created by: diff --git a/grafana-plugin/src/pages/integrations_2/Integrations2.tsx b/grafana-plugin/src/pages/integrations_2/Integrations2.tsx index 66a988db..1de27eb1 100644 --- a/grafana-plugin/src/pages/integrations_2/Integrations2.tsx +++ b/grafana-plugin/src/pages/integrations_2/Integrations2.tsx @@ -265,9 +265,13 @@ class Integrations extends React.Component ); } - renderName(item: AlertReceiveChannel) { + renderName = (item: AlertReceiveChannel) => { + const { + query: { p }, + } = this.props; + return ( - + ); - } + }; renderDatasource(item: AlertReceiveChannel, alertReceiveChannelStore) { const alertReceiveChannel = alertReceiveChannelStore.items[item.id];