Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Revert commit 7338312

pull/10616/head
Alex P 2018-06-01 12:40:09 -07:00 committed by Iris Scholten
parent 48ebf722a9
commit 402810f44b
5 changed files with 127 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
ui/src/data_explorer/components/WriteDataBody.tsx
View File

@ -7,14 +7,13 @@ import React, {
ReactElement,
} from 'react'
import WriteDataFooter from 'src/data_explorer/components/WriteDataFooter'
import DragAndDrop from 'src/shared/components/DragAndDrop'
interface Props {
handleCancelFile: (e: MouseEvent<HTMLButtonElement>) => void
handleEdit: (e: ChangeEvent<HTMLTextAreaElement>) => void
handleKeyUp: (e: KeyboardEvent<HTMLTextAreaElement>) => void
handleFile: (drop: boolean) => (e: DragEvent<HTMLInputElement>) => void
handleSubmit: (uploadContent: string) => void
handleSubmit: (e: MouseEvent<HTMLButtonElement>) => void
inputContent: string
uploadContent: string
fileName: string
@ -34,9 +33,9 @@ class WriteDataBody extends PureComponent<Props> {
)
}
// private handleFile = (e: any): void => {
// this.props.handleFile(false)(e)
// }
private handleFile = (e: any): void => {
this.props.handleFile(false)(e)
}
private get input(): JSX.Element {
const {isManual} = this.props
@ -44,13 +43,7 @@ class WriteDataBody extends PureComponent<Props> {
return this.textarea
}
// return this.dragArea
return (
<DragAndDrop
handleSubmit={this.props.handleSubmit}
fileTypesToAccept="text/*, application/gzip"
/>
)
return this.dragArea
}
private get textarea(): ReactElement<HTMLTextAreaElement> {
@ -69,80 +62,86 @@ class WriteDataBody extends PureComponent<Props> {
)
}
// private get dragArea(): ReactElement<HTMLDivElement> {
// const {fileInput, handleFileOpen} = this.props
private get dragArea(): ReactElement<HTMLDivElement> {
const {fileInput, handleFileOpen} = this.props
// return (
// <div className={this.dragAreaClass} onClick={handleFileOpen}>
// {this.dragAreaHeader}
// <div className={this.infoClass} />
// <input
// type="file"
// ref={fileInput}
// className="write-data-form--upload"
// accept="text/*, application/gzip"
// onChange={this.handleFile}
// />
// {this.buttons}
// </div>
// )
// }
return (
<div className={this.dragAreaClass} onClick={handleFileOpen}>
{this.dragAreaHeader}
<div className={this.infoClass} />
<input
type="file"
ref={fileInput}
className="write-data-form--upload"
accept="text/*, application/gzip"
onChange={this.handleFile}
/>
{this.buttons}
</div>
)
}
// private get dragAreaHeader(): ReactElement<HTMLHeadElement> {
// const {uploadContent, fileName} = this.props
private get dragAreaHeader(): ReactElement<HTMLHeadElement> {
const {uploadContent, fileName} = this.props
// if (uploadContent) {
// return <h3 className="write-data-form--filepath_selected">{fileName}</h3>
// }
if (uploadContent) {
return <h3 className="write-data-form--filepath_selected">{fileName}</h3>
}
// return (
// <h3 className="write-data-form--filepath_empty">
// Drop a file here or click to upload
// </h3>
// )
// }
return (
<h3 className="write-data-form--filepath_empty">
Drop a file here or click to upload
</h3>
)
}
// private get infoClass(): string {
// const {uploadContent} = this.props
private get infoClass(): string {
const {uploadContent} = this.props
// if (uploadContent) {
// return 'write-data-form--graphic write-data-form--graphic_success'
// }
if (uploadContent) {
return 'write-data-form--graphic write-data-form--graphic_success'
}
// return 'write-data-form--graphic'
// }
return 'write-data-form--graphic'
}
// private get buttons(): ReactElement<HTMLSpanElement> | null {
// const {uploadContent, handleSubmit, handleCancelFile} = this.props
private get buttons(): ReactElement<HTMLSpanElement> | null {
const {uploadContent, handleSubmit, handleCancelFile} = this.props
// if (!uploadContent) {
// return null
// }
if (!uploadContent) {
return null
}
// return (
// <span className="write-data-form--file-submit">
// <button className="btn btn-md btn-success" onClick={handleSubmit}>
// Write this File
// </button>
// <button className="btn btn-md btn-default" onClick={handleCancelFile}>
// Cancel
// </button>
// </span>
// )
// }
return (
<span className="write-data-form--file-submit">
<button className="btn btn-md btn-success" onClick={handleSubmit}>
Write this File
</button>
<button className="btn btn-md btn-default" onClick={handleCancelFile}>
Cancel
</button>
</span>
)
}
// private get dragAreaClass(): string {
// const {uploadContent} = this.props
private get dragAreaClass(): string {
const {uploadContent} = this.props
// if (uploadContent) {
// return 'write-data-form--file'
// }
if (uploadContent) {
return 'write-data-form--file'
}
// return 'write-data-form--file write-data-form--file_active'
// }
return 'write-data-form--file write-data-form--file_active'
}
private get footer(): JSX.Element | null {
const {isUploading, isManual, inputContent, uploadContent} = this.props
const {
isUploading,
isManual,
inputContent,
handleSubmit,
uploadContent,
} = this.props
if (!isManual) {
return null
@ -153,15 +152,11 @@ class WriteDataBody extends PureComponent<Props> {
isUploading={isUploading}
isManual={isManual}
inputContent={inputContent}
handleSubmit={this.handleSubmit}
handleSubmit={handleSubmit}
uploadContent={uploadContent}
/>
)
}
private handleSubmit = (): void => {
this.props.handleSubmit('')
}
}
export default WriteDataBody

5
ui/src/data_explorer/components/WriteDataFooter.tsx
View File

@ -1,4 +1,4 @@
import React, {PureComponent} from 'react'
import React, {PureComponent, MouseEvent} from 'react'
import {
WRITE_DATA_DOCS_LINK,
DATA_IMPORT_DOCS_LINK,
@ -12,8 +12,7 @@ interface Props {
isUploading: boolean
uploadContent: string
inputContent: string
// handleSubmit: (e: MouseEvent<HTMLButtonElement>) => void
handleSubmit: () => void
handleSubmit: (e: MouseEvent<HTMLButtonElement>) => void
}
class WriteDataFooter extends PureComponent<Props> {

77
ui/src/data_explorer/components/WriteDataForm.tsx
View File

@ -1,9 +1,10 @@
import React, {
PureComponent,
// DragEvent,
DragEvent,
ChangeEvent,
KeyboardEvent,
} from 'react'
import classnames from 'classnames'
import OnClickOutside from 'src/shared/components/OnClickOutside'
import WriteDataBody from 'src/data_explorer/components/WriteDataBody'
@ -12,7 +13,7 @@ import WriteDataHeader from 'src/data_explorer/components/WriteDataHeader'
import {OVERLAY_TECHNOLOGY} from 'src/shared/constants/classNames'
import {ErrorHandling} from 'src/shared/decorators/errors'
import {Source, DropdownItem} from 'src/types'
// let dragCounter = 0
let dragCounter = 0
interface Props {
source: Source
@ -53,9 +54,17 @@ class WriteDataForm extends PureComponent<Props, State> {
public render() {
const {onClose, errorThrown, source} = this.props
const {dragClass} = this.state
return (
<div className={OVERLAY_TECHNOLOGY}>
<div
onDrop={this.handleFile(true)}
onDragOver={this.handleDragOver}
onDragEnter={this.handleDragEnter}
onDragExit={this.handleDragLeave}
onDragLeave={this.handleDragLeave}
className={classnames(OVERLAY_TECHNOLOGY, dragClass)}
>
<div className="write-data-form">
<WriteDataHeader
{...this.state}
@ -96,23 +105,21 @@ class WriteDataForm extends PureComponent<Props, State> {
}
}
private handleSubmit = async (uploadContent: string) => {
console.log('submit!', uploadContent)
private handleSubmit = async () => {
const {onClose, source, writeLineProtocol} = this.props
const {inputContent, uploadContent, selectedDatabase, isManual} = this.state
const content = isManual ? inputContent : uploadContent
this.setState({isUploading: true})
// const {onClose, source, writeLineProtocol} = this.props
// const {inputContent, uploadContent, selectedDatabase, isManual} = this.state
// const content = isManual ? inputContent : uploadContent
// this.setState({isUploading: true})
// try {
// await writeLineProtocol(source, selectedDatabase, content)
// this.setState({isUploading: false})
// onClose()
// window.location.reload()
// } catch (error) {
// this.setState({isUploading: false})
// console.error(error.data.error)
// }
try {
await writeLineProtocol(source, selectedDatabase, content)
this.setState({isUploading: false})
onClose()
window.location.reload()
} catch (error) {
this.setState({isUploading: false})
console.error(error.data.error)
}
}
private handleEdit = (e: ChangeEvent<HTMLTextAreaElement>): void => {
@ -152,24 +159,24 @@ class WriteDataForm extends PureComponent<Props, State> {
this.fileInput.value = ''
}
// private handleDragOver = (e: DragEvent<HTMLDivElement>) => {
// e.preventDefault()
// e.stopPropagation()
// }
private handleDragOver = (e: DragEvent<HTMLDivElement>) => {
e.preventDefault()
e.stopPropagation()
}
// private handleDragEnter = (e: DragEvent<HTMLDivElement>): void => {
// dragCounter += 1
// e.preventDefault()
// this.setState({dragClass: 'drag-over'})
// }
private handleDragEnter = (e: DragEvent<HTMLDivElement>): void => {
dragCounter += 1
e.preventDefault()
this.setState({dragClass: 'drag-over'})
}
// private handleDragLeave = (e: DragEvent<HTMLDivElement>): void => {
// dragCounter -= 1
// e.preventDefault()
// if (dragCounter === 0) {
// this.setState({dragClass: 'drag-none'})
// }
// }
private handleDragLeave = (e: DragEvent<HTMLDivElement>): void => {
dragCounter -= 1
e.preventDefault()
if (dragCounter === 0) {
this.setState({dragClass: 'drag-none'})
}
}
private handleFileOpen = (): void => {
const {uploadContent} = this.state

10
ui/src/data_explorer/components/WriteDataHeader.tsx
View File

@ -32,10 +32,7 @@ class WriteDataHeader extends PureComponent<Props> {
database={selectedDatabase}
onErrorThrown={errorThrown}
/>
<ul
className="nav nav-tablist nav-tablist-sm"
style={{position: 'relative', zIndex: 9010}}
>
<ul className="nav nav-tablist nav-tablist-sm">
<li onClick={this.handleToggleOff} className={this.fileUploadClass}>
File Upload
</li>
@ -48,10 +45,7 @@ class WriteDataHeader extends PureComponent<Props> {
</li>
</ul>
</div>
<div
className="page-header__right"
style={{position: 'relative', zIndex: 9010}}
>
<div className="page-header__right">
<span className="page-header__dismiss" onClick={onClose} />
</div>
</div>

22
ui/src/style/components/write-data-form.scss
View File

@ -9,14 +9,14 @@ $write-data--drag-overlay-z: 1;
$write-data--max-width: 960px;
$write-data--gutter: 30px;
$write-data--margin: 18px;
$write-data--input-height: calc(
90vh - 48px - 60px - 36px
); // Heights of everything but input height
$write-data--input-height: calc(90vh - 48px - 60px - 36px); // Heights of everything but input height
$write-data--transition: opacity 0.4s ease;
.write-data-form {
max-width: $write-data--max-width;
margin: 0 auto;
position: relative;
z-index: $write-data--form-z;
}
.write-data-form--header {
height: $chronograf-page-header-height;
@ -40,7 +40,7 @@ $write-data--transition: opacity 0.4s ease;
.write-data-form--body {
padding: $write-data--margin $write-data--gutter;
border-radius: 0 0 $radius $radius;
@include gradient-v($g2-kevlar, $g0-obsidian);
@include gradient-v($g2-kevlar,$g0-obsidian);
}
textarea.form-control.write-data-form--input {
height: $write-data--input-height;
@ -76,7 +76,9 @@ textarea.form-control.write-data-form--input {
border: 2px solid $g4-onyx;
margin-bottom: 48px;
border-radius: 3px;
transition: background-color 0.25s ease, border-color 0.25s ease;
transition:
background-color 0.25s ease,
border-color 0.25s ease;
> p {
color: $g12-forge;
@ -98,7 +100,7 @@ textarea.form-control.write-data-form--input {
}
}
input[type='file'].write-data-form--upload {
input[type="file"].write-data-form--upload {
display: none;
}
.write-data-form--filepath_selected,
@ -111,12 +113,8 @@ input[type='file'].write-data-form--upload {
text-overflow: ellipsis;
margin: 0 0 30px 0;
}
.write-data-form--filepath_empty {
color: $g12-forge;
}
.write-data-form--filepath_selected {
color: $c-rainforest;
}
.write-data-form--filepath_empty {color: $g12-forge;}
.write-data-form--filepath_selected {color: $c-rainforest;}
.write-data-form--file-submit {
margin-top: 30px;