mirror of
https://github.com/zhom/donutbrowser.git
synced 2026-06-06 23:13:58 +02:00
feat: add network overview
This commit is contained in:
zhom
@@ -0,0 +1,118 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { Area, AreaChart, ResponsiveContainer } from "recharts";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { BandwidthDataPoint } from "@/types";
|
||||
|
||||
interface BandwidthMiniChartProps {
|
||||
data: BandwidthDataPoint[];
|
||||
currentBandwidth?: number;
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function BandwidthMiniChart({
|
||||
data,
|
||||
currentBandwidth: externalBandwidth,
|
||||
onClick,
|
||||
className,
|
||||
}: BandwidthMiniChartProps) {
|
||||
// Transform data for the chart - combine sent and received for total bandwidth
|
||||
const chartData = React.useMemo(() => {
|
||||
// Fill in missing seconds with zeros for smooth chart
|
||||
if (data.length === 0) {
|
||||
// Create 60 seconds of zero data for the past minute
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
return Array.from({ length: 60 }, (_, i) => ({
|
||||
time: now - (59 - i),
|
||||
bandwidth: 0,
|
||||
}));
|
||||
}
|
||||
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const result: { time: number; bandwidth: number }[] = [];
|
||||
|
||||
// Get the last 60 seconds
|
||||
for (let i = 59; i >= 0; i--) {
|
||||
const targetTime = now - i;
|
||||
const point = data.find((d) => d.timestamp === targetTime);
|
||||
result.push({
|
||||
time: targetTime,
|
||||
bandwidth: point ? point.bytes_sent + point.bytes_received : 0,
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [data]);
|
||||
|
||||
// Find max value for scaling
|
||||
const _maxBandwidth = React.useMemo(() => {
|
||||
const max = Math.max(...chartData.map((d) => d.bandwidth), 1);
|
||||
return max;
|
||||
}, [chartData]);
|
||||
|
||||
// Use external bandwidth if provided, otherwise calculate from last data point
|
||||
const currentBandwidth =
|
||||
externalBandwidth ?? chartData[chartData.length - 1]?.bandwidth ?? 0;
|
||||
|
||||
// Format bytes to human readable
|
||||
const formatBytes = (bytes: number): string => {
|
||||
if (bytes === 0) return "0 B/s";
|
||||
if (bytes < 1024) return `${bytes} B/s`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB/s`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB/s`;
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
"relative flex items-center gap-1.5 px-2 rounded cursor-pointer hover:bg-accent/50 transition-colors min-w-[130px] border-none bg-transparent",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex-1 h-3">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart
|
||||
data={chartData}
|
||||
margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="bandwidthGradient"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor="var(--chart-1)"
|
||||
stopOpacity={0.6}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor="var(--chart-1)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="bandwidth"
|
||||
stroke="var(--chart-1)"
|
||||
strokeWidth={1}
|
||||
fill="url(#bandwidthGradient)"
|
||||
isAnimationActive={false}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground whitespace-nowrap min-w-[60px] text-right">
|
||||
{formatBytes(currentBandwidth)}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -69,7 +69,13 @@ import {
|
||||
} from "@/lib/browser-utils";
|
||||
import { trimName } from "@/lib/name-utils";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { BrowserProfile, ProxyCheckResult, StoredProxy } from "@/types";
|
||||
import type {
|
||||
BrowserProfile,
|
||||
ProxyCheckResult,
|
||||
StoredProxy,
|
||||
TrafficSnapshot,
|
||||
} from "@/types";
|
||||
import { BandwidthMiniChart } from "./bandwidth-mini-chart";
|
||||
import {
|
||||
DataTableActionBar,
|
||||
DataTableActionBarAction,
|
||||
@@ -77,6 +83,7 @@ import {
|
||||
} from "./data-table-action-bar";
|
||||
import MultipleSelector, { type Option } from "./multiple-selector";
|
||||
import { ProxyCheckButton } from "./proxy-check-button";
|
||||
import { TrafficDetailsDialog } from "./traffic-details-dialog";
|
||||
import { Input } from "./ui/input";
|
||||
import { RippleButton } from "./ui/ripple";
|
||||
|
||||
@@ -150,6 +157,10 @@ type TableMeta = {
|
||||
// Overflow actions
|
||||
onAssignProfilesToGroup?: (profileIds: string[]) => void;
|
||||
onConfigureCamoufox?: (profile: BrowserProfile) => void;
|
||||
|
||||
// Traffic snapshots (lightweight real-time data)
|
||||
trafficSnapshots: Record<string, TrafficSnapshot>;
|
||||
onOpenTrafficDialog?: (profileId: string) => void;
|
||||
};
|
||||
|
||||
const TagsCell = React.memo<{
|
||||
@@ -779,6 +790,13 @@ export function ProfilesDataTable({
|
||||
const [openNoteEditorFor, setOpenNoteEditorFor] = React.useState<
|
||||
string | null
|
||||
>(null);
|
||||
const [trafficSnapshots, setTrafficSnapshots] = React.useState<
|
||||
Record<string, TrafficSnapshot>
|
||||
>({});
|
||||
const [trafficDialogProfile, setTrafficDialogProfile] = React.useState<{
|
||||
id: string;
|
||||
name?: string;
|
||||
} | null>(null);
|
||||
|
||||
// Load cached check results for proxies
|
||||
React.useEffect(() => {
|
||||
@@ -847,6 +865,39 @@ export function ProfilesDataTable({
|
||||
stoppingProfiles,
|
||||
);
|
||||
|
||||
// Fetch traffic snapshots for running profiles (lightweight, real-time data)
|
||||
// Using runningProfiles.size as dependency to avoid Set reference comparison issues
|
||||
const runningCount = runningProfiles.size;
|
||||
React.useEffect(() => {
|
||||
if (!browserState.isClient) return;
|
||||
|
||||
if (runningCount === 0) {
|
||||
setTrafficSnapshots({});
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchTrafficSnapshots = async () => {
|
||||
try {
|
||||
const allSnapshots = await invoke<TrafficSnapshot[]>(
|
||||
"get_all_traffic_snapshots",
|
||||
);
|
||||
const newSnapshots: Record<string, TrafficSnapshot> = {};
|
||||
for (const snapshot of allSnapshots) {
|
||||
if (snapshot.profile_id) {
|
||||
newSnapshots[snapshot.profile_id] = snapshot;
|
||||
}
|
||||
}
|
||||
setTrafficSnapshots(newSnapshots);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch traffic snapshots:", error);
|
||||
}
|
||||
};
|
||||
|
||||
void fetchTrafficSnapshots();
|
||||
const interval = setInterval(fetchTrafficSnapshots, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, [browserState.isClient, runningCount]);
|
||||
|
||||
// Clear launching/stopping spinners when backend reports running status changes
|
||||
React.useEffect(() => {
|
||||
if (!browserState.isClient) return;
|
||||
@@ -1185,6 +1236,13 @@ export function ProfilesDataTable({
|
||||
// Overflow actions
|
||||
onAssignProfilesToGroup,
|
||||
onConfigureCamoufox,
|
||||
|
||||
// Traffic snapshots (lightweight real-time data)
|
||||
trafficSnapshots,
|
||||
onOpenTrafficDialog: (profileId: string) => {
|
||||
const profile = profiles.find((p) => p.id === profileId);
|
||||
setTrafficDialogProfile({ id: profileId, name: profile?.name });
|
||||
},
|
||||
}),
|
||||
[
|
||||
selectedProfiles,
|
||||
@@ -1214,6 +1272,8 @@ export function ProfilesDataTable({
|
||||
profileToRename,
|
||||
newProfileName,
|
||||
isRenamingSaving,
|
||||
trafficSnapshots,
|
||||
profiles,
|
||||
renameError,
|
||||
onKillProfile,
|
||||
onLaunchProfile,
|
||||
@@ -1629,6 +1689,24 @@ export function ProfilesDataTable({
|
||||
: null;
|
||||
const isSelectorOpen = meta.openProxySelectorFor === profile.id;
|
||||
|
||||
// When profile is running, show bandwidth chart instead of proxy selector
|
||||
if (isRunning && meta.trafficSnapshots) {
|
||||
// Find the traffic snapshot for this profile by matching profile_id
|
||||
const snapshot = meta.trafficSnapshots[profile.id];
|
||||
const bandwidthData = snapshot?.recent_bandwidth || [];
|
||||
const currentBandwidth =
|
||||
(snapshot?.current_bytes_sent || 0) +
|
||||
(snapshot?.current_bytes_received || 0);
|
||||
|
||||
return (
|
||||
<BandwidthMiniChart
|
||||
data={bandwidthData}
|
||||
currentBandwidth={currentBandwidth}
|
||||
onClick={() => meta.onOpenTrafficDialog?.(profile.id)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (profile.browser === "tor-browser") {
|
||||
return (
|
||||
<Tooltip>
|
||||
@@ -1791,6 +1869,13 @@ export function ProfilesDataTable({
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
meta.onOpenTrafficDialog?.(profile.id);
|
||||
}}
|
||||
>
|
||||
View Network
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
meta.onAssignProfilesToGroup?.([profile.id]);
|
||||
@@ -1952,6 +2037,14 @@ export function ProfilesDataTable({
|
||||
</DataTableActionBarAction>
|
||||
)}
|
||||
</DataTableActionBar>
|
||||
{trafficDialogProfile && (
|
||||
<TrafficDetailsDialog
|
||||
isOpen={trafficDialogProfile !== null}
|
||||
onClose={() => setTrafficDialogProfile(null)}
|
||||
profileId={trafficDialogProfile.id}
|
||||
profileName={trafficDialogProfile.name}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -268,6 +268,8 @@ export function SettingsDialog({ isOpen, onClose }: SettingsDialogProps) {
|
||||
setIsClearingCache(true);
|
||||
try {
|
||||
await invoke("clear_all_version_cache_and_refetch");
|
||||
// Also clear traffic stats cache
|
||||
await invoke("clear_all_traffic_stats");
|
||||
// Don't show immediate success toast - let the version update progress events handle it
|
||||
} catch (error) {
|
||||
console.error("Failed to clear cache:", error);
|
||||
|
||||
@@ -0,0 +1,545 @@
|
||||
"use client";
|
||||
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import * as React from "react";
|
||||
import type { TooltipProps } from "recharts";
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
CartesianGrid,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import type {
|
||||
NameType,
|
||||
ValueType,
|
||||
} from "recharts/types/component/DefaultTooltipContent";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import type { TrafficStats } from "@/types";
|
||||
|
||||
type TimePeriod =
|
||||
| "1m"
|
||||
| "5m"
|
||||
| "30m"
|
||||
| "1h"
|
||||
| "2h"
|
||||
| "4h"
|
||||
| "1d"
|
||||
| "7d"
|
||||
| "30d"
|
||||
| "all";
|
||||
|
||||
interface TrafficDetailsDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
profileId?: string;
|
||||
profileName?: string;
|
||||
}
|
||||
|
||||
const formatBytes = (bytes: number): string => {
|
||||
if (bytes === 0) return "0 B";
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024)
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
|
||||
};
|
||||
|
||||
const formatBytesPerSecond = (bytes: number): string => {
|
||||
if (bytes === 0) return "0 B/s";
|
||||
if (bytes < 1024) return `${bytes} B/s`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB/s`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB/s`;
|
||||
};
|
||||
|
||||
export function TrafficDetailsDialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
profileId,
|
||||
profileName,
|
||||
}: TrafficDetailsDialogProps) {
|
||||
const [stats, setStats] = React.useState<TrafficStats | null>(null);
|
||||
const [timePeriod, setTimePeriod] = React.useState<TimePeriod>("5m");
|
||||
|
||||
// Fetch stats periodically
|
||||
React.useEffect(() => {
|
||||
if (!isOpen || !profileId) return;
|
||||
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const allStats = await invoke<TrafficStats[]>("get_all_traffic_stats");
|
||||
const profileStats = allStats.find((s) => s.profile_id === profileId);
|
||||
setStats(profileStats || null);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch traffic stats:", error);
|
||||
}
|
||||
};
|
||||
|
||||
void fetchStats();
|
||||
// Only poll every 2 seconds for full stats (more expensive)
|
||||
const interval = setInterval(fetchStats, 2000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isOpen, profileId]);
|
||||
|
||||
// Filter data based on time period
|
||||
const filteredData = React.useMemo(() => {
|
||||
if (!stats?.bandwidth_history) return [];
|
||||
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
// Get cutoff seconds for time period
|
||||
let cutoffSeconds: number;
|
||||
switch (timePeriod) {
|
||||
case "1m":
|
||||
cutoffSeconds = 60;
|
||||
break;
|
||||
case "5m":
|
||||
cutoffSeconds = 300;
|
||||
break;
|
||||
case "30m":
|
||||
cutoffSeconds = 1800;
|
||||
break;
|
||||
case "1h":
|
||||
cutoffSeconds = 3600;
|
||||
break;
|
||||
case "2h":
|
||||
cutoffSeconds = 7200;
|
||||
break;
|
||||
case "4h":
|
||||
cutoffSeconds = 14400;
|
||||
break;
|
||||
case "1d":
|
||||
cutoffSeconds = 86400;
|
||||
break;
|
||||
case "7d":
|
||||
cutoffSeconds = 604800;
|
||||
break;
|
||||
case "30d":
|
||||
cutoffSeconds = 2592000;
|
||||
break;
|
||||
case "all":
|
||||
cutoffSeconds = Number.POSITIVE_INFINITY;
|
||||
break;
|
||||
default:
|
||||
cutoffSeconds = 300;
|
||||
}
|
||||
|
||||
const cutoff = now - cutoffSeconds;
|
||||
|
||||
return stats.bandwidth_history
|
||||
.filter((d) => d.timestamp >= cutoff)
|
||||
.map((d) => ({
|
||||
time: d.timestamp,
|
||||
sent: d.bytes_sent,
|
||||
received: d.bytes_received,
|
||||
total: d.bytes_sent + d.bytes_received,
|
||||
}));
|
||||
}, [stats, timePeriod]);
|
||||
|
||||
// Calculate stats for the selected period
|
||||
const periodStats = React.useMemo(() => {
|
||||
if (!filteredData.length) {
|
||||
return { sent: 0, received: 0, requests: 0 };
|
||||
}
|
||||
|
||||
const sent = filteredData.reduce((sum, d) => sum + d.sent, 0);
|
||||
const received = filteredData.reduce((sum, d) => sum + d.received, 0);
|
||||
|
||||
// Estimate requests based on filtered data time range
|
||||
// We don't have per-second request data, so use total if "all" or estimate
|
||||
const requests =
|
||||
timePeriod === "all"
|
||||
? stats?.total_requests || 0
|
||||
: Math.round(
|
||||
((stats?.total_requests || 0) * filteredData.length) /
|
||||
(stats?.bandwidth_history?.length || 1),
|
||||
);
|
||||
|
||||
return { sent, received, requests };
|
||||
}, [filteredData, stats, timePeriod]);
|
||||
|
||||
// Tooltip render function
|
||||
const renderTooltip = React.useCallback(
|
||||
(props: TooltipProps<ValueType, NameType>) => {
|
||||
const { active, payload, label } = props;
|
||||
if (!active || !payload?.length) return null;
|
||||
|
||||
const time = new Date((typeof label === "number" ? label : 0) * 1000);
|
||||
const formattedTime = time.toLocaleTimeString();
|
||||
|
||||
return (
|
||||
<div className="bg-popover border rounded-lg px-3 py-2 shadow-lg">
|
||||
<p className="text-xs text-muted-foreground mb-1">{formattedTime}</p>
|
||||
{payload.map((entry) => (
|
||||
<p key={String(entry.dataKey)} className="text-sm">
|
||||
<span className="text-muted-foreground">
|
||||
{entry.dataKey === "sent" ? "↑ Sent: " : "↓ Received: "}
|
||||
</span>
|
||||
<span className="font-medium">
|
||||
{formatBytesPerSecond(
|
||||
typeof entry.value === "number" ? entry.value : 0,
|
||||
)}
|
||||
</span>
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// Top domains sorted by total traffic
|
||||
const topDomainsByTraffic = React.useMemo(() => {
|
||||
if (!stats?.domains) return [];
|
||||
return Object.values(stats.domains)
|
||||
.sort(
|
||||
(a, b) =>
|
||||
b.bytes_sent + b.bytes_received - (a.bytes_sent + a.bytes_received),
|
||||
)
|
||||
.slice(0, 10);
|
||||
}, [stats]);
|
||||
|
||||
// Top domains sorted by request count
|
||||
const topDomainsByRequests = React.useMemo(() => {
|
||||
if (!stats?.domains) return [];
|
||||
return Object.values(stats.domains)
|
||||
.sort((a, b) => b.request_count - a.request_count)
|
||||
.slice(0, 10);
|
||||
}, [stats]);
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Traffic Details
|
||||
{profileName && (
|
||||
<span className="text-muted-foreground font-normal ml-2">
|
||||
— {profileName}
|
||||
</span>
|
||||
)}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<ScrollArea className="h-[60vh]">
|
||||
<div className="space-y-6 pr-4">
|
||||
{/* Chart with Period Selector */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-sm font-medium">Bandwidth Over Time</h3>
|
||||
<Select
|
||||
value={timePeriod}
|
||||
onValueChange={(v) => setTimePeriod(v as TimePeriod)}
|
||||
>
|
||||
<SelectTrigger className="w-[120px] h-8">
|
||||
<SelectValue placeholder="Time period" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1m">Last 1 min</SelectItem>
|
||||
<SelectItem value="5m">Last 5 min</SelectItem>
|
||||
<SelectItem value="30m">Last 30 min</SelectItem>
|
||||
<SelectItem value="1h">Last 1 hour</SelectItem>
|
||||
<SelectItem value="2h">Last 2 hours</SelectItem>
|
||||
<SelectItem value="4h">Last 4 hours</SelectItem>
|
||||
<SelectItem value="1d">Last 1 day</SelectItem>
|
||||
<SelectItem value="7d">Last 7 days</SelectItem>
|
||||
<SelectItem value="30d">Last 30 days</SelectItem>
|
||||
<SelectItem value="all">All time</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="h-[200px] w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart
|
||||
data={filteredData}
|
||||
margin={{ top: 10, right: 10, bottom: 0, left: 0 }}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="sentGradient"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor="var(--chart-1)"
|
||||
stopOpacity={0.5}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor="var(--chart-1)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="receivedGradient"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor="var(--chart-2)"
|
||||
stopOpacity={0.5}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor="var(--chart-2)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
className="stroke-muted"
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="time"
|
||||
tickFormatter={(t) =>
|
||||
new Date(t * 1000).toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
}
|
||||
className="text-xs"
|
||||
tick={{ fill: "var(--muted-foreground)" }}
|
||||
/>
|
||||
<YAxis
|
||||
tickFormatter={(v) => formatBytesPerSecond(v)}
|
||||
className="text-xs"
|
||||
tick={{ fill: "var(--muted-foreground)" }}
|
||||
width={60}
|
||||
/>
|
||||
<Tooltip content={renderTooltip} />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="sent"
|
||||
stackId="1"
|
||||
stroke="var(--chart-1)"
|
||||
fill="url(#sentGradient)"
|
||||
strokeWidth={1.5}
|
||||
isAnimationActive={false}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="received"
|
||||
stackId="1"
|
||||
stroke="var(--chart-2)"
|
||||
fill="url(#receivedGradient)"
|
||||
strokeWidth={1.5}
|
||||
isAnimationActive={false}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-6 mt-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-3 h-3 rounded"
|
||||
style={{ backgroundColor: "var(--chart-1)" }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">Sent</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-3 h-3 rounded"
|
||||
style={{ backgroundColor: "var(--chart-2)" }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Received
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Period Stats */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="bg-muted/50 rounded-lg p-3">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Sent ({timePeriod === "all" ? "total" : timePeriod})
|
||||
</p>
|
||||
<p className="text-lg font-semibold text-chart-1">
|
||||
{formatBytes(periodStats.sent)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-muted/50 rounded-lg p-3">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Received ({timePeriod === "all" ? "total" : timePeriod})
|
||||
</p>
|
||||
<p className="text-lg font-semibold text-chart-2">
|
||||
{formatBytes(periodStats.received)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-muted/50 rounded-lg p-3">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Requests ({timePeriod === "all" ? "total" : `~${timePeriod}`})
|
||||
</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{periodStats.requests.toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Total Stats (smaller, under period stats) */}
|
||||
<div className="flex items-center gap-6 text-sm text-muted-foreground border-t pt-4">
|
||||
<div>
|
||||
<span className="font-medium">Total:</span>{" "}
|
||||
{formatBytes(
|
||||
(stats?.total_bytes_sent || 0) +
|
||||
(stats?.total_bytes_received || 0),
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Requests:</span>{" "}
|
||||
{stats?.total_requests?.toLocaleString() || 0}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Disclaimer about proxy/VPN traffic calculation */}
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
Note: If you are using a proxy, VPN, or similar service, your
|
||||
provider may calculate traffic differently due to encryption
|
||||
overhead and protocol differences.
|
||||
</p>
|
||||
|
||||
{/* Top Domains by Traffic */}
|
||||
{topDomainsByTraffic.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-medium mb-2">
|
||||
Top Domains by Traffic
|
||||
</h3>
|
||||
<div className="border rounded-md">
|
||||
<div className="grid grid-cols-[1fr_80px_80px_80px] gap-2 px-3 py-2 text-xs font-medium text-muted-foreground border-b bg-muted/30">
|
||||
<span>Domain</span>
|
||||
<span className="text-right">Requests</span>
|
||||
<span className="text-right">Sent</span>
|
||||
<span className="text-right">Received</span>
|
||||
</div>
|
||||
<div className="max-h-[180px] overflow-y-auto">
|
||||
{topDomainsByTraffic.map((domain, index) => (
|
||||
<div
|
||||
key={domain.domain}
|
||||
className="grid grid-cols-[1fr_80px_80px_80px] gap-2 px-3 py-2 text-sm border-b last:border-b-0 hover:bg-muted/30"
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="text-xs text-muted-foreground w-4 shrink-0">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="truncate" title={domain.domain}>
|
||||
{domain.domain}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-right text-muted-foreground">
|
||||
{domain.request_count.toLocaleString()}
|
||||
</span>
|
||||
<span className="text-right text-chart-1">
|
||||
{formatBytes(domain.bytes_sent)}
|
||||
</span>
|
||||
<span className="text-right text-chart-2">
|
||||
{formatBytes(domain.bytes_received)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Top Domains by Requests */}
|
||||
{topDomainsByRequests.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-medium mb-2">
|
||||
Top Domains by Requests
|
||||
</h3>
|
||||
<div className="border rounded-md">
|
||||
<div className="grid grid-cols-[1fr_80px_100px] gap-2 px-3 py-2 text-xs font-medium text-muted-foreground border-b bg-muted/30">
|
||||
<span>Domain</span>
|
||||
<span className="text-right">Requests</span>
|
||||
<span className="text-right">Total Traffic</span>
|
||||
</div>
|
||||
<div className="max-h-[180px] overflow-y-auto">
|
||||
{topDomainsByRequests.map((domain, index) => (
|
||||
<div
|
||||
key={domain.domain}
|
||||
className="grid grid-cols-[1fr_80px_100px] gap-2 px-3 py-2 text-sm border-b last:border-b-0 hover:bg-muted/30"
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="text-xs text-muted-foreground w-4 shrink-0">
|
||||
{index + 1}
|
||||
</span>
|
||||
<span className="truncate" title={domain.domain}>
|
||||
{domain.domain}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-right text-muted-foreground">
|
||||
{domain.request_count.toLocaleString()}
|
||||
</span>
|
||||
<span className="text-right">
|
||||
{formatBytes(
|
||||
domain.bytes_sent + domain.bytes_received,
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Unique IPs */}
|
||||
{stats?.unique_ips && stats.unique_ips.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-medium mb-2">
|
||||
Unique IPs ({stats.unique_ips.length})
|
||||
</h3>
|
||||
<div className="border rounded-md p-3 max-h-[120px] overflow-y-auto">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{stats.unique_ips.map((ip) => (
|
||||
<span
|
||||
key={ip}
|
||||
className="text-xs bg-muted px-2 py-1 rounded font-mono"
|
||||
>
|
||||
{ip}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No data state */}
|
||||
{!stats && (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<p>No traffic data available for this profile.</p>
|
||||
<p className="text-sm mt-1">
|
||||
Traffic data will appear after you launch the profile.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
import type * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
@@ -20,7 +18,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -0,0 +1,370 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as RechartsPrimitive from "recharts";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||
const THEMES = { light: "", dark: ".dark" } as const;
|
||||
|
||||
export type ChartConfig = {
|
||||
[k in string]: {
|
||||
label?: React.ReactNode;
|
||||
icon?: React.ComponentType;
|
||||
} & (
|
||||
| { color?: string; theme?: never }
|
||||
| { color?: never; theme: Record<keyof typeof THEMES, string> }
|
||||
);
|
||||
};
|
||||
|
||||
type ChartContextProps = {
|
||||
config: ChartConfig;
|
||||
};
|
||||
|
||||
const ChartContext = React.createContext<ChartContextProps | null>(null);
|
||||
|
||||
function useChart() {
|
||||
const context = React.useContext(ChartContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useChart must be used within a <ChartContainer />");
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
const ChartContainer = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> & {
|
||||
config: ChartConfig;
|
||||
children: React.ComponentProps<
|
||||
typeof RechartsPrimitive.ResponsiveContainer
|
||||
>["children"];
|
||||
}
|
||||
>(({ id, className, children, config, ...props }, ref) => {
|
||||
const uniqueId = React.useId();
|
||||
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
|
||||
|
||||
return (
|
||||
<ChartContext.Provider value={{ config }}>
|
||||
<div
|
||||
data-chart={chartId}
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChartStyle id={chartId} config={config} />
|
||||
<RechartsPrimitive.ResponsiveContainer>
|
||||
{children}
|
||||
</RechartsPrimitive.ResponsiveContainer>
|
||||
</div>
|
||||
</ChartContext.Provider>
|
||||
);
|
||||
});
|
||||
ChartContainer.displayName = "Chart";
|
||||
|
||||
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
|
||||
const colorConfig = Object.entries(config).filter(
|
||||
([, config]) => config.theme || config.color,
|
||||
);
|
||||
|
||||
if (!colorConfig.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<style
|
||||
// biome-ignore lint/security/noDangerouslySetInnerHtml: Safe usage for CSS variables from chart config
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: Object.entries(THEMES)
|
||||
.map(
|
||||
([theme, prefix]) => `
|
||||
${prefix} [data-chart=${id}] {
|
||||
${colorConfig
|
||||
.map(([key, itemConfig]) => {
|
||||
const color =
|
||||
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
|
||||
itemConfig.color;
|
||||
return color ? ` --color-${key}: ${color};` : null;
|
||||
})
|
||||
.join("\n")}
|
||||
}
|
||||
`,
|
||||
)
|
||||
.join("\n"),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ChartTooltip = RechartsPrimitive.Tooltip;
|
||||
|
||||
const ChartTooltipContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
|
||||
React.ComponentProps<"div"> & {
|
||||
hideLabel?: boolean;
|
||||
hideIndicator?: boolean;
|
||||
indicator?: "line" | "dot" | "dashed";
|
||||
nameKey?: string;
|
||||
labelKey?: string;
|
||||
}
|
||||
>(
|
||||
(
|
||||
{
|
||||
active,
|
||||
payload,
|
||||
className,
|
||||
indicator = "dot",
|
||||
hideLabel = false,
|
||||
hideIndicator = false,
|
||||
label,
|
||||
labelFormatter,
|
||||
labelClassName,
|
||||
formatter,
|
||||
color,
|
||||
nameKey,
|
||||
labelKey,
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const { config } = useChart();
|
||||
|
||||
const tooltipLabel = React.useMemo(() => {
|
||||
if (hideLabel || !payload?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [item] = payload;
|
||||
const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||
const value =
|
||||
!labelKey && typeof label === "string"
|
||||
? config[label as keyof typeof config]?.label || label
|
||||
: itemConfig?.label;
|
||||
|
||||
if (labelFormatter) {
|
||||
return (
|
||||
<div className={cn("font-medium", labelClassName)}>
|
||||
{labelFormatter(value, payload)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <div className={cn("font-medium", labelClassName)}>{value}</div>;
|
||||
}, [
|
||||
label,
|
||||
labelFormatter,
|
||||
payload,
|
||||
hideLabel,
|
||||
labelClassName,
|
||||
config,
|
||||
labelKey,
|
||||
]);
|
||||
|
||||
if (!active || !payload?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const nestLabel = payload.length === 1 && indicator !== "dot";
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{!nestLabel ? tooltipLabel : null}
|
||||
<div className="grid gap-1.5">
|
||||
{payload
|
||||
.filter((item) => item.type !== "none")
|
||||
.map((item, index) => {
|
||||
const key = `${nameKey || item.name || item.dataKey || "value"}`;
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||
const indicatorColor = color || item.payload.fill || item.color;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.dataKey}
|
||||
className={cn(
|
||||
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
|
||||
indicator === "dot" && "items-center",
|
||||
)}
|
||||
>
|
||||
{formatter && item?.value !== undefined && item.name ? (
|
||||
formatter(item.value, item.name, item, index, item.payload)
|
||||
) : (
|
||||
<>
|
||||
{itemConfig?.icon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
!hideIndicator && (
|
||||
<div
|
||||
className={cn(
|
||||
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
|
||||
{
|
||||
"h-2.5 w-2.5": indicator === "dot",
|
||||
"w-1": indicator === "line",
|
||||
"w-0 border-[1.5px] border-dashed bg-transparent":
|
||||
indicator === "dashed",
|
||||
"my-0.5": nestLabel && indicator === "dashed",
|
||||
},
|
||||
)}
|
||||
style={
|
||||
{
|
||||
"--color-bg": indicatorColor,
|
||||
"--color-border": indicatorColor,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-1 justify-between leading-none",
|
||||
nestLabel ? "items-end" : "items-center",
|
||||
)}
|
||||
>
|
||||
<div className="grid gap-1.5">
|
||||
{nestLabel ? tooltipLabel : null}
|
||||
<span className="text-muted-foreground">
|
||||
{itemConfig?.label || item.name}
|
||||
</span>
|
||||
</div>
|
||||
{item.value && (
|
||||
<span className="font-mono font-medium tabular-nums text-foreground">
|
||||
{item.value.toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
ChartTooltipContent.displayName = "ChartTooltip";
|
||||
|
||||
const ChartLegend = RechartsPrimitive.Legend;
|
||||
|
||||
const ChartLegendContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.ComponentProps<"div"> &
|
||||
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
|
||||
hideIcon?: boolean;
|
||||
nameKey?: string;
|
||||
}
|
||||
>(
|
||||
(
|
||||
{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
|
||||
ref,
|
||||
) => {
|
||||
const { config } = useChart();
|
||||
|
||||
if (!payload?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-4",
|
||||
verticalAlign === "top" ? "pb-3" : "pt-3",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{payload
|
||||
.filter((item) => item.type !== "none")
|
||||
.map((item) => {
|
||||
const key = `${nameKey || item.dataKey || "value"}`;
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.value}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{itemConfig?.icon && !hideIcon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
<div
|
||||
className="h-2 w-2 shrink-0 rounded-[2px]"
|
||||
style={{
|
||||
backgroundColor: item.color,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{itemConfig?.label}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
ChartLegendContent.displayName = "ChartLegend";
|
||||
|
||||
// Helper to extract item config from a payload.
|
||||
function getPayloadConfigFromPayload(
|
||||
config: ChartConfig,
|
||||
payload: unknown,
|
||||
key: string,
|
||||
) {
|
||||
if (typeof payload !== "object" || payload === null) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const payloadPayload =
|
||||
"payload" in payload &&
|
||||
typeof payload.payload === "object" &&
|
||||
payload.payload !== null
|
||||
? payload.payload
|
||||
: undefined;
|
||||
|
||||
let configLabelKey: string = key;
|
||||
|
||||
if (
|
||||
key in payload &&
|
||||
typeof payload[key as keyof typeof payload] === "string"
|
||||
) {
|
||||
configLabelKey = payload[key as keyof typeof payload] as string;
|
||||
} else if (
|
||||
payloadPayload &&
|
||||
key in payloadPayload &&
|
||||
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
|
||||
) {
|
||||
configLabelKey = payloadPayload[
|
||||
key as keyof typeof payloadPayload
|
||||
] as string;
|
||||
}
|
||||
|
||||
return configLabelKey in config
|
||||
? config[configLabelKey]
|
||||
: config[key as keyof typeof config];
|
||||
}
|
||||
|
||||
export {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartStyle,
|
||||
};
|
||||
@@ -79,6 +79,11 @@
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.705 0.015 286.067);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -113,6 +118,11 @@
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.552 0.016 285.938);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
@@ -268,3 +268,44 @@ export interface CamoufoxLaunchResult {
|
||||
profilePath?: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
// Traffic stats types
|
||||
export interface BandwidthDataPoint {
|
||||
timestamp: number;
|
||||
bytes_sent: number;
|
||||
bytes_received: number;
|
||||
}
|
||||
|
||||
export interface DomainAccess {
|
||||
domain: string;
|
||||
request_count: number;
|
||||
bytes_sent: number;
|
||||
bytes_received: number;
|
||||
first_access: number;
|
||||
last_access: number;
|
||||
}
|
||||
|
||||
export interface TrafficStats {
|
||||
proxy_id: string;
|
||||
profile_id?: string;
|
||||
session_start: number;
|
||||
last_update: number;
|
||||
total_bytes_sent: number;
|
||||
total_bytes_received: number;
|
||||
total_requests: number;
|
||||
bandwidth_history: BandwidthDataPoint[];
|
||||
domains: Record<string, DomainAccess>;
|
||||
unique_ips: string[];
|
||||
}
|
||||
|
||||
export interface TrafficSnapshot {
|
||||
profile_id?: string;
|
||||
session_start: number;
|
||||
last_update: number;
|
||||
total_bytes_sent: number;
|
||||
total_bytes_received: number;
|
||||
total_requests: number;
|
||||
current_bytes_sent: number;
|
||||
current_bytes_received: number;
|
||||
recent_bandwidth: BandwidthDataPoint[];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user