Skip to content

Commit

Permalink
Fix template preview markup (#2304)
Browse files Browse the repository at this point in the history 
# What this PR does

## Which issue(s) this PR fixes

## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [ ] Documentation added (or `pr:no public docs` PR label added if not
required)
- [ ] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)
  • Loading branch information
@iskhakov
iskhakov authored Jun 22, 2023
1 parent 8bfaccf commit 0a493be
Show file tree
Hide file tree
Showing 5 changed files with 130 additions and 55 deletions.
19 changes: 19 additions & 0 deletions grafana-plugin/src/components/AlertTemplates/CommonAlertTemplatesForm.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,21 @@ export interface TemplateForEdit {
additionalDescription?: string;
};
isRoute?: boolean;
type?: 'html' | 'plain' | 'image' | 'boolean';
}

export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
web_title_template: {
displayName: 'Web title',
name: TemplateOptions.WebTitle.key,
description: '',
type: 'html',
},
web_message_template: {
displayName: 'Web message',
name: TemplateOptions.WebMessage.key,
description: '',
type: 'html',
},
slack_title_template: {
name: 'slack_title_template',
Expand All @@ -37,21 +40,25 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
chatOpsName: 'slack',
data: 'Click "Acknowledge" and then "Unacknowledge" in Slack to trigger re-rendering.',
},
type: 'plain',
},
sms_title_template: {
name: TemplateOptions.SMS.key,
displayName: 'Sms title',
description: '',
type: 'plain',
},
phone_call_title_template: {
name: TemplateOptions.Phone.key,
displayName: 'Phone call title',
description: '',
type: 'plain',
},
email_title_template: {
name: TemplateOptions.EmailTitle.key,
displayName: 'Email title',
description: '',
type: 'plain',
},
telegram_title_template: {
name: TemplateOptions.TelegramTitle.key,
Expand All @@ -60,6 +67,7 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
additionalData: {
chatOpsName: 'telegram',
},
type: 'plain',
},
slack_message_template: {
name: TemplateOptions.SlackMessage.key,
Expand All @@ -69,11 +77,13 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
chatOpsName: 'slack',
data: 'Click "Acknowledge" and then "Unacknowledge" in Slack to trigger re-rendering.',
},
type: 'plain',
},
email_message_template: {
name: TemplateOptions.EmailMessage.key,
displayName: 'Email message',
description: '',
type: 'plain',
},
telegram_message_template: {
name: TemplateOptions.TelegramMessage.key,
Expand All @@ -82,6 +92,7 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
additionalData: {
chatOpsName: 'telegram',
},
type: 'plain',
},
slack_image_url_template: {
name: TemplateOptions.SlackImage.key,
Expand All @@ -91,11 +102,13 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
chatOpsName: 'slack',
data: 'Click "Acknowledge" and then "Unacknowledge" in Slack to trigger re-rendering.',
},
type: 'plain',
},
web_image_url_template: {
name: TemplateOptions.WebImage.key,
displayName: 'Web image url',
description: '',
type: 'image',
},
telegram_image_url_template: {
name: TemplateOptions.TelegramImage.key,
Expand All @@ -104,28 +117,33 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
additionalData: {
chatOpsName: 'telegram',
},
type: 'image',
},
grouping_id_template: {
name: TemplateOptions.Grouping.key,
displayName: 'Grouping',
description:
'Reduce noise, minimize duplication with Alert Grouping, based on time, alert content, and even multiple features at the same time. Check the cheasheet to customize your template.',
type: 'plain',
},
acknowledge_condition_template: {
name: TemplateOptions.Autoacknowledge.key,
displayName: 'Acknowledge condition',
description: '',
type: 'boolean',
},
resolve_condition_template: {
name: TemplateOptions.Resolve.key,
displayName: 'Resolve condition',
description:
'When monitoring systems return to normal, they can send "resolve" alerts. OnCall can use these signals to resolve alert groups accordingly.',
type: 'boolean',
},
source_link_template: {
name: TemplateOptions.SourceLink.key,
displayName: 'Source link',
description: '',
type: 'plain',
},
route_template: {
name: TemplateOptions.Routing.key,
Expand All @@ -137,5 +155,6 @@ export const commonTemplateForEdit: { [id: string]: TemplateForEdit } = {
data: 'Selected Alert will be directed to this route',
},
isRoute: true,
type: 'boolean',
},
};
21 changes: 19 additions & 2 deletions grafana-plugin/src/containers/IntegrationContainers/IntegrationCommonTemplatesList.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ interface TemplateToRender {
name: string;
label: string;
height: string;
type: 'plain' | 'html' | 'image' | 'boolean';
labelTooltip?: string;
}

Expand All @@ -22,13 +23,15 @@ export const commonTemplatesToRender: TemplateBlock[] = [
labelTooltip:
'The Grouping Template is applied to every incoming alert payload after the Routing Template. It can be based on time, or alert content, or both. If the resulting grouping key matches an existing non-resolved alert group, the alert will be grouped accordingly. Otherwise, a new alert group will be created',
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'plain',
},
{
name: 'resolve_condition_template',
label: 'Autoresolution',
labelTooltip:
'If Autoresolution Template is True, the alert will resolve its group as "resolved by source". If the group is already resolved, the alert will be added to that group',
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'boolean',
},
],
},
Expand All @@ -38,17 +41,20 @@ export const commonTemplatesToRender: TemplateBlock[] = [
{
name: 'web_title_template',
label: 'Title',
height: MONACO_INPUT_HEIGHT_TALL,
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'html',
},
{
name: 'web_message_template',
label: 'Message',
height: MONACO_INPUT_HEIGHT_TALL,
type: 'html',
},
{
name: 'web_image_url_template',
label: 'Image',
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'image',
},
],
},
Expand All @@ -59,11 +65,13 @@ export const commonTemplatesToRender: TemplateBlock[] = [
name: 'acknowledge_condition_template',
label: 'Auto acknowledge',
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'boolean',
},
{
name: 'source_link_template',
label: 'Source link',
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'plain',
},
],
},
Expand All @@ -74,11 +82,13 @@ export const commonTemplatesToRender: TemplateBlock[] = [
name: 'phone_call_title_template',
label: 'Phone Call',
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'plain',
},
{
name: 'sms_title_template',
label: 'SMS',
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'plain',
},
],
},
Expand All @@ -89,16 +99,19 @@ export const commonTemplatesToRender: TemplateBlock[] = [
name: 'slack_title_template',
label: 'Title',
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'plain',
},
{
name: 'slack_message_template',
label: 'Message',
height: MONACO_INPUT_HEIGHT_TALL,
type: 'plain',
},
{
name: 'slack_image_url_template',
label: 'Image',
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'image',
},
],
},
Expand All @@ -109,16 +122,19 @@ export const commonTemplatesToRender: TemplateBlock[] = [
name: 'telegram_title_template',
label: 'Title',
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'plain',
},
{
name: 'telegram_message_template',
label: 'Message',
height: MONACO_INPUT_HEIGHT_TALL,
type: 'plain',
},
{
name: 'telegram_image_url_template',
label: 'Image',
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'image',
},
],
},
Expand All @@ -129,8 +145,9 @@ export const commonTemplatesToRender: TemplateBlock[] = [
name: 'email_title_template',
label: 'Title',
height: MONACO_INPUT_HEIGHT_SMALL,
type: 'plain',
},
{ name: 'email_message_template', label: 'Message', height: MONACO_INPUT_HEIGHT_TALL },
{ name: 'email_message_template', label: 'Message', height: MONACO_INPUT_HEIGHT_TALL, type: 'plain' },
],
},
];
3 changes: 3 additions & 0 deletions grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ interface ResultProps {
payload?: JSON;
error?: string;
onSaveAndFollowLink?: (link: string) => void;
templateIsRoute?: boolean;
}

const Result = (props: ResultProps) => {
Expand All @@ -270,6 +271,8 @@ const Result = (props: ResultProps) => {
key={template.name}
templateName={template.name}
templateBody={templateBody}
templateType={template.type}
templateIsRoute={template.isRoute}
alertReceiveChannelId={alertReceiveChannelId}
payload={payload}
/>
Expand Down
4 changes: 4 additions & 0 deletions grafana-plugin/src/containers/TemplatePreview/TemplatePreview.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,7 @@
max-width: 100%;
max-height: 100%;
}

.display-linebreak {
white-space: pre-line;
}
Loading

0 comments on commit 0a493be

Please sign in to comment.