nezumi/9router
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/9router.git synced 2026-09-22 20:00:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added Usage page.

Browse Source
This commit is contained in:
decolua
2026-01-19 10:39:30 +07:00
parent da15660681
commit 3804357aba
12 changed files with 237 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/Header.js
+1
View File
@@ -28,6 +28,7 @@ const getPageInfo = (pathname) => {
if (pathname.includes("/providers")) return { title: "Providers", description: "Manage your AI provider connections", breadcrumbs: [] };
if (pathname.includes("/combos")) return { title: "Combos", description: "Model combos with fallback", breadcrumbs: [] };
if (pathname.includes("/usage")) return { title: "Usage & Analytics", description: "Monitor your API usage, token consumption, and request logs", breadcrumbs: [] };
if (pathname.includes("/cli-tools")) return { title: "CLI Tools", description: "Configure CLI tools", breadcrumbs: [] };
if (pathname.includes("/endpoint")) return { title: "Endpoint", description: "API endpoint configuration", breadcrumbs: [] };
if (pathname.includes("/profile")) return { title: "Settings", description: "Manage your preferences", breadcrumbs: [] };
src/shared/components/ModelSelectModal.js
+73 -8
View File
@@ -1,9 +1,15 @@
"use client";
import { useState, useMemo } from "react";
import { useState, useMemo, useEffect } from "react";
import Modal from "./Modal";
import { getModelsByProviderId, PROVIDER_ID_TO_ALIAS } from "@/shared/constants/models";
import { AI_PROVIDERS } from "@/shared/constants/providers";
import { OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/providers";
// Provider order: OAuth first, then API Key (matches dashboard/providers)
const PROVIDER_ORDER = [
...Object.keys(OAUTH_PROVIDERS),
...Object.keys(APIKEY_PROVIDERS),
];
export default function ModelSelectModal({
isOpen,
@@ -15,19 +21,39 @@ export default function ModelSelectModal({
modelAliases = {},
}) {
const [searchQuery, setSearchQuery] = useState("");
const [combos, setCombos] = useState([]);
// Group models by provider
// Fetch combos when modal opens
useEffect(() => {
if (isOpen) {
fetch("/api/combos")
.then(res => res.json())
.then(data => setCombos(data.combos || []))
.catch(() => setCombos([]));
}
}, [isOpen]);
const allProviders = { ...OAUTH_PROVIDERS, ...APIKEY_PROVIDERS };
// Group models by provider with priority order
const groupedModels = useMemo(() => {
const groups = {};
// Get active provider IDs
const activeProviderIds = activeProviders.length > 0
? activeProviders.map(p => p.provider)
: Object.keys(AI_PROVIDERS);
: PROVIDER_ORDER;
activeProviderIds.forEach((providerId) => {
// Sort by PROVIDER_ORDER
const sortedProviderIds = [...activeProviderIds].sort((a, b) => {
const indexA = PROVIDER_ORDER.indexOf(a);
const indexB = PROVIDER_ORDER.indexOf(b);
return (indexA === -1 ? 999 : indexA) - (indexB === -1 ? 999 : indexB);
});
sortedProviderIds.forEach((providerId) => {
const alias = PROVIDER_ID_TO_ALIAS[providerId] || providerId;
const providerInfo = AI_PROVIDERS[providerId] || { name: providerId, color: "#666" };
const providerInfo = allProviders[providerId] || { name: providerId, color: "#666" };
// For passthrough providers, get models from aliases
if (providerInfo.passthroughModels) {
@@ -65,7 +91,14 @@ export default function ModelSelectModal({
});
return groups;
}, [activeProviders, modelAliases]);
}, [activeProviders, modelAliases, allProviders]);
// Filter combos by search query
const filteredCombos = useMemo(() => {
if (!searchQuery.trim()) return combos;
const query = searchQuery.toLowerCase();
return combos.filter(c => c.name.toLowerCase().includes(query));
}, [combos, searchQuery]);
// Filter models by search query
const filteredGroups = useMemo(() => {
@@ -128,6 +161,38 @@ export default function ModelSelectModal({
{/* Models grouped by provider - compact */}
<div className="max-h-[300px] overflow-y-auto space-y-3">
{/* Combos section - always first */}
{filteredCombos.length > 0 && (
<div>
<div className="flex items-center gap-1.5 mb-1.5 sticky top-0 bg-surface py-0.5">
<span className="material-symbols-outlined text-primary text-[14px]">layers</span>
<span className="text-xs font-medium text-primary">Combos</span>
<span className="text-[10px] text-text-muted">({filteredCombos.length})</span>
</div>
<div className="flex flex-wrap gap-1.5">
{filteredCombos.map((combo) => {
const isSelected = selectedModel === combo.name;
return (
<button
key={combo.id}
onClick={() => handleSelect({ id: combo.name, name: combo.name, value: combo.name })}
className={`
px-2 py-1 rounded-xl text-xs font-medium transition-all border hover:cursor-pointer
${isSelected
? "bg-primary text-white border-primary"
: "bg-surface border-border text-text-main hover:border-primary/50 hover:bg-primary/5"
}
`}
>
{combo.name}
</button>
);
})}
</div>
</div>
)}
{/* Provider models */}
{Object.entries(filteredGroups).map(([providerId, group]) => (
<div key={providerId}>
{/* Provider header */}
@@ -168,7 +233,7 @@ export default function ModelSelectModal({
</div>
))}
{Object.keys(filteredGroups).length === 0 && (
{Object.keys(filteredGroups).length === 0 && filteredCombos.length === 0 && (
<div className="text-center py-4 text-text-muted">
<span className="material-symbols-outlined text-2xl mb-1 block">
search_off
src/shared/components/Sidebar.js
+1
View File
@@ -12,6 +12,7 @@ const navItems = [
{ href: "/dashboard/endpoint", label: "Endpoint", icon: "api" },
{ href: "/dashboard/providers", label: "Providers", icon: "dns" },
{ href: "/dashboard/combos", label: "Combos", icon: "layers" },
{ href: "/dashboard/usage", label: "Usage", icon: "bar_chart" },
{ href: "/dashboard/cli-tools", label: "CLI Tools", icon: "terminal" },
];
src/shared/components/UsageStats.js
+53 -19
View File
@@ -1,6 +1,6 @@
"use client";
import { useState, useEffect, useMemo } from "react";
import { useState, useEffect, useMemo, useCallback } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import Card from "./Card";
import Badge from "./Badge";
@@ -38,6 +38,8 @@ export default function UsageStats() {
const [loading, setLoading] = useState(true);
const [autoRefresh, setAutoRefresh] = useState(true);
const [viewMode, setViewMode] = useState("tokens"); // 'tokens' or 'costs'
const [refreshInterval, setRefreshInterval] = useState(5000); // Start with 5s
const [prevTotalRequests, setPrevTotalRequests] = useState(0);
const toggleSort = (field) => {
const params = new URLSearchParams(searchParams.toString());
@@ -114,34 +116,66 @@ export default function UsageStats() {
return sortData(stats?.byAccount, accountPendingMap);
}, [stats?.byAccount, stats?.pending?.byAccount, sortBy, sortOrder]);
useEffect(() => {
fetchStats();
}, []);
useEffect(() => {
let interval;
if (autoRefresh) {
interval = setInterval(() => {
fetchStats(false); // fetch without loading skeleton
}, 1000);
}
return () => clearInterval(interval);
}, [autoRefresh]);
const fetchStats = async (showLoading = true) => {
const fetchStats = useCallback(async (showLoading = true) => {
if (showLoading) setLoading(true);
try {
const res = await fetch("/api/usage/history");
if (res.ok) {
const data = await res.json();
setStats(data);
// Smart polling: adjust interval based on activity
const currentTotal = data.totalRequests || 0;
if (currentTotal > prevTotalRequests) {
// New requests detected - reset to fast polling
setRefreshInterval(5000);
} else {
// No change - increase interval (exponential backoff)
setRefreshInterval((prev) => Math.min(prev * 2, 60000)); // Max 60s
}
setPrevTotalRequests(currentTotal);
}
} catch (error) {
console.error("Failed to fetch usage stats:", error);
} finally {
if (showLoading) setLoading(false);
}
};
}, [prevTotalRequests]);
useEffect(() => {
fetchStats();
}, [fetchStats]);
useEffect(() => {
let intervalId;
let isPageVisible = true;
// Page Visibility API - pause when tab is hidden
const handleVisibilityChange = () => {
isPageVisible = !document.hidden;
if (isPageVisible && autoRefresh) {
fetchStats(false); // Fetch immediately when tab becomes visible
}
};
document.addEventListener("visibilitychange", handleVisibilityChange);
if (autoRefresh) {
// Clear any existing interval first
if (intervalId) clearInterval(intervalId);
intervalId = setInterval(() => {
if (isPageVisible) {
fetchStats(false); // fetch without loading skeleton
}
}, refreshInterval);
}
return () => {
if (intervalId) clearInterval(intervalId);
document.removeEventListener("visibilitychange", handleVisibilityChange);
};
}, [autoRefresh, refreshInterval, fetchStats]);
if (loading) return <CardSkeleton />;
@@ -202,7 +236,7 @@ export default function UsageStats() {
{/* Auto Refresh Toggle */}
<label className="text-sm font-medium text-text-muted flex items-center gap-2 cursor-pointer">
<span>Auto Refresh (1s)</span>
<span>Auto Refresh ({refreshInterval / 1000}s)</span>
<div
onClick={() => setAutoRefresh(!autoRefresh)}
className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none ${
@@ -291,7 +325,7 @@ export default function UsageStats() {
<div className="flex justify-between items-start gap-4">
<div className="flex flex-col gap-1 flex-1">
<span className="text-text-muted text-sm uppercase font-semibold">
Total Output Tokens
Output Tokens
</span>
<span className="text-2xl font-bold text-success">
{fmt(stats.totalCompletionTokens)}