fix: unflattened data expand in logs page fixed (#6261)

1. This PR fixes the issue in #5993

web/src/composables/useLogs.ts

@@ -169,6 +169,7 @@ const defaultObject = {
     additionalErrorMsg: "",
     savedViewFilterFields: "",
     hasSearchDataTimestampField: false,
+    originalDataCache: new Map(),
     stream: {
       loading: false,
       streamLists: <object[]>[],
@@ -1500,6 +1501,10 @@ const useLogs = () => {
 
   const getQueryData = async (isPagination = false) => {
     try {
+      //remove any data that has been cached 
+      if(searchObj.data.originalDataCache.size > 0){
+        searchObj.data.originalDataCache.clear();
+      }
       // Reset cancel query on new search request initation
       searchObj.data.isOperationCancelled = false;
       searchObj.data.searchRequestTraceIds = [];

web/src/plugins/logs/JsonPreview.vue

@@ -100,8 +100,8 @@
       </div>
     </div>
     <div v-show="activeTab === 'unflattened'" class="q-pl-md">
-      <q-spinner v-if="loading" size="lg" color="primary" />
-
+      <q-spinner-hourglass v-if="loading" size="lg" color="primary" />
+      <div v-if="!loading">
       <query-editor
         v-model:query="unflattendData"
         ref="queryEditorRef"
@@ -110,6 +110,7 @@
         :class="mode"
         language="json"
       />
+      </div>
     </div>
     <div v-show="activeTab !== 'unflattened'" class="q-pl-md">
       {
@@ -382,9 +383,7 @@ export default {
 
     onMounted(async () => {});
 
-    watch(
-      () => props.value,
-      async () => {
+    const getOriginalData = async () => {
         setViewTraceBtn();
 
         if (
@@ -394,6 +393,12 @@ export default {
         ) {
           return;
         }
+        // Check if data exists in searchObj cache
+        const cacheKey = `${props.value._o2_id}_${props.value._timestamp}`;
+        if (searchObj.data.originalDataCache?.has(cacheKey)) {
+          unflattendData.value = searchObj.data.originalDataCache.get(cacheKey);
+          return;
+        }
 
         loading.value = true;
 
@@ -419,7 +424,10 @@ export default {
             },
             "ui",
           );
-          unflattendData.value = res.data.hits[0]._original;
+          const formattedData = JSON.stringify(JSON.parse(res.data.hits[0]._original), null, 2);
+          unflattendData.value = formattedData;
+          //store the data in cache of searchObj
+          searchObj.data.originalDataCache.set(cacheKey, formattedData);
         } catch (err: any) {
           loading.value = false;
           $q.notify({
@@ -432,9 +440,14 @@ export default {
         } finally {
           loading.value = false;
         }
-      },
-      { immediate: true, deep: true },
-    );
+      };
+
+      watch(activeTab, async () => {
+        if (activeTab.value === "unflattened") {
+          unflattendData.value = "";
+          await getOriginalData();
+        }
+      });
 
     const filterStreamFn = (val: any = "") => {
       filteredTracesStreamOptions.value = tracesStreams.value.filter(
@@ -451,7 +464,9 @@ export default {
     const handleTabChange = async () => {
       if (activeTab.value === "unflattened") {
         await nextTick();
-        queryEditorRef.value.formatDocument();
+        if(!loading.value) {
+          queryEditorRef.value.formatDocument();
+        }
       }
     };
 
@@ -494,6 +509,7 @@ export default {
       isTracesStreamsLoading,
       tracesStreams,
       setViewTraceBtn,
+      getOriginalData,
     };
   },
 };