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

Add begining styles for dashboard imports

pull/3559/head
Iris Scholten 2018-05-30 16:39:27 -07:00
parent 9bd84275eb
commit d126a85451
1 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ui/src/dashboards/components/ImportDashboardOverlay.tsx
View File

@ -1,4 +1,4 @@
import React, {PureComponent, ChangeEvent} from 'react'
import React, {PureComponent, ChangeEvent, FormEvent} from 'react'
import {getDeep} from 'src/utils/wrappers'
import Container from 'src/shared/components/overlay/OverlayContainer'
@ -33,13 +33,20 @@ class ImportDashboardOverlay extends PureComponent<Props, State> {
<Container maxWidth={800}>
<Heading title="Import Dashboard" onDismiss={onDismissOverlay} />
<Body>
<input type="file" onChange={this.handleChooseFile} accept=".json" />
<button
className="btn btn-sm btn-default"
onClick={this.handleImportDashboard}
>
Import
</button>
<form onSubmit={this.handleImportDashboard}>
<div className="form-group col-sm-6">
<label htmlFor="dashboardUploader">Choose File to Import</label>
<input
id="dashboardUploader"
type="file"
onChange={this.handleChooseFile}
accept=".json"
/>
</div>
<div className="form-group form-group-submit col-xs-12 text-center">
<button className="btn btn btn-success">Import</button>
</div>
</form>
</Body>
</Container>
)
@ -56,7 +63,9 @@ class ImportDashboardOverlay extends PureComponent<Props, State> {
fileReader.readAsText(file)
}
private handleImportDashboard = (): void => {
private handleImportDashboard = (e: FormEvent<HTMLFormElement>): void => {
e.preventDefault()
const {onImportDashboard, onDismissOverlay} = this.props
const {dashboardFromFile} = this.state
if (dashboardFromFile) {