From 0aa8969a776adc7fa9879bf0cdadcd4de6c9541b Mon Sep 17 00:00:00 2001
From: Sai Nikhil <nikhil@openobserve.ai>
Date: Fri, 11 Apr 2025 20:20:26 +0530
Subject: [PATCH] fix: logs page issues (#6518)

this PR fixes
1. histogram loader should while both search and histogram request as
well as no data found should only show when there is no actual data not
at the time of loading
2. in the detail table when we add a field to the table it again shows
add a field to the table instead should show remove from the table
3. when user try to add fields using quick mode with sql mode off there
is one console error
---
 web/src/components/alerts/AlertList.vue          |  1 -
 web/src/components/common/sidebar/FolderList.vue |  6 ++++--
 web/src/plugins/logs/Index.vue                   |  2 +-
 web/src/plugins/logs/JsonPreview.vue             |  9 ++++++++-
 web/src/plugins/logs/SearchResult.vue            | 12 +++++++++---
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/web/src/components/alerts/AlertList.vue b/web/src/components/alerts/AlertList.vue
index 50e0482e8b..89b326604e 100644
--- a/web/src/components/alerts/AlertList.vue
+++ b/web/src/components/alerts/AlertList.vue
@@ -971,7 +971,6 @@ export default defineComponent({
             });
           }
           dismiss();
-        
       } catch (error) {
           console.error(error);
           dismiss();
diff --git a/web/src/components/common/sidebar/FolderList.vue b/web/src/components/common/sidebar/FolderList.vue
index 831575dafb..f8447f724a 100644
--- a/web/src/components/common/sidebar/FolderList.vue
+++ b/web/src/components/common/sidebar/FolderList.vue
@@ -214,8 +214,8 @@ export default defineComponent({
         type: String,
         default: "alerts",
       },
-      emits: ['update:folders', 'update:activeFolderId'],
     },
+    emits: ['update:folders', 'update:activeFolderId'],
     setup(props, { emit }) {
       const store = useStore();
       const { showPositiveNotification, showErrorNotification } =
@@ -232,7 +232,9 @@ export default defineComponent({
       const router = useRouter();
 
       onMounted(async () => {
-        await getFoldersListByType(store, "alerts");
+        if(store.state.organizationData.foldersByType.length == 0) {
+          await getFoldersListByType(store, "alerts");
+        }
         if(router.currentRoute.value.query.folder) {
           activeFolderId.value = router.currentRoute.value.query.folder;
         }
diff --git a/web/src/plugins/logs/Index.vue b/web/src/plugins/logs/Index.vue
index 9dffff0bb4..6767c39e51 100644
--- a/web/src/plugins/logs/Index.vue
+++ b/web/src/plugins/logs/Index.vue
@@ -1252,7 +1252,7 @@ export default defineComponent({
           // check is required for union query where both streams interesting fields goes into single array
           // but it should be added if field exist in the strem schema
           searchObj.data.streamResults.list.forEach((stream) => {
-            if (stream.name === parsedSQL.from[0].table) {
+            if (stream.name === parsedSQL?.from?.[0]?.table) {
               stream.schema.forEach((stream_field) => {
                 if (field.name === stream_field.name) {
                   parsedSQL.columns.push({
diff --git a/web/src/plugins/logs/JsonPreview.vue b/web/src/plugins/logs/JsonPreview.vue
index f7eb13344c..7f71073293 100644
--- a/web/src/plugins/logs/JsonPreview.vue
+++ b/web/src/plugins/logs/JsonPreview.vue
@@ -199,7 +199,7 @@
                     round
                     class="q-mr-sm pointer"
                   ></q-btn
-                  >{{ t("common.addFieldToTable") }}</q-item-label
+                  >{{addOrRemoveLabel(key)}}</q-item-label
                 >
               </q-item-section>
             </q-item>
@@ -482,6 +482,12 @@ export default {
         return true;
       });
     });
+    const addOrRemoveLabel = (key: string) => {
+      if(searchObj.data.stream.selectedFields.includes(key)) {
+        return t("common.removeFieldFromTable");
+      }
+      return t("common.addFieldToTable");
+    };
 
     return {
       t,
@@ -510,6 +516,7 @@ export default {
       tracesStreams,
       setViewTraceBtn,
       getOriginalData,
+      addOrRemoveLabel,
     };
   },
 };
diff --git a/web/src/plugins/logs/SearchResult.vue b/web/src/plugins/logs/SearchResult.vue
index 949606c328..da37e30049 100644
--- a/web/src/plugins/logs/SearchResult.vue
+++ b/web/src/plugins/logs/SearchResult.vue
@@ -114,7 +114,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           @updated:dataZoom="onChartUpdate"
         />
         
-        <div v-else-if="searchObj.meta.showHistogram && (Object.keys(plotChart)?.length == 0)">
+        <div v-else-if="searchObj.meta.showHistogram && (Object.keys(plotChart)?.length == 0) && searchObj.loadingHistogram == false && searchObj.loading == false">
           <h3
             class="text-center"
             style="margin: 30px 0px"
@@ -124,8 +124,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </div>
         <div
           class="q-pb-lg"
-          style="top: 50px; position: absolute; left: 45%"
-          v-if="searchObj.loadingHistogram == true"
+          style=" left: 45%; margin: 30px 0px"
+          v-if="histogramLoader"
+          
         >
           <q-spinner-hourglass
             color="primary"
@@ -615,6 +616,10 @@ export default defineComponent({
         return [];
       }
     });
+    //this is used to show the histogram loader when the histogram is loading
+    const histogramLoader = computed(()=>{
+      return (searchObj.meta.showHistogram) && (searchObj.loadingHistogram == true ||  searchObj.loading == true) && ( plotChart.value && Object.keys(plotChart.value)?.length == 0) 
+    })
 
     return {
       t,
@@ -654,6 +659,7 @@ export default defineComponent({
       getPaginations,
       refreshPagination,
       refreshJobPagination,
+      histogramLoader
     };
   },
   computed: {