UN-2966 [FEAT] Auto-refresh and controls for execution logs (#1687)

* UN-2454 [FIX] Avoid polling infinitely for in-progress execution

- Update DetailedLogs and ExecutionLogs components to properly handle polling state
- Update index.js dependencies
- Update workers dependencies in pyproject.toml and uv.lock

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

* Revert accidental changes to index.js and workers dependencies

Reverted files that were not part of the intended fix:
- frontend/src/index.js
- workers/pyproject.toml
- workers/uv.lock

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* UN-2454 [FIX] Fix date handling and polling logic in logging components

- Fixed date calculation bug: use raw ISO timestamps instead of formatted display strings
- Added createdAtRaw and modified_atRaw fields to preserve parseable date values
- Implement stale interval re-check: stop polling when execution is >1 hour old via executionDetailsRef
- Replace forEach loops with for...of for improved performance (4 instances)

Fixes CodeRabbit comments about infinite polling and ensures logging components correctly handle timestamp calculations and respect staleness thresholds.

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

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

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Signed-off-by: Chandrasekharan M <[email protected]>

* UN-2454 [FIX] Use isFinite() for robust date validation in logging components

Replace isNaN() with isFinite() for date validation in ExecutionLogs and DetailedLogs to prevent infinite polling when invalid timestamps occur.

- DetailedLogs.jsx: Changed isNaN() to isFinite() check
- ExecutionLogs.jsx: Added missing isFinite() date validation

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

* UN-2454 [FIX] Resolve stale closure bug in polling state management

Use ref instead of state for pollingIds to prevent stale closure issues in polling logic:
- Added pollingIdsRef to track actively polling execution IDs
- Updated all polling operations to directly mutate ref (no re-renders needed)
- Removed redundant pollingIds state to eliminate unnecessary re-renders
- Prevents duplicate polling loops and potential memory leaks

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

* minor: Addressed a code smell

* wip: Refresh and data filter above table

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

- Add reusable LogsRefreshControls component (toggle + refresh button)
- Move date picker from nav bar to content area in ExecutionLogs
- Update DetailedLogs to use shared LogsRefreshControls component
- Fix table height to fill available space using flexbox layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* UN-2966 [FEAT] Enhanced execution logs UI with improved layout and controls

- Added sticky table header for better scrolling experience
- Improved pagination positioning and styling with reduced padding
- Enhanced table layout with scrollbar isolated to table body
- Fixed layout spacing in DetailedLogs header with refresh controls
- Updated CSS for better visual consistency across logs components

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

* UN-2966 [REFACTOR] Clean up DetailedLogs layout and improve UI

- Moved "View Logs" button from header to cards row for better layout
- Kept LogsRefreshControls in header top-right
- Changed "View Logs" from link to button with FileTextOutlined icon
- Removed unnecessary .detailed-logs-header-controls wrapper div
- Updated header padding and button margins for consistency
- Fixed pagination label in LogsTable (items → executions)

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

* UN-2966 [FEAT] Table layout, column visibility controls and pagination fixes for execution/detailed logs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* UN-2966 [REFACTOR] Improve DetailedLogs table column sizing with percentage-based widths

- Implement responsive column widths using fixed px for predictable content
- Status Message column gets 30% (most important variable content)
- File Name gets 12%, File Path gets 20% for variable content
- Reduced fixed columns: Executed At (140px), Status (110px), File Size (70px)
- Execution Time (90px), Action (60px) for better space distribution
- Added explanatory comment for width allocation strategy

* UN-2966 [FEATURE] Add sorting and execution ID filter to logs

- Add file_size and execution_time sorting to DetailedLogs and LogsTable
- Add execution ID filter search to ExecutionLogs page
- Implement field mapping for proper backend sort ordering
- Update API filter backend with id field for search capability

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* UN-2966 [FIX] Resolve CodeRabbit review comments

Fixed RangePicker null guard to prevent runtime errors on partial date selection. Removed unused createdAtRaw field from ExecutionLogs and DetailedLogs components.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* UN-2966 [FIX] Use UUIDFilter for execution id field

Changed `id` filter from `CharFilter(lookup_expr="icontains")` to `UUIDFilter()` in ExecutionFilter. UUIDs don't support icontains lookup, so this fixes a potential FieldError.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* UN-2966 [FIX] Disable refresh controls when execution reaches terminal state

- Added terminal state detection for COMPLETED/ERROR/STOPPED statuses
- Auto-refresh automatically disables when execution completes
- Refresh button and toggle are disabled with visual feedback
- Tooltip shows execution completion message when disabled

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

* UN-2966 [FIX] Add PropTypes validation for StatusMessageCell

Added PropTypes import and validation for StatusMessageCell component's 'text' prop to resolve ESLint error and prevent potential runtime issues.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* UN-2966 [FIX] Address SonarQube code smells in logging components

- ExecutionLogs.jsx: Use optional chaining (value?.[0]) for cleaner null checks
- LogsTable.jsx: Extract inline components (SearchFilterDropdown, SearchFilterIcon) with proper PropTypes for reusability and maintainability

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

* UN-2966 [FIX] Prevent Action column from being hidden in visibility menu

Excluded "action" column from the visibility menu to prevent users from losing access to the column visibility dropdown. This ensures the Action column remains always visible, maintaining user ability to interact with the table controls.

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

* UN-2966 [FIX] Add error handling for clipboard operations

* UN-2966 [FIX] Mark StatusMessageCell text prop as required

* UN-2966 [FIX] Add missing id dependency to useEffect

* UN-2966 [REFACTOR] Move SearchFilterIcon inline style to CSS

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* UN-2966 [REFACTOR] Extract inline component definitions to module level

- DetailedLogs.jsx: Extracted ActionColumnHeader component to module level
- LogsTable.jsx: Removed unnecessary arrow function wrappers for filterDropdown and filterIcon
- Resolves SonarQube code smell for inline component definitions

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

* UN-2966 [REFACTOR] Remove unnecessary arrow function wrapper from title prop

Simplified the title prop by removing redundant arrow function wrapper. The title prop accepts JSX elements directly, so the wrapper was unnecessary.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

---------

Signed-off-by: Chandrasekharan M <[email protected]>
Co-authored-by: Claude <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 3 people

backend/workflow_manager/execution/filter.py

@@ -10,6 +10,7 @@
 
 
 class ExecutionFilter(filters.FilterSet):
+    id = filters.UUIDFilter()
     execution_entity = filters.ChoiceFilter(
         choices=[
             (ExecutionEntity.API.value, "API"),

backend/workflow_manager/file_execution/views.py

@@ -16,7 +16,7 @@ class FileCentricExecutionViewSet(viewsets.ReadOnlyModelViewSet):
     serializer_class = FileCentricExecutionSerializer
     pagination_class = CustomPagination
     filter_backends = [DjangoFilterBackend, OrderingFilter]
-    ordering_fields = ["created_at", "execution_time"]
+    ordering_fields = ["created_at", "execution_time", "file_size"]
     ordering = ["created_at"]
     filterset_class = FileExecutionFilter
 

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

@@ -1,3 +1,67 @@
+/* Flexbox layout for responsive table */
+.detailed-logs-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.detailed-logs-header {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+}
+
+.detailed-logs-cards {
+  flex: 0 0 auto;
+}
+
+.detailed-logs-table-container {
+  flex: 1;
+  min-height: 0;
+  padding: 0 12px 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.detailed-logs-table-container .ant-table-wrapper {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.detailed-logs-table-container .ant-spin-nested-loading,
+.detailed-logs-table-container .ant-spin-container {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.detailed-logs-table-container .ant-table {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.detailed-logs-table-container .ant-table-container {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.detailed-logs-table-container .ant-table-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto !important;
+}
+
 .logging-card-title {
   font-weight: 600;
   font-size: 14px;
@@ -16,11 +80,50 @@
 }
 
 .view-log-button {
-  margin-right: 20px;
+  margin-right: 24px;
+}
+
+/* Action column header with settings icon */
+.action-column-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  width: 100%;
+}
+
+.column-settings-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.column-settings-trigger:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.column-settings-icon {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.column-settings-trigger:hover .column-settings-icon {
+  color: #1677ff;
+}
+
+/* Thin scrollbar */
+.detailed-logs-table-container .ant-table-body::-webkit-scrollbar {
+  width: 6px;
+}
+
+.detailed-logs-table-container .ant-table-body::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
 }
 
-.column-filter-dropdown{
-  margin-bottom: 20px;
+.detailed-logs-table-container .ant-table-body::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 .search-container {
@@ -32,3 +135,37 @@
   margin-bottom: 8px;
   display: block;
 }
+
+/* Fix cursor in pagination dropdown */
+.detailed-logs-table-container .ant-pagination-options .ant-select-selector {
+  cursor: pointer;
+}
+
+.detailed-logs-table-container
+  .ant-pagination-options
+  .ant-select-selection-item {
+  cursor: pointer;
+}
+
+/* Status message text with ellipsis */
+.status-message-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Outlined copy button style - matches LLM Profiles / API Deployments */
+.copy-btn-outlined {
+  border: 1px solid #d9d9d9;
+  background: #fff;
+  color: rgba(0, 0, 0, 0.65);
+  margin-left: 8px;
+  height: auto;
+  min-width: auto;
+}
+
+.copy-btn-outlined:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+}