feat: implement namespace management and UI enhancements

- Added a new API endpoint to fetch available namespaces, improving data retrieval for the dashboard.
- Integrated a Select component for namespace selection in the Dashboard and RunsTable components, enhancing user experience.
- Updated the global styles to adjust font size for better readability.
- Refactored the Dashboard component to fetch both configuration and namespaces on mount, ensuring a smoother user experience.

These changes collectively enhance the functionality and usability of the dashboard.

Author: NiveditJain

dashboard/src/app/api/namespaces/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.EXOSPHERE_STATE_MANAGER_URI || 'http://localhost:8000';
+const API_KEY = process.env.EXOSPHERE_API_KEY;
+
+export async function GET(request: NextRequest) {
+  try {
+    if (!API_KEY) {
+      return NextResponse.json({ error: 'API key not configured' }, { status: 500 });
+    }
+
+    const response = await fetch(`${API_BASE_URL}/v0/namespaces`, {
+      headers: {
+        'X-API-Key': API_KEY,
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`State manager API error: ${response.status} ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching namespaces:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch namespaces' },
+      { status: 500 }
+    );
+  }
+} 

dashboard/src/app/globals.css

@@ -163,7 +163,7 @@
     @apply border-border outline-ring/50;
   }
   html {
-    font-size: 25px; /* Increased from default 16px */
+    font-size: 120%; /* Increased from default 16px */
   }
   body {
     @apply bg-background text-foreground font-sans;

dashboard/src/app/page.tsx

@@ -11,6 +11,7 @@ import {
   NodeRegistration, 
   UpsertGraphTemplateRequest,
   UpsertGraphTemplateResponse,
+  ListNamespacesResponse,
 } from '@/types/state-manager';
 import { 
   GitBranch, 
@@ -23,12 +24,14 @@ import {
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Select } from '@/components/ui/select';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 
 export default function Dashboard() {
   const [activeTab, setActiveTab] = useState< 'overview' | 'graph' |'runs'>('overview');
   const [namespace, setNamespace] = useState('default');
+  const [availableNamespaces, setAvailableNamespaces] = useState<string[]>([]);
   const [graphName, setGraphName] = useState('test-graph');
   const [graphTemplate, setGraphTemplate] = useState<UpsertGraphTemplateRequest | null>(null);
 
@@ -41,21 +44,32 @@ export default function Dashboard() {
   const [selectedGraphTemplate, setSelectedGraphTemplate] = useState<UpsertGraphTemplateResponse | null>(null);
   const [isGraphModalOpen, setIsGraphModalOpen] = useState(false);
 
-  // Fetch configuration on component mount
+  // Fetch configuration and namespaces on component mount
   useEffect(() => {
-    const fetchConfig = async () => {
+    const fetchConfigAndNamespaces = async () => {
       try {
-        const response = await fetch('/api/config');
-        if (response.ok) {
-          const config = await response.json();
+        // Fetch configuration
+        const configResponse = await fetch('/api/config');
+        if (configResponse.ok) {
+          const config = await configResponse.json();
           setNamespace(config.defaultNamespace);
         }
+
+        // Fetch available namespaces
+        const namespacesData = await clientApiService.getNamespaces();
+        setAvailableNamespaces(namespacesData.namespaces || []);
+        
+        // If no namespaces available and we have a default, add it
+        if (namespacesData.namespaces?.length === 0) {
+          setAvailableNamespaces(['default']);
+        }
       } catch (error) {
-        console.warn('Failed to fetch config, using default namespace');
+        console.warn('Failed to fetch config or namespaces, using defaults');
+        setAvailableNamespaces(['default']);
       }
     };
 
-    fetchConfig();
+    fetchConfigAndNamespaces();
   }, []);
 
   const handleSaveGraphTemplate = async (template: UpsertGraphTemplateRequest) => {
@@ -117,12 +131,23 @@ export default function Dashboard() {
             <div className="flex items-center space-x-4">
               <div className="flex items-center space-x-2">
                 <span className="text-sm text-muted-foreground">Namespace:</span>
-                <Input
-                  type="text"
+                <Select
                   value={namespace}
                   onChange={(e) => setNamespace(e.target.value)}
                   className="w-32 h-8"
-                />
+                >
+                  {availableNamespaces.map((ns) => (
+                    <option key={ns} value={ns}>
+                      {ns}
+                    </option>
+                  ))}
+                  {/* Show current namespace even if not in the list */}
+                  {!availableNamespaces.includes(namespace) && (
+                    <option key={namespace} value={namespace}>
+                      {namespace}
+                    </option>
+                  )}
+                </Select>
               </div>
             </div>
           </div>

dashboard/src/components/RunsTable.tsx

@@ -24,6 +24,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Select } from './ui/select';
 
 interface RunsTableProps {
   namespace: string;
@@ -193,7 +194,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
             >
               Auto-refresh:
             </label>
-            <select
+            <Select
               id="auto-refresh-select"
               value={refreshInterval}
               onChange={(e) => setRefreshInterval(Number(e.target.value) as RefreshMs)}
@@ -206,7 +207,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
                   {option.label}
                 </option>
               ))}
-            </select>
+            </Select>
           </div>
 
           <Button

dashboard/src/components/ui/select.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import { ChevronDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Select = React.forwardRef<
+  HTMLSelectElement,
+  React.SelectHTMLAttributes<HTMLSelectElement>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <div className="relative">
+      <select
+        className={cn(
+          "flex h-12 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 appearance-none",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </select>
+      <ChevronDown className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 opacity-50 pointer-events-none" />
+    </div>
+  )
+})
+Select.displayName = "Select"
+
+export { Select } 

dashboard/src/services/clientApi.ts

@@ -61,6 +61,15 @@ export class ClientApiService {
     }
     return response.json();
   }
+
+  // Namespaces
+  async getNamespaces() {
+    const response = await fetch('/api/namespaces');
+    if (!response.ok) {
+      throw new Error(`Failed to fetch namespaces: ${response.statusText}`);
+    }
+    return response.json();
+  }
 }
 
 export const clientApiService = new ClientApiService(); 

dashboard/src/types/state-manager.ts

@@ -138,6 +138,11 @@ export interface ListGraphTemplatesResponse {
   templates: UpsertGraphTemplateResponse[];
 }
 
+export interface ListNamespacesResponse {
+  namespaces: string[];
+  count: number;
+}
+
 export interface StateListItem {
   id: string;
   node_name: string;

state-manager/app/controller/list_namespaces.py

@@ -0,0 +1,40 @@
+"""
+Controller for listing distinct namespaces from registered nodes
+"""
+from typing import List
+
+from ..models.db.registered_node import RegisteredNode
+from ..singletons.logs_manager import LogsManager
+
+
+async def list_namespaces(request_id: str) -> List[str]:
+    """
+    List all distinct namespaces from registered nodes
+    
+    Args:
+        request_id: Request ID for logging
+        
+    Returns:
+        List of distinct namespace strings
+    """
+    logger = LogsManager().get_logger()
+    
+    try:
+        logger.info("Listing distinct namespaces from registered nodes", x_exosphere_request_id=request_id)
+        
+        # Use MongoDB aggregation to get distinct namespaces
+        pipeline = [
+            {"$group": {"_id": "$namespace"}},
+            {"$sort": {"_id": 1}}
+        ]
+        
+        result = await RegisteredNode.aggregate(pipeline).to_list()
+        namespaces = [doc["_id"] for doc in result if doc["_id"]]
+        
+        logger.info(f"Found {len(namespaces)} distinct namespaces", x_exosphere_request_id=request_id)
+        
+        return namespaces
+        
+    except Exception as e:
+        logger.error(f"Error listing namespaces: {str(e)}", x_exosphere_request_id=request_id)
+        raise 

state-manager/app/main.py

@@ -24,7 +24,7 @@
 from .models.db.run import Run
 
 # injecting routes
-from .routes import router
+from .routes import router, global_router
 
 # importing CORS config
 from .config.cors import get_cors_config
@@ -87,4 +87,5 @@ async def lifespan(app: FastAPI):
 def health() -> dict:
     return {"message": "OK"}
 
+app.include_router(global_router)
 app.include_router(router)

state-manager/app/models/list_models.py

@@ -23,6 +23,12 @@ class ListGraphTemplatesResponse(BaseModel):
     templates: List[GraphTemplate] = Field(..., description="List of graph templates")
 
 
+class ListNamespacesResponse(BaseModel):
+    """Response model for listing namespaces"""
+    namespaces: List[str] = Field(..., description="List of namespaces")
+    count: int = Field(..., description="Number of namespaces")
+
+
 class NamespaceSummaryResponse(BaseModel):
     """Response model for namespace summary"""
     namespace: str = Field(..., description="The namespace")