Merge pull request #2 from hhftechnology/dev

hhftechnology · web-flow · commit f1c4539af5c9 · 2025-07-30T17:10:40.000+05:30
Dev
diff --git a/.github/workflows/build-and-publish.yml b/.github/workflows/build-and-publish.yml
@@ -65,36 +65,3 @@ jobs:
           cache-from: type=gha
           cache-to: type=gha,mode=max
 
-  test:
-    runs-on: ubuntu-latest
-    needs: build-and-push
-    if: github.event_name == 'pull_request'
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Create test log file
-        run: |
-          mkdir -p logs
-          echo '{"time":"2024-01-20T10:00:00Z","ServiceName":"test-service","RequestMethod":"GET","RequestPath":"/api/test","DownstreamStatus":200,"Duration":0.05}' > logs/traefik.log
-
-      - name: Start services
-        run: |
-          echo "TRAEFIK_LOG_PATH=./logs" > .env
-          docker-compose up -d
-
-      - name: Wait for services
-        run: sleep 10
-
-      - name: Test backend health
-        run: |
-          curl -f http://localhost:3001/health || exit 1
-
-      - name: Test frontend
-        run: |
-          curl -f http://localhost:3000 || exit 1
-
-      - name: Show logs if failed
-        if: failure()
-        run: docker-compose logs
diff --git a/backend/src/logParser.js b/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;
@@ -134,6 +137,8 @@ export class LogParser extends EventEmitter {
         serviceName: log.ServiceName || 'unknown',
         routerName: log.RouterName || 'unknown',
         host: log.RequestHost || '',
+        requestAddr: log.RequestAddr || '',  // New field
+        requestHost: log.RequestHost || '',  // Explicit field for RequestHost
         userAgent: log['request_User-Agent'] || '',
         size: parseInt(log.DownstreamContentSize || 0),
         country: null,
@@ -197,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;
@@ -228,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
     };
   }
diff --git a/frontend/src/components/Dashboard.tsx b/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>
   );
-}
+}
diff --git a/frontend/src/components/LogTable.tsx b/frontend/src/components/LogTable.tsx
@@ -9,16 +9,21 @@ import {
 } from "@/components/ui/table";
 import { LogEntry } from "@/hooks/useWebSocket";
 import { format } from "date-fns";
-import { Globe, Server, Router } from "lucide-react";
+import { Globe, Server, Router, Network, ExternalLink, ChevronUp, ChevronDown, ChevronsUpDown } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
 interface LogTableProps {
   logs: LogEntry[];
   requestLogs: (params: { page: number, limit: number }) => void;
 }
 
+type SortColumn = 'method' | 'status' | 'responseTime' | 'serviceName' | 'routerName' | 'requestAddr' | 'requestHost' | 'clientIP' | 'location';
+type SortDirection = 'asc' | 'desc' | null;
+
 export function LogTable({ logs, requestLogs }: LogTableProps) {
   const [page, setPage] = useState(1);
+  const [sortColumn, setSortColumn] = useState<SortColumn | null>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
   const observer = useRef<IntersectionObserver | null>(null);
   const loader = useRef<HTMLTableRowElement | null>(null);
 
@@ -46,6 +51,95 @@ export function LogTable({ logs, requestLogs }: LogTableProps) {
     }
   }, [page, requestLogs]);
 
+  const handleSort = (column: SortColumn) => {
+    if (sortColumn === column) {
+      // Cycle through: asc -> desc -> none
+      if (sortDirection === 'asc') {
+        setSortDirection('desc');
+      } else if (sortDirection === 'desc') {
+        setSortDirection(null);
+        setSortColumn(null);
+      }
+    } else {
+      setSortColumn(column);
+      setSortDirection('asc');
+    }
+  };
+
+  const getSortIcon = (column: SortColumn) => {
+    if (sortColumn !== column) {
+      return <ChevronsUpDown className="h-4 w-4 text-muted-foreground" />;
+    }
+    if (sortDirection === 'asc') {
+      return <ChevronUp className="h-4 w-4 text-foreground" />;
+    }
+    if (sortDirection === 'desc') {
+      return <ChevronDown className="h-4 w-4 text-foreground" />;
+    }
+    return <ChevronsUpDown className="h-4 w-4 text-muted-foreground" />;
+  };
+
+  const sortedLogs = [...logs].sort((a, b) => {
+    if (!sortColumn || !sortDirection) return 0;
+
+    let aValue: any;
+    let bValue: any;
+
+    switch (sortColumn) {
+      case 'method':
+        aValue = a.method;
+        bValue = b.method;
+        break;
+      case 'status':
+        aValue = a.status;
+        bValue = b.status;
+        break;
+      case 'responseTime':
+        aValue = a.responseTime;
+        bValue = b.responseTime;
+        break;
+      case 'serviceName':
+        aValue = a.serviceName;
+        bValue = b.serviceName;
+        break;
+      case 'routerName':
+        aValue = a.routerName;
+        bValue = b.routerName;
+        break;
+      case 'requestAddr':
+        aValue = a.requestAddr || '';
+        bValue = b.requestAddr || '';
+        break;
+      case 'requestHost':
+        aValue = a.requestHost || '';
+        bValue = b.requestHost || '';
+        break;
+      case 'clientIP':
+        aValue = a.clientIP;
+        bValue = b.clientIP;
+        break;
+      case 'location':
+        aValue = a.country || '';
+        bValue = b.country || '';
+        break;
+      default:
+        return 0;
+    }
+
+    // Handle different data types
+    if (typeof aValue === 'number' && typeof bValue === 'number') {
+      return sortDirection === 'asc' ? aValue - bValue : bValue - aValue;
+    }
+
+    // String comparison
+    const aStr = String(aValue).toLowerCase();
+    const bStr = String(bValue).toLowerCase();
+    
+    if (aStr < bStr) return sortDirection === 'asc' ? -1 : 1;
+    if (aStr > bStr) return sortDirection === 'asc' ? 1 : -1;
+    return 0;
+  });
+
 
   const getStatusBadgeVariant = (status: number) => {
     if (status >= 200 && status < 300) return "success";
@@ -83,26 +177,100 @@ export function LogTable({ logs, requestLogs }: LogTableProps) {
         <TableHeader>
           <TableRow>
             <TableHead>Time</TableHead>
-            <TableHead>Method</TableHead>
+            <TableHead 
+              className="cursor-pointer select-none hover:bg-muted/50 transition-colors"
+              onClick={() => handleSort('method')}
+            >
+              <div className="flex items-center gap-1">
+                Method
+                {getSortIcon('method')}
+              </div>
+            </TableHead>
             <TableHead>Path</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Response Time</TableHead>
-            <TableHead>Service</TableHead>
-            <TableHead>Router</TableHead>
-            <TableHead>Client IP</TableHead>
-            <TableHead>Location</TableHead>
+            <TableHead 
+              className="cursor-pointer select-none hover:bg-muted/50 transition-colors"
+              onClick={() => handleSort('status')}
+            >
+              <div className="flex items-center gap-1">
+                Status
+                {getSortIcon('status')}
+              </div>
+            </TableHead>
+            <TableHead 
+              className="cursor-pointer select-none hover:bg-muted/50 transition-colors"
+              onClick={() => handleSort('responseTime')}
+            >
+              <div className="flex items-center gap-1">
+                Response Time
+                {getSortIcon('responseTime')}
+              </div>
+            </TableHead>
+            <TableHead 
+              className="cursor-pointer select-none hover:bg-muted/50 transition-colors"
+              onClick={() => handleSort('serviceName')}
+            >
+              <div className="flex items-center gap-1">
+                Service
+                {getSortIcon('serviceName')}
+              </div>
+            </TableHead>
+            <TableHead 
+              className="cursor-pointer select-none hover:bg-muted/50 transition-colors"
+              onClick={() => handleSort('routerName')}
+            >
+              <div className="flex items-center gap-1">
+                Router
+                {getSortIcon('routerName')}
+              </div>
+            </TableHead>
+            <TableHead 
+              className="cursor-pointer select-none hover:bg-muted/50 transition-colors"
+              onClick={() => handleSort('requestAddr')}
+            >
+              <div className="flex items-center gap-1">
+                Request Addr
+                {getSortIcon('requestAddr')}
+              </div>
+            </TableHead>
+            <TableHead 
+              className="cursor-pointer select-none hover:bg-muted/50 transition-colors"
+              onClick={() => handleSort('requestHost')}
+            >
+              <div className="flex items-center gap-1">
+                Request Host
+                {getSortIcon('requestHost')}
+              </div>
+            </TableHead>
+            <TableHead 
+              className="cursor-pointer select-none hover:bg-muted/50 transition-colors"
+              onClick={() => handleSort('clientIP')}
+            >
+              <div className="flex items-center gap-1">
+                Client IP
+                {getSortIcon('clientIP')}
+              </div>
+            </TableHead>
+            <TableHead 
+              className="cursor-pointer select-none hover:bg-muted/50 transition-colors"
+              onClick={() => handleSort('location')}
+            >
+              <div className="flex items-center gap-1">
+                Location
+                {getSortIcon('location')}
+              </div>
+            </TableHead>
             <TableHead>Size</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
-          {logs.length === 0 ? (
+          {sortedLogs.length === 0 ? (
             <TableRow>
-              <TableCell colSpan={10} className="h-24 text-center text-muted-foreground">
+              <TableCell colSpan={12} className="h-24 text-center text-muted-foreground">
                 No logs found. Waiting for incoming requests...
               </TableCell>
             </TableRow>
           ) : (
-            logs.map((log) => {
+            sortedLogs.map((log) => {
               const responseTime = formatResponseTime(log.responseTime);
               return (
                 <TableRow key={log.id}>
@@ -139,6 +307,22 @@ export function LogTable({ logs, requestLogs }: LogTableProps) {
                       <span className="text-xs">{log.routerName}</span>
                     </div>
                   </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1">
+                      <Network className="h-3 w-3 text-muted-foreground" />
+                      <span className="text-xs font-mono max-w-32 truncate" title={log.requestAddr}>
+                        {log.requestAddr || '-'}
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-1">
+                      <ExternalLink className="h-3 w-3 text-muted-foreground" />
+                      <span className="text-xs font-mono max-w-32 truncate" title={log.requestHost}>
+                        {log.requestHost || '-'}
+                      </span>
+                    </div>
+                  </TableCell>
                   <TableCell className="font-mono text-xs">
                     {log.clientIP}
                   </TableCell>
@@ -160,12 +344,12 @@ export function LogTable({ logs, requestLogs }: LogTableProps) {
             })
           )}
           <TableRow ref={loader}>
-            <TableCell colSpan={10} className="text-center text-muted-foreground">
+            <TableCell colSpan={12} className="text-center text-muted-foreground">
               Loading more logs...
             </TableCell>
           </TableRow>
         </TableBody>
       </Table>
     </div>
   );
-}
+}
diff --git a/frontend/src/components/TopListsCards.tsx b/frontend/src/components/TopListsCards.tsx
diff --git a/frontend/src/hooks/useWebSocket.tsx b/frontend/src/hooks/useWebSocket.tsx
