Skip to content

Commit

Permalink
fix(ui/dataLoaders): Move plugins sidebar into only collectors config…
Browse files Browse the repository at this point in the history
…ure step

Co-authored-by: Daniel Campbell <metalwhirlwind@gmail.com>
  • Loading branch information
ischolten committed Feb 6, 2019
1 parent c1a6aeb commit d373189
Show file tree
Hide file tree
Showing 11 changed files with 92 additions and 153 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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
Expand All @@ -96,13 +95,6 @@ class CollectorsWizard extends PureComponent<Props> {
onDismis={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}
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ interface Props {
visible: boolean
telegrafPlugins: TelegrafPlugin[]
onTabClick: (tabID: string) => void
currentStepIndex: number
}

const configStateToTabStatus = (cs: ConfigurationState): TabStatus => {
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,59 +6,82 @@ 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,
} from 'src/dataLoaders/actions/steps'

// 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'}
Expand All @@ -67,26 +90,51 @@ 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,
}
}

const mdtp: DispatchProps = {
onSetTelegrafConfigName: setTelegrafConfigName,
onIncrementStep: incrementCurrentStepIndex,
onDecrementStep: decrementCurrentStepIndex,
onSetActiveTelegrafPlugin: setActiveTelegrafPlugin,
onSetPluginConfiguration: setPluginConfiguration,
}

export default connect<StateProps, DispatchProps, {}>(
mstp,
mdtp
Expand Down
4 changes: 3 additions & 1 deletion ui/src/dataLoaders/components/side_bar/SideBar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}

Expand Down
19 changes: 0 additions & 19 deletions ui/src/dataLoaders/components/side_bar/SideBar.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -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 = []) => {
Expand All @@ -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()
})
})
Expand Down
15 changes: 0 additions & 15 deletions ui/src/dataLoaders/components/side_bar/SideBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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>
)
Expand All @@ -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
Loading

0 comments on commit d373189

Please sign in to comment.