UN-2966 [FEAT] Auto-refresh and controls for execution logs

frontend/src/components/logging/detailed-logs/DetailedLogs.css

@@ -19,7 +19,7 @@
   margin-right: 20px;
 }
 
-.column-filter-dropdown{
+.column-filter-dropdown {
   margin-bottom: 20px;
 }
 

frontend/src/components/logging/detailed-logs/DetailedLogs.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import {
   ArrowLeftOutlined,
@@ -35,6 +35,7 @@ import {
 } from "../../../helpers/GetStaticData";
 import { LogModal } from "../log-modal/LogModal";
 import { FilterIcon } from "../filter-dropdown/FilterDropdown";
+import { LogsRefreshControls } from "../logs-refresh-controls/LogsRefreshControls";
 import useRequestUrl from "../../../hooks/useRequestUrl";
 
 const DetailedLogs = () => {
@@ -61,6 +62,8 @@ const DetailedLogs = () => {
   const [statusFilter, setStatusFilter] = useState(null);
   const [searchText, setSearchText] = useState("");
   const [searchTimeout, setSearchTimeout] = useState(null);
+  const [autoRefresh, setAutoRefresh] = useState(false);
+  const autoRefreshIntervalRef = useRef(null);
 
   const filterOptions = ["COMPLETED", "PENDING", "ERROR", "EXECUTING"];
 
@@ -74,6 +77,7 @@ const DetailedLogs = () => {
         (item?.successful_files || 0) + (item?.failed_files || 0);
       const progress = total > 0 ? Math.round((processed / total) * 100) : 0;
       const formattedData = {
+        createdAtRaw: item?.created_at,
         executedAt: formattedDateTime(item?.created_at),
         executionId: item?.id,
         progress,
@@ -128,17 +132,17 @@ const DetailedLogs = () => {
       const params = { ...defaultParams, ...customParams };
       const searchParams = new URLSearchParams();
 
-      Object.entries(params).forEach(([key, value]) => {
+      for (const [key, value] of Object.entries(params)) {
         if (value !== null && value !== undefined) {
           searchParams.append(key, value);
         }
-      });
+      }
 
       // Handle file status filter for MultipleChoiceFilter
       if (statusFilter && statusFilter.length > 0) {
-        statusFilter.forEach((status) => {
+        for (const status of statusFilter) {
           searchParams.append("status", status);
-        });
+        }
       }
 
       const response = await axiosPrivate.get(
@@ -284,25 +288,37 @@ const DetailedLogs = () => {
     setSelectedRecord(record);
   };
 
+  const handleRefresh = () => {
+    fetchExecutionDetails(id);
+    fetchExecutionFiles(id, pagination.current);
+  };
+
   useEffect(() => {
     fetchExecutionDetails(id);
     fetchExecutionFiles(id, pagination.current);
   }, [pagination.current, ordering, statusFilter]);
 
+  // Auto-refresh interval management
   useEffect(() => {
-    let interval = null;
-    if (executionDetails?.status === "EXECUTING") {
-      interval = setInterval(() => {
+    if (autoRefreshIntervalRef.current) {
+      clearInterval(autoRefreshIntervalRef.current);
+      autoRefreshIntervalRef.current = null;
+    }
+
+    if (autoRefresh) {
+      autoRefreshIntervalRef.current = setInterval(() => {
         fetchExecutionDetails(id);
         fetchExecutionFiles(id, pagination.current);
-      }, 5000);
+      }, 30000);
     }
+
     return () => {
-      if (interval) {
-        clearInterval(interval);
+      if (autoRefreshIntervalRef.current) {
+        clearInterval(autoRefreshIntervalRef.current);
+        autoRefreshIntervalRef.current = null;
       }
     };
-  }, [executionDetails?.status, id, pagination.current]);
+  }, [autoRefresh, id, pagination.current]);
 
   useEffect(() => {
     const initialColumns = columnsDetailedTable.reduce((acc, col) => {
@@ -419,13 +435,20 @@ const DetailedLogs = () => {
             </Flex>
           </Card>
         </Flex>
-        <Button
-          className="view-log-button"
-          type="link"
-          onClick={() => handleLogsModalOpen({})}
-        >
-          View Logs
-        </Button>
+        <Flex align="center" gap={8}>
+          <LogsRefreshControls
+            autoRefresh={autoRefresh}
+            setAutoRefresh={setAutoRefresh}
+            onRefresh={handleRefresh}
+          />
+          <Button
+            className="view-log-button"
+            type="link"
+            onClick={() => handleLogsModalOpen({})}
+          >
+            View Logs
+          </Button>
+        </Flex>
       </Flex>
       <div className="settings-layout">
         <Dropdown

frontend/src/components/logging/execution-logs/ExecutionLogs.css

@@ -3,10 +3,11 @@
   height: 100%;
   margin: 12px;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .logs-title {
-  padding: 15px;
   margin: 0;
 }
 
@@ -30,7 +31,7 @@
   height: 30px;
 }
 
-.log-tab{
+.log-tab {
   height: 30px;
 }
 
@@ -47,3 +48,24 @@
 .log-tab .ant-tabs-ink-bar {
   top: 40px !important;
 }
+
+.logs-header {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+}
+
+.logs-filter-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logs-table-container {
+  flex: 1;
+  min-height: 0;
+  padding: 0 24px 24px;
+  overflow: hidden;
+}