show log errors as different colors in chart, update chart click filter

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

@@ -53,6 +53,7 @@ export interface CountData {
 export interface EventChartData extends Datum {
   count: number
   timestamp: string
+  has_error: boolean
 }
 
 type LFResponse<T> = {

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

@@ -296,6 +296,24 @@ const calcChartStart = (params: Partial<LogsEndpointParams>): [Dayjs, string] =>
   return [its.add(-extendValue, trunc), trunc]
 }
 
+function getErrorCondition(table: LogsTableName): string {
+  switch (table) {
+    case 'edge_logs':
+      return 'response.status_code >= 400'
+    case 'postgres_logs':
+      return "parsed.error_severity IN ('ERROR', 'FATAL', 'PANIC')"
+    case 'function_logs':
+      return "metadata.level IN ('error', 'fatal')"
+    case 'auth_logs':
+      return "metadata.level = 'error' OR metadata.status >= 400"
+    case 'function_edge_logs':
+      return 'response.status_code >= 400'
+    // Add conditions for other log types as needed
+    default:
+      return 'false' // Default to no errors if table type is unknown
+  }
+}
+
 /**
  *
  * generates log event chart query
@@ -308,13 +326,16 @@ export const genChartQuery = (
   const [startOffset, trunc] = calcChartStart(params)
   const where = genWhereStatement(table, filters)
 
+  const errorCondition = getErrorCondition(table)
+
   let joins = genCrossJoinUnnests(table)
 
   return `
 SELECT
 -- log-event-chart
   timestamp_trunc(t.timestamp, ${trunc}) as timestamp,
-  count(t.timestamp) as count
+  count(t.timestamp) as count,
+  LOGICAL_OR(${errorCondition}) as has_error
 FROM
   ${table} t
   ${joins}

apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx

@@ -19,6 +19,7 @@ import { LOGS_TABLES, LOG_ROUTES_WITH_REPLICA_SUPPORT, LogsTableName } from './L
 import type { Filters, LogSearchCallback, LogTemplate, QueryType } from './Logs.types'
 import { ensureNoTimestampConflict, maybeShowUpgradePrompt } from './Logs.utils'
 import UpgradePrompt from './UpgradePrompt'
+import dayjs from 'dayjs'
 
 /**
  * Acts as a container component for the entire log display
@@ -229,10 +230,18 @@ export const LogsPreviewer = ({
             <LogEventChart
               data={eventChartData}
               onBarClick={(isoTimestamp) => {
+                // from should be 1 hour before the bar
+                // to should be 1 hour after the bar
+                const from = dayjs(isoTimestamp as string)
+                  .subtract(1, 'hour')
+                  .toISOString()
+                const to = dayjs(isoTimestamp as string)
+                  .add(1, 'hour')
+                  .toISOString()
                 handleSearch('event-chart-bar-click', {
                   query: filters.search_query as string,
-                  to: isoTimestamp as string,
-                  from: null,
+                  to: to,
+                  from: from,
                 })
               }}
             />

apps/studio/components/ui/Charts/BarChart.tsx

@@ -82,7 +82,7 @@ const BarChart = ({
       (focusDataIndex !== null &&
         data &&
         data[focusDataIndex] !== undefined &&
-        day(data[focusDataIndex][xAxisKey]).format(customDateFormat)) ||
+        day(String(data[focusDataIndex][xAxisKey])).format(customDateFormat)) ||
       highlightedLabel
     )
   }
@@ -114,9 +114,11 @@ const BarChart = ({
         highlightedValue={
           typeof resolvedHighlightedValue === 'number'
             ? numberFormatter(resolvedHighlightedValue, valuePrecision)
-            : resolvedHighlightedValue
+            : typeof resolvedHighlightedValue === 'string'
+              ? resolvedHighlightedValue
+              : undefined
         }
-        highlightedLabel={resolvedHighlightedLabel}
+        highlightedLabel={String(resolvedHighlightedLabel)}
         minimalHeader={minimalHeader}
       />
       <Container>
@@ -163,9 +165,11 @@ const BarChart = ({
                 key={`cell-${index}`}
                 className={`transition-all duration-300 ${onBarClick ? 'cursor-pointer' : ''}`}
                 fill={
-                  focusDataIndex === index || focusDataIndex === null
-                    ? CHART_COLORS.GREEN_1
-                    : CHART_COLORS.GREEN_2
+                  _entry.has_error
+                    ? CHART_COLORS.YELLOW_1
+                    : focusDataIndex === index || focusDataIndex === null
+                      ? CHART_COLORS.GREEN_1
+                      : CHART_COLORS.GREEN_2
                 }
                 enableBackground={12}
               />
@@ -176,11 +180,13 @@ const BarChart = ({
       {data && (
         <div className="text-foreground-lighter -mt-9 flex items-center justify-between text-xs">
           <span>
-            {xAxisIsDate ? day(data[0][xAxisKey]).format(customDateFormat) : data[0][xAxisKey]}
+            {xAxisIsDate
+              ? day(String(data[0][xAxisKey])).format(customDateFormat)
+              : data[0][xAxisKey]}
           </span>
           <span>
             {xAxisIsDate
-              ? day(data[data?.length - 1]?.[xAxisKey]).format(customDateFormat)
+              ? day(String(data[data?.length - 1]?.[xAxisKey])).format(customDateFormat)
               : data[data?.length - 1]?.[xAxisKey]}
           </span>
         </div>

apps/studio/components/ui/Charts/Charts.constants.ts

@@ -7,6 +7,7 @@ export const CHART_COLORS = {
   AXIS: 'hsl(var(--background-overlay-hover))',
   GREEN_1: 'hsl(var(--brand-default))', // #3ECF8E
   GREEN_2: 'hsl(var(--brand-500))',
+  YELLOW_1: 'hsl(var(--warning-600))',
 }
 
 // refer to packages/ui/radix-colors.js for full list of colors

apps/studio/components/ui/Charts/Charts.types.tsx

@@ -38,7 +38,7 @@ export type HeaderType<D> = {
   displayDateInUtc?: boolean
 }
 
-export type Datum = Record<string, string | number>
+export type Datum = Record<string, string | number | boolean>
 
 export interface TimeseriesDatum extends Datum {
   timestamp: string

apps/studio/pages/project/[ref]/logs/edge-logs.tsx

@@ -19,6 +19,6 @@ export const LogPage: NextPageWithLayout = () => {
   )
 }
 
-LogPage.getLayout = (page) => <LogsLayout title="Edge Logs">{page}</LogsLayout>
+LogPage.getLayout = (page) => <LogsLayout title="API Gateway">{page}</LogsLayout>
 
 export default LogPage