From 7dee641ec026ad9efcb9e53f5b22e5abdf1d2cce Mon Sep 17 00:00:00 2001
From: wohainilaodou <weidear99@gmail.com>
Date: Fri, 1 Nov 2024 17:01:39 +0800
Subject: [PATCH] [INLONG-11449][Dashboard] Add clear and search functions to
 some drop-down boxes

---
 .../src/plugins/sources/common/SourceDefaultInfo.ts       | 3 +--
 inlong-dashboard/src/ui/pages/ConsumeDashboard/index.tsx  | 8 ++++++++
 inlong-dashboard/src/ui/pages/GroupDashboard/index.tsx    | 4 ++++
 .../src/ui/pages/GroupDetail/DataStream/config.tsx        | 4 ++++
 .../src/ui/pages/SynchronizeDashboard/index.tsx           | 4 ++++
 5 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/inlong-dashboard/src/plugins/sources/common/SourceDefaultInfo.ts b/inlong-dashboard/src/plugins/sources/common/SourceDefaultInfo.ts
index 0c1383af0a8..b89a77ada9b 100644
--- a/inlong-dashboard/src/plugins/sources/common/SourceDefaultInfo.ts
+++ b/inlong-dashboard/src/plugins/sources/common/SourceDefaultInfo.ts
@@ -100,10 +100,9 @@ export class SourceDefaultInfo implements DataWithBackend, RenderRow, RenderList
     type: 'select',
     hidden: true,
   })
-  @ColumnDecorator()
   @IngestionField()
   @I18n('meta.Sources.File.ClusterName')
-  clusterTag: string;
+  readonly clusterTag: string;
 
   @FieldDecorator({
     type: 'input',
diff --git a/inlong-dashboard/src/ui/pages/ConsumeDashboard/index.tsx b/inlong-dashboard/src/ui/pages/ConsumeDashboard/index.tsx
index b03d9d46870..664e0c3f764 100644
--- a/inlong-dashboard/src/ui/pages/ConsumeDashboard/index.tsx
+++ b/inlong-dashboard/src/ui/pages/ConsumeDashboard/index.tsx
@@ -135,6 +135,10 @@ const Comp: React.FC = () => {
           allowClear: true,
           options: lastConsumerStatusList,
           dropdownMatchSelectWidth: false,
+          showSearch: true,
+          filterOption: (keyword: string, option: { label: any }) => {
+            return (option?.label ?? '').toLowerCase().includes(keyword.toLowerCase());
+          },
         },
       },
       {
@@ -146,6 +150,10 @@ const Comp: React.FC = () => {
           allowClear: true,
           options: consumes.filter(x => x.value),
           dropdownMatchSelectWidth: false,
+          showSearch: true,
+          filterOption: (keyword: string, option: { label: any }) => {
+            return (option?.label ?? '').toLowerCase().includes(keyword.toLowerCase());
+          },
         },
       },
     ],
diff --git a/inlong-dashboard/src/ui/pages/GroupDashboard/index.tsx b/inlong-dashboard/src/ui/pages/GroupDashboard/index.tsx
index 4e602b44ba4..10913a199de 100644
--- a/inlong-dashboard/src/ui/pages/GroupDashboard/index.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDashboard/index.tsx
@@ -172,6 +172,10 @@ const Comp: React.FC = () => {
           allowClear: true,
           options: statusList,
           dropdownMatchSelectWidth: false,
+          showSearch: true,
+          filterOption: (keyword: string, option: { label: any }) => {
+            return (option?.label ?? '').toLowerCase().includes(keyword.toLowerCase());
+          },
         },
       },
       {
diff --git a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/config.tsx b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/config.tsx
index b906633e43e..05499d5beec 100644
--- a/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/config.tsx
+++ b/inlong-dashboard/src/ui/pages/GroupDetail/DataStream/config.tsx
@@ -35,6 +35,10 @@ export const getFilterFormContent = (defaultValues = {} as any) => [
       allowClear: true,
       options: statusList,
       dropdownMatchSelectWidth: false,
+      showSearch: true,
+      filterOption: (keyword: string, option: { label: any }) => {
+        return (option?.label ?? '').toLowerCase().includes(keyword.toLowerCase());
+      },
     },
   },
 ];
diff --git a/inlong-dashboard/src/ui/pages/SynchronizeDashboard/index.tsx b/inlong-dashboard/src/ui/pages/SynchronizeDashboard/index.tsx
index b096f9957f6..33fc2202c6f 100644
--- a/inlong-dashboard/src/ui/pages/SynchronizeDashboard/index.tsx
+++ b/inlong-dashboard/src/ui/pages/SynchronizeDashboard/index.tsx
@@ -170,6 +170,10 @@ const Comp: React.FC = () => {
           allowClear: true,
           options: statusList,
           dropdownMatchSelectWidth: false,
+          showSearch: true,
+          filterOption: (keyword: string, option: { label: any }) => {
+            return (option?.label ?? '').toLowerCase().includes(keyword.toLowerCase());
+          },
         },
       },
       {