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

fix(ui/dataLoaders): Move plugins sidebar into only collectors configure step 

Co-authored-by: Daniel Campbell <metalwhirlwind@gmail.com>
pull/11705/head
Iris Scholten 2019-02-05 17:19:39 -08:00
parent 86346bc8d5
commit 1f8121883e
13 changed files with 94 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -12,6 +12,7 @@
1. [11689](https://github.com/influxdata/influxdb/pull/11689): Change the wording for the Collectors configure step button to Create and Verify
1. [11697](https://github.com/influxdata/influxdb/pull/11697): Standardize page loading spinner styles
1. [11711](https://github.com/influxdata/influxdb/pull/11711): Show checkbox on Save As button in data explorer
1. [11705](https://github.com/influxdata/influxdb/pull/11705): Make collectors plugins side bar visible in only the configure step
## v2.0.0-alpha.1 [2019-01-23]

2
ui/src/dataLoaders/components/collectorsWizard/CollectorsStepSwitcher.tsx
View File

@ -28,7 +28,7 @@ class StepSwitcher extends PureComponent<Props> {
return <SelectCollectorsStep {...stepProps} buckets={buckets} />
case CollectorsStep.Configure:
return (
<div className="onboarding-step wizard--skippable">
<div className="onboarding-step">
<PluginConfigSwitcher />
</div>
)

34
ui/src/dataLoaders/components/collectorsWizard/CollectorsWizard.tsx
View File

@ -7,7 +7,6 @@ import _ from 'lodash'
import {ErrorHandling} from 'src/shared/decorators/errors'
import WizardOverlay from 'src/clockface/components/wizard/WizardOverlay'
import CollectorsStepSwitcher from 'src/dataLoaders/components/collectorsWizard/CollectorsStepSwitcher'
import PluginsSideBar from 'src/dataLoaders/components/PluginsSideBar'
// Actions
import {notify as notifyAction} from 'src/shared/actions/notifications'
@ -87,7 +86,7 @@ class CollectorsWizard extends PureComponent<Props> {
}
public render() {
const {visible, buckets, telegrafPlugins, currentStepIndex} = this.props
const {visible, buckets} = this.props
return (
<WizardOverlay
@ -96,13 +95,6 @@ class CollectorsWizard extends PureComponent<Props> {
onDismiss={this.handleDismiss}
>
<div className="wizard-contents">
<PluginsSideBar
telegrafPlugins={telegrafPlugins}
onTabClick={this.handleClickSideBarTab}
title="Plugins to Configure"
visible={this.sideBarVisible}
currentStepIndex={currentStepIndex}
/>
<div className="wizard-step--container">
<CollectorsStepSwitcher
stepProps={this.stepProps}
@ -139,30 +131,6 @@ class CollectorsWizard extends PureComponent<Props> {
this.props.onClearSteps()
}
private get sideBarVisible() {
const {telegrafPlugins, currentStepIndex} = this.props
const isNotEmpty = telegrafPlugins.length > 0
const isConfigStep = currentStepIndex > 0
return isNotEmpty && isConfigStep
}
private handleClickSideBarTab = (tabID: string) => {
const {
onSetActiveTelegrafPlugin,
telegrafPlugins,
onSetPluginConfiguration,
} = this.props
const activeTelegrafPlugin = telegrafPlugins.find(tp => tp.active)
if (!!activeTelegrafPlugin) {
onSetPluginConfiguration(activeTelegrafPlugin.name)
}
onSetActiveTelegrafPlugin(tabID)
}
private get stepProps(): CollectorsStepProps {
const {
notify,

2
ui/src/dataLoaders/components/PluginsSideBar.test.tsx → ui/src/dataLoaders/components/collectorsWizard/configure/PluginsSideBar.test.tsx
View File

@ -3,7 +3,7 @@ import React from 'react'
import {shallow} from 'enzyme'
// Components
import PluginsSideBar from 'src/dataLoaders/components/PluginsSideBar'
import PluginsSideBar from 'src/dataLoaders/components/collectorsWizard/configure/PluginsSideBar'
import {cpuTelegrafPlugin, diskTelegrafPlugin} from 'mocks/dummyData'
import SideBarTab from 'src/dataLoaders/components/side_bar/SideBarTab'

10
ui/src/dataLoaders/components/PluginsSideBar.tsx → ui/src/dataLoaders/components/collectorsWizard/configure/PluginsSideBar.tsx
View File

@ -11,7 +11,6 @@ interface Props {
visible: boolean
telegrafPlugins: TelegrafPlugin[]
onTabClick: (tabID: string) => void
currentStepIndex: number
}
const configStateToTabStatus = (cs: ConfigurationState): TabStatus => {
@ -30,17 +29,10 @@ class PluginsSideBar extends Component<Props> {
const {title, visible} = this.props
return (
<SideBar title={title} visible={visible}>
{this.content}
{this.tabs}
</SideBar>
)
}
private get content(): JSX.Element[] {
const {currentStepIndex} = this.props
if (currentStepIndex !== 2) {
return [...this.tabs]
}
return this.tabs
}
private get tabs(): JSX.Element[] {
const {telegrafPlugins, onTabClick} = this.props

100
ui/src/dataLoaders/components/collectorsWizard/configure/TelegrafPluginInstructions.tsx
View File

@ -6,9 +6,14 @@ import {connect} from 'react-redux'
import {Form, Input, InputType, ComponentSize} from 'src/clockface'
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
import PluginsSideBar from 'src/dataLoaders/components/collectorsWizard/configure/PluginsSideBar'
// Actions
import {setTelegrafConfigName} from 'src/dataLoaders/actions/dataLoaders'
import {
setTelegrafConfigName,
setActiveTelegrafPlugin,
setPluginConfiguration,
} from 'src/dataLoaders/actions/dataLoaders'
import {
incrementCurrentStepIndex,
decrementCurrentStepIndex,
@ -16,49 +21,67 @@ import {
// Types
import {AppState} from 'src/types/v2/index'
import {TelegrafPlugin} from 'src/types/v2/dataLoaders'
interface DispatchProps {
onSetTelegrafConfigName: typeof setTelegrafConfigName
onSetActiveTelegrafPlugin: typeof setActiveTelegrafPlugin
onSetPluginConfiguration: typeof setPluginConfiguration
onIncrementStep: typeof incrementCurrentStepIndex
onDecrementStep: typeof decrementCurrentStepIndex
}
interface StateProps {
telegrafConfigName: string
telegrafPlugins: TelegrafPlugin[]
}
type Props = DispatchProps & StateProps
export class TelegrafPluginInstructions extends PureComponent<Props> {
public render() {
const {telegrafConfigName, onDecrementStep, onIncrementStep} = this.props
const {
telegrafConfigName,
telegrafPlugins,
onDecrementStep,
onIncrementStep,
} = this.props
return (
<Form onSubmit={onIncrementStep}>
<div className="wizard-step--scroll-area">
<FancyScrollbar autoHide={false}>
<div className="wizard-step--scroll-content">
<h3 className="wizard-step--title">
Telegraf Configuration Information
</h3>
<h5 className="wizard-step--sub-title">
Telegraf is a plugin based data collection agent. Click on the
plugin names to the left in order to configure the selected
plugins. For more information about Telegraf Plugins, see
documentation.
</h5>
<Form.Element label="Telegraf Configuration Name">
<Input
type={InputType.Text}
value={telegrafConfigName}
onChange={this.handleNameInput}
titleText="Telegraf Configuration Name"
size={ComponentSize.Medium}
autoFocus={true}
/>
</Form.Element>
</div>
</FancyScrollbar>
<div className="wizard--columns">
<PluginsSideBar
telegrafPlugins={telegrafPlugins}
onTabClick={this.handleClickSideBarTab}
title="Plugins to Configure"
visible={this.sideBarVisible}
/>
<FancyScrollbar autoHide={false}>
<div className="wizard-step--scroll-content">
<h3 className="wizard-step--title">
Telegraf Configuration Information
</h3>
<h5 className="wizard-step--sub-title">
Telegraf is a plugin based data collection agent. Click on the
plugin names to the left in order to configure the selected
plugins. For more information about Telegraf Plugins, see
documentation.
</h5>
<Form.Element label="Telegraf Configuration Name">
<Input
type={InputType.Text}
value={telegrafConfigName}
onChange={this.handleNameInput}
titleText="Telegraf Configuration Name"
size={ComponentSize.Medium}
autoFocus={true}
/>
</Form.Element>
</div>
</FancyScrollbar>
</div>
</div>
<OnboardingButtons
onClickBack={onDecrementStep}
nextButtonText={'Create and Verify'}
@ -67,18 +90,40 @@ export class TelegrafPluginInstructions extends PureComponent<Props> {
)
}
private get sideBarVisible() {
const {telegrafPlugins} = this.props
return telegrafPlugins.length > 0
}
private handleNameInput = (e: ChangeEvent<HTMLInputElement>) => {
this.props.onSetTelegrafConfigName(e.target.value)
}
private handleClickSideBarTab = (tabID: string) => {
const {
onSetActiveTelegrafPlugin,
telegrafPlugins,
onSetPluginConfiguration,
} = this.props
const activeTelegrafPlugin = telegrafPlugins.find(tp => tp.active)
if (!!activeTelegrafPlugin) {
onSetPluginConfiguration(activeTelegrafPlugin.name)
}
onSetActiveTelegrafPlugin(tabID)
}
}
const mstp = ({
dataLoading: {
dataLoaders: {telegrafConfigName},
dataLoaders: {telegrafConfigName, telegrafPlugins},
},
}: AppState): StateProps => {
return {
telegrafConfigName,
telegrafPlugins,
}
}
@ -86,7 +131,10 @@ const mdtp: DispatchProps = {
onSetTelegrafConfigName: setTelegrafConfigName,
onIncrementStep: incrementCurrentStepIndex,
onDecrementStep: decrementCurrentStepIndex,
onSetActiveTelegrafPlugin: setActiveTelegrafPlugin,
onSetPluginConfiguration: setPluginConfiguration,
}
export default connect<StateProps, DispatchProps, {}>(
mstp,
mdtp

0
ui/src/dataLoaders/components/__snapshots__/PluginsSideBar.test.tsx.snap → ui/src/dataLoaders/components/collectorsWizard/configure/__snapshots__/PluginsSideBar.test.tsx.snap
View File

4
ui/src/dataLoaders/components/side_bar/SideBar.scss
View File

@ -13,6 +13,9 @@ $sidebar-width-md: 240px;
overflow: hidden;
transform: translate3d(0,0,0);
flex: 1 0 0;
border-radius: $radius;
background-color: $g2-kevlar;
margin: $ix-marg-b;
&.show {
flex: 1 0 $sidebar-width-sm;
@ -26,7 +29,6 @@ $sidebar-width-md: 240px;
width: 100%;
display: inline-flex;
flex-direction: column;
align-items: stretch;
padding: $ix-marg-e 0 34px 0;
}

19
ui/src/dataLoaders/components/side_bar/SideBar.test.tsx
View File

@ -8,10 +8,6 @@ import SideBar from 'src/dataLoaders/components/side_bar/SideBar'
// Types
import {SideBarTabStatus as TabStatus} from 'src/dataLoaders/components/side_bar/SideBar'
// Constants
import {ComponentColor} from 'src/clockface'
import {IconFont} from 'src/clockface'
const onClick = jest.fn(() => {})
const childrenArray = [
@ -31,20 +27,6 @@ const childrenArray = [
status={TabStatus.Default}
onClick={onClick}
/>,
<SideBar.Button
key="a"
text="a"
titleText="a"
color={ComponentColor.Secondary}
icon={IconFont.Download}
/>,
<SideBar.Button
text="b"
key="b"
titleText="b"
color={ComponentColor.Default}
icon={IconFont.Plus}
/>,
]
const setup = (override?, childrenArray = []) => {
@ -71,7 +53,6 @@ describe('SideBar', () => {
expect(wrapper.exists()).toBe(true)
expect(wrapper.contains(childrenArray[0])).toBe(true)
expect(wrapper.find(SideBar.Tab)).toHaveLength(2)
expect(wrapper.find(SideBar.Button)).toHaveLength(2)
expect(wrapper).toMatchSnapshot()
})
})

15
ui/src/dataLoaders/components/side_bar/SideBar.tsx
View File

@ -6,7 +6,6 @@ import classnames from 'classnames'
import SideBarTab from 'src/dataLoaders/components/side_bar/SideBarTab'
import SideBarButton from 'src/dataLoaders/components/side_bar/SideBarButton'
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
import {ComponentSpacer, Stack, Alignment} from 'src/clockface'
// Styles
import './SideBar.scss'
@ -39,11 +38,6 @@ class SideBar extends Component<Props> {
<FancyScrollbar autoHide={false}>
<div className="side-bar--tabs">{this.childTabs}</div>
</FancyScrollbar>
<div className="side-bar--buttons">
<ComponentSpacer stackChildren={Stack.Rows} align={Alignment.Left}>
{this.childButtons}
</ComponentSpacer>
</div>
</div>
</div>
)
@ -63,15 +57,6 @@ class SideBar extends Component<Props> {
}
})
}
private get childButtons(): JSX.Element[] {
const {children} = this.props
return React.Children.map(children, (child: JSX.Element) => {
if (child.type === SideBarButton) {
return child
}
})
}
}
export default SideBar

31
ui/src/dataLoaders/components/side_bar/__snapshots__/SideBar.test.tsx.snap
View File

@ -40,29 +40,6 @@ exports[`SideBar rendering renders with children, and renders its children 1`] =
/>
</div>
</FancyScrollbar>
<div
className="side-bar--buttons"
>
<ComponentSpacer
align="left"
stackChildren="rows"
>
<SideBarButton
color="secondary"
icon="download"
key=".0:$a"
text="a"
titleText="a"
/>
<SideBarButton
color="default"
icon="plus"
key=".0:$b"
text="b"
titleText="b"
/>
</ComponentSpacer>
</div>
</div>
</div>
`;
@ -90,14 +67,6 @@ exports[`SideBar rendering renders with no children 1`] = `
className="side-bar--tabs"
/>
</FancyScrollbar>
<div
className="side-bar--buttons"
>
<ComponentSpacer
align="left"
stackChildren="rows"
/>
</div>
</div>
</div>
`;

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

@ -96,17 +96,13 @@
border-radius: $ix-radius;
}
.buttonless {
.wizard-step--scroll-area {
height: calc(100% - 16px);
}
}
.wizard--skippable {
.wizard-step--scroll-area {
height: calc(100% - 147px);
}
}
.wizard-step--scroll-content {
width: 100%;
@ -310,24 +306,22 @@
}
}
.wizard--columns {
display: inline-flex;
flex-direction: row;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
@media screen and (min-width: $grid--breakpoint-md) {
.wizard-step--container {
padding: $ix-marg-d;
padding-bottom: 0;
}
.wizard--skippable {
.wizard-step--scroll-area {
height: calc(100% - 102px);
}
.wizard--button-container::before {
content: "";
flex: 1;
visibility: hidden;
}
}
.wizard--button-container {
.wizard--skip-container {
width: auto;

2
ui/src/organizations/components/TelegrafInstructionsOverlay.tsx
View File

@ -14,7 +14,7 @@ import {notify as notifyAction} from 'src/shared/actions/notifications'
// Types
import {AppState} from 'src/types/v2'
import {Telegraf} from 'src/api'
import {Telegraf} from '@influxdata/influx'
interface OwnProps {
visible: boolean