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

ui/src/organizations/components/Collectors.tsx

@@ -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}>
-              <CollectorList
+              <FilterList<Telegraf>
-                collectors={collectors}
+                searchTerm={searchTerm}
-                emptyState={this.emptyState}
+                searchKeys={['plugins.0.config.bucket']}
-                onDownloadConfig={this.handleDownloadConfig}
+                list={collectors}
-                onDelete={this.handleDeleteTelegraf}
+              >
-              />
+                {cs => (
+                  <CollectorList
+                    collectors={cs}
+                    emptyState={this.emptyState}
+                    onDownloadConfig={this.handleDownloadConfig}
+                    onDelete={this.handleDeleteTelegraf}
+                  />
+                )}
+              </FilterList>
             </Grid.Column>
             <Grid.Column
               widthSM={Columns.Six}
@@ -126,14 +152,23 @@ 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
+            text={`${orgName} does not own any Telegraf Configurations, why not create one?`}
+            highlightWords={['Telegraf', 'Configurations']}
+          />
+          {this.createButton}
+        </EmptyState>
+      )
+    }
 
     return (
       <EmptyState size={ComponentSize.Medium}>
-        <EmptyState.Text
+        <EmptyState.Text text="No Telegraf Configuration buckets match your query" />
-          text={`${orgName} does not own any Telegraf  Configurations , why not create one?`}
-          highlightWords={['Telegraf', 'Configurations']}
-        />
-        {this.createButton}
       </EmptyState>
     )
   }
@@ -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})
+  }
 }

ui/src/organizations/components/Scrapers.tsx

@@ -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>
-        <ScraperList
+        <FilterList<ScraperTargetResponse>
-          scrapers={scrapers}
+          searchTerm={searchTerm}
-          emptyState={this.emptyState}
+          searchKeys={['bucket']}
-          onDeleteScraper={this.handleDeleteScraper}
+          list={scrapers.configurations || []}
-        />
+        >
+          {configurations => (
+            <ScraperList
+              scrapers={{configurations}}
+              emptyState={this.emptyState}
+              onDeleteScraper={this.handleDeleteScraper}
+            />
+          )}
+        </FilterList>
         <DataLoadersWizard
           visible={this.isOverlayVisible}
           onCompleteSetup={this.handleDismissDataLoaders}
@@ -93,13 +119,23 @@ 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
+            text={`${orgName} does not own any Scrapers, why not create one?`}
+            highlightWords={['Scrapers']}
+          />
+          {this.createScraperButton}
+        </EmptyState>
+      )
+    }
+
     return (
       <EmptyState size={ComponentSize.Medium}>
-        <EmptyState.Text
+        <EmptyState.Text text="No Scraper buckets match your query" />
-          text={`${orgName} does not own any Scrapers , why not create one?`}
-          highlightWords={['Scrapers']}
-        />
-        {this.createScraperButton}
       </EmptyState>
     )
   }
@@ -108,4 +144,12 @@ export default class Scrapers extends PureComponent<Props, State> {
     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})
+  }
 }