diff --git a/AppImage/components/latency-detail-modal.tsx b/AppImage/components/latency-detail-modal.tsx new file mode 100644 index 00000000..da798b0b --- /dev/null +++ b/AppImage/components/latency-detail-modal.tsx @@ -0,0 +1,267 @@ +"use client" + +import { useState, useEffect } from "react" +import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog" +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select" +import { Activity, TrendingDown, TrendingUp, Minus } from "lucide-react" +import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" +import { useIsMobile } from "../hooks/use-mobile" +import { fetchApi } from "@/lib/api-config" + +const TIMEFRAME_OPTIONS = [ + { value: "hour", label: "1 Hour" }, + { value: "6hour", label: "6 Hours" }, + { value: "day", label: "24 Hours" }, + { value: "3day", label: "3 Days" }, + { value: "week", label: "7 Days" }, +] + +const TARGET_OPTIONS = [ + { value: "gateway", label: "Gateway (Router)" }, + { value: "cloudflare", label: "Cloudflare (1.1.1.1)" }, + { value: "google", label: "Google DNS (8.8.8.8)" }, +] + +interface LatencyHistoryPoint { + timestamp: number + value: number + min?: number + max?: number + packet_loss?: number +} + +interface LatencyStats { + min: number + max: number + avg: number + current: number +} + +interface LatencyDetailModalProps { + open: boolean + onOpenChange: (open: boolean) => void + currentLatency?: number +} + +const CustomTooltip = ({ active, payload, label }: any) => { + if (active && payload && payload.length) { + const entry = payload[0] + const packetLoss = entry?.payload?.packet_loss + return ( +
{label}
++ Avg: {latencyData?.stats?.avg ?? 0}ms | Max: {latencyData?.stats?.max ?? 0}ms +