feat: add search filter for routes in the route management page (higr…

…ess-group#423)

frontend/src/locales/en-US/translation.json

@@ -466,6 +466,7 @@
     "editRoute": "Edit Route",
     "deleteConfirmation": "Are you sure you want to delete <1>{{currentRouteName}}</1>?",
     "noCustomIngresses": "Note: Only routes created from the console are listed above.",
+    "routeSearchPlaceholder": "Search routes by route name, domain, routing conditions and target service.",
     "factorGroup": {
       "columns": {
         "key": "Key",

frontend/src/locales/zh-CN/translation.json

@@ -465,6 +465,7 @@
     "editRoute": "编辑路由",
     "deleteConfirmation": "确定删除 <1>{{currentRouteName}}</1> 吗？",
     "noCustomIngresses": "注：列表中仅包含通过控制台页面创建的路由配置。",
+    "routeSearchPlaceholder": "根据路由名称、域名、路由条件和目标服务搜索路由",
     "factorGroup": {
       "columns": {
         "key": "Key",
@@ -605,4 +606,4 @@
     "isRequired": "是必填的",
     "invalidSchema": "由于 schema 信息无法正常解析，本插件只支持 YAML 编辑方式。"
   }
-}
+}

frontend/src/pages/route/index.tsx

@@ -10,11 +10,12 @@ import { addGatewayRoute, deleteGatewayRoute, getGatewayRoutes, updateGatewayRou
 import store from '@/store';
 import switches from '@/switches';
 import { isInternalResource } from '@/utils';
-import { ExclamationCircleOutlined, RedoOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, RedoOutlined, SearchOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-layout';
 import { useRequest } from 'ahooks';
-import { Alert, Button, Col, Drawer, Form, Modal, Row, Space, Table, Typography } from 'antd';
+import { Alert, Button, Col, Drawer, Form, Input, Modal, Row, Space, Table, Typography } from 'antd';
 import { history } from 'ice';
+import { debounce } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import RouteForm from './components/RouteForm';
@@ -105,12 +106,15 @@ const RouteList: React.FC = () => {
   ];
 
   const [dataSource, setDataSource] = useState<Route[]>([]);
+  const [originalDataSource, setOriginalDataSource] = useState<Route[]>([]);
   const [form] = Form.useForm();
   const [openModal, setOpenModal] = useState(false);
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [currentRoute, setCurrentRoute] = useState<Route | null>();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const formRef = useRef(null);
+  const [searchValue, setSearchValue] = useState('');
 
   const getRouteList = async (factor): Promise<RouteResponse> => getGatewayRoutes(factor);
 
@@ -132,6 +136,7 @@ const RouteList: React.FC = () => {
         return i1.name.localeCompare(i2.name);
       })
       setDataSource(result || []);
+      setOriginalDataSource(result || []);
     },
   });
 
@@ -223,6 +228,29 @@ const RouteList: React.FC = () => {
     setCurrentRoute(null);
   };
 
+  const handleSearch = debounce((value: string) => {
+    if (!value) {
+      setDataSource(originalDataSource);
+      return;
+    }
+    setIsLoading(true);
+    const filteredData = originalDataSource.filter((item) => {
+      const nameMatch = item.name?.includes(value);
+      const domainsMatch = item.domains?.some(domain => domain.includes(value));
+      const pathMatch = item.path?.matchValue?.includes(value);
+      const servicesMatch = item.services?.some(service => service.name?.includes(value));
+      return nameMatch || domainsMatch || pathMatch || servicesMatch;
+    });
+    setDataSource(filteredData);
+    setIsLoading(false);
+  }, 300);
+
+  const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    setSearchValue(value);
+    handleSearch(value);
+  };
+
   return (
     <PageContainer>
       {
@@ -249,12 +277,25 @@ const RouteList: React.FC = () => {
         }}
       >
         <Row gutter={24}>
-          <Col span={4}>
-            <Button type="primary" onClick={onShowDrawer} disabled={!routeManagementSupported}>
+          <Col span={14}>
+            <Form.Item name="searchVal">
+              <Input
+                allowClear
+                placeholder={t('route.routeSearchPlaceholder') || ''}
+                prefix={<SearchOutlined />}
+                onChange={onSearchChange}
+              />
+            </Form.Item>
+          </Col>
+          <Col span={10} style={{ textAlign: 'right' }}>
+            <Button
+              style={{ margin: '0 8px' }}
+              type="primary"
+              onClick={onShowDrawer}
+              disabled={!routeManagementSupported}
+            >
               {t('route.createRoute')}
             </Button>
-          </Col>
-          <Col span={20} style={{ textAlign: 'right' }}>
             <Button icon={<RedoOutlined />} onClick={refresh} />
           </Col>
         </Row>