diff --git a/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts b/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts index d788ccdcb63..02527df8540 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts +++ b/packages/grafana-ui/src/components/Table/TableNG/utils.test.ts @@ -1388,6 +1388,14 @@ describe('TableNG utils', () => { expect(displayJsonValue(field)(42).text).toBe('**42**ms'); expect(displayJsonValue(field)(42).numeric).toBe(42); }); + + it('should not mangle objects into [object Object]', () => { + expect(displayJsonValue(field)({ a: 1, b: 2 }).text).toBe('{\n "a": 1,\n "b": 2\n}'); + }); + + it('should render arrays as JSON', () => { + expect(displayJsonValue(field)([1, 2, 3]).text).toBe('[\n 1,\n 2,\n 3\n]'); + }); }); describe('applySort', () => { diff --git a/packages/grafana-ui/src/components/Table/TableNG/utils.ts b/packages/grafana-ui/src/components/Table/TableNG/utils.ts index 867ee96b983..eb608ce2548 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/utils.ts +++ b/packages/grafana-ui/src/components/Table/TableNG/utils.ts @@ -970,17 +970,19 @@ export function canFieldBeColorized( export const displayJsonValue: (field: Field) => DisplayProcessor = (field: Field, decimals?: DecimalCount) => { const origDisplay = field.display!; return (value: unknown): DisplayValue => { - let jsonText: string; - const displayValue = origDisplay(value, decimals); - const formattedValue = formattedValueToString(displayValue); - // Handle string values that might be JSON - try { - const parsed = JSON.parse(formattedValue); - jsonText = JSON.stringify(parsed, null, ' '); - } catch { - jsonText = formattedValue; // Keep original if not valid JSON + let jsonText: string; + if (!Array.isArray(value) && !isPlainObject(value)) { + const formattedValue = formattedValueToString(displayValue); + try { + const parsed = JSON.parse(formattedValue); + jsonText = JSON.stringify(parsed, null, ' '); + } catch { + jsonText = formattedValue; // Keep original if not valid JSON + } + } else { + jsonText = JSON.stringify(value, null, ' '); } return { ...displayValue, text: jsonText };