starred/openobserve
1
0
Fork 0
mirror of https://github.com/openobserve/openobserve.git synced 2026-11-06 16:09:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Memory leak pagination test (#2449)

Browse Source 
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.
This commit is contained in:
Bhargav
2024-01-11 17:51:35 +05:30
committed by GitHub
parent 8ae4e19b96
commit 7435dfd40f
4 changed files with 89 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/composables/useLogs.ts
+11 -8
View File
@@ -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<LogsQueryPayload | null> = 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,
web/src/plugins/logs/Index.vue
+8 -4
View File
@@ -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 () => {
web/src/plugins/logs/SearchBar.vue
+51 -12
View File
@@ -79,8 +79,8 @@ 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 +192,8 @@ 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
@@ -244,7 +244,7 @@ v-close-popup>
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>
<q-card-actions align="right">
<q-btn
unelevated
no-caps
class="q-mr-sm text-bold"
data-test="logs-search-bar-confirm-dialog-cancel-btn"
:label="t('confirmDialog.cancel')"
color="primary"
color="secondary"
v-close-popup
/>
<q-btn
unelevated
no-caps
class="q-mr-sm text-bold"
data-test="logs-search-bar-confirm-dialog-ok-btn"
:label="t('search.btnDownload')"
color="positive"
color="primary"
@click="downloadRangeData"
/>
</q-card-actions>
@@ -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 = () => {
web/src/plugins/logs/SearchResult.vue
+19 -12
View File
@@ -30,10 +30,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<div class="col-6 text-right q-pr-md q-gutter-xs pagination-block">
<q-pagination
v-model="pageNumberInput"
:key="searchObj.data.queryResults.total + '-' + searchObj.data.resultGrid.currentPage"
:max="
Math.round(
searchObj.data.queryResults.total /
searchObj.meta.resultGrid.rowsPerPage
Math.max(
1,
Math.round(
searchObj.data.queryResults.total /
searchObj.meta.resultGrid.rowsPerPage
)
)
"
input
@@ -111,8 +115,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
wordBreak: 'break-word',
height:
!searchObj.meta.showHistogram || searchObj.meta.sqlMode
? 'calc(100% - 0px)'
: 'calc(100% - 120px)',
? 'calc(100% - 40px)'
: 'calc(100% - 140px)',
}"
>
<template v-slot:before>
@@ -164,6 +168,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<q-td
v-for="column in searchObj.data.resultGrid.columns"
:key="index + '-' + column.name"
:data-test="'log-table-column-' + index + '-' + column.name"
class="field_list"
style="cursor: pointer"
>
@@ -303,7 +308,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</template>
<script lang="ts">
import { computed, defineComponent, ref, onMounted } from "vue";
import { computed, defineComponent, ref, onMounted, onUpdated } from "vue";
import { copyToClipboard, useQuasar } from "quasar";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
@@ -346,8 +351,7 @@ export default defineComponent({
getPageData(actionType: string) {
if (actionType == "prev") {
if (this.searchObj.data.resultGrid.currentPage > 1) {
this.searchObj.data.resultGrid.currentPage =
this.searchObj.data.resultGrid.currentPage - 1;
this.searchObj.data.resultGrid.currentPage = this.searchObj.data.resultGrid.currentPage - 1;
this.pageNumberInput = this.searchObj.data.resultGrid.currentPage;
this.$emit("update:scroll");
this.searchTableRef.scrollTo(0);
@@ -360,8 +364,7 @@ export default defineComponent({
this.searchObj.meta.resultGrid.rowsPerPage
)
) {
this.searchObj.data.resultGrid.currentPage =
this.searchObj.data.resultGrid.currentPage + 1;
this.searchObj.data.resultGrid.currentPage = this.searchObj.data.resultGrid.currentPage + 1;
this.pageNumberInput = this.searchObj.data.resultGrid.currentPage;
this.$emit("update:scroll");
this.searchTableRef.scrollTo(0);
@@ -428,8 +431,7 @@ export default defineComponent({
const noOfRecordsTitle = ref("");
const scrollPosition = ref(0);
const rowsPerPageOptions = [10, 25, 50, 100, 250, 500, 1000];
const pageNumberInput = ref(1);
const {
searchObj,
updatedLocalLogFilterField,
@@ -437,6 +439,7 @@ export default defineComponent({
extractFTSFields,
evaluateWrapContentFlag,
} = useLogs();
const pageNumberInput = ref(1);
const totalHeight = ref(0);
const searchTableRef: any = ref(null);
@@ -447,6 +450,10 @@ export default defineComponent({
reDrawChart();
});
onUpdated(() => {
pageNumberInput.value = searchObj.data.resultGrid.currentPage;
});
const reDrawChart = () => {
if (
// eslint-disable-next-line no-prototype-builtins