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;
// Composite key namespacing resourceId ("r:") vs siteResourceId ("s:") since
// the two id spaces are independent and can overlap numerically.
// Composite key namespacing resourceId ("r-") vs siteResourceId ("s-") since
// 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) {
if (resourceId != null) return `r:${resourceId}`;
if (siteResourceId != null) return `s:${siteResourceId}`;
if (resourceId != null) return `r-${resourceId}`;
if (siteResourceId != null) return `s-${siteResourceId}`;
return "none";
}
@@ -113,7 +115,7 @@ async function query(data: Q) {
.from(resources)
.where(inArray(resources.resourceId, resourceIds));
for (const r of resourceDetails) {
nameMap.set(`r:${r.resourceId}`, r.name);
nameMap.set(`r-${r.resourceId}`, r.name);
}
}
if (siteResourceIds.length > 0) {
@@ -125,7 +127,7 @@ async function query(data: Q) {
.from(siteResources)
.where(inArray(siteResources.siteResourceId, siteResourceIds));
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[] = [
{ title: "Overview", href: "#" },
{ title: "Provider usage", href: "#" },
{ title: "Provider Usage", href: "#" },
{ title: "Resources", href: "#" },
{ title: "Users & roles", href: "#" }
{ title: "Users & Roles", href: "#" }
];
return (
@@ -175,7 +175,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
label="Provider"
value={filters.providerId?.toString()}
options={providerOptions}
placeholder="All providers"
placeholder="All Providers"
onValueChange={(v) => setFilter("providerId", v)}
/>
<FilterSelect
@@ -183,7 +183,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
label="Model"
value={filters.model}
options={modelOptions}
placeholder="All models"
placeholder="All Models"
onValueChange={(v) => setFilter("model", v)}
/>
<FilterSelect
@@ -191,7 +191,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
label="Resource"
value={filters.resourceId?.toString()}
options={resourceOptions}
placeholder="All resources"
placeholder="All Resources"
onValueChange={(v) => setFilter("resourceId", v)}
/>
<FilterSelect
@@ -199,7 +199,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
label="Role"
value={filters.roleId?.toString()}
options={roleOptions}
placeholder="All roles"
placeholder="All Roles"
onValueChange={(v) => setFilter("roleId", v)}
/>
<FilterSelect
@@ -207,7 +207,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
label="User"
value={filters.userId}
options={userOptions}
placeholder="All users"
placeholder="All Users"
onValueChange={(v) => setFilter("userId", v)}
/>
@@ -218,7 +218,7 @@ export function AiUsageAnalyticsData(props: AiUsageAnalyticsDataProps) {
className="gap-2"
>
<XIcon className="size-4" />
Reset filters
Reset Filters
</Button>
)}
</div>
src/components/ai-usage-analytics/OverviewTab.tsx
+8 -8
View File
@@ -75,7 +75,7 @@ export function OverviewTab(props: OverviewTabProps) {
<CardHeader>
<InfoSections cols={4}>
<InfoSection>
<InfoSectionTitle>Total requests</InfoSectionTitle>
<InfoSectionTitle>Total Requests</InfoSectionTitle>
<InfoSectionContent>
{data
? compactNumberFormatter.format(
@@ -85,7 +85,7 @@ export function OverviewTab(props: OverviewTabProps) {
</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>Total tokens</InfoSectionTitle>
<InfoSectionTitle>Total Tokens</InfoSectionTitle>
<InfoSectionContent>
{data
? compactNumberFormatter.format(
@@ -95,7 +95,7 @@ export function OverviewTab(props: OverviewTabProps) {
</InfoSectionContent>
</InfoSection>
<InfoSection>
<InfoSectionTitle>Total cost</InfoSectionTitle>
<InfoSectionTitle>Total Cost</InfoSectionTitle>
<InfoSectionContent>
{data ? formatCost(data.totalCost) : "--"}
</InfoSectionContent>
@@ -115,7 +115,7 @@ export function OverviewTab(props: OverviewTabProps) {
<div className="grid lg:grid-cols-3 gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">Request volume</h3>
<h3 className="font-semibold">Request Volume</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -127,7 +127,7 @@ export function OverviewTab(props: OverviewTabProps) {
</Card>
<Card>
<CardHeader>
<h3 className="font-semibold">Token usage</h3>
<h3 className="font-semibold">Token Usage</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -155,7 +155,7 @@ export function OverviewTab(props: OverviewTabProps) {
<div className="grid lg:grid-cols-2 gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">Model cost</h3>
<h3 className="font-semibold">Model Cost</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -168,7 +168,7 @@ export function OverviewTab(props: OverviewTabProps) {
</Card>
<Card>
<CardHeader>
<h3 className="font-semibold">Model tokens</h3>
<h3 className="font-semibold">Model Tokens</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -182,7 +182,7 @@ export function OverviewTab(props: OverviewTabProps) {
<Card>
<CardHeader>
<h3 className="font-semibold">Top models</h3>
<h3 className="font-semibold">Top Models</h3>
</CardHeader>
<CardContent>
<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">
<Card>
<CardHeader>
<h3 className="font-semibold">Top providers</h3>
<h3 className="font-semibold">Top Providers</h3>
</CardHeader>
<CardContent>
<TopEntitiesList
@@ -62,7 +62,7 @@ export function ProvidersTab(props: ProvidersTabProps) {
<div className="grid lg:grid-cols-2 gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">Provider cost</h3>
<h3 className="font-semibold">Provider Cost</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -75,7 +75,7 @@ export function ProvidersTab(props: ProvidersTabProps) {
</Card>
<Card>
<CardHeader>
<h3 className="font-semibold">Provider token usage</h3>
<h3 className="font-semibold">Provider Token Usage</h3>
</CardHeader>
<CardContent>
<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">
<Card>
<CardHeader>
<h3 className="font-semibold">Top resources</h3>
<h3 className="font-semibold">Top Resources</h3>
</CardHeader>
<CardContent>
<TopEntitiesList
@@ -70,7 +70,7 @@ export function ResourcesTab(props: ResourcesTabProps) {
<div className="grid lg:grid-cols-2 gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">Resource cost</h3>
<h3 className="font-semibold">Resource Cost</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -83,7 +83,7 @@ export function ResourcesTab(props: ResourcesTabProps) {
</Card>
<Card>
<CardHeader>
<h3 className="font-semibold">Resource token usage</h3>
<h3 className="font-semibold">Resource Token Usage</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
src/components/ai-usage-analytics/ToggleableTrendChart.tsx
+2 -2
View File
@@ -129,7 +129,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
key={s.key}
dataKey={s.key}
stackId="stack"
fill={`var(--color-${s.key})`}
fill={s.color}
radius={2}
isAnimationActive={false}
/>
@@ -165,7 +165,7 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
<Line
key={s.key}
dataKey={s.key}
stroke={`var(--color-${s.key})`}
stroke={s.color}
strokeWidth={2}
fill="transparent"
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>
<Card>
<CardHeader>
<h3 className="font-semibold">Top roles</h3>
<h3 className="font-semibold">Top Roles</h3>
</CardHeader>
<CardContent>
<TopEntitiesList
@@ -93,7 +93,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
<div className="grid lg:grid-cols-2 gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">Role cost</h3>
<h3 className="font-semibold">Role Cost</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -106,7 +106,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
</Card>
<Card>
<CardHeader>
<h3 className="font-semibold">Role token usage</h3>
<h3 className="font-semibold">Role Token Usage</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -123,7 +123,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
<h3 className="font-semibold text-muted-foreground">Users</h3>
<Card>
<CardHeader>
<h3 className="font-semibold">Top users</h3>
<h3 className="font-semibold">Top Users</h3>
</CardHeader>
<CardContent>
<TopEntitiesList
@@ -136,7 +136,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
<div className="grid lg:grid-cols-2 gap-5">
<Card>
<CardHeader>
<h3 className="font-semibold">User cost</h3>
<h3 className="font-semibold">User Cost</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
@@ -149,7 +149,7 @@ export function UsersRolesTab(props: UsersRolesTabProps) {
</Card>
<Card>
<CardHeader>
<h3 className="font-semibold">User token usage</h3>
<h3 className="font-semibold">User Token Usage</h3>
</CardHeader>
<CardContent>
<ToggleableTrendChart
src/components/ui/chart.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ const ChartContainer = React.forwardRef<
{...props}
>
<ChartStyle id={chartId} config={config} />
<RechartsPrimitive.ResponsiveContainer>
<RechartsPrimitive.ResponsiveContainer minWidth={0} minHeight={0}>
{children}
</RechartsPrimitive.ResponsiveContainer>
</div>