Add Line Protocol component, tab selection, and add drag and drop import tab.
Co-authored-by: Palak Bhojani <palak@influxdata.com> Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>pull/10616/head
Palak Bhojani
parent
0dc099d1d5
commit
0645a278cc
|
|
@ -1,28 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 90 90" style="enable-background:new 0 0 90 90;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:url(#SVGID_1_);}
|
||||
.st1{fill:url(#SVGID_2_);}
|
||||
.st2{fill:url(#SVGID_3_);}
|
||||
</style>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="14.6466" y1="84.3557" x2="67.7716" y2="14.3557" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0.2122" style="stop-color:#7CE490"/>
|
||||
<stop offset="1" style="stop-color:#4ED8A0"/>
|
||||
</linearGradient>
|
||||
<path class="st0" d="M75,20.9c0-0.1,0-0.2-0.1-0.3v-0.1c0-0.1-0.1-0.2-0.2-0.3l-20-20c-0.1-0.1-0.2-0.1-0.3-0.2h-0.1
|
||||
c-0.1,0-0.2,0-0.3,0c0,0,0,0-0.1,0H20c-2.8,0-5,2.2-5,5v68c0,2.8,2.2,5,5,5h50c2.8,0,5-2.2,5-5V20.9C75,21,75,21,75,20.9z"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="62.5496" y1="79.5308" x2="52.5496" y2="69.2808" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0" style="stop-color:#F2FFF4"/>
|
||||
<stop offset="1" style="stop-color:#A5F3B4"/>
|
||||
</linearGradient>
|
||||
<path class="st1" d="M71.6,20H58c-1.7,0-3-1.4-3-3V3.4L71.6,20z"/>
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="64.9631" y1="11.4346" x2="19.3381" y2="74.4346">
|
||||
<stop offset="0" style="stop-color:#F2FFF4"/>
|
||||
<stop offset="1" style="stop-color:#A5F3B4"/>
|
||||
</linearGradient>
|
||||
<path class="st2" d="M58,22c-2.8,0-5-2.3-5-5V2H20c-1.7,0-3,1.3-3,3v68c0,1.7,1.3,3,3,3h50c1.7,0,3-1.3,3-3V22H58z M60,40.7
|
||||
L43.6,57.1c-1.8,1.8-4.8,1.8-6.6,0L30,50.2c-0.8-0.8-0.8-2.1,0-2.9l2.7-2.7c0.8-0.8,2.1-0.8,2.9,0l3.1,3.1c0.8,0.8,2.1,0.8,2.9,0
|
||||
l12.6-12.6c0.8-0.8,2.1-0.8,2.9,0l2.7,2.7C60.8,38.6,60.8,39.9,60,40.7z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,55 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 90 90" style="enable-background:new 0 0 90 90;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#383846;}
|
||||
.st1{fill:url(#SVGID_1_);}
|
||||
.st2{fill:url(#SVGID_2_);}
|
||||
.st3{fill:url(#SVGID_3_);}
|
||||
.st4{fill:url(#SVGID_4_);}
|
||||
.st5{fill:url(#SVGID_5_);}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M58,86c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V18c0-2.2,1.8-4,4-4h50c2.2,0,4,1.8,4,4V86z"/>
|
||||
</g>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="14.6466" y1="84.3557" x2="67.7716" y2="14.3557" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0.2122" style="stop-color:#326BBA"/>
|
||||
<stop offset="1" style="stop-color:#20186B"/>
|
||||
</linearGradient>
|
||||
<path class="st1" d="M75,20.9c0-0.1,0-0.2-0.1-0.3v-0.1c0-0.1-0.1-0.2-0.2-0.3l-20-20c-0.1-0.1-0.2-0.1-0.3-0.2h-0.1
|
||||
c-0.1,0-0.2,0-0.3,0c0,0,0,0-0.1,0H20c-2.8,0-5,2.2-5,5v68c0,2.8,2.2,5,5,5h50c2.8,0,5-2.2,5-5V20.9C75,21,75,21,75,20.9z"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="62.5496" y1="79.5308" x2="52.5496" y2="69.2808" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0" style="stop-color:#BEF0FF"/>
|
||||
<stop offset="0.4378" style="stop-color:#6BDFFF"/>
|
||||
<stop offset="1" style="stop-color:#9394FF"/>
|
||||
</linearGradient>
|
||||
<path class="st2" d="M71.6,20H58c-1.7,0-3-1.4-3-3V3.4L71.6,20z"/>
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="15.8813" y1="19.0114" x2="88.3813" y2="103.6364" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0" style="stop-color:#BEF0FF"/>
|
||||
<stop offset="0.4378" style="stop-color:#6BDFFF"/>
|
||||
<stop offset="1" style="stop-color:#9394FF"/>
|
||||
</linearGradient>
|
||||
<path class="st3" d="M58,22c-2.8,0-5-2.3-5-5V2H20c-1.7,0-3,1.3-3,3v68c0,1.7,1.3,3,3,3h50c1.7,0,3-1.3,3-3V22H58z M65,43.8H25
|
||||
c-1.1,0-2-0.9-2-2s0.9-2,2-2h40c1.1,0,2,0.9,2,2C67,42.8,66.1,43.8,65,43.8z M65,37.8H25c-1.1,0-2-0.9-2-2s0.9-2,2-2h40
|
||||
c1.1,0,2,0.9,2,2C67,36.8,66.1,37.8,65,37.8z M65,31.8H25c-1.1,0-2-0.9-2-2s0.9-2,2-2h40c1.1,0,2,0.9,2,2C67,30.8,66.1,31.8,65,31.8
|
||||
z"/>
|
||||
<g>
|
||||
|
||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="68.0513" y1="34.2628" x2="77.9263" y2="10.5128" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0.2122" style="stop-color:#326BBA"/>
|
||||
<stop offset="1" style="stop-color:#20186B"/>
|
||||
</linearGradient>
|
||||
<path class="st4" d="M64,46c-0.3,0-0.5,0.1-0.8,0.2c-0.7,0.3-1.2,1-1.2,1.8v33.8c0,0.7,0.3,1.4,0.8,1.9s1.1,0.7,1.7,0.7
|
||||
c0.7,0,1.3-0.3,1.8-0.8l4.8-5l3.4,8.1c0.8,2,2.7,3.2,4.8,3.2c0.7,0,1.4-0.1,2-0.4c1.3-0.6,2.3-1.6,2.8-2.9s0.5-2.7,0-4l-3.4-8.1
|
||||
h6.8c1,0,2-0.6,2.3-1.6c0.4-1,0.2-2.1-0.6-2.8L65.4,46.6C65,46.2,64.5,46,64,46L64,46z"/>
|
||||
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="65.4447" y1="39.476" x2="81.9447" y2="1.476" gradientTransform="matrix(1 0 0 -1 0 92)">
|
||||
<stop offset="0" style="stop-color:#BEF0FF"/>
|
||||
<stop offset="0.4378" style="stop-color:#6BDFFF"/>
|
||||
<stop offset="1" style="stop-color:#9394FF"/>
|
||||
</linearGradient>
|
||||
<path class="st5" d="M82.2,83.5L78,73.3c-0.2-0.4,0.1-0.8,0.5-0.8h9c0.5,0,0.7-0.6,0.4-0.9L64,48v33.8c0,0.5,0.6,0.7,0.9,0.4
|
||||
l6.3-6.6c0.3-0.3,0.8-0.2,0.9,0.2L76.3,86c0.7,1.6,2.5,2.4,4.2,1.7l0,0C82.1,87,82.8,85.1,82.2,83.5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.4 KiB |
|
|
@ -0,0 +1,47 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 60 50" style="enable-background:new 0 0 60 50;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#68707B;}
|
||||
</style>
|
||||
<g id="icon_1_">
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M57.2,50c-0.4-0.1-0.7-0.4-0.7-0.8c0-0.5,0.4-0.8,0.8-0.8l0.8,0l0-0.8c0-0.5,0.4-0.8,0.8-0.8
|
||||
c0.5,0,0.8,0.4,0.8,0.8l0,1.7c0,0.4-0.3,0.8-0.8,0.8l-1.7,0C57.3,50.1,57.2,50.1,57.2,50z"/>
|
||||
<path class="st0" d="M18.4,50c-0.4-0.1-0.7-0.4-0.7-0.8c0-0.5,0.4-0.8,0.8-0.8l3.3,0c0.5,0,0.8,0.4,0.8,0.8
|
||||
c0,0.5-0.4,0.8-0.8,0.8l-3.3,0C18.5,50.1,18.4,50.1,18.4,50z M26.1,50c-0.4-0.1-0.7-0.4-0.7-0.8c0-0.5,0.4-0.8,0.8-0.8l3.3,0
|
||||
c0.5,0,0.8,0.4,0.8,0.8s-0.4,0.8-0.8,0.8l-3.3,0C26.2,50.1,26.1,50.1,26.1,50z M33.8,50c-0.4-0.1-0.7-0.4-0.7-0.8
|
||||
c0-0.5,0.4-0.8,0.8-0.8l3.3,0c0.5,0,0.8,0.4,0.8,0.8c0,0.5-0.4,0.8-0.8,0.8l-3.3,0C33.9,50.1,33.8,50.1,33.8,50z M41.5,50
|
||||
c-0.4-0.1-0.7-0.4-0.7-0.8c0-0.5,0.4-0.8,0.8-0.8l3.3,0c0.5,0,0.8,0.4,0.8,0.8c0,0.5-0.4,0.8-0.8,0.8l-3.3,0
|
||||
C41.6,50.1,41.6,50.1,41.5,50z M49.2,50c-0.4-0.1-0.7-0.4-0.7-0.8c0-0.5,0.4-0.8,0.8-0.8l3.3,0c0.5,0,0.8,0.4,0.8,0.8
|
||||
c0,0.5-0.4,0.8-0.8,0.8l-3.3,0C49.3,50.1,49.3,50.1,49.2,50z"/>
|
||||
<path class="st0" d="M12.7,50C12.3,50,12,49.6,12,49.2l0-1.6c0-0.5,0.4-0.8,0.8-0.8c0.5,0,0.8,0.4,0.8,0.8l0,0.8l0.8,0
|
||||
c0.5,0,0.8,0.4,0.8,0.8c0,0.5-0.4,0.8-0.8,0.8l-1.6,0C12.8,50.1,12.7,50.1,12.7,50z"/>
|
||||
<path class="st0" d="M33.8,11.3c-0.4-0.1-0.7-0.4-0.7-0.8c0-0.5,0.4-0.8,0.8-0.8l3.3,0c0.5,0,0.8,0.4,0.8,0.8
|
||||
c0,0.5-0.4,0.8-0.8,0.8l-3.3,0C33.9,11.3,33.8,11.3,33.8,11.3z M41.5,11.3c-0.4-0.1-0.7-0.4-0.7-0.8c0-0.5,0.4-0.8,0.8-0.8l3.3,0
|
||||
c0.5,0,0.8,0.4,0.8,0.8c0,0.5-0.4,0.8-0.8,0.8l-3.3,0C41.6,11.3,41.6,11.3,41.5,11.3z M49.2,11.3c-0.4-0.1-0.7-0.4-0.7-0.8
|
||||
c0-0.5,0.4-0.8,0.8-0.8l3.3,0c0.5,0,0.8,0.4,0.8,0.8c0,0.5-0.4,0.8-0.8,0.8l-3.3,0C49.3,11.3,49.3,11.3,49.2,11.3z"/>
|
||||
<path class="st0" d="M58.8,13c-0.4-0.1-0.7-0.4-0.7-0.8l0-0.8l-0.8,0c-0.5,0-0.8-0.4-0.8-0.8c0-0.5,0.4-0.8,0.8-0.8l1.7,0
|
||||
c0.4,0,0.8,0.3,0.8,0.8l0,1.7c0,0.5-0.4,0.8-0.8,0.8C58.9,13,58.9,13,58.8,13z"/>
|
||||
<path class="st0" d="M58.8,44.3c-0.4-0.1-0.7-0.4-0.7-0.8l0-3.3c0-0.5,0.4-0.8,0.8-0.8c0.5,0,0.8,0.4,0.8,0.8l0,3.3
|
||||
c0,0.5-0.4,0.8-0.8,0.8C58.9,44.3,58.9,44.3,58.8,44.3z M58.8,36.4c-0.4-0.1-0.7-0.4-0.7-0.8l0-3.3c0-0.5,0.4-0.8,0.8-0.8
|
||||
c0.5,0,0.8,0.4,0.8,0.8l0,3.3c0,0.5-0.4,0.8-0.8,0.8C58.9,36.4,58.9,36.4,58.8,36.4z M58.8,28.6c-0.4-0.1-0.7-0.4-0.7-0.8l0-3.3
|
||||
c0-0.5,0.4-0.8,0.8-0.8c0.5,0,0.8,0.4,0.8,0.8l0,3.3c0,0.5-0.4,0.8-0.8,0.8C58.9,28.6,58.9,28.6,58.8,28.6z M58.8,20.7
|
||||
c-0.4-0.1-0.7-0.4-0.7-0.8l0-3.3c0-0.5,0.4-0.8,0.8-0.8c0.5,0,0.8,0.4,0.8,0.8l0,3.3c0,0.5-0.4,0.8-0.8,0.8
|
||||
C58.9,20.8,58.9,20.8,58.8,20.7z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M11.6,45.8c-0.8-0.1-1.5-0.7-1.8-1.5l-9.5-26c-0.2-0.6-0.2-1.2,0.1-1.8l3.7-8c0.3-0.6,0.7-1,1.3-1.2
|
||||
l19.7-7.2c1.2-0.4,2.5,0.2,3,1.4l11.6,31.8c0.4,1.2-0.2,2.5-1.4,3l-25.5,9.3C12.4,45.8,12,45.9,11.6,45.8z M26.1,1.6
|
||||
c-0.1,0-0.3,0-0.4,0L6,8.8C5.8,8.9,5.6,9,5.6,9.2l-3.7,8c-0.1,0.2-0.1,0.4,0,0.6l9.5,26c0.1,0.4,0.6,0.6,1,0.5L37.8,35
|
||||
c0.4-0.1,0.6-0.6,0.5-1L26.7,2.1C26.6,1.8,26.3,1.7,26.1,1.6z"/>
|
||||
</g>
|
||||
<path class="st0" d="M3.4,19.2l-0.5-1.5l5.2-1.9c0.2-0.1,0.3-0.2,0.4-0.4c0.1-0.2,0.1-0.4,0-0.6L6.7,9.6l1.5-0.5l1.9,5.2
|
||||
c0.2,0.6,0.2,1.2-0.1,1.8c-0.3,0.6-0.7,1-1.3,1.2L3.4,19.2z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -4,6 +4,7 @@ import _ from 'lodash'
|
|||
|
||||
// Components
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
import LineProtocol from 'src/onboarding/components/configureStep/lineProtocol/LineProtocol'
|
||||
|
||||
// Types
|
||||
import {TelegrafPlugin} from 'src/types/v2/dataLoaders'
|
||||
|
|
@ -21,6 +22,7 @@ class ConfigureDataSourceSwitcher extends PureComponent<Props> {
|
|||
return <div />
|
||||
case 'CSV':
|
||||
case 'Line Protocol':
|
||||
return <LineProtocol />
|
||||
default:
|
||||
return <div>{this.configurationStep}</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
// Libraries
|
||||
import React from 'react'
|
||||
import {shallow} from 'enzyme'
|
||||
|
||||
// Components
|
||||
import LineProtocol from './LineProtocol'
|
||||
|
||||
import {LineProtocolStatus} from 'src/types/v2/dataLoaders'
|
||||
|
||||
const setup = (override?) => {
|
||||
const props = {
|
||||
...override,
|
||||
}
|
||||
|
||||
const wrapper = shallow(<LineProtocol {...props} />)
|
||||
|
||||
return {wrapper}
|
||||
}
|
||||
|
||||
describe('LineProtocol', () => {
|
||||
describe('rendering', () => {
|
||||
it('renders!', () => {
|
||||
const {wrapper} = setup()
|
||||
expect(wrapper.exists()).toBe(true)
|
||||
|
||||
expect(wrapper).toMatchSnapshot()
|
||||
}),
|
||||
it('defaults to selecting importdata tab if no props provided.', () => {
|
||||
const {wrapper} = setup()
|
||||
expect(wrapper.state('activeCard')).toBe(LineProtocolStatus.ImportData)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
// Libraries
|
||||
import React, {PureComponent} from 'react'
|
||||
import _ from 'lodash'
|
||||
|
||||
// Components
|
||||
import LineProtocolTabs from 'src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs'
|
||||
import LoadingState from 'src/onboarding/components/configureStep/lineProtocol/LoadingState'
|
||||
|
||||
// Decorator
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
||||
// Types
|
||||
import {LineProtocolTab, LineProtocolStatus} from 'src/types/v2/dataLoaders'
|
||||
|
||||
interface Props {
|
||||
activeCard?: LineProtocolStatus
|
||||
}
|
||||
|
||||
interface State {
|
||||
activeCard: LineProtocolStatus
|
||||
}
|
||||
|
||||
@ErrorHandling
|
||||
class LineProtocol extends PureComponent<Props, State> {
|
||||
public static defaultProps: Partial<Props> = {
|
||||
activeCard: LineProtocolStatus.ImportData,
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {activeCard: this.props.activeCard}
|
||||
}
|
||||
public render() {
|
||||
const {activeCard} = this.state
|
||||
return (
|
||||
<>
|
||||
<h3 className="wizard-step--title">Add Data via Line Protocol</h3>
|
||||
<h5 className="wizard-step--sub-title">
|
||||
Need help writing InfluxDB Line Protocol? See Documentation
|
||||
</h5>
|
||||
{activeCard === LineProtocolStatus.ImportData ? (
|
||||
<LineProtocolTabs tabs={this.LineProtocolTabs} />
|
||||
) : (
|
||||
<LoadingState activeCard={activeCard} />
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
private get LineProtocolTabs(): LineProtocolTab[] {
|
||||
return [
|
||||
LineProtocolTab.UploadFile,
|
||||
LineProtocolTab.EnterManually,
|
||||
LineProtocolTab.EnterURL,
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export default LineProtocol
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// Libraries
|
||||
import React from 'react'
|
||||
import {shallow} from 'enzyme'
|
||||
|
||||
// Components
|
||||
import LineProtocolTabs from './LineProtocolTabs'
|
||||
|
||||
import {LineProtocolTab} from 'src/types/v2/dataLoaders'
|
||||
|
||||
const setup = (override?) => {
|
||||
const props = {
|
||||
tabs: [
|
||||
LineProtocolTab.UploadFile,
|
||||
LineProtocolTab.EnterManually,
|
||||
LineProtocolTab.EnterURL,
|
||||
],
|
||||
...override,
|
||||
}
|
||||
|
||||
const wrapper = shallow(<LineProtocolTabs {...props} />)
|
||||
|
||||
return {wrapper}
|
||||
}
|
||||
|
||||
describe('LineProtocolTabs', () => {
|
||||
describe('rendering', () => {
|
||||
it('renders!', () => {
|
||||
const {wrapper} = setup()
|
||||
expect(wrapper.exists()).toBe(true)
|
||||
|
||||
expect(wrapper).toMatchSnapshot()
|
||||
}),
|
||||
it('selects first tab as activeTab on load', () => {
|
||||
const reorderedTabs = [
|
||||
LineProtocolTab.EnterManually,
|
||||
LineProtocolTab.UploadFile,
|
||||
LineProtocolTab.EnterURL,
|
||||
]
|
||||
const {wrapper} = setup({tabs: reorderedTabs})
|
||||
expect(wrapper.state('activeTab')).toBe(reorderedTabs[0])
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
// Libraries
|
||||
import React, {PureComponent} from 'react'
|
||||
|
||||
// Components
|
||||
import {Radio, ButtonShape} from 'src/clockface'
|
||||
import DragAndDrop from 'src/shared/components/DragAndDrop'
|
||||
|
||||
// Types
|
||||
import {LineProtocolTab} from 'src/types/v2/dataLoaders'
|
||||
|
||||
interface State {
|
||||
activeTab: LineProtocolTab
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tabs: LineProtocolTab[]
|
||||
}
|
||||
|
||||
class LineProtocolTabs extends PureComponent<Props, State> {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {activeTab: this.props.tabs[0]}
|
||||
}
|
||||
public render() {
|
||||
return (
|
||||
<>
|
||||
{this.tabSelector}
|
||||
{this.tabBody}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
private handleTabClick = (tab: LineProtocolTab) => () => {
|
||||
this.setState({activeTab: tab})
|
||||
}
|
||||
|
||||
private get tabSelector(): JSX.Element {
|
||||
const {tabs} = this.props
|
||||
const {activeTab} = this.state
|
||||
return (
|
||||
<Radio shape={ButtonShape.Default}>
|
||||
{tabs.map(t => (
|
||||
<Radio.Button
|
||||
key={t}
|
||||
id={t}
|
||||
titleText={t}
|
||||
value={t}
|
||||
active={activeTab === t}
|
||||
onClick={this.handleTabClick(t)}
|
||||
>
|
||||
{t}
|
||||
</Radio.Button>
|
||||
))}
|
||||
</Radio>
|
||||
)
|
||||
}
|
||||
|
||||
private get tabBody(): JSX.Element {
|
||||
const {activeTab} = this.state
|
||||
if (activeTab === LineProtocolTab.UploadFile) {
|
||||
return <DragAndDrop submitText="Upload File" />
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default LineProtocolTabs
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
// Libraries
|
||||
import React, {SFC} from 'react'
|
||||
|
||||
// Types
|
||||
import {LineProtocolStatus} from 'src/types/v2/dataLoaders'
|
||||
|
||||
interface Props {
|
||||
activeCard: LineProtocolStatus
|
||||
}
|
||||
|
||||
const LoadingState: SFC<Props> = ({activeCard}) => {
|
||||
return <>{activeCard}</>
|
||||
}
|
||||
|
||||
export default LoadingState
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`LineProtocol rendering renders! 1`] = `
|
||||
<Fragment>
|
||||
<h3
|
||||
className="wizard-step--title"
|
||||
>
|
||||
Add Data via Line Protocol
|
||||
</h3>
|
||||
<h5
|
||||
className="wizard-step--sub-title"
|
||||
>
|
||||
Need help writing InfluxDB Line Protocol? See Documentation
|
||||
</h5>
|
||||
<LineProtocolTabs
|
||||
tabs={
|
||||
Array [
|
||||
"uploadFile",
|
||||
"enterManually",
|
||||
"enterURL",
|
||||
]
|
||||
}
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`LineProtocolTabs rendering renders! 1`] = `
|
||||
<Fragment>
|
||||
<Radio
|
||||
color="primary"
|
||||
shape="none"
|
||||
size="sm"
|
||||
>
|
||||
<RadioButton
|
||||
active={true}
|
||||
disabled={false}
|
||||
disabledTitleText="This option is disabled"
|
||||
id="uploadFile"
|
||||
key="uploadFile"
|
||||
onClick={[Function]}
|
||||
titleText="uploadFile"
|
||||
value="uploadFile"
|
||||
>
|
||||
uploadFile
|
||||
</RadioButton>
|
||||
<RadioButton
|
||||
active={false}
|
||||
disabled={false}
|
||||
disabledTitleText="This option is disabled"
|
||||
id="enterManually"
|
||||
key="enterManually"
|
||||
onClick={[Function]}
|
||||
titleText="enterManually"
|
||||
value="enterManually"
|
||||
>
|
||||
enterManually
|
||||
</RadioButton>
|
||||
<RadioButton
|
||||
active={false}
|
||||
disabled={false}
|
||||
disabledTitleText="This option is disabled"
|
||||
id="enterURL"
|
||||
key="enterURL"
|
||||
onClick={[Function]}
|
||||
titleText="enterURL"
|
||||
value="enterURL"
|
||||
>
|
||||
enterURL
|
||||
</RadioButton>
|
||||
</Radio>
|
||||
<DragAndDrop
|
||||
compact={false}
|
||||
submitOnDrop={false}
|
||||
submitOnUpload={false}
|
||||
submitText="Upload File"
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
|
||||
@import 'src/style/modules';
|
||||
|
||||
/*
|
||||
Drag and Drop Styles
|
||||
------------------------------------------------------------------------------
|
||||
*/
|
||||
.drag-and-drop {
|
||||
border: 2px dashed $g6-smoke;
|
||||
border-radius: 3px;
|
||||
margin-top: 30px;
|
||||
width: calc(100% + 250px);
|
||||
height: 400px;
|
||||
transition: background-color 0.25s ease, border-color 0.25s ease;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.drag-and-drop--form {
|
||||
position: relative;
|
||||
z-index: $z--drag-n-drop;
|
||||
background-color: $g2-kevlar;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 30px 18px;
|
||||
color: $g6-smoke;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
input[type='file'].drag-and-drop--input {
|
||||
display: none;
|
||||
}
|
||||
.drag-and-drop--graphic {
|
||||
background-image: url('../../../assets/images/drag-n-drop.svg');
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
color: $g6-smoke;
|
||||
&.success {
|
||||
background-image: url('../../../assets/images/drag-n-drop.svg');
|
||||
}
|
||||
}
|
||||
.drag-and-drop--header {
|
||||
@include no-user-select();
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 0 30px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
&.empty {
|
||||
color: $g6-smoke;
|
||||
}
|
||||
&.selected {
|
||||
color: $c-rainforest;
|
||||
}
|
||||
}
|
||||
.drag-and-drop--buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 18px;
|
||||
> button.btn {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Styles for hover state and drag-over state look the same
|
||||
------------------------------------------------------------------------------
|
||||
*/
|
||||
.drag-and-drop--form.active:hover,
|
||||
.drag-and-drop.drag-over .drag-and-drop--form {
|
||||
cursor: pointer;
|
||||
background-color: $g4-onyx;
|
||||
border-color: $g6-smoke;
|
||||
}
|
||||
/*
|
||||
Compact display mode
|
||||
------------------------------------------------------------------------------
|
||||
*/
|
||||
.drag-and-drop.compact .drag-and-drop--form {
|
||||
flex-direction: row;
|
||||
.drag-and-drop--graphic,
|
||||
.drag-and-drop--buttons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.drag-and-drop--graphic {
|
||||
left: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.drag-and-drop--header {
|
||||
font-size: 15px;
|
||||
margin-bottom: 0;
|
||||
margin-right: 80px;
|
||||
margin-left: 80px;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.drag-and-drop--buttons {
|
||||
margin-top: 0;
|
||||
right: 20px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
> button.btn {
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
import React, {PureComponent} from 'react'
|
||||
import classnames from 'classnames'
|
||||
|
||||
import './DragAndDrop.scss'
|
||||
|
||||
interface Props {
|
||||
fileTypesToAccept?: string
|
||||
containerClass?: string
|
||||
|
|
|
|||
|
|
@ -17,3 +17,16 @@ export interface TelegrafPlugin extends TelegrafRequestPlugins {
|
|||
configured: ConfigurationState
|
||||
active: boolean
|
||||
}
|
||||
|
||||
export enum LineProtocolTab {
|
||||
UploadFile = 'uploadFile',
|
||||
EnterManually = 'enterManually',
|
||||
EnterURL = 'enterURL',
|
||||
}
|
||||
|
||||
export enum LineProtocolStatus {
|
||||
ImportData = 'importData',
|
||||
Loading = 'enterManually',
|
||||
Success = 'success',
|
||||
Error = 'error',
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue