From 31394e464b9195b934765269df047fa9a6e31151 Mon Sep 17 00:00:00 2001
From: krrrr38 <k.kaizu38@gmail.com>
Date: Sun, 12 Dec 2021 12:18:46 +0900
Subject: [PATCH] feat: parse workflow json log message automatically. Close
 #6856

Signed-off-by: krrrr38 <k.kaizu38@gmail.com>
---
 .../workflow-logs-viewer.tsx                  | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx b/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx
index 21b320e60e1e..fb588adf2a76 100644
--- a/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx
+++ b/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx
@@ -9,6 +9,7 @@ import {ANNOTATION_KEY_POD_NAME_VERSION} from '../../../shared/annotations';
 import {ErrorNotice} from '../../../shared/components/error-notice';
 import {InfoIcon, WarningIcon} from '../../../shared/components/fa-icons';
 import {Links} from '../../../shared/components/links';
+import {ToggleButton} from '../../../shared/components/toggle-button';
 import {getPodName, getTemplateNameFromNode} from '../../../shared/pod-name';
 import {services} from '../../../shared/services';
 import {FullHeightLogsViewer} from './full-height-logs-viewer';
@@ -32,13 +33,31 @@ export const WorkflowLogsViewer = ({workflow, nodeId, initialPodName, container,
     const [error, setError] = useState<Error>();
     const [loaded, setLoaded] = useState(false);
     const [logsObservable, setLogsObservable] = useState<Observable<string>>();
+    const [showRawLog, setShowRawLog] = useState(false);
 
     useEffect(() => {
         setError(null);
         setLoaded(false);
         const source = services.workflows
             .getContainerLogs(workflow, podName, nodeId, selectedContainer, grep, archived)
-            .map(e => (!podName ? e.podName + ': ' : '') + e.content + '\n')
+            // extract message from LogEntry
+            .map(e => {
+                let message = e.content;
+                if (!showRawLog) {
+                    try {
+                        const json = JSON.parse(message);
+                        if (json.message) {
+                            message = typeof json.message === 'string' ? json.message : JSON.stringify(json.message);
+                        }
+                        if (json.msg) {
+                            message = typeof json.msg === 'string' ? json.msg : JSON.stringify(json.msg);
+                        }
+                    } catch (e) {
+                        // if not json, show content directly
+                    }
+                }
+                return `${!podName ? e.podName + ': ' : ''}${message}\n`;
+            })
             // this next line highlights the search term in bold with a yellow background, white text
             .map(x => {
                 if (grep !== '') {
@@ -55,7 +74,7 @@ export const WorkflowLogsViewer = ({workflow, nodeId, initialPodName, container,
         );
         setLogsObservable(source);
         return () => subscription.unsubscribe();
-    }, [workflow.metadata.namespace, workflow.metadata.name, podName, selectedContainer, grep, archived]);
+    }, [workflow.metadata.namespace, workflow.metadata.name, podName, selectedContainer, grep, archived, showRawLog]);
 
     // filter allows us to introduce a short delay, before we actually change grep
     const [filter, setFilter] = useState('');
@@ -102,7 +121,10 @@ export const WorkflowLogsViewer = ({workflow, nodeId, initialPodName, container,
             <div>
                 <i className='fa fa-box' />{' '}
                 <Autocomplete items={podNames} value={(podNames.find(x => x.value === podName) || {label: ''}).label} onSelect={(_, item) => setPodName(item.value)} /> /{' '}
-                <Autocomplete items={containers} value={selectedContainer} onSelect={setContainer} />
+                <Autocomplete items={containers} value={selectedContainer} onSelect={setContainer} />{' '}
+                <ToggleButton toggled={showRawLog} onToggle={() => setShowRawLog(!showRawLog)} title='Show raw logs'>
+                    Show Raw Log
+                </ToggleButton>
                 <span className='fa-pull-right'>
                     <i className='fa fa-filter' /> <input type='search' defaultValue={filter} onChange={v => setFilter(v.target.value)} placeholder='Filter (regexp)...' />
                 </span>