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

Onboarding polish (#2395) 

* remove skip button from header

* Add fancy scroll bars and other styles

* copy button appears on hover, add fancy scrollbars

* add space between tab words

* Update Snapshots
pull/10616/head
Daniel Campbell 2019-01-09 18:36:24 -08:00 committed by GitHub
parent 400bb706d3
commit daa56c5800
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 619 additions and 459 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/clockface/components/wizard/WizardProgressHeader.scss
View File

@ -17,11 +17,6 @@
transition: height .4s ease-in-out;
}
.wizard--progress-skip {
position: absolute;
right: $ix-marg-c;
}
.wizard--progress-header.hidden {
visibility: hidden;
}

30
ui/src/clockface/components/wizard/WizardProgressHeader.tsx
View File

@ -1,39 +1,13 @@
// Libraries
import React, {SFC} from 'react'
// Components
import {Button, ComponentColor, ComponentSize} from 'src/clockface'
interface Props {
children: any
currentStepIndex: number
stepSkippable: boolean[]
skipText?: string
onSkip?: () => void
}
const WizardProgressHeader: SFC<Props> = (props: Props) => {
const {children, skipText, onSkip, stepSkippable, currentStepIndex} = props
return (
<div className="wizard--progress-header">
{children}
{stepSkippable[currentStepIndex] && (
<span className="wizard--progress-skip">
<Button
color={ComponentColor.Default}
text={skipText}
size={ComponentSize.Small}
onClick={onSkip}
/>
</span>
)}
</div>
)
}
WizardProgressHeader.defaultProps = {
skipText: 'Skip',
onSkip: () => {},
const {children} = props
return <div className="wizard--progress-header">{children}</div>
}
export default WizardProgressHeader

117
ui/src/me/components/account/__snapshots__/ViewTokenOverlay.test.tsx.snap
View File

@ -64,10 +64,119 @@ exports[`Account rendering renders! 1`] = `
<CopyText
copyText="ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA=="
>
<p
className="script-snippet"
<div
className="script-snippet--container"
>
ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==
<FancyScrollbar
autoHeight={true}
autoHide={false}
maxHeight={400}
setScrollTop={[Function]}
style={Object {}}
>
<Scrollbars
autoHeight={true}
autoHeightMax={400}
autoHeightMin={0}
autoHide={false}
autoHideDuration={250}
autoHideTimeout={1000}
className="fancy-scroll--container"
hideTracksWhenNotNeeded={false}
onScroll={[Function]}
renderThumbHorizontal={[Function]}
renderThumbVertical={[Function]}
renderTrackHorizontal={[Function]}
renderTrackVertical={[Function]}
renderView={[Function]}
style={Object {}}
tagName="div"
thumbMinSize={30}
universal={false}
>
<div
className="fancy-scroll--container"
style={
Object {
"height": "auto",
"maxHeight": 400,
"minHeight": 0,
"overflow": "hidden",
"position": "relative",
"width": "100%",
}
}
>
<div
className="fancy-scroll--view"
key="view"
style={
Object {
"WebkitOverflowScrolling": "touch",
"bottom": undefined,
"left": undefined,
"marginBottom": 0,
"marginRight": 0,
"maxHeight": 400,
"minHeight": 0,
"overflow": "scroll",
"position": "relative",
"right": undefined,
"top": undefined,
}
}
>
<p>
ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA==
</p>
</div>
<div
className="fancy-scroll--track-h"
key="trackHorizontal"
style={
Object {
"display": "none",
"height": 6,
"position": "absolute",
}
}
>
<div
className="fancy-scroll--thumb-h"
style={
Object {
"display": "block",
"height": "100%",
"position": "relative",
}
}
/>
</div>
<div
className="fancy-scroll--track-v"
key="trackVertical"
style={
Object {
"display": "none",
"position": "absolute",
"width": 6,
}
}
>
<div
className="fancy-scroll--thumb-v"
style={
Object {
"display": "block",
"position": "relative",
"width": "100%",
}
}
/>
</div>
</div>
</Scrollbars>
</FancyScrollbar>
<CopyToClipboard
onCopy={[Function]}
text="ohEmfY80A9UsW_cicNXgOMIPIsUvU6K9YcpTfCPQE3NV8Y6nTsCwVghczATBPyQh96CoZkOW5DIKldya6Y84KA=="
@ -96,7 +205,7 @@ exports[`Account rendering renders! 1`] = `
</button>
</Button>
</CopyToClipboard>
</p>
</div>
</CopyText>
<PermissionsWidget
heightPixels={500}

59
ui/src/onboarding/OnboardingWizard.scss
View File

@ -48,7 +48,6 @@
.wizard-step--container {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
@ -56,10 +55,9 @@
text-align: center;
background-color: $g3-castle;
border-radius: $radius;
padding: $ix-marg-c $ix-marg-c ($ix-marg-d * 2 + 38px) $ix-marg-c;
padding: $ix-marg-c;
padding-bottom: 0;
flex: 1 0 100%;
transition: flex 0.4s ease;
transform: translate3d(0, 0, 0);
}
.side-bar.show + .wizard-step--container {
@ -69,8 +67,8 @@
.wizard--button-container {
position: absolute;
bottom: $ix-marg-d;
left: $ix-marg-c;
right: $ix-marg-c;
left: 0;
right: 0;
display: inline-flex;
justify-content: center;
flex-wrap: wrap;
@ -107,7 +105,6 @@
font-size: 32px;
font-weight: 300;
color: $g15-platinum;
margin-top: $ix-marg-d;
margin-bottom: $ix-marg-b;
@include no-user-select();
}
@ -123,7 +120,7 @@
.wizard-step--body,
.wizard-step--body-streaming {
background-color: $g5-pepper;
background-color: $g2-kevlar;
color: $g20-white;
padding: 25px;
width: 100%;
@ -142,7 +139,7 @@
.wizard-step--body-streaming {
text-align: center;
margin-top: 30px;
margin-top: $ix-marg-a;
}
.wizard-step--text-state {
@ -164,7 +161,6 @@
border-radius: $radius;
margin: $ix-marg-a 0;
padding: $ix-marg-b;
overflow-x: auto;
font-family: 'RobotoMono', monospace;
}
@ -182,8 +178,6 @@
.wizard-step--top-container {
width: 100%;
padding: 40px;
max-width: 750px;
margin: 10px auto 0 auto;
border-radius: $radius;
background-color: $g2-kevlar;
transition: background-color 0.25s ease, border-color 0.25s ease;
@ -223,20 +217,41 @@
}
.onboarding-step {
width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
text-align: center;
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow-y: scroll;
overflow-x: hidden;
transition: max-width .4s ease-in-out;
}
.wizard-step--scroll-area {
display: block;
position: absolute;
left: 0;
right: 0;
height: calc(100% - 102px);
border: $ix-border solid $g5-pepper;
border-radius: $ix-radius;
}
.wizard--skippable {
margin-bottom: $ix-marg-a + 38px;
.wizard-step--scroll-area {
height: calc(100% - 147px);
}
}
.wizard-step--scroll-content {
width: 100%;
max-width: 90%;
min-height: 100%;
margin: o auto $ix-marg-d auto;
display: inline-flex;
flex-direction: column;
justify-content: center;
}
.wizard-step--grid-container {
@ -252,11 +267,14 @@
@media screen and (min-width: $grid--breakpoint-md) {
.wizard-step--container {
padding: $ix-marg-d $ix-marg-d ($ix-marg-d * 2 + 38px) $ix-marg-d;
padding: $ix-marg-d;
padding-bottom: 0;
}
.wizard--skippable {
margin-bottom: 0;
.wizard-step--scroll-area {
height: calc(100% - 102px);
}
.wizard--button-container::before {
content: "";
@ -266,9 +284,6 @@
}
.wizard--button-container {
left: $ix-marg-d;
right: $ix-marg-d;
.wizard--skip-container {
width: auto;
flex: 1;

202
ui/src/onboarding/components/AdminStep.tsx
View File

@ -15,6 +15,7 @@ import {
ComponentStatus,
} from 'src/clockface'
import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
// APIS
import {setSetupParams, SetupParams, signin} from 'src/onboarding/apis'
@ -54,105 +55,108 @@ class AdminStep extends PureComponent<OnboardingStepProps, State> {
const status = this.InputStatus
return (
<div className="onboarding-step">
<h3 className="wizard-step--title">Setup Admin User</h3>
<h5 className="wizard-step--sub-title">
You will be able to create additional Users, Buckets and Organizations
later
</h5>
<Form
className="onboarding--admin-user-form"
onSubmit={this.handleNext}
>
<Grid>
<Grid.Row>
<Grid.Column
widthXS={Columns.Twelve}
widthMD={Columns.Ten}
offsetMD={Columns.One}
>
<Form.Element label="Admin Username">
<Input
value={username}
onChange={this.handleUsername}
titleText="Admin Username"
size={ComponentSize.Medium}
icon={icon}
status={status}
disabledTitleText="Admin username has been set"
autoFocus={true}
/>
</Form.Element>
</Grid.Column>
<Grid.Column
widthXS={Columns.Six}
widthMD={Columns.Five}
offsetMD={Columns.One}
>
<Form.Element label="Admin Password">
<Input
type={InputType.Password}
value={password}
onChange={this.handlePassword}
titleText="Admin Password"
size={ComponentSize.Medium}
icon={icon}
status={status}
disabledTitleText="Admin password has been set"
/>
</Form.Element>
</Grid.Column>
<Grid.Column widthXS={Columns.Six} widthMD={Columns.Five}>
<Form.Element label="Confirm Admin Password">
<Input
type={InputType.Password}
value={confirmPassword}
onChange={this.handleConfirmPassword}
titleText="Confirm Admin Password"
size={ComponentSize.Medium}
icon={icon}
status={this.passwordStatus}
disabledTitleText="Admin password has been set"
/>
</Form.Element>
</Grid.Column>
<Grid.Column
widthXS={Columns.Twelve}
widthMD={Columns.Ten}
offsetMD={Columns.One}
>
<Form.Element label="Default Organization Name">
<Input
value={org}
onChange={this.handleOrg}
titleText="Default Organization Name"
size={ComponentSize.Medium}
icon={icon}
status={ComponentStatus.Default}
placeholder="Your organization is where everything you create lives"
disabledTitleText="Default organization name has been set"
/>
</Form.Element>
</Grid.Column>
<Grid.Column
widthXS={Columns.Twelve}
widthMD={Columns.Ten}
offsetMD={Columns.One}
>
<Form.Element label="Default Bucket Name">
<Input
value={bucket}
onChange={this.handleBucket}
titleText="Default Bucket Name"
size={ComponentSize.Medium}
icon={icon}
status={status}
placeholder="Your bucket is where you will store all your data"
disabledTitleText="Default bucket name has been set"
/>
</Form.Element>
</Grid.Column>
</Grid.Row>
</Grid>
<Form onSubmit={this.handleNext}>
<div className="wizard-step--scroll-area">
<FancyScrollbar autoHide={false}>
<div className="wizard-step--scroll-content">
<h3 className="wizard-step--title">Setup Admin User</h3>
<h5 className="wizard-step--sub-title">
You will be able to create additional Users, Buckets and
Organizations later
</h5>
<Grid>
<Grid.Row>
<Grid.Column
widthXS={Columns.Twelve}
widthMD={Columns.Ten}
offsetMD={Columns.One}
>
<Form.Element label="Admin Username">
<Input
value={username}
onChange={this.handleUsername}
titleText="Admin Username"
size={ComponentSize.Medium}
icon={icon}
status={status}
disabledTitleText="Admin username has been set"
autoFocus={true}
/>
</Form.Element>
</Grid.Column>
<Grid.Column
widthXS={Columns.Six}
widthMD={Columns.Five}
offsetMD={Columns.One}
>
<Form.Element label="Admin Password">
<Input
type={InputType.Password}
value={password}
onChange={this.handlePassword}
titleText="Admin Password"
size={ComponentSize.Medium}
icon={icon}
status={status}
disabledTitleText="Admin password has been set"
/>
</Form.Element>
</Grid.Column>
<Grid.Column widthXS={Columns.Six} widthMD={Columns.Five}>
<Form.Element label="Confirm Admin Password">
<Input
type={InputType.Password}
value={confirmPassword}
onChange={this.handleConfirmPassword}
titleText="Confirm Admin Password"
size={ComponentSize.Medium}
icon={icon}
status={this.passwordStatus}
disabledTitleText="Admin password has been set"
/>
</Form.Element>
</Grid.Column>
<Grid.Column
widthXS={Columns.Twelve}
widthMD={Columns.Ten}
offsetMD={Columns.One}
>
<Form.Element label="Default Organization Name">
<Input
value={org}
onChange={this.handleOrg}
titleText="Default Organization Name"
size={ComponentSize.Medium}
icon={icon}
status={ComponentStatus.Default}
placeholder="Your organization is where everything you create lives"
disabledTitleText="Default organization name has been set"
/>
</Form.Element>
</Grid.Column>
<Grid.Column
widthXS={Columns.Twelve}
widthMD={Columns.Ten}
offsetMD={Columns.One}
>
<Form.Element label="Default Bucket Name">
<Input
value={bucket}
onChange={this.handleBucket}
titleText="Default Bucket Name"
size={ComponentSize.Medium}
icon={icon}
status={status}
placeholder="Your bucket is where you will store all your data"
disabledTitleText="Default bucket name has been set"
/>
</Form.Element>
</Grid.Column>
</Grid.Row>
</Grid>
</div>
</FancyScrollbar>
</div>
<OnboardingButtons
onClickBack={this.props.onDecrementCurrentStepIndex}
nextButtonText={this.nextButtonText}

281
ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap
View File

@ -4,145 +4,160 @@ exports[`Onboarding.Components.AdminStep renders 1`] = `
<div
className="onboarding-step"
>
<h3
className="wizard-step--title"
>
Setup Admin User
</h3>
<h5
className="wizard-step--sub-title"
>
You will be able to create additional Users, Buckets and Organizations later
</h5>
<Form
className="onboarding--admin-user-form"
onSubmit={[Function]}
>
<Grid>
<GridRow>
<GridColumn
offsetMD={1}
widthMD={10}
widthXS={12}
<div
className="wizard-step--scroll-area"
>
<FancyScrollbar
autoHeight={false}
autoHide={false}
maxHeight={null}
setScrollTop={[Function]}
style={Object {}}
>
<div
className="wizard-step--scroll-content"
>
<FormElement
label="Admin Username"
<h3
className="wizard-step--title"
>
<Input
autoFocus={true}
autocomplete="off"
disabledTitleText="Admin username has been set"
icon="checkmark"
name=""
onChange={[Function]}
placeholder=""
size="md"
spellCheck={false}
status="disabled"
titleText="Admin Username"
value=""
/>
</FormElement>
</GridColumn>
<GridColumn
offsetMD={1}
widthMD={5}
widthXS={6}
>
<FormElement
label="Admin Password"
Setup Admin User
</h3>
<h5
className="wizard-step--sub-title"
>
<Input
autoFocus={false}
autocomplete="off"
disabledTitleText="Admin password has been set"
icon="checkmark"
name=""
onChange={[Function]}
placeholder=""
size="md"
spellCheck={false}
status="disabled"
titleText="Admin Password"
type="password"
value=""
/>
</FormElement>
</GridColumn>
<GridColumn
widthMD={5}
widthXS={6}
>
<FormElement
label="Confirm Admin Password"
>
<Input
autoFocus={false}
autocomplete="off"
disabledTitleText="Admin password has been set"
icon="checkmark"
name=""
onChange={[Function]}
placeholder=""
size="md"
spellCheck={false}
status="disabled"
titleText="Confirm Admin Password"
type="password"
value=""
/>
</FormElement>
</GridColumn>
<GridColumn
offsetMD={1}
widthMD={10}
widthXS={12}
>
<FormElement
label="Default Organization Name"
>
<Input
autoFocus={false}
autocomplete="off"
disabledTitleText="Default organization name has been set"
icon="checkmark"
name=""
onChange={[Function]}
placeholder="Your organization is where everything you create lives"
size="md"
spellCheck={false}
status="default"
titleText="Default Organization Name"
value=""
/>
</FormElement>
</GridColumn>
<GridColumn
offsetMD={1}
widthMD={10}
widthXS={12}
>
<FormElement
label="Default Bucket Name"
>
<Input
autoFocus={false}
autocomplete="off"
disabledTitleText="Default bucket name has been set"
icon="checkmark"
name=""
onChange={[Function]}
placeholder="Your bucket is where you will store all your data"
size="md"
spellCheck={false}
status="disabled"
titleText="Default Bucket Name"
value=""
/>
</FormElement>
</GridColumn>
</GridRow>
</Grid>
You will be able to create additional Users, Buckets and Organizations later
</h5>
<Grid>
<GridRow>
<GridColumn
offsetMD={1}
widthMD={10}
widthXS={12}
>
<FormElement
label="Admin Username"
>
<Input
autoFocus={true}
autocomplete="off"
disabledTitleText="Admin username has been set"
icon="checkmark"
name=""
onChange={[Function]}
placeholder=""
size="md"
spellCheck={false}
status="disabled"
titleText="Admin Username"
value=""
/>
</FormElement>
</GridColumn>
<GridColumn
offsetMD={1}
widthMD={5}
widthXS={6}
>
<FormElement
label="Admin Password"
>
<Input
autoFocus={false}
autocomplete="off"
disabledTitleText="Admin password has been set"
icon="checkmark"
name=""
onChange={[Function]}
placeholder=""
size="md"
spellCheck={false}
status="disabled"
titleText="Admin Password"
type="password"
value=""
/>
</FormElement>
</GridColumn>
<GridColumn
widthMD={5}
widthXS={6}
>
<FormElement
label="Confirm Admin Password"
>
<Input
autoFocus={false}
autocomplete="off"
disabledTitleText="Admin password has been set"
icon="checkmark"
name=""
onChange={[Function]}
placeholder=""
size="md"
spellCheck={false}
status="disabled"
titleText="Confirm Admin Password"
type="password"
value=""
/>
</FormElement>
</GridColumn>
<GridColumn
offsetMD={1}
widthMD={10}
widthXS={12}
>
<FormElement
label="Default Organization Name"
>
<Input
autoFocus={false}
autocomplete="off"
disabledTitleText="Default organization name has been set"
icon="checkmark"
name=""
onChange={[Function]}
placeholder="Your organization is where everything you create lives"
size="md"
spellCheck={false}
status="default"
titleText="Default Organization Name"
value=""
/>
</FormElement>
</GridColumn>
<GridColumn
offsetMD={1}
widthMD={10}
widthXS={12}
>
<FormElement
label="Default Bucket Name"
>
<Input
autoFocus={false}
autocomplete="off"
disabledTitleText="Default bucket name has been set"
icon="checkmark"
name=""
onChange={[Function]}
placeholder="Your bucket is where you will store all your data"
size="md"
spellCheck={false}
status="disabled"
titleText="Default Bucket Name"
value=""
/>
</FormElement>
</GridColumn>
</GridRow>
</Grid>
</div>
</FancyScrollbar>
</div>
<OnboardingButtons
autoFocusNext={false}
backButtonText="Back to Start"

29
ui/src/onboarding/components/configureStep/lineProtocol/LineProtocol.tsx
View File

@ -8,6 +8,7 @@ import _ from 'lodash'
import LineProtocolTabs from 'src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs'
import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
import {Form} from 'src/clockface'
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
// Actions
import {
@ -54,14 +55,20 @@ export class LineProtocol extends PureComponent<Props> {
public render() {
return (
<Form onSubmit={this.handleSubmit}>
<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>
{this.Content}
<div className="wizard-step--scroll-area">
<FancyScrollbar autoHide={false}>
<div className="wizard-step--scroll-content">
<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>
{this.Content}
</div>
</FancyScrollbar>
</div>
<OnboardingButtons
nextButtonText={this.nextButtonText}
backButtonText={this.backButtonText}
nextButtonText="Continue to Verify"
backButtonText="Back to Select Data Source Type"
onClickBack={this.props.onClickBack}
onClickSkip={this.props.onClickSkip}
showSkip={true}
@ -72,14 +79,6 @@ export class LineProtocol extends PureComponent<Props> {
)
}
private get nextButtonText(): string {
return 'Continue to Verify'
}
private get backButtonText(): string {
return 'Back to Select Data Source Type'
}
private get LineProtocolTabs(): LineProtocolTab[] {
return [
LineProtocolTab.UploadFile,

4
ui/src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs.tsx
View File

@ -74,7 +74,7 @@ export class LineProtocolTabs extends PureComponent<Props, State> {
const {urlInput} = this.state
return (
<>
<div>
<TabSelector
activeLPTab={activeLPTab}
tabs={tabs}
@ -104,7 +104,7 @@ export class LineProtocolTabs extends PureComponent<Props, State> {
</Grid.Column>
</Grid.Row>
</Grid>
</>
</div>
)
}

41
ui/src/onboarding/components/configureStep/lineProtocol/TabBody.tsx
View File

@ -1,6 +1,13 @@
import React, {PureComponent, ChangeEvent} from 'react'
import {Input, InputType, Form} from 'src/clockface'
import {
Input,
InputType,
Form,
Grid,
Columns,
ComponentSize,
} from 'src/clockface'
import DragAndDrop from 'src/shared/components/DragAndDrop'
import TextArea from 'src/clockface/components/inputs/TextArea'
import {LineProtocolTab} from 'src/types/v2/dataLoaders'
@ -45,17 +52,27 @@ export default class extends PureComponent<Props> {
)
case LineProtocolTab.EnterURL:
return (
<Form.Element label="File URL:">
<Input
titleText="File URL:"
type={InputType.Text}
placeholder="http://..."
widthPixels={700}
value={urlInput}
onChange={this.handleChange}
autoFocus={true}
/>
</Form.Element>
<Grid>
<Grid.Row>
<Grid.Column
widthXS={Columns.Twelve}
widthMD={Columns.Ten}
offsetMD={Columns.One}
>
<Form.Element label="File URL:">
<Input
titleText="File URL:"
type={InputType.Text}
placeholder="http://..."
value={urlInput}
onChange={this.handleChange}
autoFocus={true}
size={ComponentSize.Large}
/>
</Form.Element>
</Grid.Column>
</Grid.Row>
</Grid>
)
}
}

56
ui/src/onboarding/components/configureStep/lineProtocol/__snapshots__/LineProtocol.test.tsx.snap
View File

@ -4,27 +4,43 @@ exports[`LineProtocol rendering renders! 1`] = `
<Form
onSubmit={[Function]}
>
<h3
className="wizard-step--title"
<div
className="wizard-step--scroll-area"
>
Add Data via Line Protocol
</h3>
<h5
className="wizard-step--sub-title"
>
Need help writing InfluxDB Line Protocol? See Documentation
</h5>
<Connect(LineProtocolTabs)
bucket="a"
org="a"
tabs={
Array [
"uploadFile",
"enterManually",
"enterURL",
]
}
/>
<FancyScrollbar
autoHeight={false}
autoHide={false}
maxHeight={null}
setScrollTop={[Function]}
style={Object {}}
>
<div
className="wizard-step--scroll-content"
>
<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>
<Connect(LineProtocolTabs)
bucket="a"
org="a"
tabs={
Array [
"Upload File",
"Enter Manually",
"Enter URL",
]
}
/>
</div>
</FancyScrollbar>
</div>
<OnboardingButtons
autoFocusNext={true}
backButtonText="Back to Select Data Source Type"

10
ui/src/onboarding/components/configureStep/lineProtocol/__snapshots__/LineProtocolTabs.test.tsx.snap
View File

@ -1,14 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`LineProtocolTabs rendering renders! 1`] = `
<Fragment>
<div>
<default_1
onClick={[Function]}
tabs={
Array [
"uploadFile",
"enterManually",
"enterURL",
"Upload File",
"Enter Manually",
"Enter URL",
]
}
/>
@ -33,5 +33,5 @@ exports[`LineProtocolTabs rendering renders! 1`] = `
</GridColumn>
</GridRow>
</Grid>
</Fragment>
</div>
`;

49
ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.tsx
View File

@ -5,6 +5,7 @@ import _ from 'lodash'
// Components
import {Form} from 'src/clockface'
import ConfigFieldHandler from 'src/onboarding/components/configureStep/streaming/ConfigFieldHandler'
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
// Actions
import {
@ -46,28 +47,32 @@ class PluginConfigForm extends PureComponent<Props> {
onClickSkip,
} = this.props
return (
<>
<h3 className="wizard-step--title">{_.startCase(name)}</h3>
<Form onSubmit={this.props.onClickNext}>
<ConfigFieldHandler
configFields={configFields}
telegrafPlugin={telegrafPlugin}
onSetConfigArrayValue={onSetConfigArrayValue}
onAddConfigValue={onAddConfigValue}
onRemoveConfigValue={onRemoveConfigValue}
onUpdateTelegrafPluginConfig={onUpdateTelegrafPluginConfig}
/>
<OnboardingButtons
onClickBack={onClickPrevious}
onClickSkip={onClickSkip}
backButtonText={this.backButtonText}
nextButtonText={this.nextButtonText}
showSkip={true}
skipButtonText={'Skip to Verify'}
autoFocusNext={this.autoFocus}
/>
</Form>
</>
<Form onSubmit={this.props.onClickNext}>
<div className="wizard-step--scroll-area">
<FancyScrollbar autoHide={false}>
<div className="wizard-step--scroll-content">
<h3 className="wizard-step--title">{_.startCase(name)}</h3>
<ConfigFieldHandler
configFields={configFields}
telegrafPlugin={telegrafPlugin}
onSetConfigArrayValue={onSetConfigArrayValue}
onAddConfigValue={onAddConfigValue}
onRemoveConfigValue={onRemoveConfigValue}
onUpdateTelegrafPluginConfig={onUpdateTelegrafPluginConfig}
/>
</div>
</FancyScrollbar>
</div>
<OnboardingButtons
onClickBack={onClickPrevious}
onClickSkip={onClickSkip}
backButtonText={this.backButtonText}
nextButtonText={this.nextButtonText}
showSkip={true}
skipButtonText={'Skip to Verify'}
autoFocusNext={this.autoFocus}
/>
</Form>
)
}
private get autoFocus(): boolean {

25
ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx
View File

@ -10,6 +10,7 @@ import {ComponentStatus, Form} from 'src/clockface'
import TypeSelector from 'src/onboarding/components/selectionStep/TypeSelector'
import StreamingSelector from 'src/onboarding/components/selectionStep/StreamingSelector'
import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
// Actions
import {
@ -70,13 +71,19 @@ export class SelectDataSourceStep extends PureComponent<Props, State> {
public render() {
return (
<Form onSubmit={this.handleClickNext} className={this.skippableClassName}>
<div className="onboarding-step">
<h3 className="wizard-step--title">{this.title}</h3>
<h5 className="wizard-step--sub-title">
You will be able to configure additional Data Sources later
</h5>
{this.selector}
<div className={this.skippableClassName}>
<Form onSubmit={this.handleClickNext}>
<div className="wizard-step--scroll-area">
<FancyScrollbar autoHide={false}>
<div className="wizard-step--scroll-content">
<h3 className="wizard-step--title">{this.title}</h3>
<h5 className="wizard-step--sub-title">
You will be able to configure additional Data Sources later
</h5>
{this.selector}
</div>
</FancyScrollbar>
</div>
<OnboardingButtons
onClickBack={this.handleClickBack}
onClickSkip={this.jumpToCompletionStep}
@ -87,8 +94,8 @@ export class SelectDataSourceStep extends PureComponent<Props, State> {
nextButtonStatus={this.nextButtonStatus}
showSkip={this.showSkip}
/>
</div>
</Form>
</Form>
</div>
)
}

69
ui/src/onboarding/components/selectionStep/StreamingSelector.tsx
View File

@ -5,8 +5,7 @@ import uuid from 'uuid'
// Components
import {ErrorHandling} from 'src/shared/decorators/errors'
import CardSelectCard from 'src/clockface/components/card_select/CardSelectCard'
import {GridSizer, Input, IconFont} from 'src/clockface'
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
import {GridSizer, Input, IconFont, ComponentSize} from 'src/clockface'
// Constants
import {
@ -32,7 +31,6 @@ const ANIMATION_LENGTH = 400
@ErrorHandling
class StreamingSelector extends PureComponent<Props, State> {
private scrollMaxHeight = window.innerHeight * 0.6
constructor(props: Props) {
super(props)
this.state = {
@ -60,42 +58,37 @@ class StreamingSelector extends PureComponent<Props, State> {
const {gridSizerUpdateFlag, searchTerm} = this.state
return (
<FancyScrollbar
autoHide={false}
autoHeight={true}
maxHeight={this.scrollMaxHeight}
>
<div className="wizard-step--grid-container">
<div className="wizard-step--filter">
<Input
icon={IconFont.Search}
widthPixels={290}
value={searchTerm}
onBlur={this.handleFilterBlur}
onChange={this.handleFilterChange}
placeholder="Filter Plugins..."
/>
</div>
<GridSizer
wait={ANIMATION_LENGTH}
recalculateFlag={gridSizerUpdateFlag}
>
{this.filteredBundles.map(b => {
return (
<CardSelectCard
key={b}
id={b}
name={b}
label={b}
checked={this.isCardChecked(b)}
onClick={this.handleToggle(b)}
image={BUNDLE_LOGOS[b]}
/>
)
})}
</GridSizer>
<div className="wizard-step--grid-container">
<div className="wizard-step--filter">
<Input
size={ComponentSize.Medium}
icon={IconFont.Search}
widthPixels={290}
value={searchTerm}
onBlur={this.handleFilterBlur}
onChange={this.handleFilterChange}
placeholder="Filter Plugins..."
/>
</div>
</FancyScrollbar>
<GridSizer
wait={ANIMATION_LENGTH}
recalculateFlag={gridSizerUpdateFlag}
>
{this.filteredBundles.map(b => {
return (
<CardSelectCard
key={b}
id={b}
name={b}
label={b}
checked={this.isCardChecked(b)}
onClick={this.handleToggle(b)}
image={BUNDLE_LOGOS[b]}
/>
)
})}
</GridSizer>
</div>
)
}

39
ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx
View File

@ -8,6 +8,7 @@ import _ from 'lodash'
import {ErrorHandling} from 'src/shared/decorators/errors'
import VerifyDataSwitcher from 'src/onboarding/components/verifyStep/VerifyDataSwitcher'
import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
// Actions
import {
@ -75,20 +76,26 @@ export class VerifyDataStep extends PureComponent<Props> {
} = this.props
return (
<Form onSubmit={this.handleIncrementStep}>
<div className="onboarding-step wizard--skippable">
<VerifyDataSwitcher
notify={notify}
type={type}
telegrafConfigID={telegrafConfigID}
authToken={authToken}
onSaveTelegrafConfig={onSaveTelegrafConfig}
org={_.get(setupParams, 'org', '')}
bucket={_.get(setupParams, 'bucket', '')}
onSetStepStatus={onSetStepStatus}
stepIndex={stepIndex}
onDecrementCurrentStep={onDecrementCurrentStepIndex}
/>
<div className="onboarding-step wizard--skippable">
<Form onSubmit={this.handleIncrementStep}>
<div className="wizard-step--scroll-area">
<FancyScrollbar autoHide={false}>
<div className="wizard-step--scroll-content">
<VerifyDataSwitcher
notify={notify}
type={type}
telegrafConfigID={telegrafConfigID}
authToken={authToken}
onSaveTelegrafConfig={onSaveTelegrafConfig}
org={_.get(setupParams, 'org', '')}
bucket={_.get(setupParams, 'bucket', '')}
onSetStepStatus={onSetStepStatus}
stepIndex={stepIndex}
onDecrementCurrentStep={onDecrementCurrentStepIndex}
/>
</div>
</FancyScrollbar>
</div>
<OnboardingButtons
onClickBack={this.handleDecrementStep}
onClickSkip={this.jumpToCompletionStep}
@ -97,8 +104,8 @@ export class VerifyDataStep extends PureComponent<Props> {
skipButtonText={'Skip'}
showSkip={true}
/>
</div>
</Form>
</Form>
</div>
)
}

13
ui/src/onboarding/containers/OnboardingWizard.tsx
View File

@ -168,23 +168,14 @@ class OnboardingWizard extends PureComponent<Props> {
}
private get progressHeader(): JSX.Element {
const {
stepStatuses,
currentStepIndex,
onIncrementCurrentStepIndex,
onSetCurrentStepIndex,
} = this.props
const {stepStatuses, currentStepIndex, onSetCurrentStepIndex} = this.props
if (currentStepIndex === 0) {
return <div className="wizard--progress-header hidden" />
}
return (
<WizardProgressHeader
currentStepIndex={currentStepIndex}
stepSkippable={this.stepSkippable}
onSkip={onIncrementCurrentStepIndex}
>
<WizardProgressHeader>
<ProgressBar
currentStepIndex={currentStepIndex}
handleSetCurrentStep={onSetCurrentStepIndex}

34
ui/src/shared/components/CopyText.scss
View File

@ -1,13 +1,23 @@
.script-snippet {
background-color: $g4-onyx;
border-radius: $radius;
margin: $ix-marg-a 0;
padding: $ix-marg-b;
overflow-x: auto;
font-family: 'RobotoMono', monospace;
}
.script-snippet--container {
position: relative;
margin: $ix-marg-a 0;
padding: $ix-marg-a $ix-marg-c;
font-family: 'RobotoMono', monospace;
background-color: $g4-onyx;
border-radius: $ix-radius;
height: 100%;
}
.copy-button{
float: right;
margin-left:10px auto;
}
.copy-button {
position: absolute;
right: $ix-marg-b;
top: calc(50% - 15px);
opacity: 0;
transition: opacity .2s ease-in-out;
}
.script-snippet--container:hover {
.copy-button {
opacity: 1;
}
}

9
ui/src/shared/components/CopyText.tsx
View File

@ -8,6 +8,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
// Components
import {Button, ComponentSize, ComponentColor} from 'src/clockface'
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
// Actions
import {NotificationAction} from 'src/types'
@ -26,8 +27,10 @@ class CopyText extends PureComponent<Props> {
public render() {
const {copyText} = this.props
return (
<p className="script-snippet">
{copyText}
<div className="script-snippet--container">
<FancyScrollbar autoHide={false} autoHeight={true} maxHeight={400}>
<p>{copyText}</p>
</FancyScrollbar>
<CopyToClipboard text={copyText} onCopy={this.handleCopyAttempt}>
<Button
customClass="copy-button"
@ -38,7 +41,7 @@ class CopyText extends PureComponent<Props> {
onClick={this.handleClickCopy}
/>
</CopyToClipboard>
</p>
</div>
)
}

6
ui/src/types/v2/dataLoaders.ts
View File

@ -138,9 +138,9 @@ export type TelegrafPluginName =
| TelegrafPluginOutputInfluxDBV2.NameEnum.InfluxdbV2
export enum LineProtocolTab {
UploadFile = 'uploadFile',
EnterManually = 'enterManually',
EnterURL = 'enterURL',
UploadFile = 'Upload File',
EnterManually = 'Enter Manually',
EnterURL = 'Enter URL',
}
export enum LineProtocolStatus {