feat: implement request tracking and enhance usage stats display
This commit is contained in:
Catalin Stanciu
decolua
parent
7f71916f9e
commit
e4f92cd104
4 changed files with 199 additions and 20 deletions
|
|
@ -8,7 +8,7 @@ import { createRequestLogger } from "../utils/requestLogger.js";
|
|||
import { getModelTargetFormat, PROVIDER_ID_TO_ALIAS } from "../config/providerModels.js";
|
||||
import { createErrorResult, parseUpstreamError, formatProviderError } from "../utils/error.js";
|
||||
import { handleBypassRequest } from "../utils/bypassHandler.js";
|
||||
import { saveRequestUsage } from "@/lib/usageDb.js";
|
||||
import { saveRequestUsage, trackPendingRequest } from "@/lib/usageDb.js";
|
||||
|
||||
/**
|
||||
* Extract usage from non-streaming response body
|
||||
|
|
@ -122,6 +122,9 @@ export async function handleChatCore({ body, modelInfo, credentials, log, onCred
|
|||
const providerUrl = buildProviderUrl(provider, model, stream);
|
||||
const providerHeaders = buildProviderHeaders(provider, credentials, stream, translatedBody);
|
||||
|
||||
// Track pending request
|
||||
trackPendingRequest(model, provider, connectionId, true);
|
||||
|
||||
// 2. Log converted request to provider
|
||||
reqLogger.logConvertedRequest(providerUrl, providerHeaders, translatedBody);
|
||||
|
||||
|
|
@ -155,6 +158,7 @@ export async function handleChatCore({ body, modelInfo, credentials, log, onCred
|
|||
signal: streamController.signal
|
||||
});
|
||||
} catch (error) {
|
||||
trackPendingRequest(model, provider, connectionId, false);
|
||||
if (error.name === "AbortError") {
|
||||
streamController.handleError(error);
|
||||
return createErrorResult(499, "Request aborted");
|
||||
|
|
@ -248,6 +252,7 @@ export async function handleChatCore({ body, modelInfo, credentials, log, onCred
|
|||
|
||||
// Check provider response - return error info for fallback handling
|
||||
if (!providerResponse.ok) {
|
||||
trackPendingRequest(model, provider, connectionId, false);
|
||||
const { statusCode, message } = await parseUpstreamError(providerResponse);
|
||||
const errMsg = formatProviderError(new Error(message), provider, model, statusCode);
|
||||
console.log(`${COLORS.red}[ERROR] ${errMsg}${COLORS.reset}`);
|
||||
|
|
@ -260,6 +265,7 @@ export async function handleChatCore({ body, modelInfo, credentials, log, onCred
|
|||
|
||||
// Non-streaming response
|
||||
if (!stream) {
|
||||
trackPendingRequest(model, provider, connectionId, false);
|
||||
const responseBody = await providerResponse.json();
|
||||
|
||||
// Notify success - caller can clear error status if needed
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { translateResponse, initState } from "../translator/index.js";
|
||||
import { FORMATS } from "../translator/formats.js";
|
||||
import { saveRequestUsage } from "@/lib/usageDb.js";
|
||||
import { saveRequestUsage, trackPendingRequest } from "@/lib/usageDb.js";
|
||||
|
||||
// Get HH:MM:SS timestamp
|
||||
function getTimeString() {
|
||||
|
|
@ -220,6 +220,7 @@ export function createSSEStream(options = {}) {
|
|||
},
|
||||
|
||||
flush(controller) {
|
||||
trackPendingRequest(model, provider, connectionId, false);
|
||||
try {
|
||||
const remaining = decoder.decode();
|
||||
if (remaining) buffer += remaining;
|
||||
|
|
|
|||
|
|
@ -49,6 +49,35 @@ const defaultData = {
|
|||
// Singleton instance
|
||||
let dbInstance = null;
|
||||
|
||||
// Track in-flight requests in memory
|
||||
const pendingRequests = {
|
||||
byModel: {},
|
||||
byAccount: {}
|
||||
};
|
||||
|
||||
/**
|
||||
* Track a pending request
|
||||
* @param {string} model
|
||||
* @param {string} provider
|
||||
* @param {string} connectionId
|
||||
* @param {boolean} started - true if started, false if finished
|
||||
*/
|
||||
export function trackPendingRequest(model, provider, connectionId, started) {
|
||||
const modelKey = provider ? `${model} (${provider})` : model;
|
||||
|
||||
// Track by model
|
||||
if (!pendingRequests.byModel[modelKey]) pendingRequests.byModel[modelKey] = 0;
|
||||
pendingRequests.byModel[modelKey] = Math.max(0, pendingRequests.byModel[modelKey] + (started ? 1 : -1));
|
||||
|
||||
// Track by account
|
||||
if (connectionId) {
|
||||
const accountKey = connectionId; // We use connectionId as key here
|
||||
if (!pendingRequests.byAccount[accountKey]) pendingRequests.byAccount[accountKey] = {};
|
||||
if (!pendingRequests.byAccount[accountKey][modelKey]) pendingRequests.byAccount[accountKey][modelKey] = 0;
|
||||
pendingRequests.byAccount[accountKey][modelKey] = Math.max(0, pendingRequests.byAccount[accountKey][modelKey] + (started ? 1 : -1));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get usage database instance (singleton)
|
||||
*/
|
||||
|
|
@ -170,9 +199,31 @@ export async function getUsageStats() {
|
|||
byProvider: {},
|
||||
byModel: {},
|
||||
byAccount: {},
|
||||
last10Minutes: []
|
||||
last10Minutes: [],
|
||||
pending: pendingRequests,
|
||||
activeRequests: []
|
||||
};
|
||||
|
||||
// Build active requests list from pending counts
|
||||
for (const [connectionId, models] of Object.entries(pendingRequests.byAccount)) {
|
||||
for (const [modelKey, count] of Object.entries(models)) {
|
||||
if (count > 0) {
|
||||
const accountName = connectionMap[connectionId] || `Account ${connectionId.slice(0, 8)}...`;
|
||||
// modelKey is "model (provider)"
|
||||
const match = modelKey.match(/^(.*) \((.*)\)$/);
|
||||
const modelName = match ? match[1] : modelKey;
|
||||
const providerName = match ? match[2] : "unknown";
|
||||
|
||||
stats.activeRequests.push({
|
||||
model: modelName,
|
||||
provider: providerName,
|
||||
account: accountName,
|
||||
count
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize 10-minute buckets using stable minute boundaries
|
||||
const now = new Date();
|
||||
// Floor to the start of the current minute
|
||||
|
|
@ -232,12 +283,16 @@ export async function getUsageStats() {
|
|||
promptTokens: 0,
|
||||
completionTokens: 0,
|
||||
rawModel: entry.model,
|
||||
provider: entry.provider
|
||||
provider: entry.provider,
|
||||
lastUsed: entry.timestamp
|
||||
};
|
||||
}
|
||||
stats.byModel[modelKey].requests++;
|
||||
stats.byModel[modelKey].promptTokens += promptTokens;
|
||||
stats.byModel[modelKey].completionTokens += completionTokens;
|
||||
if (new Date(entry.timestamp) > new Date(stats.byModel[modelKey].lastUsed)) {
|
||||
stats.byModel[modelKey].lastUsed = entry.timestamp;
|
||||
}
|
||||
|
||||
// By Account (model + oauth account)
|
||||
// Use connectionId if available, otherwise fallback to provider name
|
||||
|
|
@ -253,12 +308,16 @@ export async function getUsageStats() {
|
|||
rawModel: entry.model,
|
||||
provider: entry.provider,
|
||||
connectionId: entry.connectionId,
|
||||
accountName: accountName
|
||||
accountName: accountName,
|
||||
lastUsed: entry.timestamp
|
||||
};
|
||||
}
|
||||
stats.byAccount[accountKey].requests++;
|
||||
stats.byAccount[accountKey].promptTokens += promptTokens;
|
||||
stats.byAccount[accountKey].completionTokens += completionTokens;
|
||||
if (new Date(entry.timestamp) > new Date(stats.byAccount[accountKey].lastUsed)) {
|
||||
stats.byAccount[accountKey].lastUsed = entry.timestamp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export default function UsageStats() {
|
|||
|
||||
const [stats, setStats] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [autoRefresh, setAutoRefresh] = useState(false);
|
||||
const [autoRefresh, setAutoRefresh] = useState(true);
|
||||
|
||||
const toggleSort = (field) => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
|
|
@ -49,12 +49,13 @@ export default function UsageStats() {
|
|||
router.replace(`?${params.toString()}`, { scroll: false });
|
||||
};
|
||||
|
||||
const sortData = (dataMap) => {
|
||||
const sortData = (dataMap, pendingMap = {}) => {
|
||||
return Object.entries(dataMap || {})
|
||||
.map(([key, data]) => ({
|
||||
...data,
|
||||
key,
|
||||
totalTokens: (data.promptTokens || 0) + (data.completionTokens || 0),
|
||||
pending: pendingMap[key] || 0,
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
let valA = a[sortBy];
|
||||
|
|
@ -71,13 +72,27 @@ export default function UsageStats() {
|
|||
};
|
||||
|
||||
const sortedModels = useMemo(
|
||||
() => sortData(stats?.byModel),
|
||||
[stats?.byModel, sortBy, sortOrder]
|
||||
);
|
||||
const sortedAccounts = useMemo(
|
||||
() => sortData(stats?.byAccount),
|
||||
[stats?.byAccount, sortBy, sortOrder]
|
||||
() => sortData(stats?.byModel, stats?.pending?.byModel),
|
||||
[stats?.byModel, stats?.pending?.byModel, sortBy, sortOrder]
|
||||
);
|
||||
const sortedAccounts = useMemo(() => {
|
||||
// For accounts, pendingMap is by connectionId, but dataMap is by accountKey
|
||||
// We need to map connectionId pending counts to accountKeys
|
||||
const accountPendingMap = {};
|
||||
if (stats?.pending?.byAccount) {
|
||||
Object.entries(stats.byAccount || {}).forEach(([accountKey, data]) => {
|
||||
const connPending = stats.pending.byAccount[data.connectionId];
|
||||
if (connPending) {
|
||||
// Get modelKey (rawModel (provider))
|
||||
const modelKey = data.provider
|
||||
? `${data.rawModel} (${data.provider})`
|
||||
: data.rawModel;
|
||||
accountPendingMap[accountKey] = connPending[modelKey] || 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
return sortData(stats?.byAccount, accountPendingMap);
|
||||
}, [stats?.byAccount, stats?.pending?.byAccount, sortBy, sortOrder]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
|
|
@ -118,6 +133,20 @@ export default function UsageStats() {
|
|||
// Format number with commas
|
||||
const fmt = (n) => new Intl.NumberFormat().format(n || 0);
|
||||
|
||||
// Time format for "Last Used"
|
||||
const fmtTime = (iso) => {
|
||||
if (!iso) return "Never";
|
||||
const date = new Date(iso);
|
||||
const now = new Date();
|
||||
const diffMs = now - date;
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
|
||||
if (diffMins < 1) return "Just now";
|
||||
if (diffMins < 60) return `${diffMins}m ago`;
|
||||
if (diffMins < 1440) return `${Math.floor(diffMins / 60)}h ago`;
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Header with Auto Refresh Toggle */}
|
||||
|
|
@ -142,6 +171,40 @@ export default function UsageStats() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Active Requests Summary */}
|
||||
{(stats.activeRequests || []).length > 0 && (
|
||||
<Card className="p-3 border-primary/20 bg-primary/5">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-primary font-semibold text-sm uppercase tracking-wider">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
|
||||
</span>
|
||||
Active Requests
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{stats.activeRequests.map((req, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="px-3 py-1.5 rounded-md bg-bg-subtle border border-primary/20 text-xs font-mono shadow-sm"
|
||||
>
|
||||
<span className="text-primary font-bold">{req.model}</span>
|
||||
<span className="mx-1 text-text-muted">|</span>
|
||||
<span className="text-text">{req.provider}</span>
|
||||
<span className="mx-1 text-text-muted">|</span>
|
||||
<span className="text-text font-medium">{req.account}</span>
|
||||
{req.count > 1 && (
|
||||
<span className="ml-2 px-1.5 py-0.5 rounded bg-primary text-white font-bold">
|
||||
x{req.count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Overview Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card className="p-4 flex flex-col gap-1">
|
||||
|
|
@ -236,6 +299,17 @@ export default function UsageStats() {
|
|||
currentOrder={sortOrder}
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-3 text-right cursor-pointer hover:bg-bg-subtle/50"
|
||||
onClick={() => toggleSort("lastUsed")}
|
||||
>
|
||||
Last Used{" "}
|
||||
<SortIcon
|
||||
field="lastUsed"
|
||||
currentSort={sortBy}
|
||||
currentOrder={sortOrder}
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-3 text-right cursor-pointer hover:bg-bg-subtle/50"
|
||||
onClick={() => toggleSort("promptTokens")}
|
||||
|
|
@ -274,13 +348,25 @@ export default function UsageStats() {
|
|||
<tbody className="divide-y divide-border">
|
||||
{sortedModels.map((data) => (
|
||||
<tr key={data.key} className="hover:bg-bg-subtle/20">
|
||||
<td className="px-6 py-3 font-medium">{data.rawModel}</td>
|
||||
<td
|
||||
className={`px-6 py-3 font-medium transition-colors ${
|
||||
data.pending > 0 ? "text-primary" : ""
|
||||
}`}
|
||||
>
|
||||
{data.rawModel}
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<Badge variant="neutral" size="sm">
|
||||
<Badge
|
||||
variant={data.pending > 0 ? "primary" : "neutral"}
|
||||
size="sm"
|
||||
>
|
||||
{data.provider}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-3 text-right">{fmt(data.requests)}</td>
|
||||
<td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">
|
||||
{fmtTime(data.lastUsed)}
|
||||
</td>
|
||||
<td className="px-6 py-3 text-right text-text-muted">
|
||||
{fmt(data.promptTokens)}
|
||||
</td>
|
||||
|
|
@ -295,7 +381,7 @@ export default function UsageStats() {
|
|||
{sortedModels.length === 0 && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={6}
|
||||
colSpan={8}
|
||||
className="px-6 py-8 text-center text-text-muted"
|
||||
>
|
||||
No usage recorded yet. Make some requests to see data here.
|
||||
|
|
@ -360,6 +446,17 @@ export default function UsageStats() {
|
|||
currentOrder={sortOrder}
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-3 text-right cursor-pointer hover:bg-bg-subtle/50"
|
||||
onClick={() => toggleSort("lastUsed")}
|
||||
>
|
||||
Last Used{" "}
|
||||
<SortIcon
|
||||
field="lastUsed"
|
||||
currentSort={sortBy}
|
||||
currentOrder={sortOrder}
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-3 text-right cursor-pointer hover:bg-bg-subtle/50"
|
||||
onClick={() => toggleSort("promptTokens")}
|
||||
|
|
@ -398,19 +495,35 @@ export default function UsageStats() {
|
|||
<tbody className="divide-y divide-border">
|
||||
{sortedAccounts.map((data) => (
|
||||
<tr key={data.key} className="hover:bg-bg-subtle/20">
|
||||
<td className="px-6 py-3 font-medium">{data.rawModel}</td>
|
||||
<td
|
||||
className={`px-6 py-3 font-medium transition-colors ${
|
||||
data.pending > 0 ? "text-primary" : ""
|
||||
}`}
|
||||
>
|
||||
{data.rawModel}
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<Badge variant="neutral" size="sm">
|
||||
<Badge
|
||||
variant={data.pending > 0 ? "primary" : "neutral"}
|
||||
size="sm"
|
||||
>
|
||||
{data.provider}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span className="font-medium">
|
||||
<span
|
||||
className={`font-medium transition-colors ${
|
||||
data.pending > 0 ? "text-primary" : ""
|
||||
}`}
|
||||
>
|
||||
{data.accountName ||
|
||||
`Account ${data.connectionId?.slice(0, 8)}...`}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3 text-right">{fmt(data.requests)}</td>
|
||||
<td className="px-6 py-3 text-right text-text-muted whitespace-nowrap">
|
||||
{fmtTime(data.lastUsed)}
|
||||
</td>
|
||||
<td className="px-6 py-3 text-right text-text-muted">
|
||||
{fmt(data.promptTokens)}
|
||||
</td>
|
||||
|
|
@ -425,7 +538,7 @@ export default function UsageStats() {
|
|||
{sortedAccounts.length === 0 && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={7}
|
||||
colSpan={9}
|
||||
className="px-6 py-8 text-center text-text-muted"
|
||||
>
|
||||
No account-specific usage recorded yet. Make requests using
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue