From 129bd983286b01b31bb44e038095c69247b7d87a Mon Sep 17 00:00:00 2001 From: Rares Mardare Date: Tue, 23 May 2023 10:55:18 +0300 Subject: [PATCH] Refactored templates within templates&grouping (#1981) # What this PR does As the title says -> Refactored templates within templates&grouping - File structure was changed - Templates config added instead of manually rendering each item, this way that config can be easily overwritten in oncall-private --- .../IntegrationBlock.module.scss | 0 .../Integrations}/IntegrationBlock.tsx | 0 .../IntegrationBlockItem.module.scss | 0 .../Integrations}/IntegrationBlockItem.tsx | 0 .../IntegrationTemplateBlock.module.scss | 0 .../IntegrationTemplateBlock.tsx | 0 ...llapsedIntegrationRouteDisplay.module.scss | 0 .../CollapsedIntegrationRouteDisplay.tsx | 9 +- ...xpandedIntegrationRouteDisplay.module.scss | 0 .../ExpandedIntegrationRouteDisplay.tsx | 11 +- .../Integration2HeartbeatForm.tsx | 0 .../IntegrationTemplatesList.config.ts | 131 +++++ .../IntegrationTemplatesList.tsx | 131 +++++ .../src/pages/integration_2/Integration2.tsx | 17 +- .../Integration2HeartbeatForm.module.scss | 0 .../IntegrationTemplatesList.tsx | 458 ------------------ 16 files changed, 279 insertions(+), 478 deletions(-) rename grafana-plugin/src/{pages/integration_2 => components/Integrations}/IntegrationBlock.module.scss (100%) rename grafana-plugin/src/{pages/integration_2 => components/Integrations}/IntegrationBlock.tsx (100%) rename grafana-plugin/src/{pages/integration_2 => components/Integrations}/IntegrationBlockItem.module.scss (100%) rename grafana-plugin/src/{pages/integration_2 => components/Integrations}/IntegrationBlockItem.tsx (100%) rename grafana-plugin/src/{pages/integration_2 => components/Integrations}/IntegrationTemplateBlock.module.scss (100%) rename grafana-plugin/src/{pages/integration_2 => components/Integrations}/IntegrationTemplateBlock.tsx (100%) rename grafana-plugin/src/{pages/integration_2 => containers/IntegrationContainers/CollapsedIntegrationRouteDisplay}/CollapsedIntegrationRouteDisplay.module.scss (100%) rename grafana-plugin/src/{pages/integration_2 => containers/IntegrationContainers/CollapsedIntegrationRouteDisplay}/CollapsedIntegrationRouteDisplay.tsx (92%) rename grafana-plugin/src/{pages/integration_2 => containers/IntegrationContainers/ExpandedIntegrationRouteDisplay}/ExpandedIntegrationRouteDisplay.module.scss (100%) rename grafana-plugin/src/{pages/integration_2 => containers/IntegrationContainers/ExpandedIntegrationRouteDisplay}/ExpandedIntegrationRouteDisplay.tsx (96%) rename grafana-plugin/src/{pages/integration_2 => containers/IntegrationContainers/Integration2HearbeatForm}/Integration2HeartbeatForm.tsx (100%) create mode 100644 grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.config.ts create mode 100644 grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx delete mode 100644 grafana-plugin/src/pages/integration_2/Integration2HeartbeatForm.module.scss delete mode 100644 grafana-plugin/src/pages/integration_2/IntegrationTemplatesList.tsx diff --git a/grafana-plugin/src/pages/integration_2/IntegrationBlock.module.scss b/grafana-plugin/src/components/Integrations/IntegrationBlock.module.scss similarity index 100% rename from grafana-plugin/src/pages/integration_2/IntegrationBlock.module.scss rename to grafana-plugin/src/components/Integrations/IntegrationBlock.module.scss diff --git a/grafana-plugin/src/pages/integration_2/IntegrationBlock.tsx b/grafana-plugin/src/components/Integrations/IntegrationBlock.tsx similarity index 100% rename from grafana-plugin/src/pages/integration_2/IntegrationBlock.tsx rename to grafana-plugin/src/components/Integrations/IntegrationBlock.tsx diff --git a/grafana-plugin/src/pages/integration_2/IntegrationBlockItem.module.scss b/grafana-plugin/src/components/Integrations/IntegrationBlockItem.module.scss similarity index 100% rename from grafana-plugin/src/pages/integration_2/IntegrationBlockItem.module.scss rename to grafana-plugin/src/components/Integrations/IntegrationBlockItem.module.scss diff --git a/grafana-plugin/src/pages/integration_2/IntegrationBlockItem.tsx b/grafana-plugin/src/components/Integrations/IntegrationBlockItem.tsx similarity index 100% rename from grafana-plugin/src/pages/integration_2/IntegrationBlockItem.tsx rename to grafana-plugin/src/components/Integrations/IntegrationBlockItem.tsx diff --git a/grafana-plugin/src/pages/integration_2/IntegrationTemplateBlock.module.scss b/grafana-plugin/src/components/Integrations/IntegrationTemplateBlock.module.scss similarity index 100% rename from grafana-plugin/src/pages/integration_2/IntegrationTemplateBlock.module.scss rename to grafana-plugin/src/components/Integrations/IntegrationTemplateBlock.module.scss diff --git a/grafana-plugin/src/pages/integration_2/IntegrationTemplateBlock.tsx b/grafana-plugin/src/components/Integrations/IntegrationTemplateBlock.tsx similarity index 100% rename from grafana-plugin/src/pages/integration_2/IntegrationTemplateBlock.tsx rename to grafana-plugin/src/components/Integrations/IntegrationTemplateBlock.tsx diff --git a/grafana-plugin/src/pages/integration_2/CollapsedIntegrationRouteDisplay.module.scss b/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.module.scss similarity index 100% rename from grafana-plugin/src/pages/integration_2/CollapsedIntegrationRouteDisplay.module.scss rename to grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.module.scss diff --git a/grafana-plugin/src/pages/integration_2/CollapsedIntegrationRouteDisplay.tsx b/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx similarity index 92% rename from grafana-plugin/src/pages/integration_2/CollapsedIntegrationRouteDisplay.tsx rename to grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx index fd261823..82e9b68f 100644 --- a/grafana-plugin/src/pages/integration_2/CollapsedIntegrationRouteDisplay.tsx +++ b/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx @@ -4,18 +4,17 @@ import { ConfirmModal, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui' import cn from 'classnames/bind'; import { observer } from 'mobx-react'; +import IntegrationBlock from 'components/Integrations/IntegrationBlock'; import PluginLink from 'components/PluginLink/PluginLink'; import Text from 'components/Text/Text'; import TooltipBadge from 'components/TooltipBadge/TooltipBadge'; +import styles from 'containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.module.scss'; +import { RouteButtonsDisplay } from 'containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay'; import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types'; import { ChannelFilter } from 'models/channel_filter'; +import IntegrationHelper from 'pages/integration_2/Integration2.helper'; import { useStore } from 'state/useStore'; -import styles from './CollapsedIntegrationRouteDisplay.module.scss'; -import { RouteButtonsDisplay } from './ExpandedIntegrationRouteDisplay'; -import IntegrationHelper from './Integration2.helper'; -import IntegrationBlock from './IntegrationBlock'; - const cx = cn.bind(styles); interface CollapsedIntegrationRouteDisplayProps { diff --git a/grafana-plugin/src/pages/integration_2/ExpandedIntegrationRouteDisplay.module.scss b/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.module.scss similarity index 100% rename from grafana-plugin/src/pages/integration_2/ExpandedIntegrationRouteDisplay.module.scss rename to grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.module.scss diff --git a/grafana-plugin/src/pages/integration_2/ExpandedIntegrationRouteDisplay.tsx b/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx similarity index 96% rename from grafana-plugin/src/pages/integration_2/ExpandedIntegrationRouteDisplay.tsx rename to grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx index 6036a66f..41446dd7 100644 --- a/grafana-plugin/src/pages/integration_2/ExpandedIntegrationRouteDisplay.tsx +++ b/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx @@ -5,6 +5,8 @@ import { Button, HorizontalGroup, InlineLabel, VerticalGroup, Icon, Tooltip, Con import cn from 'classnames/bind'; import { observer } from 'mobx-react'; +import IntegrationBlock from 'components/Integrations/IntegrationBlock'; +import IntegrationBlockItem from 'components/Integrations/IntegrationBlockItem'; import MonacoEditor from 'components/MonacoEditor/MonacoEditor'; import PluginLink from 'components/PluginLink/PluginLink'; import Text from 'components/Text/Text'; @@ -12,21 +14,18 @@ import TooltipBadge from 'components/TooltipBadge/TooltipBadge'; import { ChatOpsConnectors } from 'containers/AlertRules/parts'; import EscalationChainSteps from 'containers/EscalationChainSteps/EscalationChainSteps'; import GSelect from 'containers/GSelect/GSelect'; +import styles from 'containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.module.scss'; import TeamName from 'containers/TeamName/TeamName'; import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip'; import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types'; import { AlertTemplatesDTO } from 'models/alert_templates'; import { ChannelFilter } from 'models/channel_filter/channel_filter.types'; +import { MONACO_INPUT_HEIGHT_SMALL, MONACO_OPTIONS } from 'pages/integration_2/Integration2.config'; +import IntegrationHelper from 'pages/integration_2/Integration2.helper'; import { AppFeature } from 'state/features'; import { useStore } from 'state/useStore'; import { UserActions } from 'utils/authorization'; -import styles from './ExpandedIntegrationRouteDisplay.module.scss'; -import { MONACO_INPUT_HEIGHT_SMALL, MONACO_OPTIONS } from './Integration2.config'; -import IntegrationHelper from './Integration2.helper'; -import IntegrationBlock from './IntegrationBlock'; -import IntegrationBlockItem from './IntegrationBlockItem'; - const cx = cn.bind(styles); interface ExpandedIntegrationRouteDisplayProps { diff --git a/grafana-plugin/src/pages/integration_2/Integration2HeartbeatForm.tsx b/grafana-plugin/src/containers/IntegrationContainers/Integration2HearbeatForm/Integration2HeartbeatForm.tsx similarity index 100% rename from grafana-plugin/src/pages/integration_2/Integration2HeartbeatForm.tsx rename to grafana-plugin/src/containers/IntegrationContainers/Integration2HearbeatForm/Integration2HeartbeatForm.tsx diff --git a/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.config.ts b/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.config.ts new file mode 100644 index 00000000..8ebc1958 --- /dev/null +++ b/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.config.ts @@ -0,0 +1,131 @@ +import { MONACO_INPUT_HEIGHT_SMALL, MONACO_INPUT_HEIGHT_TALL } from 'pages/integration_2/Integration2.config'; + +interface TemplateToRender { + name: string; + label: string; + height: string; +} + +interface TemplateBlock { + name: string; + contents: TemplateToRender[]; +} + +export const templatesToRender: TemplateBlock[] = [ + { + name: null, + contents: [ + { + name: 'grouping_id_template', + label: 'Grouping', + height: MONACO_INPUT_HEIGHT_TALL, + }, + { + name: 'resolve_condition_template', + label: 'Auto resolve', + height: MONACO_INPUT_HEIGHT_SMALL, + }, + ], + }, + { + name: 'Web', + contents: [ + { + name: 'web_title_template', + label: 'Title', + height: MONACO_INPUT_HEIGHT_TALL, + }, + { + name: 'web_message_template', + label: 'Message', + height: MONACO_INPUT_HEIGHT_TALL, + }, + { + name: 'web_image_url_template', + label: 'Image', + height: MONACO_INPUT_HEIGHT_SMALL, + }, + ], + }, + { + name: null, + contents: [ + { + name: 'acknowledge_condition_template', + label: 'Auto acknowledge', + height: MONACO_INPUT_HEIGHT_SMALL, + }, + { + name: 'source_link_template', + label: 'Source link', + height: MONACO_INPUT_HEIGHT_SMALL, + }, + ], + }, + { + name: null, + contents: [ + { + name: 'phone_call_title_template', + label: 'Phone Call', + height: MONACO_INPUT_HEIGHT_SMALL, + }, + { + name: 'sms_title_template', + label: 'SMS', + height: MONACO_INPUT_HEIGHT_SMALL, + }, + ], + }, + { + name: 'Slack', + contents: [ + { + name: 'slack_title_template', + label: 'Title', + height: MONACO_INPUT_HEIGHT_SMALL, + }, + { + name: 'slack_message_template', + label: 'Message', + height: MONACO_INPUT_HEIGHT_TALL, + }, + { + name: 'slack_image_url_template', + label: 'Image', + height: MONACO_INPUT_HEIGHT_SMALL, + }, + ], + }, + { + name: 'Telegram', + contents: [ + { + name: 'telegram_title_template', + label: 'Title', + height: MONACO_INPUT_HEIGHT_SMALL, + }, + { + name: 'telegram_message_template', + label: 'Message', + height: MONACO_INPUT_HEIGHT_TALL, + }, + { + name: 'telegram_image_url_template', + label: 'Image', + height: MONACO_INPUT_HEIGHT_SMALL, + }, + ], + }, + { + name: 'Email', + contents: [ + { + name: 'email_title_template', + label: 'Title', + height: MONACO_INPUT_HEIGHT_SMALL, + }, + { name: 'email_message_template', label: 'Message', height: MONACO_INPUT_HEIGHT_TALL }, + ], + }, +]; diff --git a/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx b/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx new file mode 100644 index 00000000..32e783f0 --- /dev/null +++ b/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx @@ -0,0 +1,131 @@ +import React, { useState } from 'react'; + +import { ConfirmModal } from '@grafana/ui'; +import cn from 'classnames/bind'; + +import IntegrationBlockItem from 'components/Integrations/IntegrationBlockItem'; +import IntegrationTemplateBlock from 'components/Integrations/IntegrationTemplateBlock'; +import MonacoEditor from 'components/MonacoEditor/MonacoEditor'; +import Text from 'components/Text/Text'; +import { templatesToRender } from 'containers/IntegrationContainers/IntegrationTemplatesList.config'; +import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types'; +import { AlertTemplatesDTO } from 'models/alert_templates'; +import { MONACO_INPUT_HEIGHT_TALL, MONACO_OPTIONS } from 'pages/integration_2/Integration2.config'; +import IntegrationHelper from 'pages/integration_2/Integration2.helper'; +import styles from 'pages/integration_2/Integration2.module.scss'; +import { useStore } from 'state/useStore'; +import { openErrorNotification, openNotification } from 'utils'; + +const cx = cn.bind(styles); + +interface IntegrationTemplateListProps { + templates: AlertTemplatesDTO[]; + alertReceiveChannelId: AlertReceiveChannel['id']; + openEditTemplateModal: (templateName: string | string[]) => void; +} + +const IntegrationTemplateList: React.FC = ({ + templates, + openEditTemplateModal, + alertReceiveChannelId, +}) => { + const { alertReceiveChannelStore } = useStore(); + const [isRestoringTemplate, setIsRestoringTemplate] = useState(false); + const [templateRestoreName, setTemplateRestoreName] = useState(undefined); + const [showConfirmModal, setShowConfirmModal] = useState(false); + + return ( +
+ {showConfirmModal && ( + onResetTemplate(templateRestoreName)} + onDismiss={() => onDismiss()} + /> + )} + + + + Templates are used to interpret alert from monitoring. Reduce noise, customize visualization + + + + {templatesToRender.map((template, key) => ( + + + {template.name && {template.name}} + + {template.contents.map((contents, innerKey) => ( + onShowConfirmModal(contents.name)} + label={contents.label} + renderInput={() => ( +
+ +
+ )} + onEdit={() => openEditTemplateModal(contents.name)} + /> + ))} + + + ))} +
+ ); + + function onShowConfirmModal(templateName: string) { + setTemplateRestoreName(templateName); + setShowConfirmModal(true); + } + + function onDismiss() { + setTemplateRestoreName(undefined); + setShowConfirmModal(false); + } + + function onResetTemplate(templateName: string) { + setTemplateRestoreName(undefined); + setIsRestoringTemplate(true); + + alertReceiveChannelStore + .saveTemplates(alertReceiveChannelId, { [templateName]: '' }) + .then(() => { + openNotification('The Alert template has been updated'); + }) + .catch((err) => { + if (err.response?.data?.length > 0) { + openErrorNotification(err.response.data); + } else { + openErrorNotification(err.message); + } + }) + .finally(() => { + setIsRestoringTemplate(false); + setShowConfirmModal(false); + }); + } +}; + +const VerticalBlock: React.FC<{ children: any[] }> = ({ children }) => { + return
{children}
; +}; + +export default IntegrationTemplateList; diff --git a/grafana-plugin/src/pages/integration_2/Integration2.tsx b/grafana-plugin/src/pages/integration_2/Integration2.tsx index d1080f21..470079b6 100644 --- a/grafana-plugin/src/pages/integration_2/Integration2.tsx +++ b/grafana-plugin/src/pages/integration_2/Integration2.tsx @@ -27,6 +27,7 @@ import IntegrationCollapsibleTreeView, { } from 'components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView'; import IntegrationInputField from 'components/IntegrationInputField/IntegrationInputField'; import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo'; +import IntegrationBlock from 'components/Integrations/IntegrationBlock'; import MonacoEditor, { MONACO_LANGUAGE } from 'components/MonacoEditor/MonacoEditor'; import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper'; import { initErrorDataState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers'; @@ -36,6 +37,10 @@ import Text from 'components/Text/Text'; import TooltipBadge from 'components/TooltipBadge/TooltipBadge'; import { WithContextMenu } from 'components/WithContextMenu/WithContextMenu'; import EditRegexpRouteTemplateModal from 'containers/EditRegexpRouteTemplateModal/EditRegexpRouteTemplateModal'; +import CollapsedIntegrationRouteDisplay from 'containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay'; +import ExpandedIntegrationRouteDisplay from 'containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay'; +import Integration2HeartbeatForm from 'containers/IntegrationContainers/Integration2HearbeatForm/Integration2HeartbeatForm'; +import IntegrationTemplateList from 'containers/IntegrationContainers/IntegrationTemplatesList'; import IntegrationForm2 from 'containers/IntegrationForm/IntegrationForm2'; import IntegrationTemplate from 'containers/IntegrationTemplate/IntegrationTemplate'; import MaintenanceForm from 'containers/MaintenanceForm/MaintenanceForm'; @@ -47,6 +52,9 @@ import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_ import { ChannelFilter } from 'models/channel_filter'; import { MaintenanceType } from 'models/maintenance/maintenance.types'; import { API_HOST, API_PATH_PREFIX } from 'network'; +import { INTEGRATION_TEMPLATES_LIST, MONACO_PAYLOAD_OPTIONS } from 'pages/integration_2/Integration2.config'; +import IntegrationHelper from 'pages/integration_2/Integration2.helper'; +import styles from 'pages/integration_2/Integration2.module.scss'; import { PageProps, WithStoreProps } from 'state/types'; import { useStore } from 'state/useStore'; import { withMobXProviderContext } from 'state/withStore'; @@ -56,15 +64,6 @@ import LocationHelper from 'utils/LocationHelper'; import { UserActions } from 'utils/authorization'; import { DATASOURCE_ALERTING, PLUGIN_ROOT } from 'utils/consts'; -import CollapsedIntegrationRouteDisplay from './CollapsedIntegrationRouteDisplay'; -import ExpandedIntegrationRouteDisplay from './ExpandedIntegrationRouteDisplay'; -import { INTEGRATION_TEMPLATES_LIST, MONACO_PAYLOAD_OPTIONS } from './Integration2.config'; -import IntegrationHelper from './Integration2.helper'; -import styles from './Integration2.module.scss'; -import Integration2HeartbeatForm from './Integration2HeartbeatForm'; -import IntegrationBlock from './IntegrationBlock'; -import IntegrationTemplateList from './IntegrationTemplatesList'; - const cx = cn.bind(styles); interface Integration2Props extends WithStoreProps, PageProps, RouteComponentProps<{ id: string }> {} diff --git a/grafana-plugin/src/pages/integration_2/Integration2HeartbeatForm.module.scss b/grafana-plugin/src/pages/integration_2/Integration2HeartbeatForm.module.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/grafana-plugin/src/pages/integration_2/IntegrationTemplatesList.tsx b/grafana-plugin/src/pages/integration_2/IntegrationTemplatesList.tsx deleted file mode 100644 index 9f6fe760..00000000 --- a/grafana-plugin/src/pages/integration_2/IntegrationTemplatesList.tsx +++ /dev/null @@ -1,458 +0,0 @@ -import React, { useState } from 'react'; - -import { ConfirmModal } from '@grafana/ui'; -import cn from 'classnames/bind'; - -import MonacoEditor from 'components/MonacoEditor/MonacoEditor'; -import Text from 'components/Text/Text'; -import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types'; -import { AlertTemplatesDTO } from 'models/alert_templates'; -import { useStore } from 'state/useStore'; -import { openErrorNotification, openNotification } from 'utils'; - -import { MONACO_INPUT_HEIGHT_SMALL, MONACO_INPUT_HEIGHT_TALL, MONACO_OPTIONS } from './Integration2.config'; -import IntegrationHelper from './Integration2.helper'; -import styles from './Integration2.module.scss'; -import IntegrationBlockItem from './IntegrationBlockItem'; -import IntegrationTemplateBlock from './IntegrationTemplateBlock'; - -const cx = cn.bind(styles); - -interface IntegrationTemplateListProps { - templates: AlertTemplatesDTO[]; - alertReceiveChannelId: AlertReceiveChannel['id']; - openEditTemplateModal: (templateName: string | string[]) => void; -} - -const IntegrationTemplateList: React.FC = ({ - templates, - openEditTemplateModal, - alertReceiveChannelId, -}) => { - const { alertReceiveChannelStore } = useStore(); - const [isRestoringTemplate, setIsRestoringTemplate] = useState(false); - const [templateRestoreName, setTemplateRestoreName] = useState(undefined); - const [showConfirmModal, setShowConfirmModal] = useState(false); - - return ( -
- {showConfirmModal && ( - onResetTemplate(templateRestoreName)} - onDismiss={() => onDismiss()} - /> - )} - - - - Templates are used to interpret alert from monitoring. Reduce noise, customize visualization - - - - - - onShowConfirmModal('grouping_id_template')} - isLoading={isRestoringTemplate && templateRestoreName === 'grouping_id_template'} - label={'Grouping'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('grouping_id_template')} - /> - - onShowConfirmModal('resolve_condition_template')} - label={'Auto resolve'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('resolve_condition_template')} - /> - - - - - - Web - - onShowConfirmModal('web_title_template')} - label={'Title'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('web_title_template')} - /> - - onShowConfirmModal('web_message_template')} - label={'Message'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('web_message_template')} - /> - - onShowConfirmModal('web_image_url_template')} - label={'Image'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('web_image_url_template')} - /> - - - - - - onShowConfirmModal('acknowledge_condition_template')} - label={'Auto acknowledge'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('acknowledge_condition_template')} - /> - - onShowConfirmModal('source_link_template')} - label={'Source Link'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('source_link_template')} - /> - - - - - - onShowConfirmModal('phone_call_title_template')} - label={'Phone Call'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('phone_call_title_template')} - /> - - onShowConfirmModal('sms_title_template')} - label={'SMS'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('sms_title_template')} - /> - - - - - - Slack - - onShowConfirmModal('slack_title_template')} - label={'Title'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('slack_title_template')} - /> - - onShowConfirmModal('slack_message_template')} - label={'Message'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('slack_message_template')} - /> - - onShowConfirmModal('slack_image_url_template')} - label={'Image'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('slack_image_url_template')} - /> - - - - - - Telegram - onShowConfirmModal('telegram_title_template')} - label={'Title'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('telegram_title_template')} - /> - - onShowConfirmModal('telegram_message_template')} - label={'Message'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('telegram_message_template')} - /> - - onShowConfirmModal('telegram_image_url_template')} - label={'Image'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('telegram_image_url_template')} - /> - - - - - - Email - onShowConfirmModal('email_title_template')} - label={'Title'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('email_title_template')} - /> - - onShowConfirmModal('email_message_template')} - label={'Message'} - renderInput={() => ( -
- -
- )} - onEdit={() => openEditTemplateModal('email_message_template')} - /> - - -
- ); - - function onShowConfirmModal(templateName: string) { - setTemplateRestoreName(templateName); - setShowConfirmModal(true); - } - - function onDismiss() { - setTemplateRestoreName(undefined); - setShowConfirmModal(false); - } - - function onResetTemplate(templateName: string) { - setTemplateRestoreName(undefined); - setIsRestoringTemplate(true); - - alertReceiveChannelStore - .saveTemplates(alertReceiveChannelId, { [templateName]: '' }) - .then(() => { - openNotification('The Alert template has been updated'); - }) - .catch((err) => { - if (err.response?.data?.length > 0) { - openErrorNotification(err.response.data); - } else { - openErrorNotification(err.message); - } - }) - .finally(() => { - setIsRestoringTemplate(false); - setShowConfirmModal(false); - }); - } -}; - -const VerticalBlock: React.FC<{ children: React.ReactElement[] }> = ({ children }) => { - return
{children}
; -}; - -export default IntegrationTemplateList;