Skip to content

Commit 75752ba

Browse files
ericallamericallam
committed
feat(dashboard): a few tweaks to the AI models page
1 parent bf736a7 commit 75752ba

File tree

2 files changed

+33
-83
lines changed
  • apps/webapp/app/routes
    • _app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models.$modelId
    • _app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index

2 files changed

+33
-83
lines changed

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models.$modelId/route.tsx‎

Lines changed: 12 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -112,8 +112,8 @@ type Tab = "overview" | "global" | "usage";
112112

113113
const TAB_CONFIG: { id: Tab; label: string }[] = [
114114
{ id: "overview", label: "Overview" },
115+
{ id: "usage", label: "Metrics" },
115116
{ id: "global", label: "Global Metrics" },
116-
{ id: "usage", label: "Your Usage" },
117117
];
118118

119119
export default function ModelDetailPage() {
@@ -425,16 +425,7 @@ function GlobalMetricsTab({
425425
return (
426426
<div className="space-y-4">
427427
{/* Big numbers */}
428-
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
429-
<div className="h-24">
430-
<MetricWidget
431-
widgetKey={`${modelName}-calls`}
432-
title="Total Calls"
433-
query={`SELECT sum(call_count) AS total_calls FROM llm_models WHERE response_model = '${escapeTSQL(modelName)}'`}
434-
config={bignumberConfig("total_calls", { abbreviate: true })}
435-
{...widgetProps}
436-
/>
437-
</div>
428+
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
438429
<div className="h-24">
439430
<MetricWidget
440431
widgetKey={`${modelName}-ttfc-p50`}
@@ -465,25 +456,14 @@ function GlobalMetricsTab({
465456
</div>
466457

467458
{/* Charts */}
468-
<div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
469-
<div className="h-[300px]">
470-
<MetricWidget
471-
widgetKey={`${modelName}-calls-time`}
472-
title="Calls over time"
473-
query={`SELECT timeBucket(), sum(call_count) AS calls FROM llm_models WHERE response_model = '${escapeTSQL(modelName)}' GROUP BY timeBucket ORDER BY timeBucket`}
474-
config={chartConfig({ chartType: "bar", xAxisColumn: "timebucket", yAxisColumns: ["calls"] })}
475-
{...widgetProps}
476-
/>
477-
</div>
478-
<div className="h-[300px]">
479-
<MetricWidget
480-
widgetKey={`${modelName}-ttfc-time`}
481-
title="TTFC over time"
482-
query={`SELECT timeBucket(), round(quantilesMerge(0.5)(ttfc_quantiles)[1], 0) AS ttfc_p50, round(quantilesMerge(0.9)(ttfc_quantiles)[1], 0) AS ttfc_p90 FROM llm_models WHERE response_model = '${escapeTSQL(modelName)}' GROUP BY timeBucket ORDER BY timeBucket`}
483-
config={chartConfig({ chartType: "line", xAxisColumn: "timebucket", yAxisColumns: ["ttfc_p50", "ttfc_p90"], aggregation: "avg" })}
484-
{...widgetProps}
485-
/>
486-
</div>
459+
<div className="h-[300px]">
460+
<MetricWidget
461+
widgetKey={`${modelName}-ttfc-time`}
462+
title="TTFC over time"
463+
query={`SELECT timeBucket(), round(quantilesMerge(0.5)(ttfc_quantiles)[1], 0) AS ttfc_p50, round(quantilesMerge(0.9)(ttfc_quantiles)[1], 0) AS ttfc_p90 FROM llm_models WHERE response_model = '${escapeTSQL(modelName)}' GROUP BY timeBucket ORDER BY timeBucket`}
464+
config={chartConfig({ chartType: "line", xAxisColumn: "timebucket", yAxisColumns: ["ttfc_p50", "ttfc_p90"], aggregation: "avg" })}
465+
{...widgetProps}
466+
/>
487467
</div>
488468

489469
<Callout variant="info">
@@ -523,7 +503,7 @@ function YourUsageTab({
523503
<div className="h-24">
524504
<MetricWidget
525505
widgetKey={`${modelName}-user-calls`}
526-
title="Your Calls"
506+
title="Total calls (7d)"
527507
query={`SELECT count() AS total_calls FROM llm_metrics WHERE response_model = '${escapeTSQL(modelName)}'`}
528508
config={bignumberConfig("total_calls", { abbreviate: true })}
529509
{...widgetProps}
@@ -532,7 +512,7 @@ function YourUsageTab({
532512
<div className="h-24">
533513
<MetricWidget
534514
widgetKey={`${modelName}-user-cost`}
535-
title="Your Cost"
515+
title="Total cost (7d)"
536516
query={`SELECT sum(total_cost) AS total_cost FROM llm_metrics WHERE response_model = '${escapeTSQL(modelName)}'`}
537517
config={bignumberConfig("total_cost", { aggregation: "sum" })}
538518
{...widgetProps}

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx‎

Lines changed: 21 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,6 @@ function ModelsList({
343343
</>
344344
)}
345345
<TableHeaderCell alignment="right">p50 TTFC</TableHeaderCell>
346-
<TableHeaderCell alignment="right">Calls (7d)</TableHeaderCell>
347346
</TableRow>
348347
</TableHeader>
349348
<TableBody>
@@ -397,9 +396,6 @@ function ModelsList({
397396
<TableCell onClick={select} alignment="right" className="tabular-nums">
398397
{popular && popular.ttfcP50 > 0 ? `${popular.ttfcP50.toFixed(0)}ms` : "—"}
399398
</TableCell>
400-
<TableCell onClick={select} alignment="right" className="tabular-nums">
401-
{popular && popular.callCount > 0 ? formatNumberCompact(popular.callCount) : "—"}
402-
</TableCell>
403399
</TableRow>
404400
);
405401
})}
@@ -718,20 +714,20 @@ function ModelDetailPanel({
718714
Overview
719715
</TabButton>
720716
<TabButton
721-
isActive={tab === "global"}
717+
isActive={tab === "usage"}
722718
layoutId="model-detail"
723-
onClick={() => setTab("global")}
724-
shortcut={{ key: "g" }}
719+
onClick={() => setTab("usage")}
720+
shortcut={{ key: "u" }}
725721
>
726-
Global metrics
722+
Metrics
727723
</TabButton>
728724
<TabButton
729-
isActive={tab === "usage"}
725+
isActive={tab === "global"}
730726
layoutId="model-detail"
731-
onClick={() => setTab("usage")}
732-
shortcut={{ key: "u" }}
727+
onClick={() => setTab("global")}
728+
shortcut={{ key: "g" }}
733729
>
734-
Your usage
730+
Global metrics
735731
</TabButton>
736732
</TabContainer>
737733
</div>
@@ -876,18 +872,7 @@ function DetailGlobalMetricsTab({
876872

877873
return (
878874
<div className="flex flex-col gap-3 py-3">
879-
<div className="h-[250px]">
880-
<MetricWidget
881-
widgetKey={`${modelName}-calls`}
882-
title="Total calls"
883-
query={`SELECT sum(call_count) AS total_calls FROM llm_models WHERE response_model = '${escapeTSQL(
884-
modelName
885-
)}'`}
886-
config={bignumberConfig("total_calls", { abbreviate: true })}
887-
{...widgetProps}
888-
/>
889-
</div>
890-
<div className="h-[250px]">
875+
<div className="h-[120px]">
891876
<MetricWidget
892877
widgetKey={`${modelName}-ttfc-p50`}
893878
title="p50 TTFC"
@@ -898,7 +883,7 @@ function DetailGlobalMetricsTab({
898883
{...widgetProps}
899884
/>
900885
</div>
901-
<div className="h-[250px]">
886+
<div className="h-[120px]">
902887
<MetricWidget
903888
widgetKey={`${modelName}-ttfc-p90`}
904889
title="p90 TTFC"
@@ -909,7 +894,7 @@ function DetailGlobalMetricsTab({
909894
{...widgetProps}
910895
/>
911896
</div>
912-
<div className="h-[250px]">
897+
<div className="h-[120px]">
913898
<MetricWidget
914899
widgetKey={`${modelName}-tps`}
915900
title="Tokens/sec (p50)"
@@ -921,22 +906,7 @@ function DetailGlobalMetricsTab({
921906
/>
922907
</div>
923908

924-
<div className="h-[250px]">
925-
<MetricWidget
926-
widgetKey={`${modelName}-calls-time`}
927-
title="Calls over time"
928-
query={`SELECT timeBucket(), sum(call_count) AS calls FROM llm_models WHERE response_model = '${escapeTSQL(
929-
modelName
930-
)}' GROUP BY timeBucket ORDER BY timeBucket`}
931-
config={chartConfig({
932-
chartType: "bar",
933-
xAxisColumn: "timebucket",
934-
yAxisColumns: ["calls"],
935-
})}
936-
{...widgetProps}
937-
/>
938-
</div>
939-
<div className="h-[250px]">
909+
<div className="h-[400px]">
940910
<MetricWidget
941911
widgetKey={`${modelName}-ttfc-time`}
942912
title="TTFC over time"
@@ -983,29 +953,29 @@ function DetailYourUsageTab({
983953

984954
return (
985955
<div className="flex flex-col gap-3 py-3">
986-
<div className="h-[250px]">
956+
<div className="h-[120px]">
987957
<MetricWidget
988958
widgetKey={`${modelName}-user-calls`}
989-
title="Your calls"
959+
title="Total calls (7d)"
990960
query={`SELECT count() AS total_calls FROM llm_metrics WHERE response_model = '${escapeTSQL(
991961
modelName
992962
)}'`}
993963
config={bignumberConfig("total_calls", { abbreviate: true })}
994964
{...widgetProps}
995965
/>
996966
</div>
997-
<div className="h-[250px]">
967+
<div className="h-[120px]">
998968
<MetricWidget
999969
widgetKey={`${modelName}-user-cost`}
1000-
title="Your cost"
970+
title="Total cost (7d)"
1001971
query={`SELECT sum(total_cost) AS total_cost FROM llm_metrics WHERE response_model = '${escapeTSQL(
1002972
modelName
1003973
)}'`}
1004974
config={bignumberConfig("total_cost", { aggregation: "sum" })}
1005975
{...widgetProps}
1006976
/>
1007977
</div>
1008-
<div className="h-[250px]">
978+
<div className="h-[120px]">
1009979
<MetricWidget
1010980
widgetKey={`${modelName}-user-ttfc`}
1011981
title="Avg TTFC"
@@ -1016,7 +986,7 @@ function DetailYourUsageTab({
1016986
{...widgetProps}
1017987
/>
1018988
</div>
1019-
<div className="h-[250px]">
989+
<div className="h-[120px]">
1020990
<MetricWidget
1021991
widgetKey={`${modelName}-user-tps`}
1022992
title="Avg tokens/sec"
@@ -1028,7 +998,7 @@ function DetailYourUsageTab({
1028998
/>
1029999
</div>
10301000

1031-
<div className="h-[250px]">
1001+
<div className="h-[400px]">
10321002
<MetricWidget
10331003
widgetKey={`${modelName}-user-cost-time`}
10341004
title="Cost over time"
@@ -1043,7 +1013,7 @@ function DetailYourUsageTab({
10431013
{...widgetProps}
10441014
/>
10451015
</div>
1046-
<div className="h-[250px]">
1016+
<div className="h-[400px]">
10471017
<MetricWidget
10481018
widgetKey={`${modelName}-user-tokens-time`}
10491019
title="Tokens over time"
@@ -1058,7 +1028,7 @@ function DetailYourUsageTab({
10581028
{...widgetProps}
10591029
/>
10601030
</div>
1061-
<div className="h-[250px]">
1031+
<div className="h-[400px]">
10621032
<MetricWidget
10631033
widgetKey={`${modelName}-user-tasks`}
10641034
title="Cost by task"

0 commit comments

Comments
 (0)