Enhance Tailscale service timeout and add data size display in logs and network visualization: increase HTTP client timeout to 2 minutes for better performance, and implement data size metrics in the Logs and NetworkVisualization components for improved user insights.

Author: rajsinghtech

backend/internal/services/tailscale.go

@@ -63,7 +63,7 @@ func NewTailscaleService(apiKey, tailnet string) *TailscaleService {
 		apiKey:  apiKey,
 		tailnet: tailnet,
 		client: &http.Client{
-			Timeout: 30 * time.Second,
+			Timeout: 2 * time.Minute,
 		},
 	}
 }

frontend/src/components/NetworkVisualization.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react'
 import type { TailscaleDevice, NetworkFlowLog } from '@/types/tailscale'
+import { formatBytes } from '@/lib/api'
 
 interface NetworkVisualizationProps {
   devices?: TailscaleDevice[]
@@ -52,6 +53,8 @@ export default function NetworkVisualization({
 
   }, [devices, logs, zoom])
 
+  const dataSizeBytes = logs ? JSON.stringify(logs).length : 0
+
   return (
     <div className="h-full w-full bg-gray-50 relative">
       {!devices || devices.length === 0 ? (
@@ -76,6 +79,7 @@ export default function NetworkVisualization({
       <div className="absolute bottom-4 left-4 bg-white rounded-lg shadow-lg p-2 text-xs text-gray-600">
         <div>Devices: {devices?.length || 0}</div>
         <div>Connections: {logs?.length || 0}</div>
+        <div>Data Size: {formatBytes(dataSizeBytes)}</div>
         <div>Zoom: {Math.round(zoom * 100)}%</div>
         {isPlaying && <div className="text-green-600">Playing</div>}
       </div>

frontend/src/pages/Logs.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useMemo } from 'react'
 import { Search, Download, Calendar, RefreshCw, ChevronLeft, ChevronRight } from 'lucide-react'
 import useSWR from 'swr'
 import Layout from '@/components/Layout'
-import { fetcher } from '@/lib/api'
+import { fetcher, formatBytes } from '@/lib/api'
 
 interface TrafficEntry {
   proto: number
@@ -36,14 +36,6 @@ const getProtocolName = (proto: number): string => {
   }
 }
 
-const formatBytes = (bytes: number) => {
-  if (bytes === 0) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
-}
-
 export default function Logs() {
   const [loading, setLoading] = useState(true)
   const [searchQuery, setSearchQuery] = useState('')
@@ -416,6 +408,7 @@ export default function Logs() {
                   <div>Filtered: {filteredEntries.length.toLocaleString()}</div>
                   <div>Showing: {Math.min(itemsPerPage, filteredEntries.length - startIndex)} of {filteredEntries.length.toLocaleString()}</div>
                   <div>Log Entries: {networkLogs.length.toLocaleString()}</div>
+                  <div>Data Size: {formatBytes(JSON.stringify(networkLogs).length)}</div>
                   <div>Time Range: {useCustomTimeRange && startDate && endDate ? 
                     `${new Date(startDate).toLocaleDateString()} - ${new Date(endDate).toLocaleDateString()}` :
                     timeRangeFilter}</div>