diff --git a/apps/design-system/registry/default/example/logs-bar-chart.tsx b/apps/design-system/registry/default/example/logs-bar-chart.tsx index b477e491133..e639f355f1a 100644 --- a/apps/design-system/registry/default/example/logs-bar-chart.tsx +++ b/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() diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts index eda734318a1..fa4fe6545e0 100644 --- a/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts +++ b/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 } diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts index 01e41eb9c35..82536a58575 100644 --- a/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts +++ b/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' } } diff --git a/packages/ui-patterns/LogsBarChart/index.tsx b/packages/ui-patterns/LogsBarChart/index.tsx index 51cfe6e44d6..9590ce66835 100644 --- a/packages/ui-patterns/LogsBarChart/index.tsx +++ b/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 = ({ dayjs(v).format(DateTimeFormat)} /> } @@ -104,6 +110,21 @@ export const LogsBarChart = ({ ))} + {/* Warning bars */} + + {data?.map((_entry: LogsBarChartDatum, index: number) => ( + + ))} + + {/* Success bars */} {data?.map((_entry: LogsBarChartDatum, index: number) => (