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

fix(ui): add filter list and input to scrapers/collectors (#11443)

pull/11473/head
Delmer 2019-01-22 16:46:54 -08:00 committed by GitHub
parent 5291faaff2
commit 4e5b956426
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 114 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
ui/src/organizations/components/Collectors.tsx
View File

@ -1,5 +1,6 @@
// Libraries
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
// Utils
import {downloadTextFile} from 'src/shared/utils/download'
@ -16,8 +17,11 @@ import {
EmptyState,
Grid,
Columns,
Input,
InputType,
} from 'src/clockface'
import DataLoadersWizard from 'src/dataLoaders/components/DataLoadersWizard'
import FilterList from 'src/shared/components/Filter'
// APIS
import {
@ -50,6 +54,7 @@ interface Props {
interface State {
overlayState: OverlayState
searchTerm: string
}
@ErrorHandling
@ -57,26 +62,47 @@ export default class Collectors extends PureComponent<Props, State> {
constructor(props: Props) {
super(props)
this.state = {overlayState: OverlayState.Closed}
this.state = {
overlayState: OverlayState.Closed,
searchTerm: '',
}
}
public render() {
const {collectors, buckets} = this.props
const {searchTerm} = this.state
return (
<>
<TabbedPageHeader>
<h1>Telegraf Configurations</h1>
<Input
icon={IconFont.Search}
placeholder="Filter telegraf configs by bucket..."
widthPixels={290}
value={searchTerm}
type={InputType.Text}
onChange={this.handleFilterChange}
onBlur={this.handleFilterBlur}
/>
{this.createButton}
</TabbedPageHeader>
<Grid>
<Grid.Row>
<Grid.Column widthSM={Columns.Twelve}>
<FilterList<Telegraf>
searchTerm={searchTerm}
searchKeys={['plugins.0.config.bucket']}
list={collectors}
>
{cs => (
<CollectorList
collectors={collectors}
collectors={cs}
emptyState={this.emptyState}
onDownloadConfig={this.handleDownloadConfig}
onDelete={this.handleDeleteTelegraf}
/>
)}
</FilterList>
</Grid.Column>
<Grid.Column
widthSM={Columns.Six}
@ -126,7 +152,9 @@ export default class Collectors extends PureComponent<Props, State> {
private get emptyState(): JSX.Element {
const {orgName} = this.props
const {searchTerm} = this.state
if (_.isEmpty(searchTerm)) {
return (
<EmptyState size={ComponentSize.Medium}>
<EmptyState.Text
@ -138,6 +166,13 @@ export default class Collectors extends PureComponent<Props, State> {
)
}
return (
<EmptyState size={ComponentSize.Medium}>
<EmptyState.Text text="No Telegraf Configuration buckets match your query" />
</EmptyState>
)
}
private handleDownloadConfig = async (telegrafID: string) => {
try {
const config = await getTelegrafConfigTOML(telegrafID)
@ -150,4 +185,12 @@ export default class Collectors extends PureComponent<Props, State> {
await deleteTelegrafConfig(telegrafID)
this.props.onChange()
}
private handleFilterChange = (e: ChangeEvent<HTMLInputElement>): void => {
this.setState({searchTerm: e.target.value})
}
private handleFilterBlur = (e: ChangeEvent<HTMLInputElement>): void => {
this.setState({searchTerm: e.target.value})
}
}

52
ui/src/organizations/components/Scrapers.tsx
View File

@ -1,5 +1,6 @@
// Libraries
import React, {PureComponent} from 'react'
import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react'
// APIs
import {deleteScraper} from 'src/organizations/apis/index'
@ -13,8 +14,11 @@ import {
IconFont,
ComponentSize,
EmptyState,
Input,
InputType,
} from 'src/clockface'
import DataLoadersWizard from 'src/dataLoaders/components/DataLoadersWizard'
import FilterList from 'src/shared/components/Filter'
// Decorators
import {ErrorHandling} from 'src/shared/decorators/errors'
@ -33,6 +37,7 @@ interface Props {
interface State {
overlayState: OverlayState
searchTerm: string
}
@ErrorHandling
@ -40,22 +45,43 @@ export default class Scrapers extends PureComponent<Props, State> {
constructor(props: Props) {
super(props)
this.state = {overlayState: OverlayState.Closed}
this.state = {
overlayState: OverlayState.Closed,
searchTerm: '',
}
}
public render() {
const {scrapers, buckets} = this.props
const {searchTerm} = this.state
return (
<>
<TabbedPageHeader>
<h1>Scrapers</h1>
<Input
icon={IconFont.Search}
placeholder="Filter scrapers by bucket..."
widthPixels={290}
value={searchTerm}
type={InputType.Text}
onChange={this.handleFilterChange}
onBlur={this.handleFilterBlur}
/>
{this.createScraperButton}
</TabbedPageHeader>
<FilterList<ScraperTargetResponse>
searchTerm={searchTerm}
searchKeys={['bucket']}
list={scrapers.configurations || []}
>
{configurations => (
<ScraperList
scrapers={scrapers}
scrapers={{configurations}}
emptyState={this.emptyState}
onDeleteScraper={this.handleDeleteScraper}
/>
)}
</FilterList>
<DataLoadersWizard
visible={this.isOverlayVisible}
onCompleteSetup={this.handleDismissDataLoaders}
@ -93,6 +119,9 @@ export default class Scrapers extends PureComponent<Props, State> {
private get emptyState(): JSX.Element {
const {orgName} = this.props
const {searchTerm} = this.state
if (_.isEmpty(searchTerm)) {
return (
<EmptyState size={ComponentSize.Medium}>
<EmptyState.Text
@ -104,8 +133,23 @@ export default class Scrapers extends PureComponent<Props, State> {
)
}
return (
<EmptyState size={ComponentSize.Medium}>
<EmptyState.Text text="No Scraper buckets match your query" />
</EmptyState>
)
}
private handleDeleteScraper = async (scraper: ScraperTargetResponse) => {
await deleteScraper(scraper.id)
this.props.onChange()
}
private handleFilterChange = (e: ChangeEvent<HTMLInputElement>): void => {
this.setState({searchTerm: e.target.value})
}
private handleFilterBlur = (e: ChangeEvent<HTMLInputElement>): void => {
this.setState({searchTerm: e.target.value})
}
}