Improve resource filtering and UI feedback

Enhanced resource filtering in ResourceGraph to respect selected tiers, namespaces, and health status. Added spin animation for refresh icon in FilterPanel. Improved error handling and feedback in AdminResources and InferenceTest components. Updated node ID generation in AdminResources for better uniqueness. Added address format validation and DNS override documentation in test_execution.go.

Author: smarunich

management/test_execution.go

@@ -255,10 +255,22 @@ func (s *TestExecutionService) createHTTPClient(settings *ConnectionSettings) *h
 	// Create custom transport with DNS override
 	transport := &http.Transport{
 		DialContext: func(ctx context.Context, network, addr string) (net.Conn, error) {
-			// Check if we have a DNS override for this address
+			// Validate the format of addr (expected format: host:port)
+			if !strings.Contains(addr, ":") {
+				return nil, fmt.Errorf("invalid address format: %s, expected host:port", addr)
+			}
+			
+			// DNS Override Logic:
+			// This allows overriding DNS resolution for specific addresses.
+			// The dnsResolveMap contains mappings from original addresses (host:port)
+			// to target addresses (host:port). This is useful for:
+			// - Testing against local services
+			// - Bypassing DNS resolution issues
+			// - Routing to specific service instances
 			if dnsOverride, exists := dnsResolveMap[addr]; exists {
 				addr = dnsOverride
 			}
+			
 			return dialer.DialContext(ctx, network, addr)
 		},
 		MaxIdleConns:          100,

management/ui/src/components/AdminResources.js

@@ -84,6 +84,7 @@ const AdminResources = () => {
         servingRuntimes: [],
         clusterServingRuntimes: []
       });
+      // Only update discovery time on successful fetch
       setLastDiscoveryTime(new Date().toISOString());
     } catch (error) {
       toast.error('Failed to fetch resources');
@@ -131,7 +132,7 @@ const AdminResources = () => {
           status = 'healthy'; // Default for other resources
         }
 
-        const nodeId = `${type}-${resource.namespace || 'default'}-${resource.name}-${index}`;
+        const nodeId = `${type}-${resource.namespace || 'default'}-${resource.name}-${resource.uid || resource.id || index}`;
 
         nodes.push({
           id: nodeId,

management/ui/src/components/FilterPanel.js

@@ -15,6 +15,22 @@ import {
   RefreshCw
 } from 'lucide-react';
 
+// Add the spin animation keyframes
+const spinKeyframes = `
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+`;
+
+// Inject the CSS into the document head if not already present
+if (typeof document !== 'undefined' && !document.querySelector('#spin-animation')) {
+  const style = document.createElement('style');
+  style.id = 'spin-animation';
+  style.textContent = spinKeyframes;
+  document.head.appendChild(style);
+}
+
 const FilterPanel = ({ 
   resourceGraph, 
   filters, 
@@ -216,7 +232,12 @@ const FilterPanel = ({
               gap: '0.25rem'
             }}
           >
-            <RefreshCw size={12} className={isRefreshing ? 'animate-spin' : ''} />
+            <RefreshCw
+              size={12}
+              style={isRefreshing ? {
+                animation: 'spin 1s linear infinite'
+              } : {}}
+            />
             {isRefreshing ? 'Refreshing...' : 'Refresh'}
           </button>
           <span style={{ fontSize: '0.75rem', color: '#6b7280' }}>

management/ui/src/components/InferenceTest.js

@@ -98,6 +98,7 @@ const InferenceTest = () => {
       setAiGatewayInfo(response.data);
     } catch (error) {
       console.error('Error fetching gateway info:', error);
+      toast.error('Failed to fetch AI Gateway information');
       setAiGatewayInfo(null);
     }
   };

management/ui/src/components/ResourceGraph.js

@@ -199,8 +199,25 @@ const ResourceGraph = ({ resourceGraph, onRefresh, isRefreshing }) => {
   // Filter resources to focus on Gateway API, Envoy Gateway, and related services
   const isRelevantResource = (node) => {
     const type = node.type.toLowerCase();
+    const namespace = node.namespace || 'all';
+    const isHealthy = node.health === 'healthy';
+    
+    // Filter by selected tiers
+    const tier = getTierForType(type);
+    if (!selectedTiers.includes(tier)) {
+      return false;
+    }
+    
+    // Filter by selected namespace
+    if (selectedNamespace !== 'all' && namespace !== selectedNamespace) {
+      return false;
+    }
+    
+    // Filter by health status
+    if (showHealthyOnly && !isHealthy) {
+      return false;
+    }
 
-    // Include all resource types for comprehensive view
     return true;
   };