diff --git a/backend/workflow_manager/execution/filter.py b/backend/workflow_manager/execution/filter.py
index 6664e3f8ac..d62a96432a 100644
--- a/backend/workflow_manager/execution/filter.py
+++ b/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"),
diff --git a/backend/workflow_manager/file_execution/views.py b/backend/workflow_manager/file_execution/views.py
index 17885b1d09..8e3ef96076 100644
--- a/backend/workflow_manager/file_execution/views.py
+++ b/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
diff --git a/frontend/src/components/logging/detailed-logs/DetailedLogs.css b/frontend/src/components/logging/detailed-logs/DetailedLogs.css
index a047dc690a..668af20002 100644
--- a/frontend/src/components/logging/detailed-logs/DetailedLogs.css
+++ b/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;
+}
diff --git a/frontend/src/components/logging/detailed-logs/DetailedLogs.jsx b/frontend/src/components/logging/detailed-logs/DetailedLogs.jsx
index 4c7729d86f..0c89b2afeb 100644
--- a/frontend/src/components/logging/detailed-logs/DetailedLogs.jsx
+++ b/frontend/src/components/logging/detailed-logs/DetailedLogs.jsx
@@ -1,15 +1,17 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
+import PropTypes from "prop-types";
import { useNavigate, useParams } from "react-router-dom";
import {
ArrowLeftOutlined,
CalendarOutlined,
ClockCircleOutlined,
CloseCircleFilled,
- DownOutlined,
+ CopyOutlined,
EyeOutlined,
FileTextOutlined,
HourglassOutlined,
InfoCircleFilled,
+ MoreOutlined,
SearchOutlined,
} from "@ant-design/icons";
import {
@@ -35,8 +37,56 @@ 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";
+// Component for status message with conditional tooltip (only when truncated)
+const StatusMessageCell = ({ text }) => {
+ const textRef = useRef(null);
+ const [isOverflowing, setIsOverflowing] = useState(false);
+
+ useEffect(() => {
+ const checkOverflow = () => {
+ if (textRef.current) {
+ setIsOverflowing(
+ textRef.current.scrollWidth > textRef.current.clientWidth
+ );
+ }
+ };
+ checkOverflow();
+ window.addEventListener("resize", checkOverflow);
+ return () => window.removeEventListener("resize", checkOverflow);
+ }, [text]);
+
+ const content = (
+
+ {text}
+
+ );
+
+ return isOverflowing ?