Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui/dataLoaders): Move download config into view overlay #11764

Merged
merged 1 commit into from
Feb 8, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
### Bug Fixes

### UI Improvements
1. [11764](https://github.com/influxdata/influxdb/pull/11764): Move the download telegraf config button to view config overlay

## v2.0.0-alpha.2 [2019-02-07]

Expand Down
3 changes: 0 additions & 3 deletions ui/src/organizations/components/CollectorList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {getDeep} from 'src/utils/wrappers'
interface Props {
collectors: Telegraf[]
emptyState: JSX.Element
onDownloadConfig: (telegrafID: string, telegrafName: string) => void
onDelete: (telegrafID: string) => void
onUpdate: (telegraf: Telegraf) => void
onOpenInstructions: (telegrafID: string) => void
Expand Down Expand Up @@ -42,7 +41,6 @@ export default class CollectorList extends PureComponent<Props> {
public get collectorsList(): JSX.Element[] {
const {
collectors,
onDownloadConfig,
onDelete,
onUpdate,
onOpenInstructions,
Expand All @@ -55,7 +53,6 @@ export default class CollectorList extends PureComponent<Props> {
key={collector.id}
collector={collector}
bucket={getDeep<string>(collector, 'plugins.0.config.bucket', '')}
onDownloadConfig={onDownloadConfig}
onDelete={onDelete}
onUpdate={onUpdate}
onOpenInstructions={onOpenInstructions}
Expand Down
14 changes: 0 additions & 14 deletions ui/src/organizations/components/CollectorRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import EditableName from 'src/shared/components/EditableName'
interface Props {
collector: Telegraf
bucket: string
onDownloadConfig: (telegrafID: string, telegrafName: string) => void
onDelete: (telegrafID: string) => void
onUpdate: (telegraf: Telegraf) => void
onOpenInstructions: (telegrafID: string) => void
Expand All @@ -39,12 +38,6 @@ export default class CollectorRow extends PureComponent<Props> {
<IndexList.Cell>{bucket}</IndexList.Cell>
<IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
<ComponentSpacer align={Alignment.Right}>
<Button
size={ComponentSize.ExtraSmall}
color={ComponentColor.Secondary}
text={'Download Config'}
onClick={this.handleDownloadConfig}
/>
<Button
size={ComponentSize.ExtraSmall}
color={ComponentColor.Secondary}
Expand Down Expand Up @@ -82,13 +75,6 @@ export default class CollectorRow extends PureComponent<Props> {
)
}

private handleDownloadConfig = (): void => {
this.props.onDownloadConfig(
this.props.collector.id,
this.props.collector.name
)
}

private handleDeleteConfig = (): void => {
this.props.onDelete(this.props.collector.id)
}
Expand Down
20 changes: 0 additions & 20 deletions ui/src/organizations/components/Collectors.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
import {connect} from 'react-redux'

// Utils
import {downloadTextFile} from 'src/shared/utils/download'

// Components
import TabbedPageHeader from 'src/shared/components/tabbed_page/TabbedPageHeader'
import CollectorList from 'src/organizations/components/CollectorList'
Expand All @@ -31,12 +28,8 @@ import {client} from 'src/utils/api'

// Actions
import * as NotificationsActions from 'src/types/actions/notifications'
import {notify} from 'src/shared/actions/notifications'
import {setBucketInfo} from 'src/dataLoaders/actions/steps'

// Constants
import {getTelegrafConfigFailed} from 'src/shared/copy/v2/notifications'

// Decorators
import {ErrorHandling} from 'src/shared/decorators/errors'

Expand Down Expand Up @@ -121,7 +114,6 @@ export class Collectors extends PureComponent<Props, State> {
<CollectorList
collectors={cs}
emptyState={this.emptyState}
onDownloadConfig={this.handleDownloadConfig}
onDelete={this.handleDeleteTelegraf}
onUpdate={this.handleUpdateTelegraf}
onOpenInstructions={this.handleOpenInstructions}
Expand Down Expand Up @@ -259,18 +251,6 @@ export class Collectors extends PureComponent<Props, State> {
)
}

private handleDownloadConfig = async (
telegrafID: string,
telegrafName: string
) => {
try {
const config = await client.telegrafConfigs.getTOML(telegrafID)
downloadTextFile(config, `${telegrafName || 'config'}.toml`)
} catch (error) {
notify(getTelegrafConfigFailed())
}
}

private handleDeleteTelegraf = async (telegrafID: string) => {
await client.telegrafConfigs.delete(telegrafID)
this.props.onChange()
Expand Down
7 changes: 7 additions & 0 deletions ui/src/organizations/components/TelegrafConfigOverlay.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.config-overlay {
height: calc(100vh - 350px);
width: 100%;
position: relative;
display: inline-flex;
flex-direction: column;
}
88 changes: 75 additions & 13 deletions ui/src/organizations/components/TelegrafConfigOverlay.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,32 @@ import {connect} from 'react-redux'

// Components
import {ErrorHandling} from 'src/shared/decorators/errors'
import WizardOverlay from 'src/clockface/components/wizard/WizardOverlay'
import OverlayBody from 'src/clockface/components/overlays/OverlayBody'
import OverlayContainer from 'src/clockface/components/overlays/OverlayContainer'
import OverlayTechnology from 'src/clockface/components/overlays/OverlayTechnology'
import OverlayHeading from 'src/clockface/components/overlays/OverlayHeading'
import TelegrafConfig from 'src/organizations/components/TelegrafConfig'
import {
ComponentSize,
ComponentColor,
Button,
OverlayFooter,
} from 'src/clockface'

// Utils
import {downloadTextFile} from 'src/shared/utils/download'

// Constants
import {getTelegrafConfigFailed} from 'src/shared/copy/v2/notifications'

// APIs
import {client} from 'src/utils/api'

// Actions
import {notify as notifyAction} from 'src/shared/actions/notifications'

// Styles
import 'src/organizations/components/TelegrafConfigOverlay.scss'

// Types
import {AppState} from 'src/types/v2'
Expand All @@ -17,36 +41,74 @@ interface OwnProps {

interface StateProps {
telegrafConfigName: string
telegrafConfigID
}

interface DispatchProps {
notify: typeof notifyAction
}

type Props = OwnProps & StateProps
type Props = OwnProps & StateProps & DispatchProps

@ErrorHandling
export class TelegrafConfigOverlay extends PureComponent<Props> {
public render() {
const {visible, onDismiss, telegrafConfigName} = this.props

return (
<WizardOverlay
visible={visible}
title={`Telegraf Configuration - ${telegrafConfigName}`}
onDismiss={onDismiss}
>
<TelegrafConfig />
</WizardOverlay>
<OverlayTechnology visible={visible}>
<OverlayContainer maxWidth={1200}>
<OverlayHeading
title={`Telegraf Configuration - ${telegrafConfigName}`}
onDismiss={onDismiss}
/>

<OverlayBody>
<div className="config-overlay">
<TelegrafConfig />
</div>
</OverlayBody>
<OverlayFooter>
<Button
size={ComponentSize.ExtraSmall}
color={ComponentColor.Secondary}
text={'Download Config'}
onClick={this.handleDownloadConfig}
/>
</OverlayFooter>
</OverlayContainer>
</OverlayTechnology>
)
}

private handleDownloadConfig = async () => {
try {
const config = await client.telegrafConfigs.getTOML(
this.props.telegrafConfigID
)
downloadTextFile(
config,
`${this.props.telegrafConfigName || 'config'}.toml`
)
} catch (error) {
this.props.notify(getTelegrafConfigFailed())
}
}
}

const mstp = ({
dataLoading: {
dataLoaders: {telegrafConfigName},
dataLoaders: {telegrafConfigName, telegrafConfigID},
},
}: AppState): StateProps => {
return {telegrafConfigName}
return {telegrafConfigName, telegrafConfigID}
}

const mdtp: DispatchProps = {
notify: notifyAction,
}

export default connect<StateProps, {}, OwnProps>(
export default connect<StateProps, DispatchProps, OwnProps>(
mstp,
null
mdtp
)(TelegrafConfigOverlay)