Merge pull request #794 from sipcapture/fix/789-event-detail-duplicate-payload

fix(ui): stop duplicating JSON payload in event detail view (#789)

Author: adubovikov

src/ui/src/dashboard/TransactionModal.tsx

@@ -24,9 +24,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { displayDstIp, displaySrcIp } from '@/lib/ipAliasDisplay'
 import {
   eventPayloadField,
+  eventPayloadFieldKey,
   formatJsonField,
   highlightJSON,
   isJsonDisplayable,
+  rowWithoutEventPayload,
   serializeRowForDisplay,
 } from '@/lib/jsonDisplay'
 import { cn } from '@/lib/utils'
@@ -318,18 +320,23 @@ function formatEventsCell(value, col, timeZone, locale) {
 function EventRecordDetail({ row }) {
   const [recordTab, setRecordTab] = React.useState('pretty')
   const [payloadTab, setPayloadTab] = React.useState('pretty')
+  const payloadKey = eventPayloadFieldKey(row)
   const payloadVal = eventPayloadField(row)
   const payloadIsJson = isJsonDisplayable(payloadVal)
-  const recordText = serializeRowForDisplay(row)
-  const recordPrettyHtml = highlightJSON(recordText)
+  // When the payload is shown in its own panel, keep uuid/timestamp/src_ip/etc.
+  // in the lower panel only so the same JSON blob is not rendered twice.
+  const metaRow = payloadIsJson && payloadKey ? rowWithoutEventPayload(row) : row
+  const recordText = serializeRowForDisplay(metaRow)
+  const recordPrettyHtml = highlightJSON(metaRow)
   const payloadPrettyHtml = highlightJSON(payloadVal)
+  const payloadLabel = payloadKey ? payloadKey.replace(/_/g, ' ') : 'payload'
 
   return (
     <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden">
       {payloadIsJson ? (
         <div className="shrink-0 space-y-1">
           <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-            Payload
+            {payloadLabel}
           </span>
           <Tabs value={payloadTab} onValueChange={setPayloadTab} className="flex flex-col gap-2">
             <TabsList variant="line" className="h-8 w-fit justify-start">
@@ -360,7 +367,7 @@ function EventRecordDetail({ row }) {
       ) : null}
       <div className="flex min-h-0 flex-1 flex-col gap-1 overflow-hidden">
         <span className="shrink-0 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-          Full record
+          {payloadIsJson ? 'Other fields' : 'Full record'}
         </span>
         <Tabs
           value={recordTab}

src/ui/src/lib/jsonDisplay.test.ts

@@ -3,6 +3,8 @@ import {
   formatJsonField,
   highlightJSON,
   isJsonDisplayable,
+  parseJsonDeep,
+  rowWithoutEventPayload,
   serializeRowForDisplay,
 } from './jsonDisplay'
 
@@ -44,4 +46,19 @@ describe('jsonDisplay', () => {
     expect(html).toContain('json-hl-bool')
     expect(html).toContain('json-hl-null')
   })
+
+  it('parses double-encoded JSON strings from hlog()', () => {
+    const inner = '{"level":"INFO","msg":"hello"}'
+    const wrapped = JSON.stringify(inner)
+    expect(parseJsonDeep(wrapped)).toEqual({ level: 'INFO', msg: 'hello' })
+    expect(isJsonDisplayable(wrapped)).toBe(true)
+    expect(formatJsonField(wrapped)).toContain('"level": "INFO"')
+  })
+
+  it('rowWithoutEventPayload omits only the populated payload column', () => {
+    const row = { uuid: '1', payload: '{"x":1}', session_id: 'a@b' }
+    const meta = rowWithoutEventPayload(row)
+    expect(meta).toEqual({ uuid: '1', session_id: 'a@b' })
+    expect(meta.payload).toBeUndefined()
+  })
 })

src/ui/src/lib/jsonDisplay.ts

@@ -22,27 +22,47 @@ export function escapeHtml(str: string): string {
 
 export function looksLikeJsonString(str: string): boolean {
   const t = str.trim()
-  return (t.startsWith('{') && t.endsWith('}')) || (t.startsWith('[') && t.endsWith(']'))
+  return (
+    (t.startsWith('{') && t.endsWith('}')) ||
+    (t.startsWith('[') && t.endsWith(']')) ||
+    (t.startsWith('"') && t.endsWith('"'))
+  )
+}
+
+/**
+ * Parse JSON that may be stored as a string, including double-encoded hlog()
+ * payloads (`"{\"cause\":...}"`). Returns the inner object/array, or null when
+ * the input is not structured JSON.
+ */
+export function parseJsonDeep(input: unknown, maxDepth = 3): unknown {
+  let v: unknown = input
+  for (let i = 0; i <= maxDepth; i++) {
+    if (v !== null && typeof v === 'object') return v
+    if (typeof v !== 'string') return null
+    const t = v.trim()
+    if (!looksLikeJsonString(t)) return null
+    try {
+      v = JSON.parse(t)
+    } catch {
+      return null
+    }
+  }
+  return null
 }
 
 /** Parse a JSON string; return the original value when it is not JSON text. */
 export function parseJsonLoose(val: unknown): unknown {
   if (val == null) return val
   if (typeof val === 'object') return val
   if (typeof val !== 'string') return val
-  const t = val.trim()
-  if (!looksLikeJsonString(t)) return val
-  try {
-    return JSON.parse(t)
-  } catch {
-    return val
-  }
+  const deep = parseJsonDeep(val)
+  return deep ?? val
 }
 
 export function isJsonDisplayable(val: unknown): boolean {
   if (val == null || val === '') return false
   if (typeof val === 'object') return true
-  if (typeof val === 'string') return looksLikeJsonString(val)
+  if (typeof val === 'string') return parseJsonDeep(val) !== null
   return false
 }
 
@@ -92,10 +112,23 @@ export function serializeRowForDisplay(row: Record<string, unknown>): string {
   }
 }
 
+function formatJsonForHighlight(payload: unknown): string {
+  if (payload !== null && typeof payload === 'object' && !Array.isArray(payload)) {
+    return JSON.stringify(payload, expandEmbeddedJsonReplacer, 2)
+  }
+  const parsed = parseJsonLoose(payload)
+  if (parsed !== payload) {
+    return JSON.stringify(parsed, null, 2)
+  }
+  if (typeof payload === 'string') {
+    return payload
+  }
+  return JSON.stringify(parsed, null, 2)
+}
+
 export function highlightJSON(payload: unknown): string {
   try {
-    const obj = parseJsonLoose(payload)
-    const formatted = JSON.stringify(obj, null, 2)
+    const formatted = formatJsonForHighlight(payload)
     let html = escapeHtml(formatted)
     // Value highlighting before keys — the key pass wraps colons and breaks later ": …" patterns.
     html = html.replace(
@@ -116,12 +149,34 @@ export function highlightJSON(payload: unknown): string {
   }
 }
 
+/** Primary payload column names on LOG / event rows (first match wins). */
+export const EVENT_PAYLOAD_FIELD_KEYS = ['payload', 'message', 'data', 'body'] as const
+
 /** First non-empty payload-like field on a LOG / event row. */
 export function eventPayloadField(row: Record<string, unknown> | null | undefined): unknown {
-  if (!row || typeof row !== 'object') return ''
-  for (const k of ['payload', 'message', 'data', 'body']) {
+  const key = eventPayloadFieldKey(row)
+  return key ? row[key] : ''
+}
+
+/** Which payload column is populated on this row, if any. */
+export function eventPayloadFieldKey(
+  row: Record<string, unknown> | null | undefined,
+): (typeof EVENT_PAYLOAD_FIELD_KEYS)[number] | null {
+  if (!row || typeof row !== 'object') return null
+  for (const k of EVENT_PAYLOAD_FIELD_KEYS) {
     const v = row[k]
-    if (v != null && v !== '') return v
+    if (v != null && v !== '') return k
   }
-  return ''
+  return null
+}
+
+/** Row copy without the primary payload column (for metadata-only panels). */
+export function rowWithoutEventPayload(
+  row: Record<string, unknown>,
+): Record<string, unknown> {
+  const key = eventPayloadFieldKey(row)
+  if (!key) return row
+  const copy = { ...row }
+  delete copy[key]
+  return copy
 }

src/version.go

@@ -24,7 +24,7 @@ import (
 // Version information for homer-core
 var (
 	// VERSION_APPLICATION is the application version
-	VERSION_APPLICATION = "11.0.244"
+	VERSION_APPLICATION = "11.0.245"
 
 	// BuildDate is the build date
 	BuildDate = ""