update

Author: hhftechnology

backend/src/logParser.js

@@ -21,7 +21,10 @@ export class LogParser extends EventEmitter {
       requests2xx: 0,
       requestsPerSecond: 0,
       topIPs: {},
-      countries: {}
+      countries: {},
+      topRouters: {},
+      topRequestAddrs: {},
+      topRequestHosts: {}
     };
     this.lastTimestamp = Date.now();
     this.requestsInLastSecond = 0;
@@ -199,6 +202,18 @@ export class LogParser extends EventEmitter {
         this.stats.topIPs[log.clientIP] = (this.stats.topIPs[log.clientIP] || 0) + 1;
     }
 
+    if (log.routerName && log.routerName !== 'unknown') {
+      this.stats.topRouters[log.routerName] = (this.stats.topRouters[log.routerName] || 0) + 1;
+    }
+
+    if (log.requestAddr && log.requestAddr !== '') {
+      this.stats.topRequestAddrs[log.requestAddr] = (this.stats.topRequestAddrs[log.requestAddr] || 0) + 1;
+    }
+
+    if (log.requestHost && log.requestHost !== '') {
+      this.stats.topRequestHosts[log.requestHost] = (this.stats.topRequestHosts[log.requestHost] || 0) + 1;
+    }
+
     if (log.country && log.countryCode) {
       const key = `${log.countryCode}|${log.country}`;
       this.stats.countries[key] = (this.stats.countries[key] || 0) + 1;
@@ -230,10 +245,28 @@ export class LogParser extends EventEmitter {
         return { country: name, countryCode: code, count };
       });
 
+    const topRouters = Object.entries(this.stats.topRouters)
+      .sort(([, a], [, b]) => b - a)
+      .slice(0, 10)
+      .map(([router, count]) => ({ router, count }));
+
+    const topRequestAddrs = Object.entries(this.stats.topRequestAddrs)
+      .sort(([, a], [, b]) => b - a)
+      .slice(0, 10)
+      .map(([addr, count]) => ({ addr, count }));
+
+    const topRequestHosts = Object.entries(this.stats.topRequestHosts)
+      .sort(([, a], [, b]) => b - a)
+      .slice(0, 10)
+      .map(([host, count]) => ({ host, count }));
+
     return {
       ...this.stats,
       topIPs,
       topCountries,
+      topRouters,
+      topRequestAddrs,
+      topRequestHosts,
       avgResponseTime: Math.round(this.stats.avgResponseTime * 100) / 100
     };
   }

frontend/src/components/Dashboard.tsx

@@ -2,6 +2,7 @@ import { useWebSocket } from "@/hooks/useWebSocket";
 import { StatsCards } from "./StatsCards";
 import { LogTable } from "./LogTable";
 import { GeoMap } from "./GeoMap";
+import { TopListsCards } from "./TopListsCards";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Activity, AlertCircle, Server } from "lucide-react";
@@ -114,6 +115,8 @@ export function Dashboard() {
         </Card>
       </div>
 
+      <TopListsCards stats={stats} />
+
       <GeoMap stats={stats} />
 
       <Card>
@@ -130,4 +133,4 @@ export function Dashboard() {
       </Card>
     </div>
   );
-}
+}

frontend/src/components/TopListsCards.tsx

@@ -0,0 +1,116 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Router, Network, ExternalLink, Users } from "lucide-react";
+import { Stats } from "@/hooks/useWebSocket";
+
+interface TopListsCardsProps {
+  stats: Stats | null;
+}
+
+export function TopListsCards({ stats }: TopListsCardsProps) {
+  if (!stats) {
+    return (
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {[...Array(4)].map((_, i) => (
+          <Card key={i}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Loading...</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="h-32 bg-muted animate-pulse rounded" />
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  const topLists = [
+    {
+      title: "Top Routers",
+      description: "Most active routers",
+      icon: Router,
+      data: stats.topRouters || [],
+      color: "text-purple-600",
+      dataKey: "router"
+    },
+    {
+      title: "Top Request Addresses", 
+      description: "Most requested addresses",
+      icon: Network,
+      data: stats.topRequestAddrs || [],
+      color: "text-cyan-600",
+      dataKey: "addr"
+    },
+    {
+      title: "Top Request Hosts",
+      description: "Most requested hosts", 
+      icon: ExternalLink,
+      data: stats.topRequestHosts || [],
+      color: "text-emerald-600",
+      dataKey: "host"
+    },
+    {
+      title: "Top Client IPs",
+      description: "Most active IP addresses",
+      icon: Users,
+      data: stats.topIPs || [],
+      color: "text-orange-600", 
+      dataKey: "ip"
+    }
+  ];
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      {topLists.map((list, index) => {
+        const Icon = list.icon;
+        return (
+          <Card key={index}>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Icon className={`h-5 w-5 ${list.color}`} />
+                {list.title}
+              </CardTitle>
+              <CardDescription>{list.description}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2">
+                {list.data.length === 0 ? (
+                  <div className="text-center text-muted-foreground py-4">
+                    No data available
+                  </div>
+                ) : (
+                  list.data.slice(0, 5).map((item: any, itemIndex) => {
+                    const percentage = stats ? ((item.count / stats.totalRequests) * 100).toFixed(1) : 0;
+                    const value = item[list.dataKey];
+                    const displayValue = value.length > 20 ? `${value.substring(0, 20)}...` : value;
+                    
+                    return (
+                      <div key={itemIndex} className="flex items-center justify-between p-2 rounded-lg bg-muted/30">
+                        <div className="flex items-center gap-2 min-w-0 flex-1">
+                          <div className={`w-2 h-2 rounded-full bg-${list.color.split('-')[1]}-${500 - itemIndex * 50}`} 
+                               style={{ backgroundColor: `hsl(${220 - itemIndex * 20}, 70%, ${60 - itemIndex * 5}%)` }} />
+                          <span className="font-mono text-xs truncate" title={value}>
+                            {displayValue}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2 flex-shrink-0">
+                          <Badge variant="secondary" className="text-xs">
+                            {item.count.toLocaleString()}
+                          </Badge>
+                          <span className="text-xs text-muted-foreground">
+                            {percentage}%
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}

frontend/src/hooks/useWebSocket.tsx

@@ -35,6 +35,9 @@ export interface Stats {
   requestsPerSecond: number;
   topIPs: Array<{ ip: string; count: number }>;
   topCountries: Array<{ country: string; countryCode: string; count: number }>;
+  topRouters: Array<{ router: string; count: number }>;
+  topRequestAddrs: Array<{ addr: string; count: number }>;
+  topRequestHosts: Array<{ host: string; count: number }>;
 }
 
 interface WebSocketMessage {