Handle source as both string and json object

Signed-off-by: Emily Guo <[email protected]>

Author: LilyCaroline17

public/pages/QueryDetails/QueryDetails.tsx

@@ -132,7 +132,19 @@ const QueryDetails = ({
   }, [query, history, core.chrome, convertTime, initPlotlyChart]);
 
   const queryString = query
-    ? JSON.stringify(JSON.parse(JSON.stringify(query.source)), null, 2)
+    ? JSON.stringify(
+        typeof query.source === 'string'
+          ? (() => {
+              try {
+                return JSON.parse(query.source);
+              } catch {
+                return query.source;
+              }
+            })()
+          : query.source,
+        null,
+        2
+      )
     : '';
   const queryDisplay = `{\n  "query": ${queryString ? queryString.replace(/\n/g, '\n  ') : ''}\n}`;
 

public/pages/QueryGroupDetails/QueryGroupDetails.tsx

@@ -138,7 +138,19 @@ export const QueryGroupDetails = ({
   }, [query]);
 
   const queryString = query
-    ? JSON.stringify(JSON.parse(JSON.stringify(query.source)), null, 2)
+    ? JSON.stringify(
+        typeof query.source === 'string'
+          ? (() => {
+              try {
+                return JSON.parse(query.source);
+              } catch {
+                return query.source;
+              }
+            })()
+          : query.source,
+        null,
+        2
+      )
     : '';
   const queryDisplay = `{\n  "query": ${queryString ? queryString.replace(/\n/g, '\n  ') : ''}\n}`;
 

types/types.ts

@@ -14,7 +14,7 @@ export interface SearchQueryRecord {
   };
   total_shards: number;
   node_id: string;
-  source: ISearchSource;
+  source: ISearchSource | string;
   labels: Record<string, string>;
   search_type: string;
   indices: string[];