Merge pull request #11128 from influxdata/feat/list-scrapers-admin

Add the ability to list all scrapers using api response

ui/src/organizations/apis/index.ts

@@ -10,10 +10,18 @@ import {
   dashboardsAPI,
   taskAPI,
   telegrafsAPI,
+  scraperTargetsApi,
 } from 'src/utils/api'
 
 // Types
-import {Bucket, Task, Organization, ResourceOwner, Telegraf} from 'src/api'
+import {
+  Bucket,
+  Task,
+  Organization,
+  ResourceOwner,
+  Telegraf,
+  ScraperTargetResponses,
+} from 'src/api'
 import {Dashboard} from 'src/types/v2'
 
 // CRUD APIs for Organizations and Organization resources
@@ -198,3 +206,13 @@ export const deleteTelegrafConfig = async (
     console.error(error)
   }
 }
+
+export const getScrapers = async (): Promise<ScraperTargetResponses> => {
+  try {
+    const response = await scraperTargetsApi.scrapertargetsGet()
+
+    return response.data
+  } catch (error) {
+    console.error(error)
+  }
+}

ui/src/organizations/components/ScraperList.tsx

@@ -6,16 +6,16 @@ import {IndexList} from 'src/clockface'
 import ScraperRow from 'src/organizations/components/ScraperRow'
 
 // DummyData
-import {resouceOwner} from 'src/organizations/dummyData'
+import {ScraperTargetResponses, ScraperTargetResponse} from 'src/api'
+import {getDeep} from 'src/utils/wrappers'
 
 interface Props {
+  scrapers: ScraperTargetResponses
   emptyState: JSX.Element
 }
 
 export default class BucketList extends PureComponent<Props> {
   public render() {
-    const dummyData = resouceOwner
-
     const {emptyState} = this.props
     return (
       <>
@@ -25,12 +25,25 @@ export default class BucketList extends PureComponent<Props> {
             <IndexList.HeaderCell columnName="Bucket" width="50%" />
           </IndexList.Header>
           <IndexList.Body columnCount={3} emptyState={emptyState}>
-            {dummyData.map(scraper => (
-              <ScraperRow scraper={scraper} />
-            ))}
+            {this.scrapersList}
           </IndexList.Body>
         </IndexList>
       </>
     )
   }
+  public get scrapersList(): JSX.Element[] {
+    const {scrapers} = this.props
+    const scraperTargets = getDeep<ScraperTargetResponse[]>(
+      scrapers,
+      'scraper_targets',
+      []
+    )
+
+    if (scraperTargets !== undefined) {
+      return scraperTargets.map(scraper => (
+        <ScraperRow key={scraper.id} scraper={scraper} />
+      ))
+    }
+    return
+  }
 }

ui/src/organizations/components/ScraperRow.tsx

@@ -8,19 +8,20 @@ import {
   ConfirmationButton,
   Alignment,
 } from 'src/clockface'
-import {ResourceOwner} from 'src/api'
+import {ScraperTargetResponse} from 'src/api'
 
 interface Props {
-  scraper: ResourceOwner
+  scraper: ScraperTargetResponse
 }
 
 export default class BucketRow extends PureComponent<Props> {
   public render() {
+    const {scraper} = this.props
     return (
       <>
         <IndexList.Row>
-          <IndexList.Cell>name</IndexList.Cell>
-          <IndexList.Cell>bucket</IndexList.Cell>
+          <IndexList.Cell>{scraper.name}</IndexList.Cell>
+          <IndexList.Cell>{scraper.bucket}</IndexList.Cell>
           <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
             <ConfirmationButton
               size={ComponentSize.ExtraSmall}

ui/src/organizations/components/Scrapers.tsx

@@ -15,12 +15,17 @@ import {
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {ScraperTargetResponses} from 'src/api'
 
-interface Props {}
+interface Props {
+  scrapers: ScraperTargetResponses
+  onChange: () => void
+}
 
 @ErrorHandling
 export default class OrgOptions extends PureComponent<Props> {
   public render() {
+    const {scrapers} = this.props
     return (
       <>
         <TabbedPageHeader>
@@ -31,7 +36,7 @@ export default class OrgOptions extends PureComponent<Props> {
             color={ComponentColor.Primary}
           />
         </TabbedPageHeader>
-        <ScraperList emptyState={this.emptyState} />
+        <ScraperList scrapers={scrapers} emptyState={this.emptyState} />
       </>
     )
   }

ui/src/organizations/containers/OrganizationView.tsx

@@ -12,6 +12,7 @@ import {
   getTasks,
   getOwners,
   getCollectors,
+  getScrapers,
 } from 'src/organizations/apis'
 
 // Actions
@@ -34,7 +35,14 @@ import RenamablePageTitle from 'src/pageLayout/components/RenamablePageTitle'
 
 // Types
 import {AppState, Dashboard} from 'src/types/v2'
-import {ResourceOwner, Bucket, Organization, Task, Telegraf} from 'src/api'
+import {
+  ResourceOwner,
+  Bucket,
+  Organization,
+  Task,
+  Telegraf,
+  ScraperTargetResponses,
+} from 'src/api'
 import * as NotificationsActions from 'src/types/actions/notifications'
 
 // Decorators
@@ -162,7 +170,16 @@ class OrganizationView extends PureComponent<Props> {
                 url="scrapers_tab"
                 title="Scrapers"
               >
-                <Scrapers />
+                <GetOrgResources<ScraperTargetResponses>
+                  organization={org}
+                  fetcher={getScrapers}
+                >
+                  {(scrapers, loading, fetch) => (
+                    <Spinner loading={loading}>
+                      <Scrapers scrapers={scrapers} onChange={fetch} />
+                    </Spinner>
+                  )}
+                </GetOrgResources>
               </TabbedPageSection>
             </TabbedPage>
           </div>