Grafana uses Go templating language to create notification messages.
@@ -291,191 +346,125 @@ function TemplatingGuideline() {
);
}
-function getResultsToRender(results: TemplatePreviewResult[]) {
- const filteredResults = results.filter((result) => result.text.trim().length > 0);
-
- const moreThanOne = filteredResults.length > 1;
-
- const preview = (result: TemplatePreviewResult) => {
- const previewForLabel = `Preview for ${result.name}:`;
- const separatorStart = '='.repeat(previewForLabel.length).concat('>');
- const separatorEnd = '<'.concat('='.repeat(previewForLabel.length));
- if (moreThanOne) {
- return `${previewForLabel}\n${separatorStart}${result.text}${separatorEnd}\n`;
- } else {
- return `${separatorStart}${result.text}${separatorEnd}\n`;
- }
- };
-
- return filteredResults
- .map((result: TemplatePreviewResult) => {
- return preview(result);
- })
- .join(`\n`);
-}
-
-function getErrorsToRender(results: TemplatePreviewErrors[]) {
- return results
- .map((result: TemplatePreviewErrors) => {
- if (result.name) {
- return `ERROR in ${result.name}:\n`.concat(`${result.kind}\n${result.message}\n`);
- } else {
- return `ERROR:\n${result.kind}\n${result.message}\n`;
- }
- })
- .join(`\n`);
-}
-
-export const PREVIEW_NOT_AVAILABLE = 'Preview request failed. Check if the payload data has the correct structure.';
-
-function getPreviewTorender(
- isPreviewError: boolean,
- payloadFormatError: string | null,
- data: TemplatePreviewResponse | undefined
-) {
- // ERRORS IN JSON OR IN REQUEST (endpoint not available, for example)
- const previewErrorRequest = isPreviewError ? PREVIEW_NOT_AVAILABLE : undefined;
- const somethingWasWrong: boolean = isPreviewError || Boolean(payloadFormatError);
- const errorToRender = payloadFormatError || previewErrorRequest;
-
- //PREVIEW : RESULTS AND ERRORS
- const previewResponseResults = data?.results;
- const previewResponseErrors = data?.errors;
-
- const previewResultsToRender = previewResponseResults ? getResultsToRender(previewResponseResults) : '';
- const previewErrorsToRender = previewResponseErrors ? getErrorsToRender(previewResponseErrors) : '';
-
- if (somethingWasWrong) {
- return errorToRender;
- } else {
- return `${previewResultsToRender}\n${previewErrorsToRender}`;
- }
-}
-
-export function TemplatePreview({
- payload,
- templateName,
- payloadFormatError,
- setPayloadFormatError,
- width,
-}: {
- payload: string;
- templateName: string;
- payloadFormatError: string | null;
- setPayloadFormatError: (value: React.SetStateAction
) => void;
- width: number;
-}) {
- const styles = useStyles2(getStyles);
-
- const { watch } = useFormContext();
-
- const templateContent = watch('content');
-
- const [trigger, { data, isError: isPreviewError, isLoading }] = usePreviewTemplateMutation();
-
- const previewToRender = getPreviewTorender(isPreviewError, payloadFormatError, data);
-
- const onPreview = useCallback(() => {
- try {
- const alertList: AlertField[] = JSON.parse(payload);
- JSON.stringify([...alertList]); // check if it's iterable, in order to be able to add more data
- trigger({ template: templateContent, alerts: alertList, name: templateName });
- setPayloadFormatError(null);
- } catch (e) {
- setPayloadFormatError(e instanceof Error ? e.message : 'Invalid JSON.');
- }
- }, [templateContent, templateName, payload, setPayloadFormatError, trigger]);
-
- useEffect(() => onPreview(), [onPreview]);
-
+function TemplatingCheatSheet() {
return (
-
- {isLoading && (
- <>
-
Loading preview...
-
- )}
-
- {previewToRender}
-
-
-
+
+ Refresh
+
+ }
+ />
+
+
+ {({ height }) => {previewToRender}
}
+
+
+
+ {previews.map((preview) => (
+ -
+ {singleTemplate ? null : }
+
{preview.text ?? ''}
+
+ ))}
+
+ );
+}
+
+function PreviewErrorViewer({ errors }: { errors: TemplatePreviewErrors[] }) {
+ return errors.map((error) => (
+
+ {error.message}
+
+ ));
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ container: css({
+ label: 'template-preview-container',
+ display: 'flex',
+ flexDirection: 'column',
+ borderRadius: theme.shape.radius.default,
+ border: `1px solid ${theme.colors.border.medium}`,
+ }),
+ viewerContainer: ({ height }: { height: number }) =>
+ css({
+ height,
+ overflow: 'auto',
+ backgroundColor: theme.colors.background.primary,
+ }),
+ viewer: {
+ container: css({
+ display: 'flex',
+ flexDirection: 'column',
+ }),
+ box: css({
+ display: 'flex',
+ flexDirection: 'column',
+ borderBottom: `1px solid ${theme.colors.border.medium}`,
+ }),
+ header: css({
+ fontSize: theme.typography.bodySmall.fontSize,
+ padding: theme.spacing(1, 2),
+ borderBottom: `1px solid ${theme.colors.border.medium}`,
+ backgroundColor: theme.colors.background.secondary,
+ }),
+ errorText: css({
+ color: theme.colors.error.text,
+ }),
+ pre: css({
+ backgroundColor: 'transparent',
+ margin: 0,
+ border: 'none',
+ padding: theme.spacing(2),
+ }),
+ },
+});
+
+export function getPreviewResults(
+ previewError: unknown | undefined,
+ payloadFormatError: string | null,
+ data: TemplatePreviewResponse | undefined
+): JSX.Element {
+ // ERRORS IN JSON OR IN REQUEST (endpoint not available, for example)
+ const previewErrorRequest = previewError ? stringifyErrorLike(previewError) : undefined;
+ const errorToRender = payloadFormatError || previewErrorRequest;
+
+ //PREVIEW : RESULTS AND ERRORS
+ const previewResponseResults = data?.results ?? [];
+ const previewResponseErrors = data?.errors;
+
+ return (
+ <>
+ {errorToRender && (
+
+ {errorToRender}
+
+ )}
+ {previewResponseErrors && }
+ {previewResponseResults && }
+
+ );
+}
diff --git a/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx b/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx
index 4d4879cfb19..4fb7abb1bb3 100644
--- a/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/GenerateAlertDataModal.tsx
@@ -1,5 +1,6 @@
import { css } from '@emotion/css';
import { addDays, subDays } from 'date-fns';
+import { uniqueId } from 'lodash';
import React, { useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
@@ -53,6 +54,8 @@ export const GenerateAlertDataModal = ({ isOpen, onDismiss, onAccept }: Props) =
}, {}),
startsAt: '2023-04-01T00:00:00Z',
endsAt: status === 'firing' ? addDays(new Date(), 1).toISOString() : subDays(new Date(), 1).toISOString(),
+ status,
+ fingerprint: uniqueId('fingerprint_'),
};
setAlerts((alerts) => [...alerts, alert]);
formMethods.reset();
diff --git a/public/app/features/alerting/unified/mocks/templatesApi.ts b/public/app/features/alerting/unified/mocks/templatesApi.ts
index d0e591fb3c5..71461f216e9 100644
--- a/public/app/features/alerting/unified/mocks/templatesApi.ts
+++ b/public/app/features/alerting/unified/mocks/templatesApi.ts
@@ -8,6 +8,8 @@ export function mockPreviewTemplateResponse(server: SetupServer, response: Templ
server.use(http.post(previewTemplateUrl, () => HttpResponse.json(response)));
}
+export const REJECTED_PREVIEW_RESPONSE = 'error, something went wrong';
+
export function mockPreviewTemplateResponseRejected(server: SetupServer) {
- server.use(http.post(previewTemplateUrl, () => HttpResponse.json('error', { status: 500 })));
+ server.use(http.post(previewTemplateUrl, () => HttpResponse.json(REJECTED_PREVIEW_RESPONSE, { status: 500 })));
}
diff --git a/public/app/plugins/datasource/alertmanager/types.ts b/public/app/plugins/datasource/alertmanager/types.ts
index 059773ac0d0..ba3f6594ffe 100644
--- a/public/app/plugins/datasource/alertmanager/types.ts
+++ b/public/app/plugins/datasource/alertmanager/types.ts
@@ -1,5 +1,4 @@
//DOCS: https://prometheus.io/docs/alerting/latest/configuration/
-
import { DataSourceJsonData } from '@grafana/data';
export type AlertManagerCortexConfig = {
@@ -255,7 +254,12 @@ export interface AlertmanagerStatus {
}
export type TestReceiversAlert = Pick;
-export type TestTemplateAlert = Pick;
+export type TestTemplateAlert = Pick<
+ AlertmanagerAlert,
+ 'annotations' | 'labels' | 'startsAt' | 'endsAt' | 'generatorURL' | 'fingerprint'
+> & {
+ status: 'firing' | 'resolved';
+};
export interface TestReceiversPayload {
receivers?: Receiver[];