mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
DashboardPage: Remove file drop code (#67954)
This commit is contained in:
parent
8779526f15
commit
1d537086c4
@ -1,23 +1,11 @@
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { cx } from '@emotion/css';
|
||||
import React, { PureComponent } from 'react';
|
||||
import DropZone, { FileRejection, DropEvent, ErrorCode } from 'react-dropzone';
|
||||
import { connect, ConnectedProps } from 'react-redux';
|
||||
|
||||
import {
|
||||
NavModel,
|
||||
NavModelItem,
|
||||
TimeRange,
|
||||
PageLayoutType,
|
||||
locationUtil,
|
||||
dataFrameToJSON,
|
||||
DataFrameJSON,
|
||||
GrafanaTheme2,
|
||||
getValueFormat,
|
||||
formattedValueToString,
|
||||
} from '@grafana/data';
|
||||
import { NavModel, NavModelItem, TimeRange, PageLayoutType, locationUtil } from '@grafana/data';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
import { config, locationService, reportInteraction } from '@grafana/runtime';
|
||||
import { Icon, Themeable2, withTheme2 } from '@grafana/ui';
|
||||
import { locationService } from '@grafana/runtime';
|
||||
import { Themeable2, withTheme2 } from '@grafana/ui';
|
||||
import { notifyApp } from 'app/core/actions';
|
||||
import { Page } from 'app/core/components/Page/Page';
|
||||
import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound';
|
||||
@ -27,10 +15,8 @@ import { getKioskMode } from 'app/core/navigation/kiosk';
|
||||
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
|
||||
import { getNavModel } from 'app/core/selectors/navModel';
|
||||
import { PanelModel } from 'app/features/dashboard/state';
|
||||
import * as DFImport from 'app/features/dataframe-import';
|
||||
import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
|
||||
import { getPageNavFromSlug, getRootContentNavModel } from 'app/features/storage/StorageFolderPage';
|
||||
import { GrafanaQueryType } from 'app/plugins/datasource/grafana/types';
|
||||
import { DashboardRoutes, KioskMode, StoreState } from 'app/types';
|
||||
import { PanelEditEnteredEvent, PanelEditExitedEvent } from 'app/types/events';
|
||||
|
||||
@ -113,70 +99,6 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
|
||||
private forceRouteReloadCounter = 0;
|
||||
state: State = this.getCleanState();
|
||||
|
||||
onFileDrop = (acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent) => {
|
||||
const grafanaDS = {
|
||||
type: 'grafana',
|
||||
uid: 'grafana',
|
||||
};
|
||||
DFImport.filesToDataframes(acceptedFiles).subscribe((next) => {
|
||||
const snapshot: DataFrameJSON[] = [];
|
||||
next.dataFrames.forEach((df) => {
|
||||
const dataframeJson = dataFrameToJSON(df);
|
||||
snapshot.push(dataframeJson);
|
||||
});
|
||||
this.props.dashboard?.addPanel({
|
||||
type: 'table',
|
||||
gridPos: { x: 0, y: 0, w: 12, h: 8 },
|
||||
title: next.file.name,
|
||||
datasource: grafanaDS,
|
||||
targets: [
|
||||
{
|
||||
queryType: GrafanaQueryType.Snapshot,
|
||||
snapshot,
|
||||
file: { name: next.file.name, size: next.file.size },
|
||||
datasource: grafanaDS,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
fileRejections.forEach((fileRejection) => {
|
||||
const errors = fileRejection.errors.map((error) => {
|
||||
switch (error.code) {
|
||||
case ErrorCode.FileTooLarge:
|
||||
const formattedSize = getValueFormat('decbytes')(DFImport.maxFileSize);
|
||||
return `File size must be less than ${formattedValueToString(formattedSize)}.`;
|
||||
case ErrorCode.FileInvalidType:
|
||||
return `File type must be one of the following types ${DFImport.formatFileTypes(DFImport.acceptedFiles)}.`;
|
||||
default:
|
||||
return error.message;
|
||||
}
|
||||
});
|
||||
this.props.notifyApp(
|
||||
createErrorNotification(
|
||||
`Failed to load ${fileRejection.file.name}`,
|
||||
undefined,
|
||||
undefined,
|
||||
<ul>
|
||||
{errors.map((err) => {
|
||||
return <li key={err}>{err}</li>;
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
reportInteraction('dashboards_dropped_files', {
|
||||
number_of_files: fileRejections.length + acceptedFiles.length,
|
||||
accepted_files: acceptedFiles.map((a) => {
|
||||
return { type: a.type, size: a.size };
|
||||
}),
|
||||
rejected_files: fileRejections.map((r) => {
|
||||
return { type: r.file.type, size: r.file.size };
|
||||
}),
|
||||
});
|
||||
};
|
||||
|
||||
getCleanState(): State {
|
||||
return {
|
||||
editPanel: null,
|
||||
@ -463,41 +385,13 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
|
||||
<SubMenu dashboard={dashboard} annotations={dashboard.annotations.list} links={dashboard.links} />
|
||||
</section>
|
||||
)}
|
||||
{config.featureToggles.editPanelCSVDragAndDrop ? (
|
||||
<DropZone
|
||||
onDrop={this.onFileDrop}
|
||||
accept={DFImport.acceptedFiles}
|
||||
maxSize={DFImport.maxFileSize}
|
||||
noClick={true}
|
||||
>
|
||||
{({ getRootProps, isDragActive }) => {
|
||||
const styles = getStyles(this.props.theme, isDragActive);
|
||||
return (
|
||||
<div {...getRootProps({ className: styles.dropZone })}>
|
||||
<div className={styles.dropOverlay}>
|
||||
<div className={styles.dropHint}>
|
||||
<Icon name="upload" size="xxxl"></Icon>
|
||||
<h3>Create tables from spreadsheets</h3>
|
||||
</div>
|
||||
</div>
|
||||
<DashboardGrid
|
||||
dashboard={dashboard}
|
||||
isEditable={!!dashboard.meta.canEdit}
|
||||
viewPanel={viewPanel}
|
||||
editPanel={editPanel}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</DropZone>
|
||||
) : (
|
||||
<DashboardGrid
|
||||
dashboard={dashboard}
|
||||
isEditable={!!dashboard.meta.canEdit}
|
||||
viewPanel={viewPanel}
|
||||
editPanel={editPanel}
|
||||
/>
|
||||
)}
|
||||
<DashboardGrid
|
||||
dashboard={dashboard}
|
||||
isEditable={!!dashboard.meta.canEdit}
|
||||
viewPanel={viewPanel}
|
||||
editPanel={editPanel}
|
||||
/>
|
||||
|
||||
{inspectPanel && <PanelInspector dashboard={dashboard} panel={inspectPanel} />}
|
||||
</Page>
|
||||
{editPanel && (
|
||||
@ -585,32 +479,6 @@ function updateStatePageNavFromProps(props: Props, state: State): State {
|
||||
};
|
||||
}
|
||||
|
||||
function getStyles(theme: GrafanaTheme2, isDragActive: boolean) {
|
||||
return {
|
||||
dropZone: css`
|
||||
height: 100%;
|
||||
`,
|
||||
dropOverlay: css`
|
||||
background-color: ${isDragActive ? theme.colors.action.hover : `inherit`};
|
||||
border: ${isDragActive ? `2px dashed ${theme.colors.border.medium}` : 0};
|
||||
position: absolute;
|
||||
display: ${isDragActive ? 'flex' : 'none'};
|
||||
z-index: ${theme.zIndex.modal};
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`,
|
||||
dropHint: css`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`,
|
||||
};
|
||||
}
|
||||
|
||||
export const DashboardPage = withTheme2(UnthemedDashboardPage);
|
||||
DashboardPage.displayName = 'DashboardPage';
|
||||
export default connector(DashboardPage);
|
||||
|
Loading…
Reference in New Issue
Block a user