Add warnings to logs stacked bar chart (#33036)

apps/design-system/registry/default/example/logs-bar-chart.tsx

@@ -9,6 +9,7 @@ export default function LogsBarChartDemo() {
       timestamp: date.toISOString(),
       ok_count: Math.floor(Math.random() * 100), // Random value 0-99
       error_count: Math.floor(Math.random() * 50), // Random value 0-50
+      warning_count: Math.floor(Math.random() * 50), // Random value 0-50
     }
   }).reverse()
 

apps/studio/components/interfaces/Settings/Logs/Logs.types.ts

@@ -52,6 +52,7 @@ export interface CountData {
 
 export interface EventChartData extends Datum {
   error_count: number
+  warning_count: number
   ok_count: number
   timestamp: string
 }

apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts

@@ -322,6 +322,7 @@ export const genChartQuery = (
   const [startOffset, trunc] = calcChartStart(params)
   const where = genWhereStatement(table, filters)
   const errorCondition = getErrorCondition(table)
+  const warningCondition = getWarningCondition(table)
 
   let joins = genCrossJoinUnnests(table)
 
@@ -329,8 +330,9 @@ export const genChartQuery = (
 SELECT
 -- log-event-chart
   timestamp_trunc(t.timestamp, ${trunc}) as timestamp,
-  count(CASE WHEN NOT (${errorCondition}) THEN 1 END) as ok_count,
+  count(CASE WHEN NOT (${errorCondition} OR ${warningCondition}) THEN 1 END) as ok_count,
   count(CASE WHEN ${errorCondition} THEN 1 END) as error_count,
+  count(CASE WHEN ${warningCondition} THEN 1 END) as warning_count,
 FROM
   ${table} t
   ${joins}
@@ -586,16 +588,33 @@ export function checkForWildcard(query: string) {
 function getErrorCondition(table: LogsTableName): string {
   switch (table) {
     case 'edge_logs':
-      return 'response.status_code >= 400'
+      return 'response.status_code >= 500'
     case 'postgres_logs':
       return "parsed.error_severity IN ('ERROR', 'FATAL', 'PANIC')"
     case 'auth_logs':
       return "metadata.level = 'error' OR metadata.status >= 400"
     case 'function_edge_logs':
-      return 'response.status_code >= 400'
+      return 'response.status_code >= 500'
     case 'function_logs':
       return "metadata.level IN ('error', 'fatal')"
     default:
-      return 'false' // Default to no errors if table type is unknown
+      return 'false'
+  }
+}
+
+function getWarningCondition(table: LogsTableName): string {
+  switch (table) {
+    case 'edge_logs':
+      return 'response.status_code >= 400 AND response.status_code < 500'
+    case 'postgres_logs':
+      return "parsed.error_severity IN ('WARNING')"
+    case 'auth_logs':
+      return "metadata.level = 'warning'"
+    case 'function_edge_logs':
+      return 'response.status_code >= 400 AND response.status_code < 500'
+    case 'function_logs':
+      return "metadata.level IN ('warning')"
+    default:
+      return 'false'
   }
 }

packages/ui-patterns/LogsBarChart/index.tsx

@@ -12,11 +12,14 @@ const CHART_COLORS = {
   GREEN_2: 'hsl(var(--brand-500))',
   RED_1: 'hsl(var(--destructive-default))',
   RED_2: 'hsl(var(--destructive-500))',
+  YELLOW_1: 'hsl(var(--warning-default))',
+  YELLOW_2: 'hsl(var(--warning-500))',
 }
 type LogsBarChartDatum = {
   timestamp: string
   error_count: number
   ok_count: number
+  warning_count: number
 }
 export const LogsBarChart = ({
   data,
@@ -50,6 +53,9 @@ export const LogsBarChart = ({
             ok_count: {
               label: 'Ok',
             },
+            warning_count: {
+              label: 'Warnings',
+            },
           } satisfies ChartConfig
         }
         className="h-[80px]"
@@ -83,7 +89,7 @@ export const LogsBarChart = ({
           <ChartTooltip
             content={
               <ChartTooltipContent
-                className="text-foreground-light"
+                className="text-foreground-light -mt-5"
                 labelFormatter={(v) => dayjs(v).format(DateTimeFormat)}
               />
             }
@@ -104,6 +110,21 @@ export const LogsBarChart = ({
             ))}
           </Bar>
 
+          {/* Warning bars */}
+          <Bar dataKey="warning_count" fill={CHART_COLORS.YELLOW_1} maxBarSize={24} stackId="stack">
+            {data?.map((_entry: LogsBarChartDatum, index: number) => (
+              <Cell
+                className="cursor-pointer transition-colors"
+                key={`warning-${index}`}
+                fill={
+                  focusDataIndex === index || focusDataIndex === null
+                    ? CHART_COLORS.YELLOW_1
+                    : CHART_COLORS.YELLOW_2
+                }
+              />
+            ))}
+          </Bar>
+
           {/* Success bars */}
           <Bar dataKey="ok_count" fill={CHART_COLORS.GREEN_1} maxBarSize={24} stackId="stack">
             {data?.map((_entry: LogsBarChartDatum, index: number) => (