added local storage based searchableText

Signed-off-by: nassery318 <nassery318@gmail.com>

Author: nassery318

apps/frontend/src/components/cluster-topology/Cluster.tsx

@@ -2,7 +2,7 @@ import { useState } from "react"
 import { useSelector } from "react-redux"
 import { Server, CheckCircle2 } from "lucide-react"
 import { useParams } from "react-router"
-import { CONNECTED } from "@common/src/constants.ts"
+import { CONNECTED, MAX_CONNECTIONS } from "@common/src/constants.ts"
 import { AppHeader } from "../ui/app-header"
 import RouteContainer from "../ui/route-container"
 import { StatCard } from "../ui/stat-card"
@@ -62,6 +62,8 @@ export function Cluster() {
     })
   })
 
+  const highlight = searchQuery && filteredEntries.length < MAX_CONNECTIONS ? searchQuery : ""
+
   return (
     <RouteContainer className="overflow-y-hidden" title="Cluster Topology">
       <AppHeader icon={<Server size={20} />} title="Cluster Topology" />
@@ -110,6 +112,7 @@ export function Cluster() {
             return (
               <ClusterNode
                 clusterId={clusterId!}
+                highlight={highlight}
                 key={primaryKey}
                 primary={primary}
                 primaryData={primaryData}

apps/frontend/src/components/cluster-topology/cluster-node.tsx

@@ -7,6 +7,7 @@ import { Badge } from "../ui/badge"
 import { CustomTooltip } from "../ui/tooltip"
 import { Button } from "../ui/button"
 import { Typography } from "../ui/typography"
+import { HighlightSearchMatch } from "../ui/highlight-search-match"
 import type { RootState } from "@/store.ts"
 import type { PrimaryNode, ParsedNodeInfo } from "@/state/valkey-features/cluster/clusterSlice"
 import { connectPending, type ConnectionDetails } from "@/state/valkey-features/connection/connectionSlice.ts"
@@ -20,13 +21,15 @@ interface ClusterNodeProps {
   primary: PrimaryNode
   primaryData: ParsedNodeInfo
   clusterId: string
+  highlight?: string
 }
 
 export function ClusterNode({
   primaryKey,
   primary,
   primaryData,
   clusterId,
+  highlight = "",
 }: ClusterNodeProps) {
   const navigate = useNavigate()
   const dispatch = useAppDispatch()
@@ -83,12 +86,14 @@ export function ClusterNode({
               <Server className="text-primary shrink-0" size={18} />
               <div className="flex flex-col gap-1 min-w-0">
                 <div className="flex items-center gap-2 flex-wrap">
-                  <Typography variant={"label"}>{primaryData?.server_name || primaryKey}</Typography>
+                  <Typography variant={"label"}>
+                    <HighlightSearchMatch query={highlight} text={primaryData?.server_name || primaryKey} />
+                  </Typography>
                   <Badge className="text-xs px-2 py-0" variant={isConnected ? "success" : "secondary"}>
                     PRIMARY
                   </Badge>
                 </div>
-                <Typography variant="bodyXs">{`${primary.host}:${primary.port}`}</Typography>
+                <Typography variant="bodyXs"><HighlightSearchMatch query={highlight} text={`${primary.host}:${primary.port}`} /></Typography>
                 <NodeDetails nodeData={primaryData} />
               </div>
             </div>
@@ -109,7 +114,9 @@ export function ClusterNode({
                   return (
                     <div className="flex items-center mb-2 gap-1" key={replicaKey}>
                       <Server className="text-primary shrink-0" size={16} />
-                      <Typography className="underline" variant="bodyXs">{replicaKey}</Typography>
+                      <Typography className="underline" variant="bodyXs">
+                        <HighlightSearchMatch query={highlight} text={replicaKey} />
+                      </Typography>
                     </div>
                   )
                 })}

apps/frontend/src/components/connection/Connection.tsx

@@ -14,12 +14,8 @@ import { selectConnections } from "@/state/valkey-features/connection/connection
 import { ConnectionEntry } from "@/components/connection/ConnectionEntry.tsx"
 import { ClusterConnectionGroup } from "@/components/connection/ClusterConnectionGroup.tsx"
 
-const matchesSearch = (q: string, connectionId: string, connection: ConnectionState) => {
-  const { host, port, username, alias } = connection.connectionDetails
-  return [connectionId, host, port, username, alias]
-    .filter(Boolean)
-    .some((v) => v!.toLowerCase().includes(q))
-}
+const matchesSearch = (q: string, connection: ConnectionState) =>
+  connection.searchableText.includes(q)
 
 export function Connection() {
   const [showConnectionForm, setShowConnectionForm] = useState(false)
@@ -68,12 +64,12 @@ export function Connection() {
   const filteredClusterGroups: typeof clusterGroups = {}
   if (q) {
     for (const [clusterId, conns] of Object.entries(clusterGroups)) {
-      const matched = conns.filter(({ connectionId, connection }) => matchesSearch(q, connectionId, connection))
+      const matched = conns.filter(({ connection }) => matchesSearch(q, connection))
       if (matched.length > 0) filteredClusterGroups[clusterId] = matched
     }
   }
   const filteredStandaloneConnections = q
-    ? standaloneConnections.filter(({ connectionId, connection }) => matchesSearch(q, connectionId, connection))
+    ? standaloneConnections.filter(({ connection }) => matchesSearch(q, connection))
     : standaloneConnections
 
   const hasFilteredClusters = q ? Object.keys(filteredClusterGroups).length > 0 : Object.keys(clusterGroups).length > 0

apps/frontend/src/components/ui/accordion.tsx

@@ -96,7 +96,7 @@ export default function Accordion({ accordionName, accordionItems, valueType = "
                     {formatKey(key)}
                   </Typography>
                   {singleMetricDescriptions[key] && (
-                    <TooltipIcon description={`${singleMetricDescriptions[key].description} ${singleMetricDescriptions[key].unit}` } size={13} />
+                    <TooltipIcon description={singleMetricDescriptions[key].description} size={13} />
                   )}
                 </div>
                 <Typography variant="bodySm">{formatMetricValue(key, value, valueType)}</Typography>

apps/frontend/src/state/epics/valkeyEpics.ts

@@ -83,6 +83,7 @@ export const connectionEpic = (store: Store) =>
             connectionDetails: baseConnectionDetails,
             status: NOT_CONNECTED,
             connectionHistory: connection?.connectionHistory ?? [],
+            searchableText: connection?.searchableText ?? "",
           }
 
           currentConnections[payload.connectionId] = connectionToSave
@@ -291,6 +292,7 @@ export const updateConnectionDetailsEpic = (store: Store) =>
         if (connection && currentConnections[connectionId]) {
           currentConnections[connectionId].connectionDetails = connection.connectionDetails
           currentConnections[connectionId].connectionHistory = connection.connectionHistory || []
+          currentConnections[connectionId].searchableText = connection.searchableText ?? ""
           localStorage.setItem(LOCAL_STORAGE.VALKEY_CONNECTIONS, JSON.stringify(currentConnections))
         }
       } catch (e) {

apps/frontend/src/state/valkey-features/connection/connectionSlice.ts

@@ -50,6 +50,7 @@ export interface ConnectionState {
   status: ConnectionStatus;
   errorMessage: string | null;
   connectionDetails: ConnectionDetails;
+  searchableText: string;
   reconnect?: ReconnectState;
   connectionHistory?: ConnectionHistoryEntry[];
   wasEdit?: boolean;
@@ -59,9 +60,15 @@ export interface ValkeyConnectionsState {
   [connectionId: string]: ConnectionState
 }
 
+const buildSearchableText = (connectionId: string, details: ConnectionDetails) =>
+  [connectionId, details.host, details.port, details.username, details.alias]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase()
+
 const currentConnections = R.pipe(
   (v: string) => localStorage.getItem(v),
-  (s) => (s === null ? {} : JSON.parse(s)),
+  (s) => (s === null ? {} : JSON.parse(s) as ValkeyConnectionsState),
 )(LOCAL_STORAGE.VALKEY_CONNECTIONS)
 
 const connectionSlice = createSlice({
@@ -97,7 +104,7 @@ const connectionSlice = createSlice({
           clusterSlotStatsEnabled: false,
           jsonModuleAvailable: false,
         },
-
+        searchableText: buildSearchableText(connectionId, connectionDetails),
         wasEdit: isEdit,
         ...(isRetry && existingConnection?.reconnect && {
           reconnect: existingConnection.reconnect,
@@ -225,10 +232,12 @@ const connectionSlice = createSlice({
     },
     updateConnectionDetails: (state, action) => {
       const { connectionId, ...details } = action.payload
-      state.connections[connectionId].connectionDetails = {
+      const merged = {
         ...state.connections[connectionId].connectionDetails,
         ...details,
       }
+      state.connections[connectionId].connectionDetails = merged
+      state.connections[connectionId].searchableText = buildSearchableText(connectionId, merged)
     },
     deleteConnection: (state, { payload: { connectionId } }) => {
       return R.dissocPath(["connections", connectionId], state)