Refactor search logic to include scrapers with no bucket

Co-authored-by: Chris Goller <goller@gmail.com>

http/scraper_service.go

@@ -411,7 +411,7 @@ type getTargetsLinks struct {
 
 type getTargetsResponse struct {
 	Links   getTargetsLinks  `json:"links"`
-	Targets []targetResponse `json:"scraper_targets"`
+	Targets []targetResponse `json:"configurations"`
 }
 
 type targetLinks struct {

http/scraper_service_test.go

@@ -102,7 +102,7 @@ func TestService_handleGetScraperTargets(t *testing.T) {
 					  "links": {
 					    "self": "/api/v2/scrapers"
 					  },
-					  "scraper_targets": [
+					  "configurations": [
 					    {
 					      "id": "%s",
 						  "name": "target-1",
@@ -175,7 +175,7 @@ func TestService_handleGetScraperTargets(t *testing.T) {
                   "links": {
                     "self": "/api/v2/scrapers"
                   },
-                  "scraper_targets": []
+                  "configurations": []
                 }
                 `,
 			},

ui/src/organizations/components/ScraperList.tsx

@@ -6,13 +6,10 @@ import {IndexList} from 'src/clockface'
 import ScraperRow from 'src/organizations/components/ScraperRow'
 
 // Types
-import {ScraperTargetResponses, ScraperTargetResponse} from 'src/api'
-
-// Utils
-import {getDeep} from 'src/utils/wrappers'
+import {ScraperTargetResponse} from 'src/api'
 
 interface Props {
-  scrapers: ScraperTargetResponses
+  scrapers: ScraperTargetResponse[]
   emptyState: JSX.Element
   onDeleteScraper: (scraper) => void
 }
@@ -38,14 +35,9 @@ export default class ScraperList extends PureComponent<Props> {
 
   public get scrapersList(): JSX.Element[] {
     const {scrapers, onDeleteScraper} = this.props
-    const scraperTargets = getDeep<ScraperTargetResponse[]>(
-      scrapers,
-      'scraper_targets',
-      []
-    )
 
-    if (scraperTargets !== undefined) {
-      return scraperTargets.map(scraper => (
+    if (scrapers !== undefined) {
+      return scrapers.map(scraper => (
         <ScraperRow
           key={scraper.id}
           scraper={scraper}

ui/src/organizations/components/Scrapers.tsx

@@ -18,7 +18,6 @@ import {
   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'
@@ -52,7 +51,7 @@ export default class Scrapers extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {scrapers, buckets} = this.props
+    const {buckets} = this.props
     const {searchTerm} = this.state
 
     return (
@@ -69,19 +68,11 @@ export default class Scrapers extends PureComponent<Props, State> {
           />
           {this.createScraperButton}
         </TabbedPageHeader>
-        <FilterList<ScraperTargetResponse>
-          searchTerm={searchTerm}
-          searchKeys={['bucket']}
-          list={scrapers.configurations || []}
-        >
-          {configurations => (
         <ScraperList
-              scrapers={{configurations}}
+          scrapers={this.configurations}
           emptyState={this.emptyState}
           onDeleteScraper={this.handleDeleteScraper}
         />
-          )}
-        </FilterList>
         <DataLoadersWizard
           visible={this.isOverlayVisible}
           onCompleteSetup={this.handleDismissDataLoaders}
@@ -93,6 +84,28 @@ export default class Scrapers extends PureComponent<Props, State> {
     )
   }
 
+  private get configurations(): ScraperTargetResponse[] {
+    const {scrapers} = this.props
+    const {searchTerm} = this.state
+
+    if (!scrapers || !scrapers.configurations) {
+      return []
+    }
+
+    return scrapers.configurations.filter(c => {
+      if (!searchTerm) {
+        return true
+      }
+      if (!c.bucket) {
+        return false
+      }
+
+      return String(c.bucket)
+        .toLocaleLowerCase()
+        .includes(searchTerm.toLocaleLowerCase())
+    })
+  }
+
   private get isOverlayVisible(): boolean {
     return this.state.overlayState === OverlayState.Open
   }

ui/src/organizations/containers/OrganizationView.tsx

@@ -199,7 +199,8 @@ class OrganizationView extends PureComponent<Props> {
                   organization={org}
                   fetcher={getScrapers}
                 >
-                  {(scrapers, loading, fetch) => (
+                  {(scrapers, loading, fetch) => {
+                    return (
                       <Spinner loading={loading}>
                         <GetOrgResources<Bucket[]>
                           organization={org}
@@ -217,7 +218,8 @@ class OrganizationView extends PureComponent<Props> {
                           )}
                         </GetOrgResources>
                       </Spinner>
-                  )}
+                    )
+                  }}
                 </GetOrgResources>
               </TabbedPageSection>
             </TabbedPage>