diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 5e5c7d09306..3f9e07827bc 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -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 { 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, - - ) - ); - }); - - 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 { )} - {config.featureToggles.editPanelCSVDragAndDrop ? ( - - {({ getRootProps, isDragActive }) => { - const styles = getStyles(this.props.theme, isDragActive); - return ( -
-
-
- -

Create tables from spreadsheets

-
-
- -
- ); - }} -
- ) : ( - - )} + + {inspectPanel && } {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);