From 551f63a508f8331888ca64cd9c13a885c91b240d Mon Sep 17 00:00:00 2001
From: Ludovic DEHON <tchiot.ludo@gmail.com>
Date: Tue, 27 Jun 2023 08:37:39 +0200
Subject: [PATCH] fix(ui): live tail should pretty print json

close #1444
---
 client/src/containers/Tail/Tail.jsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/src/containers/Tail/Tail.jsx b/client/src/containers/Tail/Tail.jsx
index 502fb66f7..9ebbd8fd4 100644
--- a/client/src/containers/Tail/Tail.jsx
+++ b/client/src/containers/Tail/Tail.jsx
@@ -14,6 +14,7 @@ import 'ace-builds/src-noconflict/theme-merbivore_soft';
 import Root from '../../components/Root';
 import DateTime from '../../components/DateTime';
 import { EventSourcePolyfill } from 'event-source-polyfill';
+import * as LosslessJson from 'lossless-json';
 
 const STATUS = {
   STOPPED: 'STOPPED',
@@ -464,12 +465,19 @@ class Tail extends Root {
                 type: 'text',
                 extraRow: true,
                 extraRowContent: (obj, index) => {
+                  let value = obj.value;
+                  try {
+                    let json = LosslessJson.parse(obj.value);
+                    value = LosslessJson.stringify(json, undefined, '  ');
+                    // eslint-disable-next-line no-empty
+                  } catch (e) {}
+
                   return (
                     <AceEditor
                       mode="json"
                       id={'value' + index}
                       theme="merbivore_soft"
-                      value={obj.value}
+                      value={value || 'null'}
                       readOnly
                       name="UNIQUE_ID_OF_DIV"
                       editorProps={{ $blockScrolling: true }}