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

@@ -971,7 +971,6 @@ export default defineComponent({
             });
           }
           dismiss();
-        
       } catch (error) {
           console.error(error);
           dismiss();

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;
         }

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({

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,
     };
   },
 };

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: {