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

Dashboards: Support drag+drop to import dashboard (#61017)

Browse Source
This commit is contained in:
Ryan McKinley 2023-01-05 10:52:37 -08:00 committed by GitHub
parent 8c3a5f6da0
commit 0f3b4e02a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.betterer.results
View File

@ -3999,10 +3999,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "3"], [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
[0, 0, 0, "Do not use any type assertions.", "4"] [0, 0, 0, "Do not use any type assertions.", "4"]
], ],
"public/app/features/manage-dashboards/DashboardImportPage.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"public/app/features/manage-dashboards/components/ImportDashboardForm.tsx:5381": [ "public/app/features/manage-dashboards/components/ImportDashboardForm.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"],

57
public/app/features/manage-dashboards/DashboardImportPage.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React, { FormEvent, PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux'; import { connect, ConnectedProps } from 'react-redux';
import { AppEvents, GrafanaTheme2, LoadingState, NavModelItem } from '@grafana/data'; import { AppEvents, GrafanaTheme2, LoadingState, NavModelItem } from '@grafana/data';
@ -8,7 +8,6 @@ import { reportInteraction } from '@grafana/runtime';
import { import {
Button, Button,
Field, Field,
FileUpload,
Form, Form,
HorizontalGroup, HorizontalGroup,
Input, Input,
@ -17,7 +16,10 @@ import {
TextArea, TextArea,
Themeable2, Themeable2,
VerticalGroup, VerticalGroup,
FileDropzone,
withTheme2, withTheme2,
DropzoneFile,
FileDropzoneDefaultChildren,
} from '@grafana/ui'; } from '@grafana/ui';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import { Page } from 'app/core/components/Page/Page'; import { Page } from 'app/core/components/Page/Page';
@ -67,35 +69,21 @@ class UnthemedDashboardImport extends PureComponent<Props> {
this.props.cleanUpAction({ cleanupAction: (state) => (state.importDashboard = initialImportDashboardState) }); this.props.cleanUpAction({ cleanupAction: (state) => (state.importDashboard = initialImportDashboardState) });
} }
onFileUpload = (event: FormEvent<HTMLInputElement>) => { // Do not display upload file list
fileListRenderer = (file: DropzoneFile, removeFile: (file: DropzoneFile) => void) => null;
onFileUpload = (result: string | ArrayBuffer | null) => {
reportInteraction(IMPORT_STARTED_EVENT_NAME, { reportInteraction(IMPORT_STARTED_EVENT_NAME, {
import_source: 'json_uploaded', import_source: 'json_uploaded',
}); });
const { importDashboardJson } = this.props; try {
const file = event.currentTarget.files && event.currentTarget.files.length > 0 && event.currentTarget.files[0]; this.props.importDashboardJson(JSON.parse(String(result)));
} catch (error) {
if (file) { if (error instanceof Error) {
const reader = new FileReader(); appEvents.emit(AppEvents.alertError, ['Import failed', 'JSON -> JS Serialization failed: ' + error.message]);
const readerOnLoad = () => { }
return (e: any) => { return;
let dashboard: any;
try {
dashboard = JSON.parse(e.target.result);
} catch (error) {
if (error instanceof Error) {
appEvents.emit(AppEvents.alertError, [
'Import failed',
'JSON -> JS Serialization failed: ' + error.message,
]);
}
return;
}
importDashboardJson(dashboard);
};
};
reader.onload = readerOnLoad();
reader.readAsText(file);
} }
}; };
@ -131,9 +119,17 @@ class UnthemedDashboardImport extends PureComponent<Props> {
return ( return (
<> <>
<div className={styles.option}> <div className={styles.option}>
<FileUpload accept="application/json, text/plain" onFileUpload={this.onFileUpload}> <FileDropzone
Upload JSON file options={{ multiple: false, accept: ['.json', '.txt'] }}
</FileUpload> readAs="readAsText"
fileListRenderer={this.fileListRenderer}
onLoad={this.onFileUpload}
>
<FileDropzoneDefaultChildren
primaryText="Upload dashboard JSON file"
secondaryText="Drag and drop here or click to browse"
/>
</FileDropzone>
</div> </div>
<div className={styles.option}> <div className={styles.option}>
<Form onSubmit={this.getGcomDashboard} defaultValues={{ gcomDashboard: '' }}> <Form onSubmit={this.getGcomDashboard} defaultValues={{ gcomDashboard: '' }}>
@ -223,6 +219,7 @@ const importStyles = stylesFactory((theme: GrafanaTheme2) => {
return { return {
option: css` option: css`
margin-bottom: ${theme.spacing(4)}; margin-bottom: ${theme.spacing(4)};
max-width: 600px;
`, `,
}; };
}); });