feat(schema.prisma): store model id + model group as part of spend logs

allows precise model metrics

litellm/proxy/schema.prisma

@@ -176,6 +176,8 @@ model LiteLLM_SpendLogs {
   endTime             DateTime // Assuming end_time is a DateTime field
   completionStartTime DateTime? // Assuming completionStartTime is a DateTime field
   model               String   @default("")
+  model_id            String?   @default("") // the model id stored in proxy model db
+  model_group         String?   @default("") // public model_name / model_group
   api_base            String   @default("")
   user                String   @default("")
   metadata            Json     @default("{}")

litellm/proxy/utils.py

@@ -1874,6 +1874,9 @@ def get_logging_payload(
         # hash the api_key
         api_key = hash_token(api_key)
 
+    _model_id = metadata.get("model_info", {}).get("id", "")
+    _model_group = metadata.get("model_group", "")
+
     # clean up litellm metadata
     if isinstance(metadata, dict):
         clean_metadata = {}
@@ -1928,6 +1931,8 @@ def get_logging_payload(
         "request_tags": metadata.get("tags", []),
         "end_user": end_user_id or "",
         "api_base": litellm_params.get("api_base", ""),
+        "model_group": _model_group,
+        "model_id": _model_id,
     }
 
     verbose_proxy_logger.debug("SpendTable: created payload - payload: %s\n\n", payload)

schema.prisma

@@ -176,6 +176,8 @@ model LiteLLM_SpendLogs {
   endTime             DateTime // Assuming end_time is a DateTime field
   completionStartTime DateTime? // Assuming completionStartTime is a DateTime field
   model               String   @default("")
+  model_id            String?   @default("") // the model id stored in proxy model db
+  model_group         String?   @default("") // public model_name / model_group
   api_base            String   @default("")
   user                String   @default("")
   metadata            Json     @default("{}")

ui/litellm-dashboard/src/components/model_metrics/time_to_first_token.tsx

@@ -0,0 +1,84 @@
+import { LineChart } from "@tremor/react";
+
+const chartdata = [
+  {
+    date: "Jan 22",
+    SolarPanels: 2890,
+    Inverters: 2338,
+  },
+  {
+    date: "Feb 22",
+    SolarPanels: 2756,
+    Inverters: 2103,
+  },
+  {
+    date: "Mar 22",
+    SolarPanels: 3322,
+    Inverters: 2194,
+  },
+  {
+    date: "Apr 22",
+    SolarPanels: 3470,
+    Inverters: 2108,
+  },
+  {
+    date: "May 22",
+    SolarPanels: 3475,
+    Inverters: 1812,
+  },
+  {
+    date: "Jun 22",
+    SolarPanels: 3129,
+    Inverters: 1726,
+  },
+  {
+    date: "Jul 22",
+    SolarPanels: 3490,
+    Inverters: 1982,
+  },
+  {
+    date: "Aug 22",
+    SolarPanels: 2903,
+    Inverters: 2012,
+  },
+  {
+    date: "Sep 22",
+    SolarPanels: 2643,
+    Inverters: 2342,
+  },
+  {
+    date: "Oct 22",
+    SolarPanels: 2837,
+    Inverters: 2473,
+  },
+  {
+    date: "Nov 22",
+    SolarPanels: 2954,
+    Inverters: 3848,
+  },
+  {
+    date: "Dec 22",
+    SolarPanels: 3239,
+    Inverters: 3736,
+  },
+];
+
+const dataFormatter = (number: number) =>
+  `$${Intl.NumberFormat("us").format(number).toString()}`;
+
+const TimeToFirstToken = () => {
+  return (
+    <LineChart
+      className="h-80"
+      data={chartdata}
+      index="date"
+      categories={["SolarPanels", "Inverters"]}
+      colors={["indigo", "rose"]}
+      valueFormatter={dataFormatter}
+      yAxisWidth={60}
+      onValueChange={(v) => console.log(v)}
+    />
+  );
+};
+
+export default TimeToFirstToken;