toggle servers, sort them (#561)

Signed-off-by: Peter Jausovec <peter.jausovec@solo.io>
Co-authored-by: Eitan Yarmush <eitan.yarmush@solo.io>

Author: peterj

ui/src/app/servers/page.tsx

@@ -33,15 +33,15 @@ export default function ServersPage() {
     try {
       setIsLoading(true);
 
-      // Fetch servers
       const serversResponse = await getServers();
       if (serversResponse.success && serversResponse.data) {
-        setServers(serversResponse.data);
-
-        // Initially expand all servers
-        const serverNames = serversResponse.data.map((server) => server.ref).filter((ref): ref is string => ref !== undefined);
-
-        setExpandedServers(new Set(serverNames));
+        const sortedServers = [...serversResponse.data].sort((a, b) => {
+          return (a.ref || '').localeCompare(b.ref || '');
+        });
+        setServers(sortedServers);
+        
+        // Start with all servers collapsed
+        setExpandedServers(new Set());
       } else {
         console.error("Failed to fetch servers:", serversResponse);
         toast.error(serversResponse.error || "Failed to fetch servers data.");
@@ -100,6 +100,18 @@ export default function ServersPage() {
     }
   };
 
+  const toggleServer = (serverName: string) => {
+    setExpandedServers(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(serverName)) {
+        newSet.delete(serverName);
+      } else {
+        newSet.add(serverName);
+      }
+      return newSet;
+    });
+  };
+
   return (
     <div className="mt-12 mx-auto max-w-6xl px-6">
       <div className="flex justify-between items-center mb-6">
@@ -134,7 +146,10 @@ export default function ServersPage() {
                 {/* Server Header */}
                 <div className="bg-secondary/10 p-4">
                   <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3 cursor-pointer">
+                    <div 
+                      className="flex items-center gap-3 cursor-pointer" 
+                      onClick={() => toggleServer(serverName)}
+                    >
                       {isExpanded ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
                       <div className="flex items-center gap-2">
                         <Globe className="h-5 w-5 text-green-500" />