feat(ui/fluxTasks): use filter from URL and pass it through view pages

ui/src/kapacitor/components/FluxTasksTable.tsx

@@ -13,6 +13,7 @@ interface FluxTasksTableProps {
   kapacitorLink: string
   onChangeTaskStatus: (task: FluxTask) => void
   onDelete: (task: FluxTask) => void
+  editLinkSuffix?: string
 }
 
 interface FluxTaskRowProps {
@@ -63,6 +64,7 @@ const FluxTasksTable: FC<FluxTasksTableProps> = ({
   kapacitorLink,
   onDelete,
   onChangeTaskStatus,
+  editLinkSuffix = '',
 }) => {
   if (!tasks) {
     return null
@@ -85,7 +87,7 @@ const FluxTasksTable: FC<FluxTasksTableProps> = ({
           return (
             <FluxTaskRow
               key={task.id}
-              viewLink={`${kapacitorLink}/fluxtasks/${task.id}`}
+              viewLink={`${kapacitorLink}/fluxtasks/${task.id}${editLinkSuffix}`}
               task={task}
               onDelete={onDelete}
               onChangeTaskStatus={onChangeTaskStatus}

ui/src/kapacitor/containers/FluxTaskPage.tsx

@@ -37,6 +37,7 @@ interface Props {
   params: Params
   router: {
     push: (path: string) => void
+    location: {search: string}
   }
 }
 
@@ -291,7 +292,9 @@ const FluxTaskPage: FC<Props> = ({source, params: {taskID, kid}, router}) => {
             className="btn btn-default btn-sm"
             title="Return to Flux Tasks"
             onClick={() => {
-              router.push(`/sources/${source.id}/flux-tasks`)
+              router.push(
+                `/sources/${source.id}/flux-tasks${router.location.search}`
+              )
             }}
           >
             Exit

ui/src/kapacitor/containers/FluxTasksPage.tsx

@@ -24,9 +24,11 @@ import {isCancellationError} from 'src/types/promises'
 const Contents = ({
   kapacitor,
   source,
+  filter: filterInit = '',
 }: {
   kapacitor: Kapacitor
   source: Source
+  filter?: string
 }) => {
   const [loading, setLoading] = useState(true)
   const [reloadRequired, setReloadRequired] = useState(0)
@@ -62,7 +64,7 @@ const Contents = ({
     fetchData()
     return () => ac.abort()
   }, [kapacitor, reloadRequired])
-  const [nameFilter, setNameFilter] = useState('')
+  const [nameFilter, setNameFilter] = useState(filterInit)
   const filter = useDebounce(nameFilter)
   const list = useMemo(() => {
     if (allList && allList.length && filter) {
@@ -122,6 +124,7 @@ const Contents = ({
           <FluxTasksTable
             kapacitorLink={`/sources/${source.id}/kapacitors/${kapacitor.id}`}
             tasks={list}
+            editLinkSuffix={`?filter=${encodeURIComponent(filter)}`}
             onDelete={(task: FluxTask) => {
               deleteFluxTask(kapacitor, task)
                 .then(() => {
@@ -157,11 +160,26 @@ const Contents = ({
   )
 }
 
-const FluxTasksPage = ({source: src}: {source: Source}) => {
+interface Props {
+  source: Source
+  router: {
+    location: {
+      query?: Record<string, string>
+    }
+  }
+}
+const FluxTasksPage = ({
+  source: src,
+  router: {
+    location: {
+      query: {filter},
+    },
+  },
+}: Props) => {
   return (
     <KapacitorScopedPage source={src} title="Manage Flux Tasks">
       {(kapacitor: Kapacitor, source: Source) => (
-        <Contents kapacitor={kapacitor} source={source} />
+        <Contents kapacitor={kapacitor} source={source} filter={filter} />
       )}
     </KapacitorScopedPage>
   )