Alerting: Clarify provisioning export types (#82420)

Add provisioning type export Alert
This commit is contained in:
Konrad Lalik 2024-02-14 15:04:15 +01:00 committed by GitHub
parent 6ce286246b
commit 44ecb26ea1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 68 additions and 4 deletions

View File

@ -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
<div className={styles.container}>
<FileExportInlineDocumentation exportProvider={provider} />
<div className={styles.content}>
<AutoSizer disableWidth>
{({ height }) => (
@ -87,3 +88,60 @@ const fileExportPreviewStyles = (theme: GrafanaTheme2) => ({
gap: ${theme.spacing(1)};
`,
});
function FileExportInlineDocumentation({ exportProvider }: { exportProvider: ExportProvider<unknown> }) {
const { name, type } = exportProvider;
const exportInlineDoc: Record<ProvisioningType, { title: string; component: React.ReactNode }> = {
file: {
title: 'File-provisioning format',
component: (
<>
{name} format is only valid for File Provisioning.{' '}
<TextLink
href="https://grafana.com/docs/grafana/latest/alerting/set-up/provision-alerting-resources/file-provisioning/"
external
>
Read more in the docs.
</TextLink>
</>
),
},
api: {
title: 'API-provisioning format',
component: (
<>
{name} format is only valid for API Provisioning.{' '}
<TextLink
href="https://grafana.com/docs/grafana/latest/alerting/set-up/provision-alerting-resources/http-api-provisioning/"
external
>
Read more in the docs.
</TextLink>
</>
),
},
terraform: {
title: 'Terraform-provisioning format',
component: (
<>
{name} format is only valid for Terraform Provisioning.{' '}
<TextLink
href="https://grafana.com/docs/grafana/latest/alerting/set-up/provision-alerting-resources/terraform-provisioning/"
external
>
Read more in the docs.
</TextLink>
</>
),
},
};
const { title, component } = exportInlineDoc[type];
return (
<Alert title={title} severity="info" bottomSpacing={0} topSpacing={0}>
{component}
</Alert>
);
}

View File

@ -1,12 +1,16 @@
export type ProvisioningType = 'file' | 'api' | 'terraform';
export interface ExportProvider<TFormat> {
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 = {