From f024ce981b3dcf1e70683a317fb4fd7e8ca510f7 Mon Sep 17 00:00:00 2001 From: Sai Nikhil Date: Sat, 19 Oct 2024 13:04:40 +0530 Subject: [PATCH] fix: #4752 issue selecting same timestamp for every query (#4782) this PR fixes #4752 ## Summary by CodeRabbit - **New Features** - Improved date-time handling in the Search History component for more accurate log searches. - Added utility function to extract timestamps based on specified periods. - Enhanced functionality for managing query parameters and stream data. - **Bug Fixes** - Enhanced error handling for clearer notifications and traceability. - **Refactor** - Code refactoring for better clarity and maintainability in query management. - **Chores** - Minor template adjustments for improved testing support. --- web/src/composables/useLogs.ts | 1 + web/src/plugins/logs/SearchHistory.vue | 122 ++++++++++++++----------- 2 files changed, 68 insertions(+), 55 deletions(-) diff --git a/web/src/composables/useLogs.ts b/web/src/composables/useLogs.ts index d783e6786d..675927bdf2 100644 --- a/web/src/composables/useLogs.ts +++ b/web/src/composables/useLogs.ts @@ -4256,6 +4256,7 @@ const useLogs = () => { reorderSelectedFields, resetHistogramWithError, isNonAggregatedQuery, + extractTimestamps, }; }; diff --git a/web/src/plugins/logs/SearchHistory.vue b/web/src/plugins/logs/SearchHistory.vue index 7b79aca90c..641727bf74 100644 --- a/web/src/plugins/logs/SearchHistory.vue +++ b/web/src/plugins/logs/SearchHistory.vue @@ -248,6 +248,7 @@ import type { Ref } from "vue"; import QTablePagination from "@/components/shared/grid/Pagination.vue"; + export default defineComponent({ name: "SearchHistoryComponent", components: { @@ -275,12 +276,18 @@ const {t} = useI18n(); const qTable: Ref | null> = ref(null); const searchDateTimeRef = ref(null) - const { searchObj } = useLogs(); + const { searchObj, extractTimestamps } = useLogs(); const dataToBeLoaded :any = ref([]); - const dateTimeToBeSent : any = ref({}); + const dateTimeToBeSent = ref({ + valueType: "relative", + relativeTimePeriod: "15m", + startTime: 0, + endTime: 0, + }); const columnsToBeRendered = ref([]); const expandedRow = ref( []); // Array to track expanded rows const isLoading = ref(false); + const isDateTimeChanged = ref(false); const perPageOptions: any = [ @@ -364,16 +371,21 @@ }); }; - const fetchSearchHistory = async ( ) => { + const fetchSearchHistory = async () => { + columnsToBeRendered.value = []; dataToBeLoaded.value = []; expandedRow.value = []; try { const {org_identifier} = router.currentRoute.value.query; isLoading.value = true; + if(dateTimeToBeSent.value.valueType === "relative"){ + const convertedData = extractTimestamps(dateTimeToBeSent.value.relativeTimePeriod); + dateTimeToBeSent.value.startTime = convertedData.from * 1000; + dateTimeToBeSent.value.endTime = convertedData.to * 1000; + } const {startTime, endTime} = dateTimeToBeSent.value; - - const response = await searchService.get_history( org_identifier,startTime,endTime, + const response = await searchService.get_history( org_identifier,startTime,endTime, ); const limitedHits = response.data.hits; const filteredHits = limitedHits.filter((hit) => hit.event === "Search"); @@ -512,65 +524,64 @@ }); - const updateDateTime = async (value: any) => { + const updateDateTime = async(value: any) => { const {startTime, endTime} = value; - dateTimeToBeSent.value = { - startTime, - endTime, - }; + dateTimeToBeSent.value = value; + searchDateTimeRef.value.setAbsoluteTime(value.startTime, value.endTime); + }; const formatTime = (took) => { return `${took.toFixed(2)} sec`; } - const calculateDuration = (startTime, endTime) => { - const durationMicroseconds = endTime - startTime; - const durationSeconds = durationMicroseconds / 1e6; + const calculateDuration = (startTime, endTime) => { + const durationMicroseconds = endTime - startTime; + const durationSeconds = durationMicroseconds / 1e6; - // Store the raw duration in a separate property - const rawDuration = durationSeconds; + // Store the raw duration in a separate property + const rawDuration = durationSeconds; - let result = ''; + let result = ''; - if (durationSeconds < 60) { - result = `${durationSeconds.toFixed(2)} seconds`; - } else if (durationSeconds < 3600) { - const minutes = Math.floor(durationSeconds / 60); - const seconds = durationSeconds % 60; - result = `${minutes} minutes`; - if (seconds > 0) { - result += ` and ${seconds.toFixed(2)} seconds`; - } - } else if (durationSeconds < 86400) { - const hours = Math.floor(durationSeconds / 3600); - const minutes = Math.floor((durationSeconds % 3600) / 60); - result = `${hours} hours`; - if (minutes > 0) { - result += ` and ${minutes} minutes`; - } - } else if (durationSeconds < 2592000) { - const days = Math.floor(durationSeconds / 86400); - const hours = Math.floor((durationSeconds % 86400) / 3600); - result = `${days} days`; - if (hours > 0) { - result += ` and ${hours} hours`; - } - } else if (durationSeconds < 31536000) { - const months = Math.floor(durationSeconds / 2592000); - const days = Math.floor((durationSeconds % 2592000) / 86400); - result = `${months} months`; - if (days > 0) { - result += ` and ${days} days`; - } - } else { - const years = Math.floor(durationSeconds / 31536000); - const months = Math.floor((durationSeconds % 31536000) / 2592000); - result = `${years} years`; - if (months > 0) { - result += ` and ${months} months`; - } - } + if (durationSeconds < 60) { + result = `${durationSeconds.toFixed(2)} seconds`; + } else if (durationSeconds < 3600) { + const minutes = Math.floor(durationSeconds / 60); + const seconds = durationSeconds % 60; + result = `${minutes} minutes`; + if (seconds > 0) { + result += ` and ${seconds.toFixed(2)} seconds`; + } + } else if (durationSeconds < 86400) { + const hours = Math.floor(durationSeconds / 3600); + const minutes = Math.floor((durationSeconds % 3600) / 60); + result = `${hours} hours`; + if (minutes > 0) { + result += ` and ${minutes} minutes`; + } + } else if (durationSeconds < 2592000) { + const days = Math.floor(durationSeconds / 86400); + const hours = Math.floor((durationSeconds % 86400) / 3600); + result = `${days} days`; + if (hours > 0) { + result += ` and ${hours} hours`; + } + } else if (durationSeconds < 31536000) { + const months = Math.floor(durationSeconds / 2592000); + const days = Math.floor((durationSeconds % 2592000) / 86400); + result = `${months} months`; + if (days > 0) { + result += ` and ${days} days`; + } + } else { + const years = Math.floor(durationSeconds / 31536000); + const months = Math.floor((durationSeconds % 31536000) / 2592000); + result = `${years} years`; + if (months > 0) { + result += ` and ${months} months`; + } + } - return { formatted: result, raw: rawDuration }; + return { formatted: result, raw: rawDuration }; }; @@ -635,6 +646,7 @@ }; + watch(() => props.isClicked, (value) => { if(value == true && !isLoading.value){ fetchSearchHistory();