From f200db59fbf4813ebf13bb48b19bc804197c3326 Mon Sep 17 00:00:00 2001
From: Palak Bhojani <palak@influxdata.com>
Date: Wed, 27 Feb 2019 13:01:39 -0800
Subject: [PATCH] Update telegraf to display notifications for update/delete

---
 .../dashboard_index/DashboardsIndex.tsx       |  2 +-
 ui/src/organizations/components/Buckets.tsx   |  2 +-
 .../components/CollectorList.tsx              |  2 +-
 .../organizations/components/CollectorRow.tsx |  4 +--
 .../organizations/components/Collectors.tsx   | 32 +++++++++++++++----
 ui/src/organizations/components/Scrapers.tsx  |  2 +-
 ui/src/shared/copy/v2/notifications.ts        | 20 ++++++++++++
 ui/src/tasks/components/TasksHeader.tsx       |  2 +-
 8 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx b/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
index a355688930..c8fc747875 100644
--- a/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
+++ b/ui/src/dashboards/components/dashboard_index/DashboardsIndex.tsx
@@ -126,7 +126,7 @@ class DashboardIndex extends PureComponent<Props, State> {
               <DashboardsIndexContents
                 filterComponent={() => (
                   <SearchWidget
-                    placeholderText="Filter dashboards by name..."
+                    placeholderText="Filter dashboards..."
                     onSearch={this.handleFilterDashboards}
                     searchTerm={searchTerm}
                   />
diff --git a/ui/src/organizations/components/Buckets.tsx b/ui/src/organizations/components/Buckets.tsx
index 51a5928f89..3f71a1702d 100644
--- a/ui/src/organizations/components/Buckets.tsx
+++ b/ui/src/organizations/components/Buckets.tsx
@@ -74,7 +74,7 @@ export default class Buckets extends PureComponent<Props, State> {
         <Tabs.TabContentsHeader>
           <Input
             icon={IconFont.Search}
-            placeholder="Filter Buckets..."
+            placeholder="Filter buckets..."
             widthPixels={290}
             value={searchTerm}
             onChange={this.handleFilterChange}
diff --git a/ui/src/organizations/components/CollectorList.tsx b/ui/src/organizations/components/CollectorList.tsx
index 34c7f4467e..f488bfd20c 100644
--- a/ui/src/organizations/components/CollectorList.tsx
+++ b/ui/src/organizations/components/CollectorList.tsx
@@ -13,7 +13,7 @@ import {getDeep} from 'src/utils/wrappers'
 interface Props {
   collectors: Telegraf[]
   emptyState: JSX.Element
-  onDelete: (telegrafID: string) => void
+  onDelete: (telegraf: Telegraf) => void
   onUpdate: (telegraf: Telegraf) => void
   onOpenInstructions: (telegrafID: string) => void
   onOpenTelegrafConfig: (telegrafID: string, telegrafName: string) => void
diff --git a/ui/src/organizations/components/CollectorRow.tsx b/ui/src/organizations/components/CollectorRow.tsx
index a5a1ecfc57..83fd2fa11a 100644
--- a/ui/src/organizations/components/CollectorRow.tsx
+++ b/ui/src/organizations/components/CollectorRow.tsx
@@ -24,7 +24,7 @@ import {DEFAULT_COLLECTOR_NAME} from 'src/dashboards/constants'
 interface Props {
   collector: Telegraf
   bucket: string
-  onDelete: (telegrafID: string) => void
+  onDelete: (telegraf: Telegraf) => void
   onUpdate: (telegraf: Telegraf) => void
   onOpenInstructions: (telegrafID: string) => void
   onOpenTelegrafConfig: (telegrafID: string, telegrafName: string) => void
@@ -99,7 +99,7 @@ export default class CollectorRow extends PureComponent<Props> {
   }
 
   private handleDeleteConfig = (): void => {
-    this.props.onDelete(this.props.collector.id)
+    this.props.onDelete(this.props.collector)
   }
 
   private handleOpenInstructions = (): void => {
diff --git a/ui/src/organizations/components/Collectors.tsx b/ui/src/organizations/components/Collectors.tsx
index 9ddd4cb5aa..ebffe4853f 100644
--- a/ui/src/organizations/components/Collectors.tsx
+++ b/ui/src/organizations/components/Collectors.tsx
@@ -39,6 +39,12 @@ import {
   clearDataLoaders,
 } from 'src/dataLoaders/actions/dataLoaders'
 import {DataLoaderType} from 'src/types/v2/dataLoaders'
+import {
+  telegrafUpdateSuccess,
+  telegrafUpdateFailed,
+  telegrafDeleteSuccess,
+  telegrafDeleteFailed,
+} from 'src/shared/copy/v2/notifications'
 
 interface OwnProps {
   collectors: Telegraf[]
@@ -89,7 +95,7 @@ export class Collectors extends PureComponent<Props, State> {
         <Tabs.TabContentsHeader>
           <Input
             icon={IconFont.Search}
-            placeholder="Filter telegraf configs by bucket..."
+            placeholder="Filter telegraf configs..."
             widthPixels={290}
             value={searchTerm}
             type={InputType.Text}
@@ -248,14 +254,28 @@ export class Collectors extends PureComponent<Props, State> {
     )
   }
 
-  private handleDeleteTelegraf = async (telegrafID: string) => {
-    await client.telegrafConfigs.delete(telegrafID)
-    this.props.onChange()
+  private handleDeleteTelegraf = async (telegraf: Telegraf) => {
+    const {onChange, notify} = this.props
+    try {
+      await client.telegrafConfigs.delete(telegraf.id)
+      onChange()
+      notify(telegrafDeleteSuccess(telegraf.name))
+    } catch (e) {
+      console.error(e)
+      notify(telegrafDeleteFailed(telegraf.name))
+    }
   }
 
   private handleUpdateTelegraf = async (telegraf: Telegraf) => {
-    await client.telegrafConfigs.update(telegraf.id, telegraf)
-    this.props.onChange()
+    const {onChange, notify} = this.props
+    try {
+      await client.telegrafConfigs.update(telegraf.id, telegraf)
+      onChange()
+      notify(telegrafUpdateSuccess(telegraf.name))
+    } catch (e) {
+      console.error(e)
+      notify(telegrafUpdateFailed(telegraf.name))
+    }
   }
 
   private handleFilterChange = (e: ChangeEvent<HTMLInputElement>): void => {
diff --git a/ui/src/organizations/components/Scrapers.tsx b/ui/src/organizations/components/Scrapers.tsx
index d154ef46cf..212fb5871c 100644
--- a/ui/src/organizations/components/Scrapers.tsx
+++ b/ui/src/organizations/components/Scrapers.tsx
@@ -67,7 +67,7 @@ export default class Scrapers extends PureComponent<Props, State> {
         <Tabs.TabContentsHeader>
           <Input
             icon={IconFont.Search}
-            placeholder="Filter scrapers by bucket..."
+            placeholder="Filter scrapers..."
             widthPixels={290}
             value={searchTerm}
             type={InputType.Text}
diff --git a/ui/src/shared/copy/v2/notifications.ts b/ui/src/shared/copy/v2/notifications.ts
index d6c07850d6..b01bdb01a0 100644
--- a/ui/src/shared/copy/v2/notifications.ts
+++ b/ui/src/shared/copy/v2/notifications.ts
@@ -185,3 +185,23 @@ export const scraperUpdateFailed = (scraperName: string): Notification => ({
   ...defaultErrorNotification,
   message: `Failed to update scraper: "${scraperName}"`,
 })
+
+export const telegrafUpdateSuccess = (telegrafName: string): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Telegraf "${telegrafName}" was updated successfully`,
+})
+
+export const telegrafUpdateFailed = (telegrafName: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to update telegraf: "${telegrafName}"`,
+})
+
+export const telegrafDeleteSuccess = (telegrafName: string): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Telegraf "${telegrafName}" was deleted successfully`,
+})
+
+export const telegrafDeleteFailed = (telegrafName: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to delete telegraf: "${telegrafName}"`,
+})
diff --git a/ui/src/tasks/components/TasksHeader.tsx b/ui/src/tasks/components/TasksHeader.tsx
index fdb1f0dc65..30b96d3c5e 100644
--- a/ui/src/tasks/components/TasksHeader.tsx
+++ b/ui/src/tasks/components/TasksHeader.tsx
@@ -100,7 +100,7 @@ export default class TasksHeader extends PureComponent<Props> {
 
     return (
       <SearchWidget
-        placeholderText="Filter tasks by name..."
+        placeholderText="Filter tasks..."
         onSearch={setSearchTerm}
         searchTerm={searchTerm}
       />