Add notifications for success/failed when creating/updating/deleting …

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 ### UI Improvements
 1. [12016](https://github.com/influxdata/influxdb/pull/12016): Update the preview in the label overlays to be shorter
+1. [12012](https://github.com/influxdata/influxdb/pull/12012): Add notifications to scrapers page for created/deleted/failed scrapers 
 
 ## v2.0.0-alpha.3 [2019-02-15]
 

ui/src/dataLoaders/components/configureStep/Scraping.tsx

@@ -17,10 +17,15 @@ import {
   saveScraperTarget,
 } from 'src/dataLoaders/actions/dataLoaders'
 import {setBucketInfo} from 'src/dataLoaders/actions/steps'
+import {notify as notifyAction, notify} from 'src/shared/actions/notifications'
 
 // Types
 import {Bucket} from '@influxdata/influx'
 import {AppState} from 'src/types/v2/index'
+import {
+  scraperCreateSuccess,
+  scraperCreateFailed,
+} from 'src/shared/copy/v2/notifications'
 
 interface OwnProps {
   onClickNext: () => void
@@ -33,6 +38,7 @@ interface DispatchProps {
   onSetScraperTargetName: typeof setScraperTargetName
   onSaveScraperTarget: typeof saveScraperTarget
   onSetBucketInfo: typeof setBucketInfo
+  notify: typeof notifyAction
 }
 
 interface StateProps {
@@ -122,9 +128,15 @@ export class Scraping extends PureComponent<Props> {
   }
 
   private handleSubmit = async () => {
-    const {onSaveScraperTarget, onClickNext} = this.props
-    await onSaveScraperTarget()
-    onClickNext()
+    try {
+      const {onSaveScraperTarget, onClickNext, notify} = this.props
+      await onSaveScraperTarget()
+      onClickNext()
+      notify(scraperCreateSuccess())
+    } catch (e) {
+      console.error(e)
+      notify(scraperCreateFailed())
+    }
   }
 }
 
@@ -148,6 +160,7 @@ const mdtp: DispatchProps = {
   onSaveScraperTarget: saveScraperTarget,
   onSetBucketInfo: setBucketInfo,
   onSetScraperTargetName: setScraperTargetName,
+  notify: notifyAction,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(

ui/src/organizations/components/Scrapers.tsx

@@ -16,19 +16,29 @@ import {
 import {EmptyState, Input, InputType, Tabs} from 'src/clockface'
 import DataLoadersWizard from 'src/dataLoaders/components/DataLoadersWizard'
 
+// Actions
+import * as NotificationsActions from 'src/types/actions/notifications'
+
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Types
 import {ScraperTargetResponse, Bucket} from '@influxdata/influx'
 import {OverlayState} from 'src/types'
 import {DataLoaderType, DataLoaderStep} from 'src/types/v2/dataLoaders'
+import {
+  scraperDeleteSuccess,
+  scraperDeleteFailed,
+  scraperUpdateSuccess,
+  scraperUpdateFailed,
+} from 'src/shared/copy/v2/notifications'
 
 interface Props {
   scrapers: ScraperTargetResponse[]
   onChange: () => void
   orgName: string
   buckets: Bucket[]
+  notify: NotificationsActions.PublishNotificationActionCreator
 }
 
 interface State {
@@ -160,13 +170,27 @@ export default class Scrapers extends PureComponent<Props, State> {
   }
 
   private handleUpdateScraper = async (scraper: ScraperTargetResponse) => {
-    await client.scrapers.update(scraper.id, scraper)
-    this.props.onChange()
+    const {onChange, notify} = this.props
+    try {
+      await client.scrapers.update(scraper.id, scraper)
+      onChange()
+      notify(scraperUpdateSuccess(scraper.name))
+    } catch (e) {
+      console.error(e)
+      notify(scraperUpdateFailed(scraper.name))
+    }
   }
 
   private handleDeleteScraper = async (scraper: ScraperTargetResponse) => {
-    await client.scrapers.delete(scraper.id)
-    this.props.onChange()
+    const {onChange, notify} = this.props
+    try {
+      await client.scrapers.delete(scraper.id)
+      onChange()
+      notify(scraperDeleteSuccess(scraper.name))
+    } catch (e) {
+      notify(scraperDeleteFailed(scraper.name))
+      console.error(e)
+    }
   }
 
   private handleFilterChange = (e: ChangeEvent<HTMLInputElement>): void => {

ui/src/organizations/containers/OrganizationView.tsx

@@ -132,6 +132,7 @@ class OrganizationView extends PureComponent<Props> {
                                 onChange={fetch}
                                 orgName={org.name}
                                 buckets={buckets}
+                                notify={notify}
                               />
                             </SpinnerContainer>
                           )}

ui/src/shared/copy/v2/notifications.ts

@@ -124,3 +124,33 @@ export const bucketDeleted = (bucketName: string): Notification => ({
   ...defaultSuccessNotification,
   message: `Bucket ${bucketName} was successfully deleted`,
 })
+
+export const scraperDeleteSuccess = (scraperName: string): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Scraper "${scraperName}" was successfully deleted`,
+})
+
+export const scraperDeleteFailed = (scraperName: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to delete scraper: "${scraperName}"`,
+})
+
+export const scraperCreateSuccess = (): Notification => ({
+  ...defaultSuccessNotification,
+  message: 'Scraper was created successfully',
+})
+
+export const scraperCreateFailed = (): Notification => ({
+  ...defaultErrorNotification,
+  message: 'Failed to create scraper',
+})
+
+export const scraperUpdateSuccess = (scraperName: string): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Scraper "${scraperName}" was updated successfully`,
+})
+
+export const scraperUpdateFailed = (scraperName: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to update scraper: "${scraperName}"`,
+})