From b701fe1f5edd60d749f5d255ce9175bfceed38e1 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Fri, 17 Jan 2025 20:05:25 -0800
Subject: [PATCH] view logs

---
 .../src/components/view_logs.tsx              | 107 ++++++++++--------
 1 file changed, 58 insertions(+), 49 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_logs.tsx b/ui/litellm-dashboard/src/components/view_logs.tsx
index 097ef9a172..3de8a7eeb5 100644
--- a/ui/litellm-dashboard/src/components/view_logs.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs.tsx
@@ -304,56 +304,65 @@ export const SpendLogsTable: React.FC<SpendLogsTableProps> = ({ accessToken, tok
         </div>
         
         <div className="overflow-x-auto w-full">
-          <Table className="w-full table-fixed">
-            <TableHead>
-              <TableRow>
-                {columns.map((column) => (
-                  <TableHeaderCell 
-                    key={column.header}
-                    className={`${column.header === 'Request ID' ? 'w-32' : ''} whitespace-nowrap`}
-                  >
-                    {column.header}
-                  </TableHeaderCell>
-                ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {logs.map((log) => (
-                <React.Fragment key={log.request_id || log.startTime}>
-                  <TableRow 
-                    className="cursor-pointer hover:bg-gray-50"
-                    onClick={() => setExpandedRow(expandedRow === log.request_id ? null : log.request_id)}
-                  >
-                    {columns.map((column) => (
-                      <TableCell 
-                        key={column.header}
-                        className={column.header === 'Request ID' ? 'w-32 truncate' : ''}
-                      >
-                        {column.cell ? 
-                          column.cell({ 
-                            getValue: () => log[column.accessorKey as keyof LogEntry],
-                            row: { original: log }
-                          }) : 
-                          <span>{String(log[column.accessorKey as keyof LogEntry] ?? '')}</span>
-                        }
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                  {expandedRow === log.request_id && (
-                    <TableRow>
-                      <TableCell colSpan={columns.length} className="p-0">
-                        <RequestViewer data={{
-                          request: typeof log.messages === 'string' ? JSON.parse(log.messages) : log.messages,
-                          response: typeof log.response === 'string' ? JSON.parse(log.response) : log.response,
-                          metadata: log.metadata
-                        }} />
-                      </TableCell>
+          {logs.length > 0 ? (
+            <Table className="w-full table-fixed">
+              <TableHead>
+                <TableRow>
+                  {columns.map((column) => (
+                    <TableHeaderCell 
+                      key={column.header}
+                      className={`${column.header === 'Request ID' ? 'w-32' : ''} whitespace-nowrap`}
+                    >
+                      {column.header}
+                    </TableHeaderCell>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {logs.map((log) => (
+                  <React.Fragment key={log.request_id || log.startTime}>
+                    <TableRow 
+                      className="cursor-pointer hover:bg-gray-50"
+                      onClick={() => setExpandedRow(expandedRow === log.request_id ? null : log.request_id)}
+                    >
+                      {columns.map((column) => (
+                        <TableCell 
+                          key={column.header}
+                          className={column.header === 'Request ID' ? 'w-32 truncate' : ''}
+                        >
+                          {column.cell ? 
+                            column.cell({ 
+                              getValue: () => log[column.accessorKey as keyof LogEntry],
+                              row: { original: log }
+                            }) : 
+                            <span>{String(log[column.accessorKey as keyof LogEntry] ?? '')}</span>
+                          }
+                        </TableCell>
+                      ))}
                     </TableRow>
-                  )}
-                </React.Fragment>
-              ))}
-            </TableBody>
-          </Table>
+                    {expandedRow === log.request_id && (
+                      <TableRow>
+                        <TableCell colSpan={columns.length} className="p-0">
+                          <RequestViewer data={{
+                            request: typeof log.messages === 'string' ? JSON.parse(log.messages) : log.messages,
+                            response: typeof log.response === 'string' ? JSON.parse(log.response) : log.response,
+                            metadata: log.metadata
+                          }} />
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </React.Fragment>
+                ))}
+              </TableBody>
+            </Table>
+          ) : (
+            <div className="p-8 text-center text-gray-500">
+              <p>No SpendLogs messages available.</p>
+              <p className="text-sm mt-2">
+                To enable this, set <code>`general_settings.store_prompts_in_spend_logs: true`</code> in your config.yaml
+              </p>
+            </div>
+          )}
         </div>
       </div>
     </div>