feat: add agent filter counts (#17984)

web/src/hooks/use-agent-request.ts

@@ -50,6 +50,7 @@ export const enum AgentApiAction {
   FetchAgentListByPage = 'fetchAgentListByPage',
   FetchAllAgentList = 'fetchAllAgentList',
   FetchAgentList = 'fetchAgentList',
+  FetchAgentFilters = 'fetchAgentFilters',
   UpdateAgentSetting = 'updateAgentSetting',
   DeleteAgent = 'deleteAgent',
   FetchAgentDetail = 'fetchAgentDetail',
@@ -84,9 +85,27 @@ export const enum AgentApiAction {
   FetchBuiltinPipelineDetail = 'fetchBuiltinPipelineDetail',
 }
 
+const AgentKeys = {
+  templates: () => [AgentApiAction.FetchAgentTemplates] as const,
+  list: (params?: unknown) =>
+    params === undefined
+      ? ([AgentApiAction.FetchAgentListByPage] as const)
+      : ([AgentApiAction.FetchAgentListByPage, params] as const),
+  all: () => [AgentApiAction.FetchAllAgentList] as const,
+  listAll: (canvasCategory?: string) =>
+    [AgentApiAction.FetchAgentList, canvasCategory] as const,
+  filters: () => [AgentApiAction.FetchAgentFilters] as const,
+  tags: (canvasCategory?: string) =>
+    canvasCategory === undefined
+      ? ([AgentApiAction.FetchAgentTags] as const)
+      : ([AgentApiAction.FetchAgentTags, canvasCategory] as const),
+  detail: (agentId?: string) =>
+    [AgentApiAction.FetchAgentDetail, agentId] as const,
+};
+
 export const useFetchAgentTemplates = () => {
   const { data } = useQuery<IFlowTemplate[]>({
-    queryKey: [AgentApiAction.FetchAgentTemplates],
+    queryKey: AgentKeys.templates(),
     initialData: [],
     queryFn: async () => {
       const { data } = await agentService.listAgentTemplate();
@@ -158,14 +177,11 @@ export const useFetchAgentListByPage = () => {
     canvas: AgentListItem[];
     total: number;
   }>({
-    queryKey: [
-      AgentApiAction.FetchAgentListByPage,
-      {
-        debouncedSearchString,
-        ...pagination,
-        filterValue,
-      },
-    ],
+    queryKey: AgentKeys.list({
+      debouncedSearchString,
+      ...pagination,
+      filterValue,
+    }),
     placeholderData: (previousData) => {
       if (previousData === undefined) {
         return { canvas: [], total: 0 };
@@ -207,7 +223,7 @@ export const useFetchAgentListByPage = () => {
 
 export function useFetchAllAgentList() {
   const { data, isFetching: loading } = useQuery<AgentListItem[]>({
-    queryKey: [AgentApiAction.FetchAllAgentList],
+    queryKey: AgentKeys.all(),
     queryFn: async () => {
       const { data } = await agentService.listAgents(
         {
@@ -246,7 +262,7 @@ export const useUpdateAgentSetting = () => {
       if (ret?.data?.code === 0) {
         message.success('success');
         queryClient.invalidateQueries({
-          queryKey: [AgentApiAction.FetchAgentListByPage],
+          queryKey: AgentKeys.list(),
         });
       }
       return ret?.data?.code;
@@ -288,7 +304,10 @@ export const useDuplicateAgent = () => {
         if (data?.code === 0) {
           message.success(i18n.t('message.created'));
           queryClient.invalidateQueries({
-            queryKey: [AgentApiAction.FetchAgentListByPage],
+            queryKey: AgentKeys.list(),
+          });
+          queryClient.invalidateQueries({
+            queryKey: AgentKeys.filters(),
           });
           return data;
         }
@@ -321,7 +340,10 @@ export const useDeleteAgent = () => {
       const { data } = await agentService.deleteAgent(agentId);
       if (data.code === 0) {
         queryClient.invalidateQueries({
-          queryKey: [AgentApiAction.FetchAgentListByPage],
+          queryKey: AgentKeys.list(),
+        });
+        queryClient.invalidateQueries({
+          queryKey: AgentKeys.filters(),
         });
       }
       return data?.data ?? false;
@@ -338,7 +360,7 @@ export interface IAgentTagCount {
 
 export const useFetchAgentTags = (canvasCategory?: string) => {
   const { data, isFetching: loading } = useQuery<IAgentTagCount[]>({
-    queryKey: [AgentApiAction.FetchAgentTags, canvasCategory],
+    queryKey: AgentKeys.tags(canvasCategory),
     initialData: [],
     gcTime: 0,
     queryFn: async () => {
@@ -368,10 +390,10 @@ export const useUpdateAgentTags = () => {
       const { data } = await updateAgentTags(agentId, tags);
       if (data?.code === 0) {
         queryClient.invalidateQueries({
-          queryKey: [AgentApiAction.FetchAgentListByPage],
+          queryKey: AgentKeys.list(),
         });
         queryClient.invalidateQueries({
-          queryKey: [AgentApiAction.FetchAgentTags],
+          queryKey: AgentKeys.tags(),
         });
       } else {
         message.error(data?.message || 'Update failed');
@@ -395,7 +417,7 @@ export const useFetchAgent = (): {
     isFetching: loading,
     refetch,
   } = useQuery({
-    queryKey: [AgentApiAction.FetchAgentDetail, sharedId || id],
+    queryKey: AgentKeys.detail(sharedId || id),
     initialData: {} as IFlow,
     refetchOnReconnect: false,
     refetchOnMount: false,
@@ -484,11 +506,16 @@ export const useSetAgent = (
           );
         }
         queryClient.invalidateQueries({
-          queryKey: [AgentApiAction.FetchAgentListByPage],
+          queryKey: AgentKeys.list(),
         });
+        if (!agentId) {
+          queryClient.invalidateQueries({
+            queryKey: AgentKeys.filters(),
+          });
+        }
         if (agentId && !skipInvalidation) {
           queryClient.invalidateQueries({
-            queryKey: [AgentApiAction.FetchAgentDetail, agentId],
+            queryKey: AgentKeys.detail(agentId),
           });
         }
       }
@@ -860,7 +887,7 @@ export const useFetchAgentList = ({
     canvas: AgentListItem[];
     total: number;
   }>({
-    queryKey: [AgentApiAction.FetchAgentList],
+    queryKey: AgentKeys.listAll(canvas_category),
     initialData: { canvas: [], total: 0 },
     gcTime: 0,
     queryFn: async () => {
@@ -875,6 +902,42 @@ export const useFetchAgentList = ({
   return { data, loading };
 };
 
+export interface IAgentOwnerFilter {
+  id: string;
+  label: string;
+  count: number;
+}
+
+export interface IAgentCategoryFilter {
+  id: string;
+  count: number;
+}
+
+export const useFetchAgentFilters = () => {
+  const { data, isFetching: loading } = useQuery<{
+    filter: {
+      owner: IAgentOwnerFilter[];
+      canvas_category: IAgentCategoryFilter[];
+    };
+    total: number;
+  }>({
+    queryKey: AgentKeys.filters(),
+    initialData: { filter: { owner: [], canvas_category: [] }, total: 0 },
+    gcTime: 0,
+    queryFn: async () => {
+      const { data } = await agentService.listAgents(
+        { params: { type: 'filter' } },
+        true,
+      );
+      return (
+        data?.data ?? { filter: { owner: [], canvas_category: [] }, total: 0 }
+      );
+    },
+  });
+
+  return { data: data.filter, loading };
+};
+
 export const BuiltinPipelineKeys = {
   list: (type: string) =>
     [AgentApiAction.FetchBuiltinPipelineList, type] as const,

web/src/pages/agents/hooks/use-select-filters.ts

@@ -1,30 +1,18 @@
 import { FilterCollection } from '@/components/list-filter-bar/interface';
 import { AgentCategory } from '@/constants/agent';
 import {
-  useFetchAgentList,
+  useFetchAgentFilters,
   useFetchAgentTags,
 } from '@/hooks/use-agent-request';
-import { AgentListItemType, IFlow } from '@/interfaces/database/agent';
-import { buildOwnersFilter } from '@/utils/list-filter-util';
+import { AgentListItemType } from '@/interfaces/database/agent';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export function useSelectFilters() {
   const { t } = useTranslation();
-  const { data } = useFetchAgentList({});
+  const { data: agentFilters } = useFetchAgentFilters();
   const { data: tagCounts } = useFetchAgentTags();
 
-  // The merged /agents list also contains compilation template groups, which
-  // have no owner fields — drop them before building the owner filter.
-  const agents = useMemo(() => {
-    const canvas = (data?.canvas ?? []) as Array<
-      IFlow & { type?: AgentListItemType }
-    >;
-    return canvas.filter(
-      (x) => x.type !== AgentListItemType.CompilationTemplateGroup,
-    );
-  }, [data?.canvas]);
-
   const tagList = useMemo(
     () =>
       (tagCounts ?? []).map((t) => ({
@@ -36,21 +24,37 @@ export function useSelectFilters() {
   );
 
   const filters: FilterCollection[] = [
-    buildOwnersFilter(agents, undefined, t('common.owner')),
+    {
+      field: 'owner',
+      list: agentFilters.owner,
+      label: t('common.owner'),
+    },
     {
       field: 'canvasCategory',
       list: [
         {
           id: AgentCategory.DataflowCanvas,
           label: t('flow.tabList.ingestionPipeline'),
+          count:
+            agentFilters.canvas_category.find(
+              (item) => item.id === AgentCategory.DataflowCanvas,
+            )?.count ?? 0,
         },
         {
           id: AgentListItemType.CompilationTemplateGroup,
           label: t('flow.tabList.compilationOperator'),
+          count:
+            agentFilters.canvas_category.find(
+              (item) => item.id === AgentListItemType.CompilationTemplateGroup,
+            )?.count ?? 0,
         },
         {
           id: AgentCategory.AgentCanvas,
           label: t('flow.tabList.workflow'),
+          count:
+            agentFilters.canvas_category.find(
+              (item) => item.id === AgentCategory.AgentCanvas,
+            )?.count ?? 0,
         },
       ],
       label: t('flow.canvasCategory'),