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

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

@ -1,9 +1,10 @@
import React, { import React, {
PureComponent, PureComponent,
// DragEvent, DragEvent,
ChangeEvent, ChangeEvent,
KeyboardEvent, KeyboardEvent,
} from 'react' } from 'react'
import classnames from 'classnames'
import OnClickOutside from 'src/shared/components/OnClickOutside' import OnClickOutside from 'src/shared/components/OnClickOutside'
import WriteDataBody from 'src/data_explorer/components/WriteDataBody' 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 {OVERLAY_TECHNOLOGY} from 'src/shared/constants/classNames'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
import {Source, DropdownItem} from 'src/types' import {Source, DropdownItem} from 'src/types'
// let dragCounter = 0 let dragCounter = 0
interface Props { interface Props {
source: Source source: Source
@ -53,9 +54,17 @@ class WriteDataForm extends PureComponent<Props, State> {
public render() { public render() {
const {onClose, errorThrown, source} = this.props const {onClose, errorThrown, source} = this.props
const {dragClass} = this.state
return ( 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"> <div className="write-data-form">
<WriteDataHeader <WriteDataHeader
{...this.state} {...this.state}
@ -96,23 +105,21 @@ class WriteDataForm extends PureComponent<Props, State> {
} }
} }
private handleSubmit = async (uploadContent: string) => { private handleSubmit = async () => {
console.log('submit!', uploadContent) 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 try {
// const {inputContent, uploadContent, selectedDatabase, isManual} = this.state await writeLineProtocol(source, selectedDatabase, content)
// const content = isManual ? inputContent : uploadContent this.setState({isUploading: false})
// this.setState({isUploading: true}) onClose()
window.location.reload()
// try { } catch (error) {
// await writeLineProtocol(source, selectedDatabase, content) this.setState({isUploading: false})
// this.setState({isUploading: false}) console.error(error.data.error)
// onClose() }
// window.location.reload()
// } catch (error) {
// this.setState({isUploading: false})
// console.error(error.data.error)
// }
} }
private handleEdit = (e: ChangeEvent<HTMLTextAreaElement>): void => { private handleEdit = (e: ChangeEvent<HTMLTextAreaElement>): void => {
@ -152,24 +159,24 @@ class WriteDataForm extends PureComponent<Props, State> {
this.fileInput.value = '' this.fileInput.value = ''
} }
// private handleDragOver = (e: DragEvent<HTMLDivElement>) => { private handleDragOver = (e: DragEvent<HTMLDivElement>) => {
// e.preventDefault() e.preventDefault()
// e.stopPropagation() e.stopPropagation()
// } }
// private handleDragEnter = (e: DragEvent<HTMLDivElement>): void => { private handleDragEnter = (e: DragEvent<HTMLDivElement>): void => {
// dragCounter += 1 dragCounter += 1
// e.preventDefault() e.preventDefault()
// this.setState({dragClass: 'drag-over'}) this.setState({dragClass: 'drag-over'})
// } }
// private handleDragLeave = (e: DragEvent<HTMLDivElement>): void => { private handleDragLeave = (e: DragEvent<HTMLDivElement>): void => {
// dragCounter -= 1 dragCounter -= 1
// e.preventDefault() e.preventDefault()
// if (dragCounter === 0) { if (dragCounter === 0) {
// this.setState({dragClass: 'drag-none'}) this.setState({dragClass: 'drag-none'})
// } }
// } }
private handleFileOpen = (): void => { private handleFileOpen = (): void => {
const {uploadContent} = this.state 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} database={selectedDatabase}
onErrorThrown={errorThrown} onErrorThrown={errorThrown}
/> />
<ul <ul className="nav nav-tablist nav-tablist-sm">
className="nav nav-tablist nav-tablist-sm"
style={{position: 'relative', zIndex: 9010}}
>
<li onClick={this.handleToggleOff} className={this.fileUploadClass}> <li onClick={this.handleToggleOff} className={this.fileUploadClass}>
File Upload File Upload
</li> </li>
@ -48,10 +45,7 @@ class WriteDataHeader extends PureComponent<Props> {
</li> </li>
</ul> </ul>
</div> </div>
<div <div className="page-header__right">
className="page-header__right"
style={{position: 'relative', zIndex: 9010}}
>
<span className="page-header__dismiss" onClick={onClose} /> <span className="page-header__dismiss" onClick={onClose} />
</div> </div>
</div> </div>

20
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--max-width: 960px;
$write-data--gutter: 30px; $write-data--gutter: 30px;
$write-data--margin: 18px; $write-data--margin: 18px;
$write-data--input-height: calc( $write-data--input-height: calc(90vh - 48px - 60px - 36px); // Heights of everything but input height
90vh - 48px - 60px - 36px
); // Heights of everything but input height
$write-data--transition: opacity 0.4s ease; $write-data--transition: opacity 0.4s ease;
.write-data-form { .write-data-form {
max-width: $write-data--max-width; max-width: $write-data--max-width;
margin: 0 auto; margin: 0 auto;
position: relative;
z-index: $write-data--form-z;
} }
.write-data-form--header { .write-data-form--header {
height: $chronograf-page-header-height; height: $chronograf-page-header-height;
@ -76,7 +76,9 @@ textarea.form-control.write-data-form--input {
border: 2px solid $g4-onyx; border: 2px solid $g4-onyx;
margin-bottom: 48px; margin-bottom: 48px;
border-radius: 3px; 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 { > p {
color: $g12-forge; 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; display: none;
} }
.write-data-form--filepath_selected, .write-data-form--filepath_selected,
@ -111,12 +113,8 @@ input[type='file'].write-data-form--upload {
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0 0 30px 0; margin: 0 0 30px 0;
} }
.write-data-form--filepath_empty { .write-data-form--filepath_empty {color: $g12-forge;}
color: $g12-forge; .write-data-form--filepath_selected {color: $c-rainforest;}
}
.write-data-form--filepath_selected {
color: $c-rainforest;
}
.write-data-form--file-submit { .write-data-form--file-submit {
margin-top: 30px; margin-top: 30px;