Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix template preview markup #2304

Merged
merged 2 commits into from
Jun 22, 2023
Merged

Fix template preview markup #2304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c8365a5
Fix template preview markup
iskhakov Jun 22, 2023
a607ac0
Refactor template preview
iskhakov Jun 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions grafana-plugin/src/components/AlertTemplates/CommonAlertTemplatesForm.config.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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