mirror of
https://github.com/fosrl/pangolin.git
synced 2026-08-13 16:00:02 +02:00
translate keys and restructure roles and users
This commit is contained in:
Owen
@@ -1936,6 +1936,62 @@
|
||||
"aiResourceAliasRequired": "Alias is required for inference resources",
|
||||
"aiResourceDomainConfiguration": "Domain configuration",
|
||||
"aiResourceDomainConfigurationDescription": "Choose the domain clients will use to reach this inference resource.",
|
||||
"aiUsageAnalyticsTitle": "AI Usage Analytics",
|
||||
"aiUsageAnalyticsDescription": "Analyze AI gateway cost, token usage, and activity across providers, resources, roles, and users",
|
||||
"aiUsageTabOverview": "Overview",
|
||||
"aiUsageTabProviders": "Providers",
|
||||
"aiUsageTabResources": "Resources",
|
||||
"aiUsageTabUsersRoles": "Users & Roles",
|
||||
"aiUsageFilterProvider": "Provider",
|
||||
"aiUsageFilterModel": "Model",
|
||||
"aiUsageFilterResource": "Resource",
|
||||
"aiUsageFilterRole": "Role",
|
||||
"aiUsageFilterUser": "User",
|
||||
"aiUsageFilterAllProviders": "All Providers",
|
||||
"aiUsageFilterAllModels": "All Models",
|
||||
"aiUsageFilterAllResources": "All Resources",
|
||||
"aiUsageFilterAllRoles": "All Roles",
|
||||
"aiUsageFilterAllUsers": "All Users",
|
||||
"aiUsageResetFilters": "Reset Filters",
|
||||
"aiUsageRefresh": "Refresh",
|
||||
"aiUsageTokenTypePrompt": "Prompt",
|
||||
"aiUsageTokenTypeCacheRead": "Cache read",
|
||||
"aiUsageTokenTypeCacheWrite": "Cache write",
|
||||
"aiUsageTokenTypeCompletion": "Completion",
|
||||
"aiUsageTokenTypeReasoning": "Reasoning",
|
||||
"aiUsageRequests": "Requests",
|
||||
"aiUsageCost": "Cost",
|
||||
"aiUsageTokens": "Tokens",
|
||||
"aiUsageOther": "Other",
|
||||
"aiUsageTotalRequests": "Total Requests",
|
||||
"aiUsageTotalTokens": "Total Tokens",
|
||||
"aiUsageTotalCost": "Total Cost",
|
||||
"aiUsageEstimated": "Estimated",
|
||||
"aiUsageRequestVolume": "Request Volume",
|
||||
"aiUsageTokenUsage": "Token Usage",
|
||||
"aiUsageModelCost": "Model Cost",
|
||||
"aiUsageModelTokens": "Model Tokens",
|
||||
"aiUsageTopModels": "Top Models",
|
||||
"aiUsageTopProviders": "Top Providers",
|
||||
"aiUsageProviderCost": "Provider Cost",
|
||||
"aiUsageProviderTokenUsage": "Provider Token Usage",
|
||||
"aiUsageTopResources": "Top Resources",
|
||||
"aiUsageResourceCost": "Resource Cost",
|
||||
"aiUsageResourceTokenUsage": "Resource Token Usage",
|
||||
"aiUsageResourceTypePublic": "Resource",
|
||||
"aiUsageResourceTypeSite": "Site resource",
|
||||
"aiUsageNoResource": "No resource",
|
||||
"aiUsageRolesTab": "Roles",
|
||||
"aiUsageUsersTab": "Users",
|
||||
"aiUsageTopRoles": "Top Roles",
|
||||
"aiUsageRoleCost": "Role Cost",
|
||||
"aiUsageRoleTokenUsage": "Role Token Usage",
|
||||
"aiUsageTopUsers": "Top Users",
|
||||
"aiUsageUserCost": "User Cost",
|
||||
"aiUsageUserTokenUsage": "User Token Usage",
|
||||
"aiUsageUnknownUser": "Unknown user",
|
||||
"aiUsageLoading": "Loading...",
|
||||
"aiUsageNoData": "No data",
|
||||
"resourceBudgetSettings": "Budget",
|
||||
"resourceBudgetSettingsDescription": "Configure how this inference resource restricts usage based on spending or token limits",
|
||||
"sidebarApiKeys": "API Keys",
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
import { AiUsageAnalyticsData } from "@app/components/AiUsageAnalyticsData";
|
||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||
import type { Metadata } from "next";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "AI Usage Analytics"
|
||||
};
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const t = await getTranslations();
|
||||
return {
|
||||
title: t("aiUsageAnalyticsTitle")
|
||||
};
|
||||
}
|
||||
|
||||
export interface AiUsageAnalyticsPageProps {
|
||||
params: Promise<{ orgId: string }>;
|
||||
@@ -14,12 +18,13 @@ export default async function AiUsageAnalyticsPage(
|
||||
props: AiUsageAnalyticsPageProps
|
||||
) {
|
||||
const orgId = (await props.params).orgId;
|
||||
const t = await getTranslations();
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsSectionTitle
|
||||
title="AI Usage Analytics"
|
||||
description="Analyze AI gateway cost, token usage, and activity across providers, resources, roles, and users"
|
||||
title={t("aiUsageAnalyticsTitle")}
|
||||
description={t("aiUsageAnalyticsDescription")}
|
||||
/>
|
||||
|
||||
<div className="container mx-auto max-w-12xl">
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
} from "@app/lib/queries";
|
||||
import { useIsFetching, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { RefreshCw, XIcon } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { DateRangePicker, type DateTimeValue } from "./DateTimePicker";
|
||||
import { Button } from "./ui/button";
|
||||
@@ -35,6 +36,7 @@ export type AiUsageAnalyticsDataProps = {
|
||||
const AI_USAGE_ANALYTICS_QUERY_PREFIX = ["AI_USAGE_ANALYTICS"];
|
||||
|
||||
export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
|
||||
const t = useTranslations();
|
||||
const searchParams = useSearchParams();
|
||||
const path = usePathname();
|
||||
const router = useRouter();
|
||||
@@ -139,10 +141,10 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
|
||||
}));
|
||||
|
||||
const tabs: TabItem[] = [
|
||||
{ title: "Overview", href: "#" },
|
||||
{ title: "Provider Usage", href: "#" },
|
||||
{ title: "Resources", href: "#" },
|
||||
{ title: "Users & Roles", href: "#" }
|
||||
{ title: t("aiUsageTabOverview"), href: "#" },
|
||||
{ title: t("aiUsageTabProviders"), href: "#" },
|
||||
{ title: t("aiUsageTabResources"), href: "#" },
|
||||
{ title: t("aiUsageTabUsersRoles"), href: "#" }
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -172,42 +174,42 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
|
||||
<div className="flex flex-wrap items-end gap-2">
|
||||
<FilterSelect
|
||||
id="providerId"
|
||||
label="Provider"
|
||||
label={t("aiUsageFilterProvider")}
|
||||
value={filters.providerId?.toString()}
|
||||
options={providerOptions}
|
||||
placeholder="All Providers"
|
||||
placeholder={t("aiUsageFilterAllProviders")}
|
||||
onValueChange={(v) => setFilter("providerId", v)}
|
||||
/>
|
||||
<FilterSelect
|
||||
id="model"
|
||||
label="Model"
|
||||
label={t("aiUsageFilterModel")}
|
||||
value={filters.model}
|
||||
options={modelOptions}
|
||||
placeholder="All Models"
|
||||
placeholder={t("aiUsageFilterAllModels")}
|
||||
onValueChange={(v) => setFilter("model", v)}
|
||||
/>
|
||||
<FilterSelect
|
||||
id="resourceId"
|
||||
label="Resource"
|
||||
label={t("aiUsageFilterResource")}
|
||||
value={filters.resourceId?.toString()}
|
||||
options={resourceOptions}
|
||||
placeholder="All Resources"
|
||||
placeholder={t("aiUsageFilterAllResources")}
|
||||
onValueChange={(v) => setFilter("resourceId", v)}
|
||||
/>
|
||||
<FilterSelect
|
||||
id="roleId"
|
||||
label="Role"
|
||||
label={t("aiUsageFilterRole")}
|
||||
value={filters.roleId?.toString()}
|
||||
options={roleOptions}
|
||||
placeholder="All Roles"
|
||||
placeholder={t("aiUsageFilterAllRoles")}
|
||||
onValueChange={(v) => setFilter("roleId", v)}
|
||||
/>
|
||||
<FilterSelect
|
||||
id="userId"
|
||||
label="User"
|
||||
label={t("aiUsageFilterUser")}
|
||||
value={filters.userId}
|
||||
options={userOptions}
|
||||
placeholder="All Users"
|
||||
placeholder={t("aiUsageFilterAllUsers")}
|
||||
onValueChange={(v) => setFilter("userId", v)}
|
||||
/>
|
||||
|
||||
@@ -218,7 +220,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
|
||||
className="gap-2"
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
Reset Filters
|
||||
{t("aiUsageResetFilters")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
@@ -243,7 +245,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
|
||||
isFetching && "animate-spin"
|
||||
)}
|
||||
/>
|
||||
Refresh
|
||||
{t("aiUsageRefresh")}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { aiUsageAnalyticsQueries } from "@app/lib/queries";
|
||||
import type { AiUsageAnalyticsFilters } from "@app/lib/queries";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Card, CardContent, CardHeader } from "@app/components/ui/card";
|
||||
import {
|
||||
InfoSection,
|
||||
@@ -24,15 +25,8 @@ type OverviewTabProps = {
|
||||
filters: AiUsageAnalyticsFilters;
|
||||
};
|
||||
|
||||
const TOKEN_TYPE_LABELS: Record<string, string> = {
|
||||
promptTokens: "Prompt",
|
||||
cacheReadTokens: "Cache read",
|
||||
cacheWriteTokens: "Cache write",
|
||||
completionTokens: "Completion",
|
||||
reasoningTokens: "Reasoning"
|
||||
};
|
||||
|
||||
export function OverviewTab(props: OverviewTabProps) {
|
||||
const t = useTranslations();
|
||||
const { data, isLoading } = useQuery(
|
||||
aiUsageAnalyticsQueries.overview({
|
||||
orgId: props.orgId,
|
||||
@@ -40,8 +34,16 @@ export function OverviewTab(props: OverviewTabProps) {
|
||||
})
|
||||
);
|
||||
|
||||
const TOKEN_TYPE_LABELS: Record<string, string> = {
|
||||
promptTokens: t("aiUsageTokenTypePrompt"),
|
||||
cacheReadTokens: t("aiUsageTokenTypeCacheRead"),
|
||||
cacheWriteTokens: t("aiUsageTokenTypeCacheWrite"),
|
||||
completionTokens: t("aiUsageTokenTypeCompletion"),
|
||||
reasoningTokens: t("aiUsageTokenTypeReasoning")
|
||||
};
|
||||
|
||||
const requestsSeries = [
|
||||
{ key: "requests", label: "Requests", color: SERIES_COLORS[0] }
|
||||
{ key: "requests", label: t("aiUsageRequests"), color: SERIES_COLORS[0] }
|
||||
];
|
||||
const tokensSeries = Object.keys(TOKEN_TYPE_LABELS).map((key, i) => ({
|
||||
key,
|
||||
@@ -49,16 +51,18 @@ export function OverviewTab(props: OverviewTabProps) {
|
||||
color: SERIES_COLORS[i % SERIES_COLORS.length]
|
||||
}));
|
||||
const costSeries = [
|
||||
{ key: "cost", label: "Cost", color: SERIES_COLORS[0] }
|
||||
{ key: "cost", label: t("aiUsageCost"), color: SERIES_COLORS[0] }
|
||||
];
|
||||
|
||||
const modelCostSeries = buildSeriesFromData(
|
||||
data?.modelCostPerDay ?? [],
|
||||
(key) => key
|
||||
(key) => key,
|
||||
t("aiUsageOther")
|
||||
);
|
||||
const modelTokensSeries = buildSeriesFromData(
|
||||
data?.modelTokensPerDay ?? [],
|
||||
(key) => key
|
||||
(key) => key,
|
||||
t("aiUsageOther")
|
||||
);
|
||||
|
||||
const topModels: TopEntity[] = (data?.topModels ?? []).map((m) => ({
|
||||
@@ -75,7 +79,9 @@ export function OverviewTab(props: OverviewTabProps) {
|
||||
<CardHeader>
|
||||
<InfoSections cols={4}>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>Total Requests</InfoSectionTitle>
|
||||
<InfoSectionTitle>
|
||||
{t("aiUsageTotalRequests")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{data
|
||||
? compactNumberFormatter.format(
|
||||
@@ -85,7 +91,9 @@ export function OverviewTab(props: OverviewTabProps) {
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>Total Tokens</InfoSectionTitle>
|
||||
<InfoSectionTitle>
|
||||
{t("aiUsageTotalTokens")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{data
|
||||
? compactNumberFormatter.format(
|
||||
@@ -95,13 +103,17 @@ export function OverviewTab(props: OverviewTabProps) {
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>Total Cost</InfoSectionTitle>
|
||||
<InfoSectionTitle>
|
||||
{t("aiUsageTotalCost")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{data ? formatCost(data.totalCost) : "--"}
|
||||
</InfoSectionContent>
|
||||
</InfoSection>
|
||||
<InfoSection>
|
||||
<InfoSectionTitle>Estimated</InfoSectionTitle>
|
||||
<InfoSectionTitle>
|
||||
{t("aiUsageEstimated")}
|
||||
</InfoSectionTitle>
|
||||
<InfoSectionContent>
|
||||
{data
|
||||
? `${Math.round(data.estimatedPercent)}%`
|
||||
@@ -114,11 +126,9 @@ export function OverviewTab(props: OverviewTabProps) {
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-5">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Request Volume</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageRequestVolume")}
|
||||
data={data?.requestsPerDay ?? []}
|
||||
series={requestsSeries}
|
||||
isLoading={isLoading}
|
||||
@@ -126,11 +136,9 @@ export function OverviewTab(props: OverviewTabProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Token Usage</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageTokenUsage")}
|
||||
data={data?.tokensPerDay ?? []}
|
||||
series={tokensSeries}
|
||||
isLoading={isLoading}
|
||||
@@ -138,11 +146,9 @@ export function OverviewTab(props: OverviewTabProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Cost</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageCost")}
|
||||
data={data?.costPerDay ?? []}
|
||||
series={costSeries}
|
||||
isLoading={isLoading}
|
||||
@@ -154,11 +160,9 @@ export function OverviewTab(props: OverviewTabProps) {
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-5">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Model Cost</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageModelCost")}
|
||||
data={data?.modelCostPerDay ?? []}
|
||||
series={modelCostSeries}
|
||||
isLoading={isLoading}
|
||||
@@ -167,11 +171,9 @@ export function OverviewTab(props: OverviewTabProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Model Tokens</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageModelTokens")}
|
||||
data={data?.modelTokensPerDay ?? []}
|
||||
series={modelTokensSeries}
|
||||
isLoading={isLoading}
|
||||
@@ -182,13 +184,13 @@ export function OverviewTab(props: OverviewTabProps) {
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Top Models</h3>
|
||||
<h3 className="font-semibold">{t("aiUsageTopModels")}</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TopEntitiesList
|
||||
entities={topModels}
|
||||
isLoading={isLoading}
|
||||
nameColumnLabel="Model"
|
||||
nameColumnLabel={t("aiUsageFilterModel")}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { aiUsageAnalyticsQueries } from "@app/lib/queries";
|
||||
import type { AiUsageAnalyticsFilters } from "@app/lib/queries";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Card, CardContent, CardHeader } from "@app/components/ui/card";
|
||||
import { ToggleableTrendChart } from "./ToggleableTrendChart";
|
||||
import { TopEntitiesList, type TopEntity } from "./TopEntitiesList";
|
||||
@@ -14,6 +15,7 @@ type ProvidersTabProps = {
|
||||
};
|
||||
|
||||
export function ProvidersTab(props: ProvidersTabProps) {
|
||||
const t = useTranslations();
|
||||
const { data, isLoading } = useQuery(
|
||||
aiUsageAnalyticsQueries.providers({
|
||||
orgId: props.orgId,
|
||||
@@ -29,11 +31,13 @@ export function ProvidersTab(props: ProvidersTabProps) {
|
||||
|
||||
const costSeries = buildSeriesFromData(
|
||||
data?.providerCostPerDay ?? [],
|
||||
labelFor
|
||||
labelFor,
|
||||
t("aiUsageOther")
|
||||
);
|
||||
const tokensSeries = buildSeriesFromData(
|
||||
data?.providerTokensPerDay ?? [],
|
||||
labelFor
|
||||
labelFor,
|
||||
t("aiUsageOther")
|
||||
);
|
||||
|
||||
const topProviders: TopEntity[] = (data?.topProviders ?? []).map((p) => ({
|
||||
@@ -48,24 +52,22 @@ export function ProvidersTab(props: ProvidersTabProps) {
|
||||
<div className="flex flex-col gap-5">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Top Providers</h3>
|
||||
<h3 className="font-semibold">{t("aiUsageTopProviders")}</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TopEntitiesList
|
||||
entities={topProviders}
|
||||
isLoading={isLoading}
|
||||
nameColumnLabel="Provider"
|
||||
nameColumnLabel={t("aiUsageFilterProvider")}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-5">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Provider Cost</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageProviderCost")}
|
||||
data={data?.providerCostPerDay ?? []}
|
||||
series={costSeries}
|
||||
isLoading={isLoading}
|
||||
@@ -74,11 +76,9 @@ export function ProvidersTab(props: ProvidersTabProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Provider Token Usage</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageProviderTokenUsage")}
|
||||
data={data?.providerTokensPerDay ?? []}
|
||||
series={tokensSeries}
|
||||
isLoading={isLoading}
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { aiUsageAnalyticsQueries } from "@app/lib/queries";
|
||||
import type { AiUsageAnalyticsFilters } from "@app/lib/queries";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Card, CardContent, CardHeader } from "@app/components/ui/card";
|
||||
import { ToggleableTrendChart } from "./ToggleableTrendChart";
|
||||
import { TopEntitiesList, type TopEntity } from "./TopEntitiesList";
|
||||
@@ -13,13 +14,15 @@ type ResourcesTabProps = {
|
||||
filters: AiUsageAnalyticsFilters;
|
||||
};
|
||||
|
||||
function resourceTypeLabel(type: "public" | "site" | null) {
|
||||
if (type === "public") return "Resource";
|
||||
if (type === "site") return "Site resource";
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export function ResourcesTab(props: ResourcesTabProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
function resourceTypeLabel(type: "public" | "site" | null) {
|
||||
if (type === "public") return t("aiUsageResourceTypePublic");
|
||||
if (type === "site") return t("aiUsageResourceTypeSite");
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const { data, isLoading } = useQuery(
|
||||
aiUsageAnalyticsQueries.resources({
|
||||
orgId: props.orgId,
|
||||
@@ -32,20 +35,22 @@ export function ResourcesTab(props: ResourcesTabProps) {
|
||||
nameByKey.set(r.key, r.name ?? r.key);
|
||||
}
|
||||
const labelFor = (key: string) =>
|
||||
key === "none" ? "No resource" : (nameByKey.get(key) ?? key);
|
||||
key === "none" ? t("aiUsageNoResource") : (nameByKey.get(key) ?? key);
|
||||
|
||||
const costSeries = buildSeriesFromData(
|
||||
data?.resourceCostPerDay ?? [],
|
||||
labelFor
|
||||
labelFor,
|
||||
t("aiUsageOther")
|
||||
);
|
||||
const tokensSeries = buildSeriesFromData(
|
||||
data?.resourceTokensPerDay ?? [],
|
||||
labelFor
|
||||
labelFor,
|
||||
t("aiUsageOther")
|
||||
);
|
||||
|
||||
const topResources: TopEntity[] = (data?.topResources ?? []).map((r) => ({
|
||||
key: r.key,
|
||||
label: r.name ?? (r.key === "none" ? "No resource" : r.key),
|
||||
label: r.name ?? (r.key === "none" ? t("aiUsageNoResource") : r.key),
|
||||
sublabel: resourceTypeLabel(r.type),
|
||||
requests: r.requests,
|
||||
totalTokens: r.totalTokens,
|
||||
@@ -56,24 +61,22 @@ export function ResourcesTab(props: ResourcesTabProps) {
|
||||
<div className="flex flex-col gap-5">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Top Resources</h3>
|
||||
<h3 className="font-semibold">{t("aiUsageTopResources")}</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TopEntitiesList
|
||||
entities={topResources}
|
||||
isLoading={isLoading}
|
||||
nameColumnLabel="Resource"
|
||||
nameColumnLabel={t("aiUsageFilterResource")}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-5">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Resource Cost</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageResourceCost")}
|
||||
data={data?.resourceCostPerDay ?? []}
|
||||
series={costSeries}
|
||||
isLoading={isLoading}
|
||||
@@ -82,11 +85,9 @@ export function ResourcesTab(props: ResourcesTabProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Resource Token Usage</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageResourceTokenUsage")}
|
||||
data={data?.resourceTokensPerDay ?? []}
|
||||
series={tokensSeries}
|
||||
isLoading={isLoading}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { BarChart3, LineChart as LineChartIcon, LoaderIcon } from "lucide-react";
|
||||
import {
|
||||
Bar,
|
||||
@@ -34,6 +35,7 @@ export interface TrendChartRow {
|
||||
}
|
||||
|
||||
type ToggleableTrendChartProps = {
|
||||
title: string;
|
||||
data: TrendChartRow[];
|
||||
series: TrendSeries[];
|
||||
isLoading?: boolean;
|
||||
@@ -48,6 +50,7 @@ const compactFormatter = new Intl.NumberFormat(undefined, {
|
||||
});
|
||||
|
||||
export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
|
||||
const t = useTranslations();
|
||||
const [chartType, setChartType] = useState<"bar" | "line">("bar");
|
||||
|
||||
const valueFormatter = props.valueFormatter ?? compactFormatter.format;
|
||||
@@ -61,25 +64,28 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
|
||||
|
||||
return (
|
||||
<div className={cn("relative flex flex-col gap-2", props.className)}>
|
||||
<div className="flex justify-end gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant={chartType === "bar" ? "secondary" : "ghost"}
|
||||
onClick={() => setChartType("bar")}
|
||||
className="gap-1.5 px-2"
|
||||
>
|
||||
<BarChart3 className="size-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant={chartType === "line" ? "secondary" : "ghost"}
|
||||
onClick={() => setChartType("line")}
|
||||
className="gap-1.5 px-2"
|
||||
>
|
||||
<LineChartIcon className="size-3.5" />
|
||||
</Button>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h3 className="font-semibold">{props.title}</h3>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant={chartType === "bar" ? "secondary" : "ghost"}
|
||||
onClick={() => setChartType("bar")}
|
||||
className="gap-1.5 px-2"
|
||||
>
|
||||
<BarChart3 className="size-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant={chartType === "line" ? "secondary" : "ghost"}
|
||||
onClick={() => setChartType("line")}
|
||||
className="gap-1.5 px-2"
|
||||
>
|
||||
<LineChartIcon className="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!hasData ? (
|
||||
@@ -87,10 +93,10 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
|
||||
{props.isLoading ? (
|
||||
<>
|
||||
<LoaderIcon className="size-4 animate-spin" />
|
||||
Loading...
|
||||
{t("aiUsageLoading")}
|
||||
</>
|
||||
) : (
|
||||
"No data"
|
||||
t("aiUsageNoData")
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { LoaderIcon } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { compactNumberFormatter, formatCost } from "./shared";
|
||||
|
||||
export type TopEntity = {
|
||||
@@ -20,6 +21,7 @@ type TopEntitiesListProps = {
|
||||
};
|
||||
|
||||
export function TopEntitiesList(props: TopEntitiesListProps) {
|
||||
const t = useTranslations();
|
||||
const totalCost = props.entities.reduce(
|
||||
(sum, e) => sum + (e.costUsd ?? 0),
|
||||
0
|
||||
@@ -30,9 +32,15 @@ export function TopEntitiesList(props: TopEntitiesListProps) {
|
||||
{props.entities.length > 0 && (
|
||||
<div className="grid grid-cols-12 text-sm text-muted-foreground font-semibold h-4">
|
||||
<div className="col-span-5">{props.nameColumnLabel}</div>
|
||||
<div className="col-span-2 text-end">Requests</div>
|
||||
<div className="col-span-2 text-end">Tokens</div>
|
||||
<div className="col-span-2 text-end">Cost</div>
|
||||
<div className="col-span-2 text-end">
|
||||
{t("aiUsageRequests")}
|
||||
</div>
|
||||
<div className="col-span-2 text-end">
|
||||
{t("aiUsageTokens")}
|
||||
</div>
|
||||
<div className="col-span-2 text-end">
|
||||
{t("aiUsageCost")}
|
||||
</div>
|
||||
<div className="col-span-1 text-end">%</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -42,10 +50,10 @@ export function TopEntitiesList(props: TopEntitiesListProps) {
|
||||
{props.isLoading ? (
|
||||
<>
|
||||
<LoaderIcon className="size-4 animate-spin" />
|
||||
Loading...
|
||||
{t("aiUsageLoading")}
|
||||
</>
|
||||
) : (
|
||||
(props.emptyLabel ?? "No data")
|
||||
(props.emptyLabel ?? t("aiUsageNoData"))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -3,7 +3,9 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { aiUsageAnalyticsQueries } from "@app/lib/queries";
|
||||
import type { AiUsageAnalyticsFilters } from "@app/lib/queries";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Card, CardContent, CardHeader } from "@app/components/ui/card";
|
||||
import { HorizontalTabs, type TabItem } from "@app/components/HorizontalTabs";
|
||||
import { ToggleableTrendChart } from "./ToggleableTrendChart";
|
||||
import { TopEntitiesList, type TopEntity } from "./TopEntitiesList";
|
||||
import { buildSeriesFromData, formatCost } from "./shared";
|
||||
@@ -16,6 +18,7 @@ type UsersRolesTabProps = {
|
||||
const UNKNOWN_USER_KEY = "unknown";
|
||||
|
||||
export function UsersRolesTab(props: UsersRolesTabProps) {
|
||||
const t = useTranslations();
|
||||
const { data, isLoading } = useQuery(
|
||||
aiUsageAnalyticsQueries.usersRoles({
|
||||
orgId: props.orgId,
|
||||
@@ -38,24 +41,28 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
|
||||
}
|
||||
const userLabelFor = (key: string) =>
|
||||
key === UNKNOWN_USER_KEY
|
||||
? "Unknown user"
|
||||
? t("aiUsageUnknownUser")
|
||||
: (userEmailByKey.get(key) ?? key);
|
||||
|
||||
const roleCostSeries = buildSeriesFromData(
|
||||
data?.roleCostPerDay ?? [],
|
||||
roleLabelFor
|
||||
roleLabelFor,
|
||||
t("aiUsageOther")
|
||||
);
|
||||
const roleTokensSeries = buildSeriesFromData(
|
||||
data?.roleTokensPerDay ?? [],
|
||||
roleLabelFor
|
||||
roleLabelFor,
|
||||
t("aiUsageOther")
|
||||
);
|
||||
const userCostSeries = buildSeriesFromData(
|
||||
data?.userCostPerDay ?? [],
|
||||
userLabelFor
|
||||
userLabelFor,
|
||||
t("aiUsageOther")
|
||||
);
|
||||
const userTokensSeries = buildSeriesFromData(
|
||||
data?.userTokensPerDay ?? [],
|
||||
userLabelFor
|
||||
userLabelFor,
|
||||
t("aiUsageOther")
|
||||
);
|
||||
|
||||
const topRoles: TopEntity[] = (data?.topRoles ?? []).map((r) => ({
|
||||
@@ -68,35 +75,39 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
|
||||
|
||||
const topUsers: TopEntity[] = (data?.topUsers ?? []).map((u) => ({
|
||||
key: u.userId ?? UNKNOWN_USER_KEY,
|
||||
label: u.email ?? u.userId ?? "Unknown user",
|
||||
label: u.email ?? u.userId ?? t("aiUsageUnknownUser"),
|
||||
requests: u.requests,
|
||||
totalTokens: u.totalTokens,
|
||||
costUsd: u.costUsd
|
||||
}));
|
||||
|
||||
const tabs: TabItem[] = [
|
||||
{ title: t("aiUsageRolesTab"), href: "#" },
|
||||
{ title: t("aiUsageUsersTab"), href: "#" }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
<HorizontalTabs items={tabs} clientSide>
|
||||
<div className="flex flex-col gap-5">
|
||||
<h3 className="font-semibold text-muted-foreground">Roles</h3>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Top Roles</h3>
|
||||
<h3 className="font-semibold">
|
||||
{t("aiUsageTopRoles")}
|
||||
</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TopEntitiesList
|
||||
entities={topRoles}
|
||||
isLoading={isLoading}
|
||||
nameColumnLabel="Role"
|
||||
nameColumnLabel={t("aiUsageFilterRole")}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid lg:grid-cols-2 gap-5">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Role Cost</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageRoleCost")}
|
||||
data={data?.roleCostPerDay ?? []}
|
||||
series={roleCostSeries}
|
||||
isLoading={isLoading}
|
||||
@@ -105,11 +116,9 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Role Token Usage</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageRoleTokenUsage")}
|
||||
data={data?.roleTokensPerDay ?? []}
|
||||
series={roleTokensSeries}
|
||||
isLoading={isLoading}
|
||||
@@ -120,26 +129,25 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-5">
|
||||
<h3 className="font-semibold text-muted-foreground">Users</h3>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">Top Users</h3>
|
||||
<h3 className="font-semibold">
|
||||
{t("aiUsageTopUsers")}
|
||||
</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TopEntitiesList
|
||||
entities={topUsers}
|
||||
isLoading={isLoading}
|
||||
nameColumnLabel="User"
|
||||
nameColumnLabel={t("aiUsageFilterUser")}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid lg:grid-cols-2 gap-5">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">User Cost</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageUserCost")}
|
||||
data={data?.userCostPerDay ?? []}
|
||||
series={userCostSeries}
|
||||
isLoading={isLoading}
|
||||
@@ -148,11 +156,9 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h3 className="font-semibold">User Token Usage</h3>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="p-6">
|
||||
<ToggleableTrendChart
|
||||
title={t("aiUsageUserTokenUsage")}
|
||||
data={data?.userTokensPerDay ?? []}
|
||||
series={userTokensSeries}
|
||||
isLoading={isLoading}
|
||||
@@ -161,6 +167,6 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HorizontalTabs>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,7 +18,8 @@ export const OTHER_KEY = "other";
|
||||
// top-list needed. Assigns one categorical color per key, "other" last.
|
||||
export function buildSeriesFromData(
|
||||
data: Array<Record<string, number | string>>,
|
||||
labelFor: (key: string) => string
|
||||
labelFor: (key: string) => string,
|
||||
otherLabel = "Other"
|
||||
): TrendSeries[] {
|
||||
const keys = new Set<string>();
|
||||
for (const row of data) {
|
||||
@@ -37,7 +38,7 @@ export function buildSeriesFromData(
|
||||
|
||||
const hasOther = data.some((row) => OTHER_KEY in row);
|
||||
if (hasOther) {
|
||||
series.push({ key: OTHER_KEY, label: "Other", color: OTHER_COLOR });
|
||||
series.push({ key: OTHER_KEY, label: otherLabel, color: OTHER_COLOR });
|
||||
}
|
||||
|
||||
return series;
|
||||
|
||||
@@ -57,7 +57,11 @@ const ChartContainer = React.forwardRef<
|
||||
{...props}
|
||||
>
|
||||
<ChartStyle id={chartId} config={config} />
|
||||
<RechartsPrimitive.ResponsiveContainer minWidth={0} minHeight={0}>
|
||||
<RechartsPrimitive.ResponsiveContainer
|
||||
minWidth={0}
|
||||
minHeight={0}
|
||||
initialDimension={{ width: 520, height: 256 }}
|
||||
>
|
||||
{children}
|
||||
</RechartsPrimitive.ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user