Add ability to delete a scraper from an organization

ui/src/organizations/apis/index.ts

@@ -207,6 +207,7 @@ export const deleteTelegrafConfig = async (
   }
 }
 
+// Scrapers
 export const getScrapers = async (): Promise<ScraperTargetResponses> => {
   try {
     const response = await scraperTargetsApi.scrapertargetsGet()
@@ -216,3 +217,11 @@ export const getScrapers = async (): Promise<ScraperTargetResponses> => {
     console.error(error)
   }
 }
+
+export const deleteScraper = async (scraperTargetID: string): Promise<void> => {
+  try {
+    await scraperTargetsApi.scrapertargetsScraperTargetIDDelete(scraperTargetID)
+  } catch (error) {
+    console.error(error)
+  }
+}

ui/src/organizations/components/ScraperList.tsx

@@ -5,18 +5,22 @@ import React, {PureComponent} from 'react'
 import {IndexList} from 'src/clockface'
 import ScraperRow from 'src/organizations/components/ScraperRow'
 
-// DummyData
+// Types
 import {ScraperTargetResponses, ScraperTargetResponse} from 'src/api'
+
+// Utils
 import {getDeep} from 'src/utils/wrappers'
 
 interface Props {
   scrapers: ScraperTargetResponses
   emptyState: JSX.Element
+  onDeleteScraper: (scraper) => void
 }
 
-export default class BucketList extends PureComponent<Props> {
+export default class ScraperList extends PureComponent<Props> {
   public render() {
     const {emptyState} = this.props
+
     return (
       <>
         <IndexList>
@@ -31,8 +35,9 @@ export default class BucketList extends PureComponent<Props> {
       </>
     )
   }
+
   public get scrapersList(): JSX.Element[] {
-    const {scrapers} = this.props
+    const {scrapers, onDeleteScraper} = this.props
     const scraperTargets = getDeep<ScraperTargetResponse[]>(
       scrapers,
       'scraper_targets',
@@ -41,7 +46,11 @@ export default class BucketList extends PureComponent<Props> {
 
     if (scraperTargets !== undefined) {
       return scraperTargets.map(scraper => (
-        <ScraperRow key={scraper.id} scraper={scraper} />
+        <ScraperRow
+          key={scraper.id}
+          scraper={scraper}
+          onDeleteScraper={onDeleteScraper}
+        />
       ))
     }
     return

ui/src/organizations/components/ScraperRow.tsx

@@ -12,11 +12,12 @@ import {ScraperTargetResponse} from 'src/api'
 
 interface Props {
   scraper: ScraperTargetResponse
+  onDeleteScraper: (scraper) => void
 }
 
-export default class BucketRow extends PureComponent<Props> {
+export default class ScraperRow extends PureComponent<Props> {
   public render() {
-    const {scraper} = this.props
+    const {scraper, onDeleteScraper} = this.props
     return (
       <>
         <IndexList.Row>
@@ -27,6 +28,8 @@ export default class BucketRow extends PureComponent<Props> {
               size={ComponentSize.ExtraSmall}
               text="Delete"
               confirmText="Confirm"
+              returnValue={scraper}
+              onConfirm={onDeleteScraper}
             />
           </IndexList.Cell>
         </IndexList.Row>

ui/src/organizations/components/Scrapers.tsx

@@ -1,10 +1,12 @@
 // Libraries
 import React, {PureComponent} from 'react'
 
+// APIs
+import {deleteScraper} from 'src/organizations/apis/index'
+
 // Components
 import TabbedPageHeader from 'src/shared/components/tabbed_page/TabbedPageHeader'
 import ScraperList from 'src/organizations/components/ScraperList'
-
 import {
   Button,
   ComponentColor,
@@ -15,11 +17,12 @@ import {
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {ScraperTargetResponses} from 'src/api'
+import {ScraperTargetResponses, ScraperTargetResponse} from 'src/api'
 
 interface Props {
   scrapers: ScraperTargetResponses
   onChange: () => void
+  orgName: string
 }
 
 @ErrorHandling
@@ -36,15 +39,33 @@ export default class OrgOptions extends PureComponent<Props> {
             color={ComponentColor.Primary}
           />
         </TabbedPageHeader>
-        <ScraperList scrapers={scrapers} emptyState={this.emptyState} />
+        <ScraperList
+          scrapers={scrapers}
+          emptyState={this.emptyState}
+          onDeleteScraper={this.handleDeleteScraper}
+        />
       </>
     )
   }
+
   private get emptyState(): JSX.Element {
+    const {orgName} = this.props
     return (
       <EmptyState size={ComponentSize.Medium}>
-        <EmptyState.Text text="No Scrapers match your query" />
+        <EmptyState.Text
+          text={`${orgName} does not own any scrapers, why not create one?`}
+        />
+        <Button
+          text="Create Scraper"
+          icon={IconFont.Plus}
+          color={ComponentColor.Primary}
+        />
       </EmptyState>
     )
   }
+
+  private handleDeleteScraper = async (scraper: ScraperTargetResponse) => {
+    await deleteScraper(scraper.id)
+    this.props.onChange()
+  }
 }

ui/src/organizations/containers/OrganizationView.tsx

@@ -176,7 +176,11 @@ class OrganizationView extends PureComponent<Props> {
                 >
                   {(scrapers, loading, fetch) => (
                     <Spinner loading={loading}>
-                      <Scrapers scrapers={scrapers} onChange={fetch} />
+                      <Scrapers
+                        scrapers={scrapers}
+                        onChange={fetch}
+                        orgName={org.name}
+                      />
                     </Spinner>
                   )}
                 </GetOrgResources>