From 7435dfd40f579d68c77132ab9e00217d3cbc255a Mon Sep 17 00:00:00 2001 From: Bhargav Date: Thu, 11 Jan 2024 17:51:35 +0530 Subject: [PATCH] fix: Memory leak pagination test (#2449) PR contains changes related to memory issue on logs page. - to avoid memory leak, cleaning up the data from the composable variable. So user navigates away from the logs page all data will be removed to free up memory. Once user come back to logs page data will be pulled again. - fixed function editor content issue which was wiped out once user navigate back to logs page. --- web/src/composables/useLogs.ts | 19 ++++---- web/src/plugins/logs/Index.vue | 12 +++-- web/src/plugins/logs/SearchBar.vue | 63 ++++++++++++++++++++++----- web/src/plugins/logs/SearchResult.vue | 31 ++++++++----- 4 files changed, 89 insertions(+), 36 deletions(-) diff --git a/web/src/composables/useLogs.ts b/web/src/composables/useLogs.ts index 4c57d80709..9713c8d682 100644 --- a/web/src/composables/useLogs.ts +++ b/web/src/composables/useLogs.ts @@ -159,9 +159,8 @@ const defaultObject = { }, }; -const searchObj = reactive(Object.assign({}, defaultObject)); - const useLogs = () => { + const searchObj = reactive(Object.assign({}, defaultObject)); const store = useStore(); const { t } = useI18n(); const $q = useQuasar(); @@ -173,6 +172,8 @@ const useLogs = () => { const fieldValues = ref(); const initialQueryPayload: Ref = ref(null); + searchObj.organizationIdetifier = store.state.selectedOrganization.identifier; + const resetSearchObj = () => { // searchObj = reactive(Object.assign({}, defaultObject)); searchObj.data.errorMsg = "No stream found in selected organization!"; @@ -705,18 +706,20 @@ const useLogs = () => { //extract fields from query response extractFields(); - if (!isPagination) generateHistogramData(); - else { + if (isPagination){ searchObj.data.histogram.chartParams.title = getHistogramTitle(); } //update grid columns updateGridColumns(); - searchObj.loading = false; - if (histogramQueryReq.hasOwnProperty("aggs")) { + if ( + res.data.hits.length > 0 && + histogramQueryReq.hasOwnProperty("aggs") + ) { getHistogramQueryData(histogramQueryReq); } + searchObj.loading = false; resolve(true); }) .catch((err) => { @@ -769,7 +772,6 @@ const useLogs = () => { searchObj.data.queryResults.total = res.data.total; generateHistogramData(); // searchObj.data.histogram.chartParams.title = getHistogramTitle(); - searchObj.loading = false; resolve(true); }) @@ -976,7 +978,7 @@ const useLogs = () => { }; function getHistogramTitle() { - const currentPage = searchObj.data.resultGrid.currentPage - 1; + const currentPage = searchObj.data.resultGrid.currentPage - 1 || 0; const startCount = currentPage * searchObj.meta.resultGrid.rowsPerPage + 1; const endCount = startCount + searchObj.data.queryResults.hits.length - 1; const title = @@ -1371,6 +1373,7 @@ const useLogs = () => { searchObj, getStreams, resetSearchObj, + resetStreamData, updatedLocalLogFilterField, getFunctions, getStreamList, diff --git a/web/src/plugins/logs/Index.vue b/web/src/plugins/logs/Index.vue index 529841b80e..ffda656d1a 100644 --- a/web/src/plugins/logs/Index.vue +++ b/web/src/plugins/logs/Index.vue @@ -210,6 +210,7 @@ import { onBeforeMount, onBeforeUnmount, watch, + onUnmounted, } from "vue"; import { useQuasar } from "quasar"; import { useStore } from "vuex"; @@ -345,6 +346,8 @@ export default defineComponent({ restoreUrlQueryParams, handleRunQuery, generateHistogramData, + resetStreamData, + resetSearchObj, } = useLogs(); const searchResultRef = ref(null); const searchBarRef = ref(null); @@ -385,10 +388,11 @@ export default defineComponent({ // } onDeactivated(() => { - // resetSearchObj(); - // searchBarRef.value.resetFunctionContent(); - // setQuery(""); - // clearInterval(refreshIntervalID); + resetStreamData(); + }); + onUnmounted(() => { + resetSearchObj(); + resetStreamData(); }); onActivated(async () => { diff --git a/web/src/plugins/logs/SearchBar.vue b/web/src/plugins/logs/SearchBar.vue index 22a6c76da6..0696ea026b 100644 --- a/web/src/plugins/logs/SearchBar.vue +++ b/web/src/plugins/logs/SearchBar.vue @@ -79,8 +79,8 @@ along with this program. If not, see . side @click.stop="handleDeleteSavedView(item)" > - + @@ -192,8 +192,8 @@ color="grey" size="xs" /> - + class="q-pa-none search-button" @click="handleRunQuery" :disable=" - searchObj.loading || + searchObj.loading == 'true' || (searchObj.data.hasOwnProperty('streamResults') && searchObj.data.streamResults.length == 0) " @@ -367,15 +367,21 @@ v-close-popup> @@ -587,6 +593,8 @@ import { watch, toRaw, onActivated, + onUnmounted, + onDeactivated, } from "vue"; import { useI18n } from "vue-i18n"; import { onBeforeRouteUpdate, useRouter } from "vue-router"; @@ -991,23 +999,54 @@ export default defineComponent({ onMounted(async () => { initFunctionEditor(); - if (router.currentRoute.value.query.functionContent) { + if ( + router.currentRoute.value.query.functionContent || + searchObj.data.tempFunctionContent + ) { searchObj.meta.toggleFunction = true; - fnEditorobj.setValue( - b64DecodeUnicode(router.currentRoute.value.query.functionContent) - ); + const fnContent = router.currentRoute.value.query.functionContent + ? b64DecodeUnicode(router.currentRoute.value.query.functionContent) + : searchObj.data.tempFunctionContent; + fnEditorobj.setValue(fnContent); fnEditorobj.layout(); searchObj.config.fnSplitterModel = 60; } window.addEventListener("click", () => { fnEditorobj.layout(); - // queryEditorRef.value.resetEditorLayout(); + }); + }); + + onUnmounted(() => { + window.removeEventListener("click", () => { + fnEditorobj.layout(); }); }); onActivated(() => { udpateQuery(); + + if ( + router.currentRoute.value.query.functionContent || + searchObj.data.tempFunctionContent + ) { + searchObj.meta.toggleFunction = true; + const fnContent = router.currentRoute.value.query.functionContent + ? b64DecodeUnicode(router.currentRoute.value.query.functionContent) + : searchObj.data.tempFunctionContent; + fnEditorobj.setValue(fnContent); + fnEditorobj.layout(); + searchObj.config.fnSplitterModel = 60; + window.removeEventListener("click", () => { + fnEditorobj.layout(); + }); + } + }); + + onDeactivated(() => { + window.removeEventListener("click", () => { + fnEditorobj.layout(); + }); }); const saveFunction = () => { diff --git a/web/src/plugins/logs/SearchResult.vue b/web/src/plugins/logs/SearchResult.vue index f41cad05a8..32dd669591 100644 --- a/web/src/plugins/logs/SearchResult.vue +++ b/web/src/plugins/logs/SearchResult.vue @@ -30,10 +30,14 @@ along with this program. If not, see .
. wordBreak: 'break-word', height: !searchObj.meta.showHistogram || searchObj.meta.sqlMode - ? 'calc(100% - 0px)' - : 'calc(100% - 120px)', + ? 'calc(100% - 40px)' + : 'calc(100% - 140px)', }" >