fix: split histogram query on logs page (#2348)

web/src/components/MenuLink.vue

@@ -34,6 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       'ql-item-mini': mini,
       'q-router-link--active':
         router.currentRoute.value.path.indexOf(link) == 0 && link != '/',
+      'q-link-function': title == 'Functions',
     }"
     :target="target"
     @click="external ? openWebPage(link) : ''"
@@ -154,4 +155,8 @@ export default defineComponent({
   padding: 0;
   min-width: 40px;
 }
+
+.q-item--dark.q-link-function {
+  filter: brightness(100);
+}
 </style>

web/src/composables/useLogs.ts

@@ -636,6 +636,8 @@ const useLogs = () => {
           }
 
           searchObj.data.errorCode = 0;
+          const histogramQueryReq = JSON.parse(JSON.stringify(queryReq));
+          delete queryReq.aggs;
           searchService
             .search({
               org_identifier: searchObj.organizationIdetifier,
@@ -687,15 +689,14 @@ const useLogs = () => {
               //extract fields from query response
               extractFields();
 
-              if (!isPagination) generateHistogramData();
-              else {
-                searchObj.data.histogram.chartParams.title =
-                  getHistogramTitle();
-              }
+              searchObj.data.histogram.chartParams.title = getHistogramTitle();
 
               //update grid columns
               updateGridColumns();
               searchObj.loading = false;
+              if (histogramQueryReq.hasOwnProperty("aggs")) {
+                getHistogramQueryData(histogramQueryReq);
+              }
               resolve(true);
             })
             .catch((err) => {
@@ -729,6 +730,50 @@ const useLogs = () => {
     });
   };
 
+  const getHistogramQueryData = (queryReq: any) => {
+    return new Promise((resolve, reject) => {
+      const dismiss = () => {};
+      try {
+        searchService
+          .search({
+            org_identifier: searchObj.organizationIdetifier,
+            query: queryReq,
+            page_type: searchObj.data.stream.streamType,
+          })
+          .then((res) => {
+            dismiss();
+            searchObj.data.queryResults.aggs = res.data.aggs;
+            generateHistogramData();
+
+            searchObj.loading = false;
+            resolve(true);
+          })
+          .catch((err) => {
+            searchObj.loading = false;
+            if (err.response != undefined) {
+              searchObj.data.errorMsg = err.response.data.error;
+            } else {
+              searchObj.data.errorMsg = err.message;
+            }
+
+            const customMessage = logsErrorMessage(err?.response?.data.code);
+            searchObj.data.errorCode = err?.response?.data.code;
+
+            if (customMessage != "") {
+              searchObj.data.errorMsg = t(customMessage);
+            }
+
+            reject(false);
+          });
+      } catch (e: any) {
+        dismiss();
+        searchObj.loading = false;
+        showErrorNotification("Error while fetching histogram data");
+        reject(false);
+      }
+    });
+  };
+
   const updateFieldValues = () => {
     const excludedFields = [
       store.state.zoConfig.timestamp_column,

web/src/plugins/logs/Index.vue

@@ -180,7 +180,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     "
                   >
                     <search-result
-                      :key="searchObj.data.histogram.xData.length || -1"
+                      :key="searchObj.data.queryResults.hits.length || -1"
                       ref="searchResultRef"
                       :expandedLogs="expandedLogs"
                       @update:datetime="setHistogramDate"
@@ -542,6 +542,12 @@ export default defineComponent({
     refreshHistogram() {
       return this.searchObj.meta.histogramDirtyFlag;
     },
+    redrawHistogram() {
+      return (
+        this.searchObj.data.histogram.hasOwnProperty("xData") &&
+        this.searchObj.data.histogram.xData.length
+      );
+    },
   },
   watch: {
     showFields() {
@@ -619,10 +625,13 @@ export default defineComponent({
     refreshHistogram() {
       if (this.searchObj.meta.histogramDirtyFlag == true) {
         this.searchObj.meta.histogramDirtyFlag = false;
-        this.this.handleRunQuery();
+        this.handleRunQuery();
         this.refreshHistogramChart();
       }
     },
+    redrawHistogram() {
+      this.refreshHistogramChart();
+    },
   },
 });
 </script>

web/src/plugins/logs/SearchBar.vue

@@ -120,7 +120,7 @@ color="grey" size="xs" />
             :icon-right="'img:' + getImageURL('images/common/function.svg')"
             :title="t('search.savedViewsLabel')"
             split
-            class="no-outline saved-views-dropdown no-border"
+            class="no-outline saved-views-dropdown no-border btn-function"
             @click="fnSavedFunctionDialog"
           >
             <q-list>
@@ -1864,4 +1864,10 @@ export default defineComponent({
 .saved-view-item {
   padding: 4px 5px !important;
 }
+
+.body--dark{
+  .btn-function {
+    filter: brightness(100);
+  }
+}
 </style>

web/src/plugins/logs/SearchResult.vue

@@ -37,6 +37,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         style="max-height: 100px"
         @updated:dataZoom="onChartUpdate"
       />
+      <div
+        class="q-pb-lg"
+        v-if="
+          searchObj.meta.showHistogram &&
+          !searchObj.meta.sqlMode &&
+          searchObj.data.stream.streamType !== 'enrichment_tables' &&
+          searchObj.data.histogram.xData.length === 0
+        "
+        style="top: 50px; position: absolute; left: 45%"
+      >
+        <q-spinner-hourglass
+          color="primary"
+          size="25px"
+          style="margin: 0 auto; display: block"
+        />
+      </div>
       <q-virtual-scroll
         data-test="logs-search-result-logs-table"
         id="searchGridComponent"