From fb7a3aa93b4b67ec4d7fd2bae4d29d575dd589fc Mon Sep 17 00:00:00 2001 From: Palak Bhojani Date: Wed, 20 Feb 2019 11:32:25 -0800 Subject: [PATCH] Add notifications for success/failed when creating/updating/deleting scrapers --- CHANGELOG.md | 1 + .../components/configureStep/Scraping.tsx | 19 +++++++++-- ui/src/organizations/components/Scrapers.tsx | 32 ++++++++++++++++--- .../containers/OrganizationView.tsx | 1 + ui/src/shared/copy/v2/notifications.ts | 30 +++++++++++++++++ 5 files changed, 76 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index aab10242a57..60e45d052ca 100644 --- a/CHANGELOG.md +++ b/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] diff --git a/ui/src/dataLoaders/components/configureStep/Scraping.tsx b/ui/src/dataLoaders/components/configureStep/Scraping.tsx index 6b6954c4a12..48a0db972d0 100644 --- a/ui/src/dataLoaders/components/configureStep/Scraping.tsx +++ b/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 { } 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( diff --git a/ui/src/organizations/components/Scrapers.tsx b/ui/src/organizations/components/Scrapers.tsx index d7cc64af893..f48556cb8cc 100644 --- a/ui/src/organizations/components/Scrapers.tsx +++ b/ui/src/organizations/components/Scrapers.tsx @@ -16,6 +16,9 @@ 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' @@ -23,12 +26,19 @@ import {ErrorHandling} from 'src/shared/decorators/errors' 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 { } 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): void => { diff --git a/ui/src/organizations/containers/OrganizationView.tsx b/ui/src/organizations/containers/OrganizationView.tsx index 2998f797516..543a6805b8a 100644 --- a/ui/src/organizations/containers/OrganizationView.tsx +++ b/ui/src/organizations/containers/OrganizationView.tsx @@ -132,6 +132,7 @@ class OrganizationView extends PureComponent { onChange={fetch} orgName={org.name} buckets={buckets} + notify={notify} /> )} diff --git a/ui/src/shared/copy/v2/notifications.ts b/ui/src/shared/copy/v2/notifications.ts index 58a9d5683b3..cee3895afa1 100644 --- a/ui/src/shared/copy/v2/notifications.ts +++ b/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}"`, +})