calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-08-12 15:30:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

use title case and fix colors

Browse Source
This commit is contained in:
Owen
2026-08-11 18:02:17 -04:00
parent b08e875b37
commit 11595f5f96
8 changed files with 39 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/routers/auditLogs/queryAiUsageResources.ts
+8 -6
View File
@@ -24,11 +24,13 @@ import {
type Q = AiUsageAnalyticsQuery; type Q = AiUsageAnalyticsQuery;
// Composite key namespacing resourceId ("r:") vs siteResourceId ("s:") since // Composite key namespacing resourceId ("r-") vs siteResourceId ("s-") since
// the two id spaces are independent and can overlap numerically. // the two id spaces are independent and can overlap numerically. Uses a dash
// rather than a colon so the key stays safe to use as a CSS custom-property
// name suffix (e.g. --color-r-1) on the client.
function resourceKey(resourceId: number | null, siteResourceId: number | null) { function resourceKey(resourceId: number | null, siteResourceId: number | null) {
if (resourceId != null) return `r:${resourceId}`; if (resourceId != null) return `r-${resourceId}`;
if (siteResourceId != null) return `s:${siteResourceId}`; if (siteResourceId != null) return `s-${siteResourceId}`;
return "none"; return "none";
} }
@@ -113,7 +115,7 @@ async function query(data: Q) {
.from(resources) .from(resources)
.where(inArray(resources.resourceId, resourceIds)); .where(inArray(resources.resourceId, resourceIds));
for (const r of resourceDetails) { for (const r of resourceDetails) {
nameMap.set(`r:${r.resourceId}`, r.name); nameMap.set(`r-${r.resourceId}`, r.name);
} }
} }
if (siteResourceIds.length > 0) { if (siteResourceIds.length > 0) {
@@ -125,7 +127,7 @@ async function query(data: Q) {
.from(siteResources) .from(siteResources)
.where(inArray(siteResources.siteResourceId, siteResourceIds)); .where(inArray(siteResources.siteResourceId, siteResourceIds));
for (const r of siteResourceDetails) { for (const r of siteResourceDetails) {
nameMap.set(`s:${r.siteResourceId}`, r.name); nameMap.set(`s-${r.siteResourceId}`, r.name);
} }
} }
src/components/AiUsageAnalyticsData.tsx
+8 -8
View File
@@ -140,9 +140,9 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
const tabs: TabItem[] = [ const tabs: TabItem[] = [
{ title: "Overview", href: "#" }, { title: "Overview", href: "#" },
{ title: "Provider usage", href: "#" }, { title: "Provider Usage", href: "#" },
{ title: "Resources", href: "#" }, { title: "Resources", href: "#" },
{ title: "Users & roles", href: "#" } { title: "Users & Roles", href: "#" }
]; ];
return ( return (
@@ -175,7 +175,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
label="Provider" label="Provider"
value={filters.providerId?.toString()} value={filters.providerId?.toString()}
options={providerOptions} options={providerOptions}
placeholder="All providers" placeholder="All Providers"
onValueChange={(v) => setFilter("providerId", v)} onValueChange={(v) => setFilter("providerId", v)}
/> />
<FilterSelect <FilterSelect
@@ -183,7 +183,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
label="Model" label="Model"
value={filters.model} value={filters.model}
options={modelOptions} options={modelOptions}
placeholder="All models" placeholder="All Models"
onValueChange={(v) => setFilter("model", v)} onValueChange={(v) => setFilter("model", v)}
/> />
<FilterSelect <FilterSelect
@@ -191,7 +191,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
label="Resource" label="Resource"
value={filters.resourceId?.toString()} value={filters.resourceId?.toString()}
options={resourceOptions} options={resourceOptions}
placeholder="All resources" placeholder="All Resources"
onValueChange={(v) => setFilter("resourceId", v)} onValueChange={(v) => setFilter("resourceId", v)}
/> />
<FilterSelect <FilterSelect
@@ -199,7 +199,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
label="Role" label="Role"
value={filters.roleId?.toString()} value={filters.roleId?.toString()}
options={roleOptions} options={roleOptions}
placeholder="All roles" placeholder="All Roles"
onValueChange={(v) => setFilter("roleId", v)} onValueChange={(v) => setFilter("roleId", v)}
/> />
<FilterSelect <FilterSelect
@@ -207,7 +207,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
label="User" label="User"
value={filters.userId} value={filters.userId}
options={userOptions} options={userOptions}
placeholder="All users" placeholder="All Users"
onValueChange={(v) => setFilter("userId", v)} onValueChange={(v) => setFilter("userId", v)}
/> />
@@ -218,7 +218,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
className="gap-2" className="gap-2"
> >
<XIcon className="size-4" /> <XIcon className="size-4" />
Reset filters Reset Filters
</Button> </Button>
)} )}
</div> </div>
src/components/ai-usage-analytics/OverviewTab.tsx
+8 -8
View File
@@ -75,7 +75,7 @@ export function OverviewTab(props: OverviewTabProps) {
<CardHeader> <CardHeader>
<InfoSections cols={4}> <InfoSections cols={4}>
<InfoSection> <InfoSection>
<InfoSectionTitle>Total requests</InfoSectionTitle> <InfoSectionTitle>Total Requests</InfoSectionTitle>
<InfoSectionContent> <InfoSectionContent>
{data {data
? compactNumberFormatter.format( ? compactNumberFormatter.format(
@@ -85,7 +85,7 @@ export function OverviewTab(props: OverviewTabProps) {
</InfoSectionContent> </InfoSectionContent>
</InfoSection> </InfoSection>
<InfoSection> <InfoSection>
<InfoSectionTitle>Total tokens</InfoSectionTitle> <InfoSectionTitle>Total Tokens</InfoSectionTitle>
<InfoSectionContent> <InfoSectionContent>
{data {data
? compactNumberFormatter.format( ? compactNumberFormatter.format(
@@ -95,7 +95,7 @@ export function OverviewTab(props: OverviewTabProps) {
</InfoSectionContent> </InfoSectionContent>
</InfoSection> </InfoSection>
<InfoSection> <InfoSection>
<InfoSectionTitle>Total cost</InfoSectionTitle> <InfoSectionTitle>Total Cost</InfoSectionTitle>
<InfoSectionContent> <InfoSectionContent>
{data ? formatCost(data.totalCost) : "--"} {data ? formatCost(data.totalCost) : "--"}
</InfoSectionContent> </InfoSectionContent>
@@ -115,7 +115,7 @@ export function OverviewTab(props: OverviewTabProps) {
<div className="grid lg:grid-cols-3 gap-5"> <div className="grid lg:grid-cols-3 gap-5">
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Request volume</h3> <h3 className="font-semibold">Request Volume</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ToggleableTrendChart <ToggleableTrendChart
@@ -127,7 +127,7 @@ export function OverviewTab(props: OverviewTabProps) {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Token usage</h3> <h3 className="font-semibold">Token Usage</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ToggleableTrendChart <ToggleableTrendChart
@@ -155,7 +155,7 @@ export function OverviewTab(props: OverviewTabProps) {
<div className="grid lg:grid-cols-2 gap-5"> <div className="grid lg:grid-cols-2 gap-5">
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Model cost</h3> <h3 className="font-semibold">Model Cost</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ToggleableTrendChart <ToggleableTrendChart
@@ -168,7 +168,7 @@ export function OverviewTab(props: OverviewTabProps) {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Model tokens</h3> <h3 className="font-semibold">Model Tokens</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ToggleableTrendChart <ToggleableTrendChart
@@ -182,7 +182,7 @@ export function OverviewTab(props: OverviewTabProps) {
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Top models</h3> <h3 className="font-semibold">Top Models</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<TopEntitiesList <TopEntitiesList
src/components/ai-usage-analytics/ProvidersTab.tsx
+3 -3
View File
@@ -48,7 +48,7 @@ export function ProvidersTab(props: ProvidersTabProps) {
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Top providers</h3> <h3 className="font-semibold">Top Providers</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<TopEntitiesList <TopEntitiesList
@@ -62,7 +62,7 @@ export function ProvidersTab(props: ProvidersTabProps) {
<div className="grid lg:grid-cols-2 gap-5"> <div className="grid lg:grid-cols-2 gap-5">
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Provider cost</h3> <h3 className="font-semibold">Provider Cost</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ToggleableTrendChart <ToggleableTrendChart
@@ -75,7 +75,7 @@ export function ProvidersTab(props: ProvidersTabProps) {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Provider token usage</h3> <h3 className="font-semibold">Provider Token Usage</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ToggleableTrendChart <ToggleableTrendChart
src/components/ai-usage-analytics/ResourcesTab.tsx
+3 -3
View File
@@ -56,7 +56,7 @@ export function ResourcesTab(props: ResourcesTabProps) {
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Top resources</h3> <h3 className="font-semibold">Top Resources</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<TopEntitiesList <TopEntitiesList
@@ -70,7 +70,7 @@ export function ResourcesTab(props: ResourcesTabProps) {
<div className="grid lg:grid-cols-2 gap-5"> <div className="grid lg:grid-cols-2 gap-5">
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Resource cost</h3> <h3 className="font-semibold">Resource Cost</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ToggleableTrendChart <ToggleableTrendChart
@@ -83,7 +83,7 @@ export function ResourcesTab(props: ResourcesTabProps) {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Resource token usage</h3> <h3 className="font-semibold">Resource Token Usage</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ToggleableTrendChart <ToggleableTrendChart
src/components/ai-usage-analytics/ToggleableTrendChart.tsx
+2 -2
View File
@@ -129,7 +129,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
key={s.key} key={s.key}
dataKey={s.key} dataKey={s.key}
stackId="stack" stackId="stack"
fill={`var(--color-${s.key})`} fill={s.color}
radius={2} radius={2}
isAnimationActive={false} isAnimationActive={false}
/> />
@@ -165,7 +165,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
<Line <Line
key={s.key} key={s.key}
dataKey={s.key} dataKey={s.key}
stroke={`var(--color-${s.key})`} stroke={s.color}
strokeWidth={2} strokeWidth={2}
fill="transparent" fill="transparent"
isAnimationActive={false} isAnimationActive={false}
src/components/ai-usage-analytics/UsersRolesTab.tsx
+6 -6
View File
@@ -80,7 +80,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
<h3 className="font-semibold text-muted-foreground">Roles</h3> <h3 className="font-semibold text-muted-foreground">Roles</h3>
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Top roles</h3> <h3 className="font-semibold">Top Roles</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<TopEntitiesList <TopEntitiesList
@@ -93,7 +93,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
<div className="grid lg:grid-cols-2 gap-5"> <div className="grid lg:grid-cols-2 gap-5">
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Role cost</h3> <h3 className="font-semibold">Role Cost</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ToggleableTrendChart <ToggleableTrendChart
@@ -106,7 +106,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Role token usage</h3> <h3 className="font-semibold">Role Token Usage</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ToggleableTrendChart <ToggleableTrendChart
@@ -123,7 +123,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
<h3 className="font-semibold text-muted-foreground">Users</h3> <h3 className="font-semibold text-muted-foreground">Users</h3>
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">Top users</h3> <h3 className="font-semibold">Top Users</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<TopEntitiesList <TopEntitiesList
@@ -136,7 +136,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
<div className="grid lg:grid-cols-2 gap-5"> <div className="grid lg:grid-cols-2 gap-5">
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">User cost</h3> <h3 className="font-semibold">User Cost</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ToggleableTrendChart <ToggleableTrendChart
@@ -149,7 +149,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<h3 className="font-semibold">User token usage</h3> <h3 className="font-semibold">User Token Usage</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ToggleableTrendChart <ToggleableTrendChart
src/components/ui/chart.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ const ChartContainer = React.forwardRef<
{...props} {...props}
> >
<ChartStyle id={chartId} config={config} /> <ChartStyle id={chartId} config={config} />
<RechartsPrimitive.ResponsiveContainer> <RechartsPrimitive.ResponsiveContainer minWidth={0} minHeight={0}>
{children} {children}
</RechartsPrimitive.ResponsiveContainer> </RechartsPrimitive.ResponsiveContainer>
</div> </div>