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'
+import {ScraperTargetResponse} from 'src/api'
-
-// Utils
-import {getDeep} from 'src/utils/wrappers'
 
 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) {
+    if (scrapers !== undefined) {
-      return scraperTargets.map(scraper => (
+      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>
+        <ScraperList
-          searchTerm={searchTerm}
+          scrapers={this.configurations}
-          searchKeys={['bucket']}
+          emptyState={this.emptyState}
-          list={scrapers.configurations || []}
+          onDeleteScraper={this.handleDeleteScraper}
-        >
+        />
-          {configurations => (
-            <ScraperList
-              scrapers={{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,25 +199,27 @@ class OrganizationView extends PureComponent<Props> {
                   organization={org}
                   fetcher={getScrapers}
                 >
-                  {(scrapers, loading, fetch) => (
+                  {(scrapers, loading, fetch) => {
-                    <Spinner loading={loading}>
+                    return (
-                      <GetOrgResources<Bucket[]>
+                      <Spinner loading={loading}>
-                        organization={org}
+                        <GetOrgResources<Bucket[]>
-                        fetcher={getBuckets}
+                          organization={org}
-                      >
+                          fetcher={getBuckets}
-                        {(buckets, loading) => (
+                        >
-                          <Spinner loading={loading}>
+                          {(buckets, loading) => (
-                            <Scrapers
+                            <Spinner loading={loading}>
-                              scrapers={scrapers}
+                              <Scrapers
-                              onChange={fetch}
+                                scrapers={scrapers}
-                              orgName={org.name}
+                                onChange={fetch}
-                              buckets={buckets}
+                                orgName={org.name}
-                            />
+                                buckets={buckets}
-                          </Spinner>
+                              />
-                        )}
+                            </Spinner>
-                      </GetOrgResources>
+                          )}
-                    </Spinner>
+                        </GetOrgResources>
-                  )}
+                      </Spinner>
+                    )
+                  }}
                 </GetOrgResources>
               </TabbedPageSection>
             </TabbedPage>