fix: fixed saved views functionality for metrics and traces stream type in logs page (#2592)

fix #2588

Author: omkarK06

web/src/composables/useLogs.ts

@@ -642,6 +642,7 @@ const useLogs = () => {
         //   searchObj.data.searchAround.histogramHide = false;
         //   searchObj.meta.showHistogram = true;
         // }
+
         const queryReq = buildSearch();
 
         if (queryReq != null) {
@@ -1452,6 +1453,7 @@ const useLogs = () => {
     onStreamChange,
     generateURLQuery,
     buildSearch,
+    loadStreamLists,
   };
 };
 

web/src/plugins/logs/SearchBar.vue

@@ -79,8 +79,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     side
                     @click.stop="handleDeleteSavedView(item)"
                   >
-                    <q-icon name="delete"
-color="grey" size="xs" />
+                    <q-icon name="delete" color="grey" size="xs" />
                   </q-item-section>
                 </q-item>
               </div>
@@ -192,8 +191,7 @@ color="grey" size="xs" />
                 </q-item-section>
               </q-item>
               <q-separator />
-              <q-item class="q-pa-sm saved-view-item"
-clickable v-close-popup>
+              <q-item class="q-pa-sm saved-view-item" clickable v-close-popup>
                 <q-item-section
                   @click.stop="toggleCustomDownloadDialog"
                   v-close-popup
@@ -647,6 +645,7 @@ import useSqlSuggestions from "@/composables/useSuggestions";
 import { mergeDeep, b64DecodeUnicode, getImageURL } from "@/utils/zincutils";
 import savedviewsService from "@/services/saved_views";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
+import { cloneDeep } from "lodash-es";
 
 const defaultValue: any = () => {
   return {
@@ -775,6 +774,7 @@ export default defineComponent({
       generateURLQuery,
       buildSearch,
       resetStreamData,
+      loadStreamLists,
     } = useLogs();
     const queryEditorRef = ref(null);
 
@@ -955,7 +955,6 @@ export default defineComponent({
     };
 
     const downloadLogs = (data) => {
-      console.log(data);
       const filename = "logs-data.csv";
       const dataobj = jsonToCsv(data);
       const file = new File([dataobj], filename, {
@@ -1408,7 +1407,68 @@ export default defineComponent({
               await updatedLocalLogFilterField();
               await getStreams("logs", true);
             } else {
+              // ----- Here we are explicitly handling stream change -----
               resetStreamData();
+              searchObj.data.stream.streamType =
+                extractedObj.data.stream.streamType;
+              // Here copying selected stream object, as in loadStreamLists() we are setting selected stream object to empty object
+              // After loading stream list, we are setting selected stream object to copied object
+              const selectedStream = cloneDeep(
+                extractedObj.data.stream.selectedStream
+              );
+
+              extractedObj.data.transforms = searchObj.data.transforms;
+              extractedObj.data.histogram = {
+                xData: [],
+                yData: [],
+                chartParams: {},
+              };
+              extractedObj.data.savedViews = searchObj.data.savedViews;
+              extractedObj.data.queryResults = [];
+              extractedObj.meta.scrollInfo = {};
+
+              searchObj.value = mergeDeep(searchObj, extractedObj);
+              searchObj.data.streamResults = {};
+
+              const streamData = await getStreams(
+                searchObj.data.stream.streamType,
+                true
+              );
+              searchObj.data.streamResults = streamData;
+              await loadStreamLists();
+              searchObj.data.stream.selectedStream = selectedStream;
+              // searchObj.value = mergeDeep(searchObj, extractedObj);
+
+              await nextTick();
+              if (extractedObj.data.tempFunctionContent != "") {
+                populateFunctionImplementation(
+                  {
+                    name: "",
+                    function: searchObj.data.tempFunctionContent,
+                  },
+                  false
+                );
+                searchObj.data.tempFunctionContent =
+                  extractedObj.data.tempFunctionContent;
+                searchObj.meta.functionEditorPlaceholderFlag = false;
+              } else {
+                populateFunctionImplementation(
+                  {
+                    name: "",
+                    function: "",
+                  },
+                  false
+                );
+                searchObj.data.tempFunctionContent = "";
+                searchObj.meta.functionEditorPlaceholderFlag = true;
+              }
+              dateTimeRef.value.setSavedDate(searchObj.data.datetime);
+              if (searchObj.meta.refreshInterval != "0") {
+                onRefreshIntervalUpdate();
+              } else {
+                clearInterval(store.state.refreshIntervalID);
+              }
+              await updatedLocalLogFilterField();
             }
             $q.notify({
               message: `${item.view_name} view applied successfully.`,
@@ -1417,10 +1477,14 @@ export default defineComponent({
               timeout: 1000,
             });
             setTimeout(async () => {
-              searchObj.loading = true;
-              await getQueryData();
-              store.dispatch("setSavedViewFlag", false);
-              updateUrlQueryParams();
+              try {
+                searchObj.loading = true;
+                await getQueryData();
+                store.dispatch("setSavedViewFlag", false);
+                updateUrlQueryParams();
+              } catch (e) {
+                console.log(e);
+              }
             }, 1000);
 
             // } else {