ui: improve p2p view

Signed-off-by: Ettore Di Giacinto <[email protected]>

Author: mudler

core/http/elements/p2p.go

@@ -26,15 +26,17 @@ func P2PNodeStats(nodes []schema.NodeData) string {
 		}
 	}
 
-	class := "text-blue-400"
+	class := "text-green-400"
 	if online == 0 {
 		class = "text-red-400"
+	} else if online < len(nodes) {
+		class = "text-yellow-400"
 	}
 
 	nodesElements := []elem.Node{
 		elem.Span(
 			attrs.Props{
-				"class": class + " font-bold text-xl",
+				"class": class + " font-bold text-2xl",
 			},
 			elem.Text(fmt.Sprintf("%d", online)),
 		),
@@ -50,76 +52,105 @@ func P2PNodeStats(nodes []schema.NodeData) string {
 }
 
 func P2PNodeBoxes(nodes []schema.NodeData) string {
-	nodesElements := []elem.Node{}
+	if len(nodes) == 0 {
+		return `<div class="col-span-full flex flex-col items-center justify-center py-12 text-center bg-gray-800/50 border border-gray-700/50 rounded-xl">
+			<i class="fas fa-server text-gray-500 text-4xl mb-4"></i>
+			<p class="text-gray-400 text-lg font-medium">No nodes available</p>
+			<p class="text-gray-500 text-sm mt-2">Start some workers to see them here</p>
+		</div>`
+	}
 
+	render := ""
 	for _, n := range nodes {
 		nodeID := bluemonday.StrictPolicy().Sanitize(n.ID)
 
 		// Define status-specific classes
 		statusIconClass := "text-green-400"
 		statusText := "Online"
 		statusTextClass := "text-green-400"
+		cardHoverClass := "hover:shadow-green-500/20 hover:border-green-400/50"
 
 		if !n.IsOnline() {
 			statusIconClass = "text-red-400"
 			statusText = "Offline"
 			statusTextClass = "text-red-400"
+			cardHoverClass = "hover:shadow-red-500/20 hover:border-red-400/50"
 		}
 
-		nodesElements = append(nodesElements,
+		nodeCard := elem.Div(
+			attrs.Props{
+				"class": "bg-gradient-to-br from-gray-800/90 to-gray-900/80 border border-gray-700/50 rounded-xl p-5 shadow-xl transition-all duration-300 " + cardHoverClass + " backdrop-blur-sm",
+			},
+			// Header with node icon and status
 			elem.Div(
 				attrs.Props{
-					"class": "bg-gray-800/80 border border-gray-700/50 rounded-xl p-4 shadow-lg transition-all duration-300 hover:shadow-blue-900/20 hover:border-blue-700/50",
+					"class": "flex items-center justify-between mb-4",
 				},
-				// Node ID and status indicator in top row
+				// Node info
 				elem.Div(
 					attrs.Props{
-						"class": "flex items-center justify-between mb-3",
+						"class": "flex items-center",
 					},
-					// Node ID with icon
 					elem.Div(
 						attrs.Props{
-							"class": "flex items-center",
+							"class": "w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center mr-3",
 						},
 						elem.I(
 							attrs.Props{
-								"class": "fas fa-server text-blue-400 mr-2",
-							},
-						),
-						elem.Span(
-							attrs.Props{
-								"class": "text-white font-medium",
+								"class": "fas fa-server text-blue-400 text-lg",
 							},
-							elem.Text(nodeID),
 						),
 					),
-					// Status indicator
 					elem.Div(
-						attrs.Props{
-							"class": "flex items-center",
-						},
-						elem.I(
+						attrs.Props{},
+						elem.H4(
 							attrs.Props{
-								"class": "fas fa-circle animate-pulse " + statusIconClass + " mr-1.5",
+								"class": "text-white font-semibold text-sm",
 							},
+							elem.Text("Node"),
 						),
-						elem.Span(
+						elem.P(
 							attrs.Props{
-								"class": statusTextClass,
+								"class": "text-gray-400 text-xs font-mono break-all",
 							},
-							elem.Text(statusText),
+							elem.Text(nodeID),
 						),
 					),
 				),
-				// Bottom section with timestamp
+				// Status badge
 				elem.Div(
 					attrs.Props{
-						"class": "text-xs text-gray-400 pt-1 border-t border-gray-700/30",
+						"class": "flex items-center bg-gray-900/50 rounded-full px-3 py-1.5 border border-gray-700/50",
 					},
-					elem.Text("Last updated: "+time.Now().UTC().Format("2006-01-02 15:04:05")),
+					elem.I(
+						attrs.Props{
+							"class": "fas fa-circle animate-pulse " + statusIconClass + " mr-2 text-xs",
+						},
+					),
+					elem.Span(
+						attrs.Props{
+							"class": statusTextClass + " text-xs font-medium",
+						},
+						elem.Text(statusText),
+					),
 				),
-			))
+			),
+			// Footer with timestamp
+			elem.Div(
+				attrs.Props{
+					"class": "text-xs text-gray-500 pt-3 border-t border-gray-700/30 flex items-center",
+				},
+				elem.I(
+					attrs.Props{
+						"class": "fas fa-clock mr-2",
+					},
+				),
+				elem.Text("Updated: "+time.Now().UTC().Format("15:04:05")),
+			),
+		)
+
+		render += nodeCard.Render()
 	}
 
-	return renderElements(nodesElements)
+	return render
 }