rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix deployment logs flickering and HTML entity encoding (#7689)

Browse source
This commit is contained in:
Andras Bacsai 2025-12-18 12:53:02 +01:00 committed by GitHub
commit 922c0a9e7c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 90 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/Livewire/Project/Application/Deployment/Show.php
View file

@ -105,16 +105,7 @@ public function polling()
public function getLogLinesProperty() public function getLogLinesProperty()
{ {
return decode_remote_command_output($this->application_deployment_queue)->map(function ($logLine) { return decode_remote_command_output($this->application_deployment_queue);
$logLine['line'] = e($logLine['line']);
$logLine['line'] = preg_replace(
'/(https?:\/\/[^\s]+)/',
'<a href="$1" target="_blank" rel="noopener noreferrer" class="underline text-neutral-400">$1</a>',
$logLine['line'],
);
return $logLine;
});
} }
public function copyLogs(): string public function copyLogs(): string

158
resources/views/livewire/project/application/deployment/show.blade.php
View file

@ -11,13 +11,8 @@
rafId: null, rafId: null,
showTimestamps: true, showTimestamps: true,
searchQuery: '', searchQuery: '',
renderTrigger: 0, matchCount: 0,
deploymentId: '{{ $application_deployment_queue->deployment_uuid ?? 'deployment' }}', deploymentId: '{{ $application_deployment_queue->deployment_uuid ?? 'deployment' }}',
// Cache for decoded HTML to avoid repeated DOMParser calls
decodeCache: new Map(),
// Cache for match count to avoid repeated DOM queries
matchCountCache: null,
lastSearchQuery: '',
makeFullscreen() { makeFullscreen() {
this.fullscreen = !this.fullscreen; this.fullscreen = !this.fullscreen;
}, },
@ -31,7 +26,6 @@
if (!this.alwaysScroll) return; if (!this.alwaysScroll) return;
this.rafId = requestAnimationFrame(() => { this.rafId = requestAnimationFrame(() => {
this.scrollToBottom(); this.scrollToBottom();
// Schedule next scroll after a reasonable delay (250ms instead of 100ms)
if (this.alwaysScroll) { if (this.alwaysScroll) {
setTimeout(() => this.scheduleScroll(), 250); setTimeout(() => this.scheduleScroll(), 250);
} }
@ -48,10 +42,6 @@
} }
} }
}, },
matchesSearch(text) {
if (!this.searchQuery.trim()) return true;
return text.toLowerCase().includes(this.searchQuery.toLowerCase());
},
hasActiveLogSelection() { hasActiveLogSelection() {
const selection = window.getSelection(); const selection = window.getSelection();
if (!selection || selection.isCollapsed || !selection.toString().trim()) { if (!selection || selection.isCollapsed || !selection.toString().trim()) {
@ -63,86 +53,59 @@
return logsContainer.contains(range.commonAncestorContainer); return logsContainer.contains(range.commonAncestorContainer);
}, },
decodeHtml(text) { decodeHtml(text) {
// Return cached result if available const doc = new DOMParser().parseFromString(text, 'text/html');
if (this.decodeCache.has(text)) { return doc.documentElement.textContent;
return this.decodeCache.get(text);
}
// Decode HTML entities with max iteration limit
let decoded = text;
let prev = '';
let iterations = 0;
const maxIterations = 3;
while (decoded !== prev && iterations < maxIterations) {
prev = decoded;
const doc = new DOMParser().parseFromString(decoded, 'text/html');
decoded = doc.documentElement.textContent;
iterations++;
}
// Cache the result (limit cache size to prevent memory bloat)
if (this.decodeCache.size > 5000) {
// Clear oldest entries when cache gets too large
const firstKey = this.decodeCache.keys().next().value;
this.decodeCache.delete(firstKey);
}
this.decodeCache.set(text, decoded);
return decoded;
}, },
renderHighlightedLog(el, text) { highlightText(el, text, query) {
// Skip re-render if user has text selected in logs if (this.hasActiveLogSelection()) return;
if (el.textContent && this.hasActiveLogSelection()) {
return;
}
const decoded = this.decodeHtml(text);
el.textContent = ''; el.textContent = '';
const lowerText = text.toLowerCase();
if (!this.searchQuery.trim()) {
el.textContent = decoded;
return;
}
const query = this.searchQuery.toLowerCase();
const lowerText = decoded.toLowerCase();
let lastIndex = 0; let lastIndex = 0;
let index = lowerText.indexOf(query, lastIndex); let index = lowerText.indexOf(query, lastIndex);
while (index !== -1) { while (index !== -1) {
if (index > lastIndex) { if (index > lastIndex) {
el.appendChild(document.createTextNode(decoded.substring(lastIndex, index))); el.appendChild(document.createTextNode(text.substring(lastIndex, index)));
} }
const mark = document.createElement('span'); const mark = document.createElement('span');
mark.className = 'log-highlight'; mark.className = 'log-highlight';
mark.textContent = decoded.substring(index, index + this.searchQuery.length); mark.textContent = text.substring(index, index + query.length);
el.appendChild(mark); el.appendChild(mark);
lastIndex = index + query.length;
lastIndex = index + this.searchQuery.length;
index = lowerText.indexOf(query, lastIndex); index = lowerText.indexOf(query, lastIndex);
} }
if (lastIndex < decoded.length) { if (lastIndex < text.length) {
el.appendChild(document.createTextNode(decoded.substring(lastIndex))); el.appendChild(document.createTextNode(text.substring(lastIndex)));
} }
}, },
getMatchCount() { applySearch() {
if (!this.searchQuery.trim()) return 0;
// Return cached count if search query hasn't changed
if (this.lastSearchQuery === this.searchQuery && this.matchCountCache !== null) {
return this.matchCountCache;
}
const logs = document.getElementById('logs'); const logs = document.getElementById('logs');
if (!logs) return 0; if (!logs) return;
const lines = logs.querySelectorAll('[data-log-line]'); const lines = logs.querySelectorAll('[data-log-line]');
const query = this.searchQuery.trim().toLowerCase();
let count = 0; let count = 0;
const query = this.searchQuery.toLowerCase();
lines.forEach(line => { lines.forEach(line => {
if (line.dataset.logContent && line.dataset.logContent.toLowerCase().includes(query)) { const content = (line.dataset.logContent || '').toLowerCase();
count++; const textSpan = line.querySelector('[data-line-text]');
const matches = !query || content.includes(query);
line.classList.toggle('hidden', !matches);
if (matches && query) count++;
if (textSpan) {
const originalText = this.decodeHtml(textSpan.dataset.lineText || '');
if (!query) {
textSpan.textContent = originalText;
} else if (matches) {
this.highlightText(textSpan, originalText, query);
}
} }
}); });
this.matchCountCache = count;
this.lastSearchQuery = this.searchQuery; this.matchCount = query ? count : 0;
return count;
}, },
downloadLogs() { downloadLogs() {
const logs = document.getElementById('logs'); const logs = document.getElementById('logs');
@ -173,35 +136,30 @@
} }
}, },
init() { init() {
// Prevent Livewire from morphing logs container when text is selected // Watch search query changes
Livewire.hook('morph.updating', ({ el, component, toEl, skip }) => { this.$watch('searchQuery', () => {
if (el.id === 'logs' && this.hasActiveLogSelection()) { this.applySearch();
skip(); });
// Apply search after Livewire updates
Livewire.hook('morph.updated', ({ el }) => {
if (el.id === 'logs') {
this.$nextTick(() => {
this.applySearch();
if (this.alwaysScroll) {
this.scrollToBottom();
}
});
} }
}); });
// Re-render logs after Livewire updates (debounced)
let renderTimeout = null;
const debouncedRender = () => {
clearTimeout(renderTimeout);
renderTimeout = setTimeout(() => {
this.matchCountCache = null; // Invalidate match cache on new content
this.renderTrigger++;
}, 100);
};
document.addEventListener('livewire:navigated', () => {
this.$nextTick(debouncedRender);
});
Livewire.hook('commit', ({ succeed }) => {
succeed(() => {
this.$nextTick(debouncedRender);
});
});
// Stop auto-scroll when deployment finishes // Stop auto-scroll when deployment finishes
Livewire.on('deploymentFinished', () => { Livewire.on('deploymentFinished', () => {
setTimeout(() => { setTimeout(() => {
this.stopScroll(); this.stopScroll();
}, 500); }, 500);
}); });
// Start auto-scroll if deployment is in progress // Start auto-scroll if deployment is in progress
if (this.alwaysScroll) { if (this.alwaysScroll) {
this.scheduleScroll(); this.scheduleScroll();
@ -229,7 +187,7 @@ class="flex items-center justify-between gap-2 px-4 py-2 border-b dark:border-co
<span class="dark:text-warning">{{ Str::headline(data_get($application_deployment_queue, 'status')) }}</span> <span class="dark:text-warning">{{ Str::headline(data_get($application_deployment_queue, 'status')) }}</span>
</div> </div>
@endif @endif
<span x-show="searchQuery.trim()" x-text="getMatchCount() + ' matches'" <span x-show="searchQuery.trim()" x-text="matchCount + ' matches'"
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"></span> class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"></span>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@ -324,7 +282,7 @@ class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-
class="flex flex-col overflow-y-auto p-2 px-4 min-h-4 scrollbar" class="flex flex-col overflow-y-auto p-2 px-4 min-h-4 scrollbar"
:class="fullscreen ? 'flex-1' : 'max-h-[30rem]'"> :class="fullscreen ? 'flex-1' : 'max-h-[30rem]'">
<div id="logs" class="flex flex-col font-mono"> <div id="logs" class="flex flex-col font-mono">
<div x-show="searchQuery.trim() && getMatchCount() === 0" <div x-show="searchQuery.trim() && matchCount === 0"
class="text-gray-500 dark:text-gray-400 py-2"> class="text-gray-500 dark:text-gray-400 py-2">
No matches found. No matches found.
</div> </div>
@ -334,19 +292,19 @@ class="text-gray-500 dark:text-gray-400 py-2">
$searchableContent = $line['timestamp'] . ' ' . $lineContent; $searchableContent = $line['timestamp'] . ' ' . $lineContent;
@endphp @endphp
<div data-log-line data-log-content="{{ htmlspecialchars($searchableContent) }}" <div data-log-line data-log-content="{{ htmlspecialchars($searchableContent) }}"
x-effect="renderTrigger; searchQuery; $el.classList.toggle('hidden', !matchesSearch($el.dataset.logContent))" @class([ @class([
'mt-2' => isset($line['command']) && $line['command'], 'mt-2' => isset($line['command']) && $line['command'],
'flex gap-2 log-line', 'flex gap-2 log-line',
])> ])>
<span x-show="showTimestamps" <span x-show="showTimestamps"
class="shrink-0 text-gray-500">{{ $line['timestamp'] }}</span> class="shrink-0 text-gray-500">{{ $line['timestamp'] }}</span>
<span data-line-text="{{ htmlspecialchars($lineContent) }}" @class([ <span data-line-text="{{ htmlspecialchars($lineContent) }}"
'text-success dark:text-warning' => $line['hidden'], @class([
'text-red-500' => $line['stderr'], 'text-success dark:text-warning' => $line['hidden'],
'font-bold' => isset($line['command']) && $line['command'], 'text-red-500' => $line['stderr'],
'whitespace-pre-wrap', 'font-bold' => isset($line['command']) && $line['command'],
]) 'whitespace-pre-wrap',
x-effect="renderTrigger; searchQuery; renderHighlightedLog($el, $el.dataset.lineText)"></span> ])>{{ $lineContent }}</span>
</div> </div>
@empty @empty
<span class="font-mono text-neutral-400 mb-2">No logs yet.</span> <span class="font-mono text-neutral-400 mb-2">No logs yet.</span>

44
resources/views/livewire/project/shared/get-logs.blade.php
View file

@ -104,6 +104,10 @@
const range = selection.getRangeAt(0); const range = selection.getRangeAt(0);
return logsContainer.contains(range.commonAncestorContainer); return logsContainer.contains(range.commonAncestorContainer);
}, },
decodeHtml(text) {
const doc = new DOMParser().parseFromString(text, 'text/html');
return doc.documentElement.textContent;
},
applySearch() { applySearch() {
const logs = document.getElementById('logs'); const logs = document.getElementById('logs');
if (!logs) return; if (!logs) return;
@ -121,7 +125,7 @@
// Update highlighting // Update highlighting
if (textSpan) { if (textSpan) {
const originalText = textSpan.dataset.lineText || ''; const originalText = this.decodeHtml(textSpan.dataset.lineText || '');
if (!query) { if (!query) {
textSpan.textContent = originalText; textSpan.textContent = originalText;
} else if (matches) { } else if (matches) {
@ -188,16 +192,28 @@
this.applySearch(); this.applySearch();
}); });
// Apply colors after Livewire updates // Handler for applying colors and search after DOM changes
const applyAfterUpdate = () => {
this.$nextTick(() => {
this.applyColorLogs();
this.applySearch();
if (this.alwaysScroll) {
this.scrollToBottom();
}
});
};
// Apply colors after Livewire updates (existing content)
Livewire.hook('morph.updated', ({ el }) => { Livewire.hook('morph.updated', ({ el }) => {
if (el.id === 'logs') { if (el.id === 'logs') {
this.$nextTick(() => { applyAfterUpdate();
this.applyColorLogs(); }
this.applySearch(); });
if (this.alwaysScroll) {
this.scrollToBottom(); // Apply colors after Livewire adds new content (initial load)
} Livewire.hook('morph.added', ({ el }) => {
}); if (el.id === 'logs') {
applyAfterUpdate();
} }
}); });
} }
@ -375,7 +391,7 @@ class="flex overflow-y-auto overflow-x-hidden flex-col px-4 py-2 w-full min-w-0
class="text-gray-500 dark:text-gray-400 py-2"> class="text-gray-500 dark:text-gray-400 py-2">
No matches found. No matches found.
</div> </div>
@foreach ($displayLines as $line) @foreach ($displayLines as $index => $line)
@php @php
// Parse timestamp from log line (ISO 8601 format: 2025-12-04T11:48:39.136764033Z) // Parse timestamp from log line (ISO 8601 format: 2025-12-04T11:48:39.136764033Z)
$timestamp = ''; $timestamp = '';
@ -392,11 +408,13 @@ class="text-gray-500 dark:text-gray-400 py-2">
$monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; $monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$monthName = $monthNames[(int)$month - 1] ?? $month; $monthName = $monthNames[(int)$month - 1] ?? $month;
// Format: 2025-Dec-04 09:44:58.198879 // Format for display: 2025-Dec-04 09:44:58
$timestamp = "{$year}-{$monthName}-{$day} {$time}.{$microseconds}"; $timestamp = "{$year}-{$monthName}-{$day} {$time}";
// Include microseconds in key for uniqueness
$lineKey = "{$timestamp}.{$microseconds}";
} }
@endphp @endphp
<div data-log-line data-log-content="{{ $line }}" class="flex gap-2 log-line"> <div wire:key="{{ $lineKey ?? 'line-' . $index }}" data-log-line data-log-content="{{ $line }}" class="flex gap-2 log-line">
@if ($timestamp && $showTimeStamps) @if ($timestamp && $showTimeStamps)
<span class="shrink-0 text-gray-500">{{ $timestamp }}</span> <span class="shrink-0 text-gray-500">{{ $timestamp }}</span>
@endif @endif