From e6142a9a9c0a3988ff9a10bec05ab3dea7d76ffd Mon Sep 17 00:00:00 2001
From: taylanbakircioglu <taylanb@outlook.com>
Date: Mon, 16 Feb 2026 16:49:37 +0300
Subject: [PATCH] feat: add search capability to cluster selector dropdown

Enable showSearch on the header cluster selector so users can quickly
filter clusters by name, pool, connection type or description.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/components/ClusterSelector.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/frontend/src/components/ClusterSelector.js b/frontend/src/components/ClusterSelector.js
index 12c7a81..661036a 100644
--- a/frontend/src/components/ClusterSelector.js
+++ b/frontend/src/components/ClusterSelector.js
@@ -87,6 +87,7 @@ const ClusterSelector = () => {
       <CloudServerOutlined style={{ color: '#1890ff', flexShrink: 0 }} />
       <Select
         value={selectedCluster?.id}
+        showSearch
         style={{ 
           width: getSelectWidth(),
           minWidth: 180, 
@@ -99,6 +100,18 @@ const ClusterSelector = () => {
             selectCluster(cluster);
           }
         }}
+        filterOption={(input, option) => {
+          if (!input) return true;
+          const cluster = clusters.find(c => c.id === option?.value);
+          if (!cluster) return false;
+          const search = input.toLowerCase();
+          return (
+            (cluster.name || '').toLowerCase().includes(search) ||
+            (cluster.pool_name || '').toLowerCase().includes(search) ||
+            (cluster.connection_type || '').toLowerCase().includes(search) ||
+            (cluster.description || '').toLowerCase().includes(search)
+          );
+        }}
         optionLabelProp="label"
         size="middle"
       >