Update telegraf to display notifications for update/delete

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}
                   />

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}

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

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 => {

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 => {

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}

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}"`,
+})

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}
       />