diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/settings/health_logs/Logs.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/settings/health_logs/Logs.jsx
index 824f5654c8..59ae0df08b 100644
--- a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/settings/health_logs/Logs.jsx
+++ b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/settings/health_logs/Logs.jsx
@@ -1,9 +1,10 @@
import { Button, ButtonGroup, LegacyCard, Text, DataTable, VerticalStack } from "@shopify/polaris"
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
import settingRequests from "../api";
import func from "@/util/func";
import LogsContainer from "./LogsContainer";
import Dropdown from "../../../components/layouts/Dropdown"
+import SingleDate from "../../../components/layouts/SingleDate"
import { saveAs } from 'file-saver'
const Logs = () => {
@@ -17,6 +18,10 @@ const Logs = () => {
})
const [ loading, setLoading ] = useState(false)
const [ moduleInfos, setModuleInfos ] = useState([])
+ const [ selectedDate, setSelectedDate ] = useState(new Date())
+ const [ selectedHour, setSelectedHour ] = useState(new Date().getHours())
+ const [ selectedMinutes, setSelectedMinutes ] = useState("5")
+ const [ currentWindowStartMs, setCurrentWindowStartMs ] = useState(null)
const logGroupSelected = logs.logGroup !== ''
const hasAccess = func.checkUserValidForIntegrations()
@@ -33,18 +38,19 @@ const Logs = () => {
setLogs(previousState => ({ ...previousState, logData: [], logGroup: logGroup }))
}
- const fetchLogsFromDb = async (startTime, endTime, refresh = false) => {
- if (logs.logGroup !== '') {
+ const fetchLogsFromDb = useCallback(async (startTime, endTime, refresh = false, group) => {
+ const activeGroup = group ?? logs.logGroup
+ if (activeGroup !== '') {
setLoading(true)
const logsResponse = await settingRequests.fetchLogsFromDb(
Math.floor(startTime / 1000),
Math.floor(endTime / 1000),
- logs.logGroup
+ activeGroup
)
setLogs(previousState => (
{
- ...logs,
+ ...previousState,
startTime: startTime,
endTime: endTime,
logData: refresh ? [...logsResponse.logs] : [...logsResponse.logs, ...previousState.logData]
@@ -52,7 +58,7 @@ const Logs = () => {
setLoading(false)
}
- }
+ }, [logs.logGroup])
const fetchModuleInfo = async () => {
const response = await settingRequests.fetchModuleInfo();
@@ -66,7 +72,7 @@ const Logs = () => {
fetchLogsFromDb(startTime, endTime)
fetchModuleInfo()
}
- }, [logs.logGroup])
+ }, [logs.logGroup, hasAccess, fiveMins, fetchLogsFromDb])
const exportLogsCsv = () => {
let headers = ['timestamp', 'log'];
@@ -80,20 +86,70 @@ const Logs = () => {
saveAs(blob, "log.csv");
}
- const handleRefresh = () => {
- const startTime = Date.now() - fiveMins;
- const endTime = Date.now();
- if(hasAccess){
- fetchLogsFromDb(startTime, endTime, true)
+ // Removed old refresh controls; loading is handled via Load button with selected window
+
+ const minuteWindowOptions = useMemo(() => ([
+ { label: "+5 minutes", value: "5" },
+ { label: "+10 minutes", value: "10" },
+ { label: "+15 minutes", value: "15" }
+ ]), [])
+
+ const hourOptions = useMemo(() => Array.from({ length: 24 }, (_, h) => {
+ const pad = (n) => String(n).padStart(2, '0')
+ return { label: `${pad(h)}:00 - ${pad(h)}:59`, value: String(h) }
+ }), [])
+
+ const handleSelectHour = (value) => {
+ const hourNum = Number(value)
+ setSelectedHour(hourNum)
+ const date = selectedDate || new Date()
+ const { start } = getHourWindowRange(date, hourNum)
+ const stepMs = Number(selectedMinutes) * 60 * 1000
+ setCurrentWindowStartMs(start)
+ if (hasAccess) {
+ fetchLogsFromDb(start, start + stepMs, true)
fetchModuleInfo()
}
}
- const handlePreviousFiveMinutesLogs = () => {
- const startTime = logs.startTime - fiveMins;
- const endTime = logs.startTime;
- if(hasAccess){
- fetchLogsFromDb(startTime, endTime)
+ const singleDateDispatch = ({ obj }) => {
+ const newDate = obj && (obj.date || obj.End || obj.end)
+ if (newDate) {
+ setSelectedDate(newDate)
+ const hour = typeof selectedHour === 'number' ? selectedHour : new Date().getHours()
+ const { start } = getHourWindowRange(newDate, hour)
+ const stepMs = Number(selectedMinutes) * 60 * 1000
+ setCurrentWindowStartMs(start)
+ if (hasAccess) {
+ fetchLogsFromDb(start, start + stepMs, true)
+ fetchModuleInfo()
+ }
+ }
+ }
+
+ function getHourWindowRange(date, hour) {
+ const base = date ? new Date(date) : new Date()
+ const d = new Date(base.getFullYear(), base.getMonth(), base.getDate(), hour, 0, 0, 0)
+ const start = d.getTime()
+ const end = start + 60 * 60 * 1000
+ return { start, end }
+ }
+
+ // Reset current window tracker when date or hour changes
+ useEffect(() => {
+ setCurrentWindowStartMs(null)
+ }, [selectedDate, selectedHour])
+
+ const handleSelectMinuteWindow = (minutes) => {
+ setSelectedMinutes(String(minutes))
+ const date = selectedDate || new Date()
+ const hour = typeof selectedHour === 'number' ? selectedHour : new Date().getHours()
+ const { start } = getHourWindowRange(date, hour)
+ const windowEnd = start + Number(minutes) * 60 * 1000
+ setCurrentWindowStartMs(start)
+ if (hasAccess) {
+ fetchLogsFromDb(start, windowEnd, true)
+ fetchModuleInfo()
}
}
@@ -121,17 +177,55 @@ const Logs = () => {
-