IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

DashboardSave: fix light theme JSON preview (#23279)

Browse Source
This commit is contained in:
Dominik Prokop 2020-04-02 16:53:24 +02:00 committed by GitHub
parent 7afdfd2ef4
commit 0cf5ae5001
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
View File

@ -1,11 +1,21 @@
import React, { useCallback, useMemo } from 'react'; import React, { useCallback, useMemo } from 'react';
import { css } from 'emotion'; import { css } from 'emotion';
import { saveAs } from 'file-saver'; import { saveAs } from 'file-saver';
import { CustomScrollbar, Button, HorizontalGroup, JSONFormatter, VerticalGroup } from '@grafana/ui'; import {
CustomScrollbar,
Button,
HorizontalGroup,
JSONFormatter,
VerticalGroup,
useTheme,
stylesFactory,
} from '@grafana/ui';
import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard'; import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
import { SaveDashboardFormProps } from '../types'; import { SaveDashboardFormProps } from '../types';
import { GrafanaTheme } from '@grafana/data';
export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard, onCancel }) => { export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard, onCancel }) => {
const theme = useTheme();
const dashboardJSON = useMemo(() => { const dashboardJSON = useMemo(() => {
const clone = dashboard.getSaveModelClone(); const clone = dashboard.getSaveModelClone();
delete clone.id; delete clone.id;
@ -22,7 +32,7 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
}); });
saveAs(blob, dashboard.title + '-' + new Date().getTime() + '.json'); saveAs(blob, dashboard.title + '-' + new Date().getTime() + '.json');
}, [dashboardJSON]); }, [dashboardJSON]);
const styles = getStyles(theme);
return ( return (
<> <>
<VerticalGroup spacing="lg"> <VerticalGroup spacing="lg">
@ -45,13 +55,7 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
<div> <div>
<strong>File path: </strong> {dashboard.meta.provisionedExternalId} <strong>File path: </strong> {dashboard.meta.provisionedExternalId}
</div> </div>
<div <div className={styles.json}>
className={css`
padding: 8px 16px;
background: black;
height: 400px;
`}
>
<CustomScrollbar> <CustomScrollbar>
<JSONFormatter json={dashboardJSON} open={1} /> <JSONFormatter json={dashboardJSON} open={1} />
</CustomScrollbar> </CustomScrollbar>
@ -69,3 +73,13 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
</> </>
); );
}; };
const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
json: css`
background: ${theme.isLight ? theme.colors.gray7 : theme.colors.black};
padding: ${theme.spacing.sm} 0 ${theme.spacing.sm} ${theme.spacing.md};
height: 400px;
`,
};
});