${createSkeletonEntry()}
@@ -348,48 +412,71 @@ function createSkeletonEntry() {
}
function hideLoadingSkeleton() {
- const skeleton = document.querySelector('.loading-skeleton');
+ const skeleton = document.querySelector(".loading-skeleton");
if (skeleton) {
skeleton.remove();
}
}
function showErrorMessage(message) {
- const container = document.getElementById('logEntries');
- container.innerHTML = `
-
- ⚠️
- ${message}
-
-
- `;
+ const container = document.getElementById("logEntries");
- // Add event listener to the dynamically created retry button
- const retryBtn = document.getElementById('retryBtn');
- if (retryBtn) {
- retryBtn.addEventListener('click', loadHistoricalLogs);
- }
+ // Create error message structure safely using DOM methods to prevent XSS
+ const errorDiv = document.createElement("div");
+ errorDiv.className = "error-message";
+
+ const iconSpan = document.createElement("span");
+ iconSpan.className = "error-icon";
+ iconSpan.textContent = "⚠️";
+
+ const messageSpan = document.createElement("span");
+ messageSpan.textContent = message; // Safe - automatically escapes HTML
+
+ const retryBtn = document.createElement("button");
+ retryBtn.id = "retryBtn";
+ retryBtn.className = "retry-btn";
+ retryBtn.textContent = "Retry";
+ retryBtn.addEventListener("click", loadHistoricalLogs);
+
+ errorDiv.appendChild(iconSpan);
+ errorDiv.appendChild(messageSpan);
+ errorDiv.appendChild(retryBtn);
+
+ container.replaceChildren(errorDiv);
}
function updateLogStatistics(data) {
- const statsPanel = document.getElementById('logStats');
- const displayedCount = document.getElementById('displayedCount');
- const totalCount = document.getElementById('totalCount');
- const processedCount = document.getElementById('processedCount');
+ const statsPanel = document.getElementById("logStats");
+ const displayedCount = document.getElementById("displayedCount");
+ const totalCount = document.getElementById("totalCount");
+ const processedCount = document.getElementById("processedCount");
// Update counts from API response
displayedCount.textContent = data.entries ? data.entries.length : 0;
- processedCount.textContent = data.entries_processed || '0';
+ processedCount.textContent = data.entries_processed || "0";
// Use the total log count estimate for better user information
- totalCount.textContent = data.total_log_count_estimate || 'Unknown';
+ totalCount.textContent = data.total_log_count_estimate || "Unknown";
// Show the statistics panel
- statsPanel.style.display = 'block';
+ statsPanel.style.display = "block";
// Add indicator for partial scans
if (data.is_partial_scan) {
- processedCount.innerHTML = `${data.entries_processed}
(partial scan)`;
+ // Clear existing content and rebuild safely to prevent XSS
+ processedCount.textContent = ""; // Clear first
+
+ // Add the count as safe text
+ const countText = document.createTextNode(
+ String(data.entries_processed || "0") + " ",
+ );
+ processedCount.appendChild(countText);
+
+ // Add the partial scan indicator
+ const partialIndicator = document.createElement("small");
+ partialIndicator.style.color = "var(--timestamp-color)";
+ partialIndicator.textContent = "(partial scan)";
+ processedCount.appendChild(partialIndicator);
}
}
@@ -398,34 +485,35 @@ function clearLogs() {
clearFilterCache(); // Clear cache when clearing entries
// Clear the container directly to avoid any scrollbar flashing
- const container = document.getElementById('logEntries');
+ const container = document.getElementById("logEntries");
container.replaceChildren(); // More efficient than innerHTML = ''
// Hide stats panel when no entries
- document.getElementById('logStats').style.display = 'none';
+ document.getElementById("logStats").style.display = "none";
}
function exportLogs(format) {
const filters = new URLSearchParams();
- const hookId = document.getElementById('hookIdFilter').value.trim();
- const prNumber = document.getElementById('prNumberFilter').value.trim();
- const repository = document.getElementById('repositoryFilter').value.trim();
- const user = document.getElementById('userFilter').value.trim();
- const level = document.getElementById('levelFilter').value;
- const search = document.getElementById('searchFilter').value.trim();
- const limit = document.getElementById('limitFilter').value;
-
- if (hookId) filters.append('hook_id', hookId);
- if (prNumber) filters.append('pr_number', prNumber);
- if (repository) filters.append('repository', repository);
- if (user) filters.append('github_user', user);
- if (level) filters.append('level', level);
- if (search) filters.append('search', search);
- filters.append('limit', limit);
- filters.append('format', format);
+ const hookId = document.getElementById("hookIdFilter").value.trim();
+ const prNumber = document.getElementById("prNumberFilter").value.trim();
+ const repository = document.getElementById("repositoryFilter").value.trim();
+ const user = document.getElementById("userFilter").value.trim();
+ const level = document.getElementById("levelFilter").value;
+ const search = document.getElementById("searchFilter").value.trim();
+ const limit = document.getElementById("limitFilter").value;
+
+ if (hookId) filters.append("hook_id", hookId);
+ if (prNumber) filters.append("pr_number", prNumber);
+ if (repository) filters.append("repository", repository);
+ if (user) filters.append("github_user", user);
+ if (level) filters.append("level", level);
+ if (search) filters.append("search", search);
+ filters.append("limit", limit);
+ filters.append("format", format);
const url = `/logs/api/export?${filters.toString()}`;
- window.open(url, '_blank');
+ const w = window.open(url, "_blank");
+ if (w) w.opener = null;
}
function applyFilters() {
@@ -442,7 +530,7 @@ function applyFilters() {
let filterTimeout;
function debounceFilter() {
// Clear only filter cache, not entry cache
- lastFilterHash = '';
+ lastFilterHash = "";
// Immediate client-side filtering for fast feedback
renderLogEntries();
@@ -455,114 +543,151 @@ function debounceFilter() {
}
function clearFilters() {
- document.getElementById('hookIdFilter').value = '';
- document.getElementById('prNumberFilter').value = '';
- document.getElementById('repositoryFilter').value = '';
- document.getElementById('userFilter').value = '';
- document.getElementById('levelFilter').value = '';
- document.getElementById('searchFilter').value = '';
- document.getElementById('limitFilter').value = '1000'; // Reset to default
+ document.getElementById("hookIdFilter").value = "";
+ document.getElementById("prNumberFilter").value = "";
+ document.getElementById("repositoryFilter").value = "";
+ document.getElementById("userFilter").value = "";
+ document.getElementById("levelFilter").value = "";
+ document.getElementById("searchFilter").value = "";
+ document.getElementById("limitFilter").value = "1000"; // Reset to default
// Reload data with cleared filters
applyFilters();
}
-document.getElementById('hookIdFilter').addEventListener('input', debounceFilter);
-document.getElementById('prNumberFilter').addEventListener('input', debounceFilter);
-document.getElementById('repositoryFilter').addEventListener('input', debounceFilter);
-document.getElementById('userFilter').addEventListener('input', debounceFilter);
-document.getElementById('levelFilter').addEventListener('change', debounceFilter);
-document.getElementById('searchFilter').addEventListener('input', debounceFilter);
-document.getElementById('limitFilter').addEventListener('change', debounceFilter);
+document
+ .getElementById("hookIdFilter")
+ .addEventListener("input", debounceFilter);
+document
+ .getElementById("prNumberFilter")
+ .addEventListener("input", debounceFilter);
+document
+ .getElementById("repositoryFilter")
+ .addEventListener("input", debounceFilter);
+document.getElementById("userFilter").addEventListener("input", debounceFilter);
+document
+ .getElementById("levelFilter")
+ .addEventListener("change", debounceFilter);
+document
+ .getElementById("searchFilter")
+ .addEventListener("input", debounceFilter);
+document
+ .getElementById("limitFilter")
+ .addEventListener("change", debounceFilter);
// Theme management
function toggleTheme() {
- const currentTheme = document.documentElement.getAttribute('data-theme');
- const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+ const currentTheme = document.documentElement.getAttribute("data-theme");
+ const newTheme = currentTheme === "dark" ? "light" : "dark";
- document.documentElement.setAttribute('data-theme', newTheme);
+ document.documentElement.setAttribute("data-theme", newTheme);
// Update theme toggle button icon and accessibility attributes
- const themeToggle = document.querySelector('.theme-toggle');
- themeToggle.textContent = newTheme === 'dark' ? '☀️' : '🌙';
- themeToggle.setAttribute('aria-label', newTheme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
- themeToggle.setAttribute('title', newTheme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
+ const themeToggle = document.querySelector(".theme-toggle");
+ themeToggle.textContent = newTheme === "dark" ? "☀️" : "🌙";
+ themeToggle.setAttribute(
+ "aria-label",
+ newTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
+ );
+ themeToggle.setAttribute(
+ "title",
+ newTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
+ );
// Store theme preference in localStorage
- localStorage.setItem('log-viewer-theme', newTheme);
+ localStorage.setItem("log-viewer-theme", newTheme);
}
// Initialize theme from localStorage or default to light
function initializeTheme() {
- const savedTheme = localStorage.getItem('log-viewer-theme') || 'light';
- document.documentElement.setAttribute('data-theme', savedTheme);
+ const savedTheme = localStorage.getItem("log-viewer-theme") || "light";
+ document.documentElement.setAttribute("data-theme", savedTheme);
// Update theme toggle button icon and accessibility attributes
- const themeToggle = document.querySelector('.theme-toggle');
- themeToggle.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
- themeToggle.setAttribute('aria-label', savedTheme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
- themeToggle.setAttribute('title', savedTheme === 'dark' ? 'Switch to light theme' : 'Switch to dark theme');
+ const themeToggle = document.querySelector(".theme-toggle");
+ themeToggle.textContent = savedTheme === "dark" ? "☀️" : "🌙";
+ themeToggle.setAttribute(
+ "aria-label",
+ savedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
+ );
+ themeToggle.setAttribute(
+ "title",
+ savedTheme === "dark" ? "Switch to light theme" : "Switch to dark theme",
+ );
}
// Initialize theme on page load
initializeTheme();
-// Initialize timeline collapse state
-initializeTimelineState();
-
// Initialize connection status
updateConnectionStatus(false);
// Initialize event listeners when DOM is ready
function initializeEventListeners() {
// Theme toggle button
- const themeToggleBtn = document.getElementById('themeToggleBtn');
+ const themeToggleBtn = document.getElementById("themeToggleBtn");
if (themeToggleBtn) {
- themeToggleBtn.addEventListener('click', toggleTheme);
+ themeToggleBtn.addEventListener("click", toggleTheme);
}
// Control buttons
- const connectBtn = document.getElementById('connectBtn');
+ const connectBtn = document.getElementById("connectBtn");
if (connectBtn) {
- connectBtn.addEventListener('click', connectWebSocket);
+ connectBtn.addEventListener("click", connectWebSocket);
}
- const disconnectBtn = document.getElementById('disconnectBtn');
+ const disconnectBtn = document.getElementById("disconnectBtn");
if (disconnectBtn) {
- disconnectBtn.addEventListener('click', disconnectWebSocket);
+ disconnectBtn.addEventListener("click", disconnectWebSocket);
}
- const refreshBtn = document.getElementById('refreshBtn');
+ const refreshBtn = document.getElementById("refreshBtn");
if (refreshBtn) {
- refreshBtn.addEventListener('click', loadHistoricalLogs);
+ refreshBtn.addEventListener("click", loadHistoricalLogs);
}
- const clearFiltersBtn = document.getElementById('clearFiltersBtn');
+ const clearFiltersBtn = document.getElementById("clearFiltersBtn");
if (clearFiltersBtn) {
- clearFiltersBtn.addEventListener('click', clearFilters);
+ clearFiltersBtn.addEventListener("click", clearFilters);
}
- const clearLogsBtn = document.getElementById('clearLogsBtn');
+ const clearLogsBtn = document.getElementById("clearLogsBtn");
if (clearLogsBtn) {
- clearLogsBtn.addEventListener('click', clearLogs);
+ clearLogsBtn.addEventListener("click", clearLogs);
}
- const exportBtn = document.getElementById('exportBtn');
+ const exportBtn = document.getElementById("exportBtn");
if (exportBtn) {
- exportBtn.addEventListener('click', () => exportLogs('json'));
+ exportBtn.addEventListener("click", () => exportLogs("json"));
}
- // Timeline header and toggle button
- const timelineHeader = document.getElementById('timelineHeader');
- if (timelineHeader) {
- timelineHeader.addEventListener('click', toggleTimeline);
+ // Flow modal event listeners
+ const closeModalBtn = document.getElementById("closeFlowModal");
+ if (closeModalBtn) {
+ closeModalBtn.addEventListener("click", closeFlowModal);
}
- const timelineToggle = document.getElementById('timelineToggle');
- if (timelineToggle) {
- timelineToggle.addEventListener('click', (event) => {
- event.stopPropagation();
- toggleTimeline();
+ const flowModal = document.getElementById("flowModal");
+ if (flowModal) {
+ flowModal.addEventListener("click", (e) => {
+ if (e.target === flowModal) {
+ closeFlowModal();
+ }
+ });
+ }
+
+ // PR modal event listeners
+ const closePrModalBtn = document.getElementById("closePrModal");
+ if (closePrModalBtn) {
+ closePrModalBtn.addEventListener("click", closePrModal);
+ }
+
+ const prModal = document.getElementById("prModal");
+ if (prModal) {
+ prModal.addEventListener("click", (e) => {
+ if (e.target === prModal) {
+ closePrModal();
+ }
});
}
}
@@ -573,332 +698,995 @@ initializeEventListeners();
// Load initial data
loadHistoricalLogs();
-// Timeline functionality
-let currentTimelineData = null;
+// Flow Modal functionality
+let currentFlowData = null;
+let currentFlowController = null;
+let flowModalKeydownHandler = null;
+let flowModalPreviousFocus = null;
+let currentStepLogsController = null;
+// eslint-disable-next-line no-unused-vars
function showTimeline(hookId) {
+ // Redirect old timeline calls to new modal (backward compatibility shim)
+ showFlowModal(hookId);
+}
+
+function showFlowModal(hookId) {
if (!hookId) {
- hideTimeline();
+ closeFlowModal();
return;
}
+ // Hide step logs section when opening new modal
+ const flowLogsSection = document.getElementById("flowLogs");
+ if (flowLogsSection) {
+ flowLogsSection.style.display = "none";
+ }
+
+ // Cancel previous fetch if still in progress
+ if (currentFlowController) {
+ currentFlowController.abort();
+ }
+
+ // Create new AbortController for this fetch
+ currentFlowController = new AbortController();
+
+ // Show modal with loading indicator
+ const modal = document.getElementById("flowModal");
+ modal.style.display = "flex";
+ showFlowModalLoading();
// Fetch workflow steps data
- fetch(`/logs/api/workflow-steps/${hookId}`)
- .then(response => {
+ fetch(`/logs/api/workflow-steps/${encodeURIComponent(hookId)}`, {
+ signal: currentFlowController.signal,
+ })
+ .then((response) => {
if (!response.ok) {
if (response.status === 404) {
- hideTimeline();
+ console.log("No flow data found for hook ID:", hookId);
+ showFlowModalError("No workflow data found for this hook");
return;
}
- throw new Error('Failed to fetch workflow steps');
+ throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return response.json();
})
- .then(data => {
- currentTimelineData = data;
- renderTimeline(data);
- document.getElementById('timelineSection').style.display = 'block';
-
- // Ensure the correct collapse state is maintained when showing timeline
- initializeTimelineState();
+ .then((data) => {
+ if (data) {
+ currentFlowData = data;
+ renderFlowModal(data);
+ setupFlowModalAccessibility();
+ }
})
- .catch(error => {
- hideTimeline();
+ .catch((error) => {
+ if (error.name === "AbortError") {
+ // Request was cancelled, ignore silently
+ return;
+ }
+ console.error("Error fetching flow data:", error);
+ showFlowModalError("Failed to load workflow data. Please try again.");
});
}
-function hideTimeline() {
- document.getElementById('timelineSection').style.display = 'none';
- currentTimelineData = null;
-}
+function closeFlowModal() {
+ const modal = document.getElementById("flowModal");
+ if (modal) {
+ modal.style.display = "none";
+ }
+ if (currentFlowController) {
+ currentFlowController.abort();
+ currentFlowController = null;
+ }
+ if (currentStepLogsController) {
+ currentStepLogsController.abort();
+ currentStepLogsController = null;
+ }
+ currentFlowData = null;
-function toggleTimeline() {
- const content = document.getElementById('timelineContent');
- const toggle = document.getElementById('timelineToggle');
+ // Remove keyboard event listener
+ if (flowModalKeydownHandler) {
+ document.removeEventListener("keydown", flowModalKeydownHandler);
+ flowModalKeydownHandler = null;
+ }
- if (content.classList.contains('expanded')) {
- // Collapse
- content.classList.remove('expanded');
- content.classList.add('collapsed');
- toggle.textContent = '▶ Expand';
+ // Restore focus to the element that opened the modal
+ if (flowModalPreviousFocus) {
+ flowModalPreviousFocus.focus();
+ flowModalPreviousFocus = null;
+ }
+}
- // Store collapse state in localStorage
- localStorage.setItem('timeline-collapsed', 'true');
- } else {
- // Expand
- content.classList.remove('collapsed');
- content.classList.add('expanded');
- toggle.textContent = '▼ Collapse';
+// PR Modal functionality
+let currentPrController = null;
+let prModalKeydownHandler = null;
+let prModalPreviousFocus = null;
- // Store expand state in localStorage
- localStorage.setItem('timeline-collapsed', 'false');
+function showPrModal(prNumber) {
+ if (!prNumber) {
+ closePrModal();
+ return;
}
+
+ // Cancel previous fetch if still in progress
+ if (currentPrController) {
+ currentPrController.abort();
+ }
+
+ // Create new AbortController for this fetch
+ currentPrController = new AbortController();
+
+ // Show modal with loading indicator
+ const modal = document.getElementById("prModal");
+ modal.style.display = "flex";
+ showPrModalLoading();
+
+ // Fetch all log entries for this PR number
+ const params = new URLSearchParams({
+ pr_number: prNumber,
+ limit: CONFIG.PR_FETCH_LIMIT.toString(),
+ });
+
+ fetch(`/logs/api/entries?${params}`, { signal: currentPrController.signal })
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+ }
+ return response.json();
+ })
+ .then((data) => {
+ if (data.entries && data.entries.length > 0) {
+ // Extract unique hook IDs (deduplicate)
+ const hookIds = data.entries
+ .map((e) => e.hook_id)
+ .filter((id) => id !== null && id !== undefined);
+ const uniqueHookIds = [...new Set(hookIds)];
+
+ if (uniqueHookIds.length === 0) {
+ console.log("No hook IDs found for PR:", prNumber);
+ showPrModalError(`No workflow events found for PR #${prNumber}`);
+ return;
+ }
+
+ renderPrModal(prNumber, uniqueHookIds, data.entries[0].repository);
+ setupPrModalAccessibility();
+ } else {
+ showPrModalError(`No log entries found for PR #${prNumber}`);
+ }
+ })
+ .catch((error) => {
+ if (error.name === "AbortError") {
+ // Request was cancelled, ignore silently
+ return;
+ }
+ console.error("Error fetching PR data:", error);
+ showPrModalError("Failed to load PR data. Please try again.");
+ });
}
-function initializeTimelineState() {
- // Initialize timeline collapse state from localStorage - default to collapsed
- const timelineState = localStorage.getItem('timeline-collapsed');
- const isCollapsed = timelineState === null ? true : timelineState === 'true'; // Default collapsed if no preference set
- const content = document.getElementById('timelineContent');
- const toggle = document.getElementById('timelineToggle');
+function closePrModal() {
+ const modal = document.getElementById("prModal");
+ if (modal) {
+ modal.style.display = "none";
+ }
- if (isCollapsed) {
- content.classList.remove('expanded');
- content.classList.add('collapsed');
- toggle.textContent = '▶ Expand';
- } else {
- content.classList.remove('collapsed');
- content.classList.add('expanded');
- toggle.textContent = '▼ Collapse';
+ // Remove keyboard event listener
+ if (prModalKeydownHandler) {
+ document.removeEventListener("keydown", prModalKeydownHandler);
+ prModalKeydownHandler = null;
+ }
+
+ // Restore focus to the element that opened the modal
+ if (prModalPreviousFocus) {
+ prModalPreviousFocus.focus();
+ prModalPreviousFocus = null;
}
}
-function updateTimelineInfo(data) {
- const info = document.getElementById('timelineInfo');
- const duration = data.total_duration_ms > 0 ? `${(data.total_duration_ms / 1000).toFixed(2)}s` : '< 1s';
- info.innerHTML = `
-
Hook ID: ${data.hook_id}
-
Steps: ${data.step_count}
-
Duration: ${duration}
- `;
+// Keyboard accessibility for Flow Modal
+function setupFlowModalAccessibility() {
+ const modal = document.getElementById("flowModal");
+ if (!modal) return;
+
+ // Set ARIA attributes for screen reader support
+ modal.setAttribute("role", "dialog");
+ modal.setAttribute("aria-modal", "true");
+ modal.setAttribute("aria-labelledby", "flowModalTitle");
+ modal.setAttribute("aria-describedby", "flowSummary");
+
+ // Save the element that had focus before modal opened
+ flowModalPreviousFocus = document.activeElement;
+
+ // Find all focusable elements in the modal
+ const focusableElements = modal.querySelectorAll(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+ );
+ const firstFocusable = focusableElements[0];
+ const lastFocusable = focusableElements[focusableElements.length - 1];
+
+ // Move focus to first interactive element in modal
+ if (firstFocusable) {
+ firstFocusable.focus();
+ }
+
+ // Create and attach keyboard handler
+ flowModalKeydownHandler = function (e) {
+ // Close modal on Escape key
+ if (e.key === "Escape") {
+ e.preventDefault();
+ closeFlowModal();
+ return;
+ }
+
+ // Trap focus within modal using Tab
+ if (e.key === "Tab") {
+ if (e.shiftKey) {
+ // Shift+Tab: moving backwards
+ if (document.activeElement === firstFocusable) {
+ e.preventDefault();
+ lastFocusable.focus();
+ }
+ } else {
+ // Tab: moving forwards
+ if (document.activeElement === lastFocusable) {
+ e.preventDefault();
+ firstFocusable.focus();
+ }
+ }
+ }
+ };
+
+ document.addEventListener("keydown", flowModalKeydownHandler);
}
-function renderEmptyTimeline() {
- const svg = document.getElementById('timelineSvg');
- svg.innerHTML = '
No workflow steps found';
+// Keyboard accessibility for PR Modal
+function setupPrModalAccessibility() {
+ const modal = document.getElementById("prModal");
+ if (!modal) return;
+
+ // Set ARIA attributes for screen reader support
+ modal.setAttribute("role", "dialog");
+ modal.setAttribute("aria-modal", "true");
+ modal.setAttribute("aria-labelledby", "prModalTitle");
+ modal.setAttribute("aria-describedby", "prSummary");
+
+ // Save the element that had focus before modal opened
+ prModalPreviousFocus = document.activeElement;
+
+ // Find all focusable elements in the modal
+ const focusableElements = modal.querySelectorAll(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+ );
+ const firstFocusable = focusableElements[0];
+ const lastFocusable = focusableElements[focusableElements.length - 1];
+
+ // Move focus to first interactive element in modal
+ if (firstFocusable) {
+ firstFocusable.focus();
+ }
+
+ // Create and attach keyboard handler
+ prModalKeydownHandler = function (e) {
+ // Close modal on Escape key
+ if (e.key === "Escape") {
+ e.preventDefault();
+ closePrModal();
+ return;
+ }
+
+ // Trap focus within modal using Tab
+ if (e.key === "Tab") {
+ if (e.shiftKey) {
+ // Shift+Tab: moving backwards
+ if (document.activeElement === firstFocusable) {
+ e.preventDefault();
+ lastFocusable.focus();
+ }
+ } else {
+ // Tab: moving forwards
+ if (document.activeElement === lastFocusable) {
+ e.preventDefault();
+ firstFocusable.focus();
+ }
+ }
+ }
+ };
+
+ document.addEventListener("keydown", prModalKeydownHandler);
}
-function renderTimelineVisualization(layout, data) {
- const svg = document.getElementById('timelineSvg');
+function renderPrModal(prNumber, hookIds, repository) {
+ // Render summary section
+ const summaryElement = document.getElementById("prSummary");
+ if (!summaryElement) return;
// Clear existing content
- svg.innerHTML = '';
-
- // SVG dimensions - much larger and adaptive
- const width = Math.max(1400, layout.totalWidth + 200);
- const height = layout.totalHeight + 150;
- const margin = { left: 75, right: 75, top: 75, bottom: 75 };
-
- // Update SVG size
- svg.setAttribute('width', width);
- svg.setAttribute('height', height);
-
- // Draw timeline lines and steps
- layout.lines.forEach((line, lineIndex) => {
- const lineY = margin.top + (lineIndex * layout.lineHeight) + layout.lineHeight / 2;
-
- // Draw horizontal timeline line for this row
- if (line.steps.length > 0) {
- const lineElement = document.createElementNS('http://www.w3.org/2000/svg', 'line');
- lineElement.setAttribute('class', 'step-line');
- lineElement.setAttribute('x1', margin.left);
- lineElement.setAttribute('y1', lineY);
- lineElement.setAttribute('x2', margin.left + layout.lineWidth);
- lineElement.setAttribute('y2', lineY);
- svg.appendChild(lineElement);
- }
+ while (summaryElement.firstChild) {
+ summaryElement.removeChild(summaryElement.firstChild);
+ }
+
+ const title = document.createElement("h3");
+ title.textContent = `PR #${prNumber} Workflow Overview`;
+ summaryElement.appendChild(title);
- // Draw steps for this line
- line.steps.forEach((step, stepIndex) => {
- const stepX = margin.left + (stepIndex * layout.stepSpacing) + layout.stepSpacing / 2;
-
- const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
- group.setAttribute('class', 'timeline-step');
- group.setAttribute('data-step-index', step.originalIndex);
-
- // Step circle - larger
- const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
- circle.setAttribute('class', `step-circle ${getStepType(step.message)}`);
- circle.setAttribute('cx', stepX);
- circle.setAttribute('cy', lineY);
- circle.setAttribute('r', 12); // Larger circle
- svg.appendChild(circle);
- group.appendChild(circle);
-
- // Step label - with multi-line text wrapping
- const labelLines = wrapTextToLines(step.message, 25); // Longer text allowed
- labelLines.forEach((line, lineIndex) => {
- const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
- label.setAttribute('class', 'step-label');
- label.setAttribute('x', stepX);
- label.setAttribute('y', lineY - 35 + (lineIndex * 14)); // Multi-line spacing
- label.setAttribute('text-anchor', 'middle');
- label.setAttribute('font-size', '12'); // Larger font
- label.textContent = line;
- svg.appendChild(label);
- group.appendChild(label);
- });
-
- // Time label - larger and positioned better
- const timeLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
- timeLabel.setAttribute('class', 'step-time');
- timeLabel.setAttribute('x', stepX);
- timeLabel.setAttribute('y', lineY + 35);
- timeLabel.setAttribute('text-anchor', 'middle');
- timeLabel.setAttribute('font-size', '11'); // Larger time font
- timeLabel.textContent = `+${(step.relative_time_ms / 1000).toFixed(1)}s`;
- svg.appendChild(timeLabel);
- group.appendChild(timeLabel);
-
- // Step index number - larger and better positioned
- const indexLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
- indexLabel.setAttribute('class', 'step-index');
- indexLabel.setAttribute('x', stepX);
- indexLabel.setAttribute('y', lineY + 5);
- indexLabel.setAttribute('text-anchor', 'middle');
- indexLabel.setAttribute('font-size', '13'); // Larger index font
- indexLabel.setAttribute('font-weight', 'bold');
- indexLabel.setAttribute('fill', 'white'); // White text for better contrast
- indexLabel.textContent = (step.originalIndex + 1).toString();
- svg.appendChild(indexLabel);
- group.appendChild(indexLabel);
-
- // Add hover events
- group.addEventListener('mouseenter', (e) => showTooltip(e, step));
- group.addEventListener('mouseleave', hideTooltip);
- group.addEventListener('click', () => filterByStep(step));
-
- svg.appendChild(group);
+ const info = document.createElement("p");
+ info.textContent = `Found ${hookIds.length} unique webhook event${
+ hookIds.length !== 1 ? "s" : ""
+ }${repository ? ` for ${repository}` : ""}`;
+ info.style.margin = "8px 0 0 0";
+ info.style.color = "var(--timestamp-color)";
+ summaryElement.appendChild(info);
+
+ // Render hook ID list
+ const listElement = document.getElementById("prHookList");
+ if (!listElement) return;
+
+ // Clear existing content
+ while (listElement.firstChild) {
+ listElement.removeChild(listElement.firstChild);
+ }
+
+ if (hookIds.length === 0) {
+ const emptyMsg = document.createElement("p");
+ emptyMsg.style.textAlign = "center";
+ emptyMsg.style.color = "var(--timestamp-color)";
+ emptyMsg.textContent = "No webhook events found";
+ listElement.appendChild(emptyMsg);
+ return;
+ }
+
+ // Create clickable list items for each hook ID
+ hookIds.forEach((hookId, index) => {
+ const hookItem = document.createElement("div");
+ hookItem.className = "pr-hook-item";
+ hookItem.addEventListener("click", () => {
+ closePrModal();
+ showFlowModal(hookId);
});
+
+ const icon = document.createElement("span");
+ icon.className = "pr-hook-icon";
+ icon.textContent = "🔗";
+
+ const hookIdSpan = document.createElement("span");
+ hookIdSpan.className = "pr-hook-id";
+ hookIdSpan.textContent = `Event ${index + 1}: ${hookId}`;
+
+ hookItem.appendChild(icon);
+ hookItem.appendChild(hookIdSpan);
+ listElement.appendChild(hookItem);
});
}
-function renderTimeline(data) {
- // Update timeline information
- updateTimelineInfo(data);
+// Flow Modal loading and error helper functions
+function showFlowModalLoading() {
+ const summaryElement = document.getElementById("flowSummary");
+ const vizElement = document.getElementById("flowVisualization");
- // Handle empty state
- if (data.steps.length === 0) {
- renderEmptyTimeline();
- return;
+ if (summaryElement) {
+ while (summaryElement.firstChild) {
+ summaryElement.removeChild(summaryElement.firstChild);
+ }
+ const loadingDiv = document.createElement("div");
+ loadingDiv.className = "modal-loading";
+ loadingDiv.style.textAlign = "center";
+ loadingDiv.style.padding = "24px";
+ loadingDiv.style.color = "var(--timestamp-color)";
+
+ const spinner = document.createElement("div");
+ spinner.className = "loading-spinner";
+ spinner.textContent = "⏳";
+ spinner.style.fontSize = "32px";
+ spinner.style.marginBottom = "12px";
+
+ const text = document.createElement("div");
+ text.textContent = "Loading workflow data...";
+
+ loadingDiv.appendChild(spinner);
+ loadingDiv.appendChild(text);
+ summaryElement.appendChild(loadingDiv);
}
- // Calculate layout for multi-line timeline
- const layout = calculateMultiLineLayout(data.steps, data.total_duration_ms);
+ if (vizElement) {
+ while (vizElement.firstChild) {
+ vizElement.removeChild(vizElement.firstChild);
+ }
+ }
+}
+
+function showFlowModalError(errorMessage) {
+ const summaryElement = document.getElementById("flowSummary");
+ const vizElement = document.getElementById("flowVisualization");
- // Render the timeline visualization
- renderTimelineVisualization(layout, data);
+ if (summaryElement) {
+ while (summaryElement.firstChild) {
+ summaryElement.removeChild(summaryElement.firstChild);
+ }
+ const errorDiv = document.createElement("div");
+ errorDiv.className = "modal-error";
+ errorDiv.style.textAlign = "center";
+ errorDiv.style.padding = "24px";
+
+ const icon = document.createElement("div");
+ icon.style.fontSize = "48px";
+ icon.style.marginBottom = "12px";
+ icon.textContent = "⚠️";
+
+ const message = document.createElement("div");
+ message.style.color = "var(--error-color, #dc3545)";
+ message.style.fontSize = "16px";
+ message.style.marginBottom = "16px";
+ message.textContent = errorMessage;
+
+ const closeBtn = document.createElement("button");
+ closeBtn.textContent = "Close";
+ closeBtn.className = "btn-secondary";
+ closeBtn.style.padding = "8px 16px";
+ closeBtn.style.cursor = "pointer";
+ closeBtn.addEventListener("click", closeFlowModal);
+
+ errorDiv.appendChild(icon);
+ errorDiv.appendChild(message);
+ errorDiv.appendChild(closeBtn);
+ summaryElement.appendChild(errorDiv);
+ }
+
+ if (vizElement) {
+ while (vizElement.firstChild) {
+ vizElement.removeChild(vizElement.firstChild);
+ }
+ }
}
-function getStepType(message) {
- if (message.includes('completed successfully') || message.includes('success')) {
- return 'success';
- } else if (message.includes('failed') || message.includes('error')) {
- return 'failure';
- } else if (message.includes('Starting') || message.includes('Executing')) {
- return 'progress';
- } else {
- return 'info';
+// PR Modal loading and error helper functions
+function showPrModalLoading() {
+ const summaryElement = document.getElementById("prSummary");
+ const listElement = document.getElementById("prHookList");
+
+ if (summaryElement) {
+ while (summaryElement.firstChild) {
+ summaryElement.removeChild(summaryElement.firstChild);
+ }
+ const loadingDiv = document.createElement("div");
+ loadingDiv.className = "modal-loading";
+ loadingDiv.style.textAlign = "center";
+ loadingDiv.style.padding = "24px";
+ loadingDiv.style.color = "var(--timestamp-color)";
+
+ const spinner = document.createElement("div");
+ spinner.className = "loading-spinner";
+ spinner.textContent = "⏳";
+ spinner.style.fontSize = "32px";
+ spinner.style.marginBottom = "12px";
+
+ const text = document.createElement("div");
+ text.textContent = "Loading PR data...";
+
+ loadingDiv.appendChild(spinner);
+ loadingDiv.appendChild(text);
+ summaryElement.appendChild(loadingDiv);
+ }
+
+ if (listElement) {
+ while (listElement.firstChild) {
+ listElement.removeChild(listElement.firstChild);
+ }
}
}
-function truncateText(text, maxLength) {
- return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
+function showPrModalError(errorMessage) {
+ const summaryElement = document.getElementById("prSummary");
+ const listElement = document.getElementById("prHookList");
+
+ if (summaryElement) {
+ while (summaryElement.firstChild) {
+ summaryElement.removeChild(summaryElement.firstChild);
+ }
+ const errorDiv = document.createElement("div");
+ errorDiv.className = "modal-error";
+ errorDiv.style.textAlign = "center";
+ errorDiv.style.padding = "24px";
+
+ const icon = document.createElement("div");
+ icon.style.fontSize = "48px";
+ icon.style.marginBottom = "12px";
+ icon.textContent = "⚠️";
+
+ const message = document.createElement("div");
+ message.style.color = "var(--error-color, #dc3545)";
+ message.style.fontSize = "16px";
+ message.style.marginBottom = "16px";
+ message.textContent = errorMessage;
+
+ const closeBtn = document.createElement("button");
+ closeBtn.textContent = "Close";
+ closeBtn.className = "btn-secondary";
+ closeBtn.style.padding = "8px 16px";
+ closeBtn.style.cursor = "pointer";
+ closeBtn.addEventListener("click", closePrModal);
+
+ errorDiv.appendChild(icon);
+ errorDiv.appendChild(message);
+ errorDiv.appendChild(closeBtn);
+ summaryElement.appendChild(errorDiv);
+ }
+
+ if (listElement) {
+ while (listElement.firstChild) {
+ listElement.removeChild(listElement.firstChild);
+ }
+ }
}
-function calculateMultiLineLayout(steps, totalDuration) {
- // Layout configuration - much larger for better readability
- const stepsPerLine = 6; // Fewer steps per line for more space
- const stepSpacing = 200; // Much larger horizontal space between steps
- const lineHeight = 120; // Much larger vertical space between lines
- const lineWidth = stepsPerLine * stepSpacing;
+function groupStepsByTaskId(steps, flowCompletedSuccessfully = false) {
+ const redundantPatterns = [
+ "signature verification successful",
+ "processing webhook for repository:",
+ ];
+
+ const groups = [];
+ const ungrouped = [];
+ const taskMap = new Map();
+
+ const filteredSteps = steps
+ .map((step, originalIndex) => ({ step, originalIndex }))
+ .filter(({ step }) => {
+ const message = step.message ? step.message.toLowerCase() : "";
+ return !redundantPatterns.some((pattern) => message.includes(pattern));
+ });
- // Organize steps into lines
- const lines = [];
- for (let i = 0; i < steps.length; i += stepsPerLine) {
- const lineSteps = steps.slice(i, i + stepsPerLine).map((step, index) => ({
- ...step,
- originalIndex: i + index
- }));
- lines.push({ steps: lineSteps });
+ filteredSteps.forEach(({ step, originalIndex }) => {
+ const stepWithIndex = { ...step, original_index: originalIndex };
+
+ if (step.task_id) {
+ if (!taskMap.has(step.task_id)) {
+ taskMap.set(step.task_id, {
+ task_id: step.task_id,
+ task_title: step.task_title || step.task_id,
+ steps: [],
+ start_time: step.timestamp,
+ end_time: step.timestamp,
+ start_index: originalIndex,
+ });
+ }
+ const group = taskMap.get(step.task_id);
+ group.steps.push(stepWithIndex);
+ if (new Date(step.timestamp) > new Date(group.end_time)) {
+ group.end_time = step.timestamp;
+ }
+ } else {
+ ungrouped.push(stepWithIndex);
+ }
+ });
+
+ // Calculate duration and status for each group
+ taskMap.forEach((group) => {
+ const startMs = new Date(group.start_time).getTime();
+ const endMs = new Date(group.end_time).getTime();
+ group.duration_ms = endMs - startMs;
+
+ // Determine group status based on step levels and task_status field
+ // Priority: task_status field > level field > default based on flow completion
+ const hasErrorLevel = group.steps.some((s) => s.level === "ERROR");
+ const hasSuccessLevel = group.steps.some((s) => s.level === "SUCCESS");
+
+ // Check task_status field from log entries (more reliable than message text)
+ const finalTaskStatus = group.steps[group.steps.length - 1]?.task_status;
+
+ if (hasErrorLevel || finalTaskStatus === "failed") {
+ group.status = "error";
+ } else if (hasSuccessLevel || finalTaskStatus === "completed") {
+ group.status = "success";
+ } else if (finalTaskStatus === "in_progress" || finalTaskStatus === "processing") {
+ // task_status="processing" means the task is still running
+ // Only show as in-progress if flow hasn't completed (still running)
+ group.status = "in_progress";
+ } else {
+ // Default: if flow completed successfully overall, mark as success
+ group.status = flowCompletedSuccessfully ? "success" : "in_progress";
+ }
+
+ groups.push(group);
+ });
+
+ // Sort groups by start index to maintain chronological order
+ groups.sort((a, b) => a.start_index - b.start_index);
+
+ return { groups, ungrouped };
+}
+
+function renderFlowModal(data) {
+ // Render summary section using safe DOM methods
+ const summaryElement = document.getElementById("flowSummary");
+ if (!summaryElement) return;
+
+ // Clear existing content
+ while (summaryElement.firstChild) {
+ summaryElement.removeChild(summaryElement.firstChild);
}
- return {
- lines,
- lineHeight,
- lineWidth,
- stepSpacing,
- totalWidth: lineWidth,
- totalHeight: lines.length * lineHeight
+ const title = document.createElement("h3");
+ title.textContent = "Flow Overview";
+ summaryElement.appendChild(title);
+
+ const grid = document.createElement("div");
+ grid.className = "flow-summary-grid";
+
+ // Helper to create summary items safely
+ const createSummaryItem = (label, value) => {
+ const item = document.createElement("div");
+ item.className = "flow-summary-item";
+
+ const labelDiv = document.createElement("div");
+ labelDiv.className = "flow-summary-label";
+ labelDiv.textContent = label;
+
+ const valueDiv = document.createElement("div");
+ valueDiv.className = "flow-summary-value";
+ valueDiv.textContent = value;
+
+ item.appendChild(labelDiv);
+ item.appendChild(valueDiv);
+ return item;
};
-}
+ const duration =
+ data.total_duration_ms > 0
+ ? `${(data.total_duration_ms / 1000).toFixed(2)}s`
+ : "< 1s";
+
+ grid.appendChild(createSummaryItem("Hook ID", data.hook_id));
+ grid.appendChild(
+ createSummaryItem("Total Steps", data.step_count.toString()),
+ );
+ grid.appendChild(createSummaryItem("Duration", duration));
+ // Token spend is only available for webhooks processed after token tracking was added
+ if (data.token_spend !== undefined && data.token_spend !== null) {
+ grid.appendChild(
+ createSummaryItem("Token Spend", `${data.token_spend} API calls`),
+ );
+ } else {
+ // Show "N/A" for older webhooks that don't have token spend data
+ grid.appendChild(createSummaryItem("Token Spend", "N/A (older webhook)"));
+ }
+
+ if (data.steps[0] && data.steps[0].repository) {
+ grid.appendChild(createSummaryItem("Repository", data.steps[0].repository));
+ }
+
+ summaryElement.appendChild(grid);
+
+ // Render vertical flow visualization using safe DOM methods
+ const vizElement = document.getElementById("flowVisualization");
+ if (!vizElement) return;
+
+ // Clear existing content
+ while (vizElement.firstChild) {
+ vizElement.removeChild(vizElement.firstChild);
+ }
-function wrapTextToLines(text, maxCharacters) {
- // Smart text wrapping for timeline labels
- const words = text.split(' ');
- const lines = [];
- let currentLine = '';
+ if (data.steps.length === 0) {
+ const emptyMsg = document.createElement("p");
+ emptyMsg.style.textAlign = "center";
+ emptyMsg.style.color = "var(--timestamp-color)";
+ emptyMsg.textContent = "No workflow steps found";
+ vizElement.appendChild(emptyMsg);
+ return;
+ }
- for (const word of words) {
- const testLine = currentLine ? `${currentLine} ${word}` : word;
- if (testLine.length <= maxCharacters) {
- currentLine = testLine;
+ // Check if flow completed successfully (no errors or failed tasks)
+ const hasFailedTasks = data.steps.some(
+ (step) => step.level === "ERROR" || step.task_status === "failed",
+ );
+ const hasActiveTasks = data.steps.some(
+ (step) =>
+ step.task_status === "processing" || step.task_status === "in_progress",
+ );
+ const flowCompletedSuccessfully = !hasFailedTasks && !hasActiveTasks;
+
+ // Group steps by task_id and get groups and ungrouped steps
+ const { groups, ungrouped } = groupStepsByTaskId(data.steps, flowCompletedSuccessfully);
+
+ // Merge groups and ungrouped steps into a single array with original_index
+ const combinedEntries = [
+ // Map groups to entries with type "group" and original_index from start_index
+ ...groups.map((group) => ({
+ type: "group",
+ data: group,
+ original_index: group.start_index,
+ })),
+ // Map ungrouped steps to entries with type "step" and original_index
+ ...ungrouped.map((step) => ({
+ type: "step",
+ data: step,
+ original_index: step.original_index,
+ })),
+ ];
+
+ // Sort combined entries by original_index to preserve chronological order
+ combinedEntries.sort((a, b) => a.original_index - b.original_index);
+
+ // Render entries in chronological order
+ combinedEntries.forEach((entry) => {
+ if (entry.type === "group") {
+ renderTaskGroup(entry.data, vizElement);
} else {
- if (currentLine) {
- lines.push(currentLine);
- currentLine = word;
- } else {
- // Single word is too long, truncate it
- lines.push(word.substring(0, maxCharacters - 3) + '...');
- currentLine = '';
- }
+ renderSingleStep(entry.data, vizElement);
}
+ });
+
+ // Add final status (hasFailedTasks and hasActiveTasks already declared above)
+ const finalStatus = document.createElement("div");
+ finalStatus.className = hasFailedTasks
+ ? "flow-error"
+ : hasActiveTasks
+ ? "flow-in-progress"
+ : "flow-success";
+
+ const statusTitle = document.createElement("h3");
+ statusTitle.textContent = hasFailedTasks
+ ? "⚠️ Flow Completed with Errors"
+ : hasActiveTasks
+ ? "◷ Flow Still Running"
+ : "✓ Flow Completed Successfully";
+ finalStatus.appendChild(statusTitle);
+
+ if (hasFailedTasks) {
+ const errorMsg = document.createElement("div");
+ errorMsg.className = "flow-error-message";
+ errorMsg.textContent =
+ "Some steps encountered errors. Check the logs for details.";
+ finalStatus.appendChild(errorMsg);
}
- if (currentLine) {
- lines.push(currentLine);
+ vizElement.appendChild(finalStatus);
+}
+
+function renderTaskGroup(group, parentElement) {
+ const taskGroupContainer = document.createElement("div");
+ taskGroupContainer.className = "task-group";
+
+ // Create group header
+ const groupHeader = document.createElement("div");
+ groupHeader.className = "task-group-header";
+ groupHeader.style.cursor = "pointer";
+
+ // Collapse arrow
+ const arrow = document.createElement("span");
+ arrow.className = "task-group-arrow collapsed";
+ arrow.textContent = "►";
+
+ // Status icon
+ const statusIcon = document.createElement("span");
+ statusIcon.className = `task-group-status task-group-${group.status}`;
+ if (group.status === "success") {
+ statusIcon.textContent = "✓";
+ } else if (group.status === "error") {
+ statusIcon.textContent = "✗";
+ } else {
+ statusIcon.textContent = "◷";
}
- // Return max 2 lines to prevent overcrowding
- return lines.slice(0, 2);
+ // Task title
+ const taskTitle = document.createElement("span");
+ taskTitle.className = "task-group-title";
+ taskTitle.textContent = group.task_title;
+
+ // Duration
+ const duration = document.createElement("span");
+ duration.className = "task-group-duration";
+ duration.textContent = `${(group.duration_ms / 1000).toFixed(2)}s`;
+
+ groupHeader.appendChild(arrow);
+ groupHeader.appendChild(statusIcon);
+ groupHeader.appendChild(taskTitle);
+ groupHeader.appendChild(duration);
+
+ // Create nested steps container
+ const stepsContainer = document.createElement("div");
+ stepsContainer.className = "task-group-steps";
+ stepsContainer.style.display = "none"; // Start collapsed
+
+ group.steps.forEach((step) => {
+ renderSingleStep(step, stepsContainer, true);
+ });
+
+ // Toggle expand/collapse
+ groupHeader.addEventListener("click", () => {
+ const isCollapsed = stepsContainer.style.display === "none";
+ stepsContainer.style.display = isCollapsed ? "block" : "none";
+ arrow.className = isCollapsed
+ ? "task-group-arrow expanded"
+ : "task-group-arrow collapsed";
+ });
+
+ taskGroupContainer.appendChild(groupHeader);
+ taskGroupContainer.appendChild(stepsContainer);
+ parentElement.appendChild(taskGroupContainer);
}
-function showTooltip(event, step) {
- const tooltip = document.getElementById('timelineTooltip');
+function renderSingleStep(step, parentElement, isNested = false) {
+ const stepType = getStepType(step.level);
const timeFromStart = `+${(step.relative_time_ms / 1000).toFixed(2)}s`;
+ const timestamp = new Date(step.timestamp).toLocaleTimeString();
- tooltip.innerHTML = `
-
Step: ${step.message}
-
Time: ${timeFromStart}
-
Timestamp: ${new Date(step.timestamp).toLocaleTimeString()}
- ${step.pr_number ? `
PR: #${step.pr_number}
` : ''}
-
Click to filter logs by this step
- `;
+ const flowStepContainer = document.createElement("div");
+ flowStepContainer.className = isNested
+ ? "flow-step-container nested"
+ : "flow-step-container";
- const rect = event.target.getBoundingClientRect();
- const containerRect = document.getElementById('timelineSection').getBoundingClientRect();
+ const flowStep = document.createElement("div");
+ flowStep.className = `flow-step ${stepType}`;
+ flowStep.setAttribute("data-step-index", step.original_index.toString());
+ flowStep.style.cursor = "pointer";
+ flowStep.addEventListener("click", () => filterByStep(step.original_index));
- tooltip.style.left = (rect.left - containerRect.left + rect.width / 2) + 'px';
- tooltip.style.top = (rect.top - containerRect.top - tooltip.offsetHeight - 10) + 'px';
- tooltip.style.display = 'block';
-}
+ const stepNumber = document.createElement("div");
+ stepNumber.className = "flow-step-number";
+ stepNumber.textContent = (step.original_index + 1).toString();
-function hideTooltip() {
- document.getElementById('timelineTooltip').style.display = 'none';
-}
+ const stepContent = document.createElement("div");
+ stepContent.className = "flow-step-content";
-function filterByStep(step) {
- // Set search filter to find this specific step message
- document.getElementById('searchFilter').value = step.message.substring(0, 30);
- debounceFilter();
+ const stepTitle = document.createElement("div");
+ stepTitle.className = "flow-step-title";
+ stepTitle.textContent = step.message;
+
+ const stepTime = document.createElement("div");
+ stepTime.className = "flow-step-time";
+
+ const timestampSpan = document.createElement("span");
+ timestampSpan.textContent = timestamp;
+
+ const durationSpan = document.createElement("span");
+ durationSpan.className = "flow-step-duration";
+ durationSpan.textContent = timeFromStart;
+
+ stepTime.appendChild(timestampSpan);
+ stepTime.appendChild(durationSpan);
+
+ stepContent.appendChild(stepTitle);
+ stepContent.appendChild(stepTime);
+
+ flowStep.appendChild(stepNumber);
+ flowStep.appendChild(stepContent);
+
+ // Create logs container for this step (hidden by default)
+ const stepLogsContainer = document.createElement("div");
+ stepLogsContainer.className = "step-logs-container";
+ stepLogsContainer.style.display = "none";
+ stepLogsContainer.setAttribute(
+ "data-step-logs",
+ step.original_index.toString(),
+ );
+
+ flowStepContainer.appendChild(flowStep);
+ flowStepContainer.appendChild(stepLogsContainer);
+
+ parentElement.appendChild(flowStepContainer);
}
-// Auto-show timeline when hook ID filter is applied
-function checkForTimelineDisplay() {
- const hookId = document.getElementById('hookIdFilter').value.trim();
- if (hookId) {
- showTimeline(hookId);
+function getStepType(level) {
+ // Accept level parameter to determine step type based on log level
+ const levelUpper = typeof level === "string" ? level.toUpperCase() : "";
+
+ if (levelUpper === "SUCCESS") {
+ return "success";
+ } else if (levelUpper === "ERROR") {
+ return "error";
+ } else if (levelUpper === "WARNING") {
+ return "warning";
} else {
- hideTimeline();
+ return "info";
}
}
-// Add timeline check to hook ID filter specifically
-document.getElementById('hookIdFilter').addEventListener('input', () => {
- setTimeout(checkForTimelineDisplay, 300); // Small delay to let the value settle
-});
+async function filterByStep(stepIndex) {
+ if (!currentFlowData || !currentFlowData.steps[stepIndex]) return;
+
+ const step = currentFlowData.steps[stepIndex];
+ const logsContainer = document.querySelector(
+ `[data-step-logs="${stepIndex}"]`,
+ );
+
+ if (!logsContainer) return;
+
+ // Toggle: if this step's logs are already showing, hide them
+ if (logsContainer.style.display === "block") {
+ logsContainer.style.display = "none";
+ logsContainer.innerHTML = "";
+ return;
+ }
-// Also check on initial load
-setTimeout(checkForTimelineDisplay, 1000);
+ // Hide all other step logs
+ document.querySelectorAll(".step-logs-container").forEach((container) => {
+ container.style.display = "none";
+ container.innerHTML = "";
+ });
+
+ // Show logs for this step
+ await showStepLogsInModal(step, logsContainer);
+}
+
+async function showStepLogsInModal(step, logsContainer) {
+ if (!logsContainer) return;
+
+ // Show loading state
+ logsContainer.style.display = "block";
+ logsContainer.textContent = "Loading logs...";
+
+ // Cancel previous fetch if still in progress
+ if (currentStepLogsController) {
+ currentStepLogsController.abort();
+ }
+
+ // Create new AbortController for this fetch
+ currentStepLogsController = new AbortController();
+
+ try {
+ // Using full message for precision to avoid ambiguous matches
+ const searchText = step.message;
+ const hookId = currentFlowData.hook_id;
+
+ const params = new URLSearchParams({
+ hook_id: hookId,
+ search: searchText,
+ limit: "100",
+ });
+
+ const response = await fetch(`/logs/api/entries?${params}`, {
+ signal: currentStepLogsController.signal,
+ });
+ if (!response.ok) throw new Error("Failed to fetch logs");
+
+ const data = await response.json();
+
+ // Clear and display logs using safe DOM methods
+ logsContainer.textContent = "";
+
+ if (data.entries.length === 0) {
+ const emptyMsg = document.createElement("div");
+ emptyMsg.textContent = "No logs found for this step";
+ emptyMsg.style.textAlign = "center";
+ emptyMsg.style.color = "var(--timestamp-color)";
+ emptyMsg.style.padding = "12px";
+ logsContainer.appendChild(emptyMsg);
+ return;
+ }
+
+ // Render log entries
+ data.entries.forEach((entry) => {
+ const logEntry = document.createElement("div");
+ const allowed = ["DEBUG", "INFO", "WARNING", "ERROR", "STEP", "SUCCESS"];
+ const safeLevel = allowed.includes(entry.level) ? entry.level : "INFO";
+ logEntry.className = `log-entry ${safeLevel}`;
+
+ const timestamp = document.createElement("span");
+ timestamp.className = "timestamp";
+ timestamp.textContent = new Date(entry.timestamp).toLocaleString();
+
+ const level = document.createElement("span");
+ level.className = "level";
+ level.textContent = ` [${entry.level}] `;
+
+ const message = document.createElement("span");
+ message.className = "message";
+ message.textContent = entry.message;
+
+ logEntry.appendChild(timestamp);
+ logEntry.appendChild(level);
+ logEntry.appendChild(message);
+
+ logsContainer.appendChild(logEntry);
+ });
+
+ // Scroll to the logs container
+ logsContainer.scrollIntoView({ behavior: "smooth", block: "nearest" });
+ } catch (error) {
+ if (error.name === "AbortError") {
+ // Request was cancelled, ignore silently
+ return;
+ }
+ console.error("Error fetching step logs:", error);
+ logsContainer.textContent = "Error loading logs";
+ }
+}
diff --git a/webhook_server/web/templates/log_viewer.html b/webhook_server/web/templates/log_viewer.html
index 4fbcab23f..315a3a349 100644
--- a/webhook_server/web/templates/log_viewer.html
+++ b/webhook_server/web/templates/log_viewer.html
@@ -1,117 +1,153 @@
-
+
-
-
-
+
+
+
GitHub Webhook Server - Log Viewer
-
-
-
+
+
+
-