feat(services): filter stream_routes by service_id

Author: SkyeYoung

src/apis/routes.ts

@@ -21,15 +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 type GetRouteListReqParams = PageSearchType & {
+export type WithServiceIdFilter = PageSearchType & {
   filter?: {
     service_id?: string;
   };
 };
-export const getRouteListReq = (
-  req: AxiosInstance,
-  params: GetRouteListReqParams
-) =>
+
+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/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<