mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Alerting: Clarify provisioning export types (#82420)
Add provisioning type export Alert
This commit is contained in:
parent
6ce286246b
commit
44ecb26ea1
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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 = {
|
||||
|
Loading…
Reference in New Issue
Block a user