diff --git a/public/app/features/alerting/unified/components/export/FileExportPreview.tsx b/public/app/features/alerting/unified/components/export/FileExportPreview.tsx
index 2a7f5c06ee6..df5fcfd9495 100644
--- a/public/app/features/alerting/unified/components/export/FileExportPreview.tsx
+++ b/public/app/features/alerting/unified/components/export/FileExportPreview.tsx
@@ -4,9 +4,9 @@ import React, { useCallback, useMemo } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { GrafanaTheme2 } from '@grafana/data';
-import { Button, ClipboardButton, CodeEditor, useStyles2 } from '@grafana/ui';
+import { Alert, Button, ClipboardButton, CodeEditor, TextLink, useStyles2 } from '@grafana/ui';
-import { allGrafanaExportProviders, ExportFormats } from './providers';
+import { allGrafanaExportProviders, ExportFormats, ExportProvider, ProvisioningType } from './providers';
interface FileExportPreviewProps {
format: ExportFormats;
@@ -19,6 +19,7 @@ interface FileExportPreviewProps {
export function FileExportPreview({ format, textDefinition, downloadFileName, onClose }: FileExportPreviewProps) {
const styles = useStyles2(fileExportPreviewStyles);
+ const provider = allGrafanaExportProviders[format];
const onDownload = useCallback(() => {
const blob = new Blob([textDefinition], {
@@ -28,13 +29,13 @@ export function FileExportPreview({ format, textDefinition, downloadFileName, on
}, [textDefinition, downloadFileName, format]);
const formattedTextDefinition = useMemo(() => {
- const provider = allGrafanaExportProviders[format];
return provider.formatter ? provider.formatter(textDefinition) : textDefinition;
- }, [format, textDefinition]);
+ }, [provider, textDefinition]);
return (
// TODO Handle empty content
+
{({ height }) => (
@@ -87,3 +88,60 @@ const fileExportPreviewStyles = (theme: GrafanaTheme2) => ({
gap: ${theme.spacing(1)};
`,
});
+
+function FileExportInlineDocumentation({ exportProvider }: { exportProvider: ExportProvider }) {
+ const { name, type } = exportProvider;
+
+ const exportInlineDoc: Record = {
+ file: {
+ title: 'File-provisioning format',
+ component: (
+ <>
+ {name} format is only valid for File Provisioning.{' '}
+
+ Read more in the docs.
+
+ >
+ ),
+ },
+ api: {
+ title: 'API-provisioning format',
+ component: (
+ <>
+ {name} format is only valid for API Provisioning.{' '}
+
+ Read more in the docs.
+
+ >
+ ),
+ },
+ terraform: {
+ title: 'Terraform-provisioning format',
+ component: (
+ <>
+ {name} format is only valid for Terraform Provisioning.{' '}
+
+ Read more in the docs.
+
+ >
+ ),
+ },
+ };
+
+ const { title, component } = exportInlineDoc[type];
+
+ return (
+
+ {component}
+
+ );
+}
diff --git a/public/app/features/alerting/unified/components/export/providers.ts b/public/app/features/alerting/unified/components/export/providers.ts
index 356909609bb..518ced9e5f2 100644
--- a/public/app/features/alerting/unified/components/export/providers.ts
+++ b/public/app/features/alerting/unified/components/export/providers.ts
@@ -1,12 +1,16 @@
+export type ProvisioningType = 'file' | 'api' | 'terraform';
+
export interface ExportProvider {
name: string;
exportFormat: TFormat;
+ type: ProvisioningType;
formatter?: (raw: string) => string;
}
export const JsonExportProvider: ExportProvider<'json'> = {
name: 'JSON',
exportFormat: 'json',
+ type: 'file',
formatter: (raw: string) => {
try {
return JSON.stringify(JSON.parse(raw), null, 4);
@@ -19,11 +23,13 @@ export const JsonExportProvider: ExportProvider<'json'> = {
export const YamlExportProvider: ExportProvider<'yaml'> = {
name: 'YAML',
exportFormat: 'yaml',
+ type: 'file',
};
export const HclExportProvider: ExportProvider<'hcl'> = {
name: 'Terraform (HCL)',
exportFormat: 'hcl',
+ type: 'terraform',
};
export const allGrafanaExportProviders = {