feat(services): filter routes/stream_routes by service_id (#3111)

* feat(services/routes): filter by `service_id`

* feat(services): filter stream_routes by service_id

* fix: type

Author: SkyeYoung

src/apis/hooks.ts

@@ -82,14 +82,16 @@ export const genUseList = <
   routeKey: T,
   listQueryOptions: ReturnType<typeof genListQueryOptions<P, R>>
 ) => {
-  return (replaceKey?: U) => {
+  return (replaceKey?: U, defaultParams?: Partial<P>) => {
     const key = replaceKey || routeKey;
     const { params, setParams } = useSearchParams<T | U, P>(key);
-    const listQuery = useSuspenseQuery(listQueryOptions(params));
+    const listQuery = useSuspenseQuery(
+      listQueryOptions({ ...defaultParams, ...params })
+    );
     const { data, isLoading, refetch } = listQuery;
     const opts = { data, setParams, params };
     const pagination = useTablePagination(opts);
-    return { data, isLoading, refetch, pagination };
+    return { data, isLoading, refetch, pagination, setParams };
   };
 };
 

src/apis/routes.ts

@@ -21,7 +21,13 @@ import { API_ROUTES, PAGE_SIZE_MAX, PAGE_SIZE_MIN } from '@/config/constant';
 import type { APISIXType } from '@/types/schema/apisix';
 import type { PageSearchType } from '@/types/schema/pageSearch';
 
-export const getRouteListReq = (req: AxiosInstance, params: PageSearchType) =>
+export type WithServiceIdFilter = PageSearchType & {
+  filter?: {
+    service_id?: string;
+  };
+};
+
+export const getRouteListReq = (req: AxiosInstance, params: WithServiceIdFilter) =>
   req
     .get<undefined, APISIXType['RespRouteList']>(API_ROUTES, { params })
     .then((v) => v.data);

src/apis/stream_routes.ts

@@ -20,9 +20,13 @@ import type { AxiosInstance } from 'axios';
 import type { StreamRoutePostType } from '@/components/form-slice/FormPartStreamRoute/schema';
 import { API_STREAM_ROUTES } from '@/config/constant';
 import type { APISIXType } from '@/types/schema/apisix';
-import type { PageSearchType } from '@/types/schema/pageSearch';
 
-export const getStreamRouteListReq = (req: AxiosInstance, params: PageSearchType) =>
+import type { WithServiceIdFilter } from './routes';
+
+export const getStreamRouteListReq = (
+  req: AxiosInstance,
+  params: WithServiceIdFilter
+) =>
   req
     .get<unknown, APISIXType['RespStreamRouteList']>(API_STREAM_ROUTES, {
       params,

src/config/req.ts

@@ -29,10 +29,16 @@ import { globalStore } from '@/stores/global';
 export const req = axios.create();
 
 req.interceptors.request.use((conf) => {
-  conf.paramsSerializer = (p) =>
-    stringify(p, {
+  conf.paramsSerializer = (p) => {
+    // from { filter: { service_id: 1 } }
+    // to `filter=service_id%3D1`
+    if (p.filter) {
+      p.filter = stringify(p.filter);
+    }
+    return stringify(p, {
       arrayFormat: 'repeat',
     });
+  };
   conf.baseURL = API_PREFIX;
   conf.headers.set(API_HEADER_KEY, globalStore.settings.adminKey);
   return conf;

src/routes/routes/index.tsx

@@ -21,6 +21,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getRouteListQueryOptions, useRouteList } from '@/apis/hooks';
+import type { WithServiceIdFilter } from '@/apis/routes';
 import { DeleteResourceBtn } from '@/components/page/DeleteResourceBtn';
 import PageHeader from '@/components/page/PageHeader';
 import { ToAddPageBtn, ToDetailPageBtn } from '@/components/page/ToAddPageBtn';
@@ -33,14 +34,18 @@ import type { ListPageKeys } from '@/utils/useTablePagination';
 
 export type RouteListProps = {
   routeKey: Extract<ListPageKeys, '/routes/' | '/services/detail/$id/routes/'>;
+  defaultParams?: Partial<WithServiceIdFilter>;
   ToDetailBtn: (props: {
     record: APISIXType['RespRouteItem'];
   }) => React.ReactNode;
 };
 
 export const RouteList = (props: RouteListProps) => {
-  const { routeKey, ToDetailBtn } = props;
-  const { data, isLoading, refetch, pagination } = useRouteList(routeKey);
+  const { routeKey, ToDetailBtn, defaultParams } = props;
+  const { data, isLoading, refetch, pagination } = useRouteList(
+    routeKey,
+    defaultParams
+  );
   const { t } = useTranslation();
 
   const columns = useMemo<ProColumns<APISIXType['RespRouteItem']>[]>(() => {

src/routes/services/detail.$id/routes/index.tsx

@@ -32,6 +32,11 @@ function RouteComponent() {
       <PageHeader title={t('sources.routes')} />
       <RouteList
         routeKey="/services/detail/$id/routes/"
+        defaultParams={{
+          filter: {
+            service_id: id,
+          },
+        }}
         ToDetailBtn={({ record }) => (
           <ToDetailPageBtn
             key="detail"

src/routes/services/detail.$id/stream_routes/index.tsx

@@ -39,6 +39,11 @@ function StreamRouteComponent() {
             params={{ id, routeId: record.value.id }}
           />
         )}
+        defaultParams={{
+          filter: {
+            service_id: id,
+          },
+        }}
       />
     </>
   );

src/routes/stream_routes/index.tsx

@@ -21,6 +21,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getStreamRouteListQueryOptions, useStreamRouteList } from '@/apis/hooks';
+import type { WithServiceIdFilter } from '@/apis/routes';
 import { DeleteResourceBtn } from '@/components/page/DeleteResourceBtn';
 import PageHeader from '@/components/page/PageHeader';
 import { ToAddPageBtn, ToDetailPageBtn } from '@/components/page/ToAddPageBtn';
@@ -39,11 +40,15 @@ export type StreamRouteListProps = {
   ToDetailBtn: (props: {
     record: APISIXType['RespStreamRouteItem'];
   }) => React.ReactNode;
+  defaultParams?: Partial<WithServiceIdFilter>;
 };
 
 export const StreamRouteList = (props: StreamRouteListProps) => {
-  const { routeKey, ToDetailBtn } = props;
-  const { data, isLoading, refetch, pagination } = useStreamRouteList(routeKey);
+  const { routeKey, ToDetailBtn, defaultParams } = props;
+  const { data, isLoading, refetch, pagination } = useStreamRouteList(
+    routeKey,
+    defaultParams
+  );
   const { t } = useTranslation();
 
   const columns = useMemo<