feat: vector dashboard and llm, gpu fix dashboard

src/client/src/app/(playground)/dashboard/dashboard-type.tsx

@@ -4,6 +4,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { DASHBOARD_TYPE_OBJECT } from "@/store/dashboard";
 import LLMDashboard from "./llm";
 import GPUDashboard from "./gpu";
+import VectorDashboard from "./vector";
 
 const DashboardLabels: any = {
 	llm: "LLM",
@@ -34,9 +35,9 @@ export function DashboardTypeGraphContainer() {
 		<div className="flex flex-col grow w-full h-full rounded overflow-y-auto gap-4">
 			{dashboardType === DASHBOARD_TYPE_OBJECT.llm ? (
 				<LLMDashboard />
-			) : dashboardType ===
-			  DASHBOARD_TYPE_OBJECT.vector ? null : dashboardType ===
-			  DASHBOARD_TYPE_OBJECT.gpu ? (
+			) : dashboardType === DASHBOARD_TYPE_OBJECT.vector ? (
+				<VectorDashboard />
+			) : dashboardType === DASHBOARD_TYPE_OBJECT.gpu ? (
 				<GPUDashboard />
 			) : null}
 		</div>

src/client/src/app/(playground)/dashboard/gpu/gpu-metric.tsx

@@ -16,12 +16,16 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import IntermediateState from "@/components/(playground)/intermediate-state";
 import { getFilterParamsForDashboard } from "@/helpers/filter";
 
+const COLORS = ["#8884d8", "#82ca9d", "#ffc658"];
+
 export default function GPUMetric({
-	gpu_type,
+	chartKeys,
 	title,
+	url,
 }: {
-	gpu_type: string;
+	chartKeys: string[];
 	title: string;
+	url?: string;
 }) {
 	const filter = useRootStore(getFilterDetails);
 	const pingStatus = useRootStore(getPingStatus);
@@ -30,10 +34,9 @@ export default function GPUMetric({
 		fireRequest({
 			body: JSON.stringify({
 				...getFilterParamsForDashboard(filter),
-				gpu_type,
 			}),
 			requestType: "POST",
-			url: "/api/metrics/gpu",
+			url: url ? url : "/api/metrics/gpu",
 			responseDataKey: "data",
 		});
 	}, [filter]);
@@ -86,13 +89,16 @@ export default function GPUMetric({
 								domain={[0, "dataMax + 15"]}
 							/>
 							<Tooltip labelClassName="dark:text-stone-700" />
-							<Area
-								type="monotone"
-								dataKey="total"
-								stackId="1"
-								stroke="#8884d8"
-								fill="#8884d8"
-							/>
+							{chartKeys.map((type, index) => (
+								<Area
+									key={type}
+									type="monotone"
+									dataKey={type.replaceAll(".", "_")}
+									stackId="1"
+									stroke={COLORS[index]}
+									fill={COLORS[index]}
+								/>
+							))}
 						</AreaChart>
 					</ResponsiveContainer>
 				)}

src/client/src/app/(playground)/dashboard/gpu/index.tsx

@@ -1,28 +1,43 @@
 import GPUMetric from "./gpu-metric";
+import NumberStats from "./number-stats";
 
 export default function GPUDashboard() {
 	return (
-		<div className="grid-cols-2 grid gap-4">
-			<GPUMetric gpu_type="memory.available" title="Memory Available (MB)" />
-			<GPUMetric gpu_type="memory.total" title="Memory total (MB)" />
-			<GPUMetric gpu_type="memory.used" title="Memory Used (MB)" />
-			<GPUMetric gpu_type="memory.free" title="Memory Free (MB)" />
-			<GPUMetric gpu_type="power.draw" title="Power Draw (Watt)" />
-			<GPUMetric gpu_type="power.limit" title="Power Limit (Watt)" />
-			<GPUMetric gpu_type="temperature" title="Temperature (Celcius)" />
-			<GPUMetric gpu_type="fan_speed" title="Fan speed (0-100)" />
-			<GPUMetric
-				gpu_type="utilization_percentage"
-				title="Utilization Percentage (%)"
-			/>
-			<GPUMetric
-				gpu_type="enc.utilization_percentage"
-				title="Encoder Utilization Percentage (%)"
-			/>
-			<GPUMetric
-				gpu_type="dec.utilization_percentage"
-				title="Decoder Utilization Percentage (%)"
-			/>
-		</div>
+		<>
+			<NumberStats />
+			<div className="grid-cols-2 grid gap-4">
+				<GPUMetric
+					chartKeys={[
+						"utilization_percentage",
+						"enc_utilization_percentage",
+						"dec_utilization_percentage",
+					]}
+					url="/api/metrics/gpu/utilization/time"
+					title="Avg Utilization Percentage (%)"
+				/>
+
+				<GPUMetric
+					chartKeys={["temperature"]}
+					url="/api/metrics/gpu/temperature/time"
+					title="Avg Temperature (°C)"
+				/>
+				<GPUMetric
+					chartKeys={["memory_total", "memory_used", "memory_free"]}
+					url="/api/metrics/gpu/memory/time"
+					title="Memory (MB)"
+				/>
+
+				<GPUMetric
+					chartKeys={["power.limit", "power.draw"]}
+					url="/api/metrics/gpu/power/time"
+					title="Power (Watt)"
+				/>
+				<GPUMetric
+					chartKeys={["fan_speed"]}
+					url="/api/metrics/gpu/fanspeed/time"
+					title="Fan speed (0-100)"
+				/>
+			</div>
+		</>
 	);
 }

src/client/src/app/(playground)/dashboard/gpu/number-stats.tsx

@@ -0,0 +1,39 @@
+import StatCard from "@/components/(playground)/stat-card";
+import { MemoryStick, PowerIcon, Thermometer, UtilityPole } from "lucide-react";
+
+function NumberStats() {
+	return (
+		<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+			<StatCard
+				dataKey="utilization_percentage"
+				heading="Avg utilization percentage"
+				textSuffix="%"
+				icon={UtilityPole}
+				url="/api/metrics/gpu/utilization/average"
+			/>
+			<StatCard
+				dataKey="temperature"
+				heading="Avg temperature"
+				icon={Thermometer}
+				textSuffix="°C"
+				url="/api/metrics/gpu/temperature/average"
+			/>
+			<StatCard
+				dataKey="power_draw"
+				heading="Avg power draw"
+				icon={PowerIcon}
+				textSuffix="W"
+				url="/api/metrics/gpu/power/average"
+			/>
+			<StatCard
+				dataKey="memory_used"
+				heading="Average memory used"
+				icon={MemoryStick}
+				textSuffix="MB"
+				url="/api/metrics/gpu/memory/average"
+			/>
+		</div>
+	);
+}
+
+export default NumberStats;

src/client/src/app/(playground)/dashboard/llm/data-charts.tsx

@@ -7,25 +7,25 @@ export default function DataCharts() {
 				categoryKey="count"
 				heading="Generation by categories"
 				indexKey="category"
-				url="/api/metrics/category"
+				url="/api/metrics/llm/category"
 			/>
 			<PieChartCard
 				categoryKey="count"
 				heading="Generation by provider"
 				indexKey="provider"
-				url="/api/metrics/endpoint"
+				url="/api/metrics/llm/endpoint"
 			/>
 			<PieChartCard
 				categoryKey="cost"
 				heading="Cost by Environment"
 				indexKey="environment"
-				url="/api/metrics/cost/environment"
+				url="/api/metrics/llm/cost/environment"
 			/>
 			<PieChartCard
 				categoryKey="cost"
 				heading="Cost by application"
 				indexKey="applicationName"
-				url="/api/metrics/cost/application"
+				url="/api/metrics/llm/cost/application"
 			/>
 		</div>
 	);

src/client/src/app/(playground)/dashboard/llm/number-stats.tsx

@@ -14,12 +14,18 @@ function NumberStats() {
 		<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
 			<StatCard
 				dataKey="total_requests"
+				extraParams={{
+					operationType: "llm",
+				}}
 				heading="Total requests"
 				icon={RadioTower}
 				url="/api/metrics/request/total"
 			/>
 			<StatCard
 				dataKey="average_duration"
+				extraParams={{
+					operationType: "llm",
+				}}
 				heading="Avg Request Duration"
 				icon={Timer}
 				textSuffix="s"
@@ -33,23 +39,23 @@ function NumberStats() {
 				extraParams={{ type: "total" }}
 				heading="Avg tokens per request"
 				icon={Braces}
-				url="/api/metrics/token/request/average"
+				url="/api/metrics/llm/token/request/average"
 			/>
 			<StatCard
 				dataKey="total_usage_cost"
 				heading="Total costs"
 				icon={CircleDollarSign}
 				roundTo={7}
 				textPrefix="$"
-				url="/api/metrics/cost/total"
+				url="/api/metrics/llm/cost/total"
 			/>
 			<StatCard
 				dataKey="average_usage_cost"
 				heading="Avg cost per request"
 				icon={Banknote}
 				roundTo={7}
 				textPrefix="$"
-				url="/api/metrics/cost/request/average"
+				url="/api/metrics/llm/cost/request/average"
 			/>
 		</div>
 	);

src/client/src/app/(playground)/dashboard/llm/token-charts.tsx

@@ -14,7 +14,6 @@ import {
 } from "recharts";
 import { useCallback, useEffect, useState } from "react";
 import useFetchWrapper from "@/utils/hooks/useFetchWrapper";
-import { getChartColors } from "@/constants/chart-colors";
 import { getFilterDetails } from "@/selectors/filter";
 import { useRootStore } from "@/store";
 import { getPingStatus } from "@/selectors/database-config";
@@ -34,7 +33,7 @@ function TopModels() {
 		fireRequest({
 			body: JSON.stringify(getFilterParamsForDashboard(filter)),
 			requestType: "POST",
-			url: "/api/metrics/model/top",
+			url: "/api/metrics/llm/model/top",
 			responseDataKey: "data",
 		});
 	}, [filter]);
@@ -48,13 +47,10 @@ function TopModels() {
 			fetchData();
 	}, [filter, fetchData, pingStatus]);
 
-	const colors = getChartColors((data as any[])?.length || 0);
-
 	const updatedData = ((data as any[]) || []).map((item, index) => ({
 		name: item.model,
 		value: item.model_count,
 		target: item.total,
-		color: colors[index],
 	}));
 
 	return (
@@ -81,27 +77,28 @@ function TopModels() {
 								left: 0,
 								bottom: 5,
 							}}
-							barSize={10}
+							layout="vertical"
 						>
-							<XAxis
-								dataKey="name"
-								className="stroke-stone-300"
-								fontSize={10}
-								stroke="currentColor"
-								interval={0}
-								angle={-5}
-							/>
-							<YAxis
-								className="text-xs stroke-stone-300"
-								domain={[0, "dataMax + 15"]}
-								stroke="currentColor"
-							/>
-							<Bar dataKey="value" className="fill-primary">
+							<YAxis dataKey="name" type="category" axisLine={false} hide />
+							<XAxis dataKey="value" type="number" hide />
+							<Bar
+								dataKey="value"
+								className="fill-primary"
+								radius={[0, 20, 20, 0]}
+							>
+								<LabelList
+									dataKey="name"
+									position="insideLeft"
+									offset={8}
+									className="fill-stone-100"
+									fontSize={12}
+								/>
 								<LabelList
 									dataKey="value"
-									position="top"
-									className="fill-stone-700 dark:fill-stone-200"
-									fill="currentColor"
+									position="right"
+									offset={8}
+									className="fill-stone-800 dark:fill-stone-100"
+									fontSize={12}
 								/>
 							</Bar>
 						</BarChart>
@@ -124,7 +121,7 @@ function ModelsPerTime() {
 		fireRequest({
 			body: JSON.stringify(getFilterParamsForDashboard(filter)),
 			requestType: "POST",
-			url: "/api/metrics/model/time",
+			url: "/api/metrics/llm/model/time",
 			responseDataKey: "data",
 		});
 	}, [filter]);
@@ -220,7 +217,7 @@ function TokensPerTime() {
 		fireRequest({
 			body: JSON.stringify(getFilterParamsForDashboard(filter)),
 			requestType: "POST",
-			url: "/api/metrics/token/time",
+			url: "/api/metrics/llm/token/time",
 			responseDataKey: "data",
 		});
 	}, [filter]);
@@ -313,15 +310,15 @@ function TokenCharts() {
 						heading="Avg prompt tokens / request"
 						loadingClass="h-8 w-12"
 						textClass="text-2xl"
-						url="/api/metrics/token/request/average"
+						url="/api/metrics/llm/token/request/average"
 					/>
 					<StatCard
 						dataKey="total_tokens"
 						extraParams={{ type: "completion" }}
 						heading="Avg completion tokens / request"
 						loadingClass="h-8 w-12"
 						textClass="text-2xl"
-						url="/api/metrics/token/request/average"
+						url="/api/metrics/llm/token/request/average"
 					/>
 				</div>
 				<TokensPerTime />

src/client/src/app/(playground)/dashboard/vector/index.tsx

@@ -0,0 +1,14 @@
+import NumberStats from "./number-stats";
+import dynamic from "next/dynamic";
+const Operations = dynamic(() => import("./operations"), {
+	ssr: false,
+});
+
+export default function VectorDashboard() {
+	return (
+		<>
+			<NumberStats />
+			<Operations />
+		</>
+	);
+}