From 6dfc2d0104e846cd26a15c3acac417f423870f81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A1=D0=B5=D1=80=D0=B3=D0=B5=D0=B9=20=D0=90=D0=BD=D1=82?= =?UTF-8?q?=D1=80=D0=BE=D0=BF=D0=BE=D0=B2?= Date: Sat, 16 Aug 2025 12:52:58 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D1=81=D0=B2=D0=BE=D1=80=D0=B0=D1=87=D0=B8=D0=B2?= =?UTF-8?q?=D0=B0=D0=B5=D0=BC=D1=8B=D0=B5=20=D1=81=D0=B5=D0=BA=D1=86=D0=B8?= =?UTF-8?q?=D0=B8=20=D0=B8=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D0=B0=D1=86?= =?UTF-8?q?=D0=B8=D1=8E=20=D0=BB=D0=BE=D0=B3=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Добавлены сворачиваемые секции для всех групп контролов - Добавлены кнопки сворачивания с иконками - Сохранение состояния секций в localStorage - Исправлена проблема с LogLevels - добавлена буферизация всех логов - Логи теперь восстанавливаются при включении уровней обратно - Улучшен CSS для сворачиваемых секций с анимациями - Добавлены hover эффекты для заголовков секций - Оптимизирована производительность фильтрации Автор: Сергей Антропов Сайт: https://devops.org.ru --- templates/index.html | 285 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 226 insertions(+), 59 deletions(-) diff --git a/templates/index.html b/templates/index.html index fade638..1c68375 100644 --- a/templates/index.html +++ b/templates/index.html @@ -73,6 +73,77 @@ a{color:var(--link)} margin-bottom: 0; } +/* Collapsible sections */ +.control-group.collapsible { + border: 1px solid var(--border); + border-radius: 8px; + overflow: hidden; +} + +.control-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; + background: var(--chip); + cursor: pointer; + user-select: none; + transition: background-color 0.2s ease; +} + +.control-header:hover { + background: var(--tab-active); +} + +.control-header label { + display: block; + font-size: 11px; + color: var(--muted); + margin: 0; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.collapse-btn { + background: none; + border: none; + color: var(--muted); + cursor: pointer; + padding: 4px; + border-radius: 4px; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.collapse-btn:hover { + background: var(--border); + color: var(--fg); +} + +.collapse-btn i { + font-size: 12px; + transition: transform 0.2s ease; +} + +.control-group.collapsed .collapse-btn i { + transform: rotate(-90deg); +} + +.control-content { + padding: 16px; + transition: all 0.3s ease; + overflow: hidden; +} + +.control-group.collapsed .control-content { + padding: 0 16px; + max-height: 0; + opacity: 0; +} + .control-group label { display: block; font-size: 11px; @@ -445,74 +516,116 @@ footer{position:fixed;right:10px;bottom:10px;opacity:.6;font-size:11px}
-
- - +
+
+ + +
+
+ +
-
- -
-
- - -
-
- - -
-
- - -
-
- - +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
-
- - +
+
+ + +
+
+ +
-
- -
-
- - -
-
- - -
-
- - +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
-
- - +
+
+ + +
+
+ +
-
- -
- - - +
+
+ + +
+
+
+ + + +
@@ -634,11 +747,11 @@ function refreshAllLogs() { const obj = state.open[id]; if (!obj || !obj.logEl) return; - // Получаем все строки логов - const lines = obj.logEl.innerHTML.split('\n'); + // Получаем все строки логов из буфера + const allLines = obj.allLogs || []; const filteredLines = []; - lines.forEach(line => { + allLines.forEach(line => { if (line.trim() === '') return; // Проверяем уровень логирования @@ -987,16 +1100,30 @@ function openWs(svc, panel){ if (cls==='ok') counters.info++; if (cls==='warn') counters.warn++; if (cls==='err') counters.err++; - if (!allowedByLevel(cls)) return; - if (!applyFilter(line)) return; + const html = `${ansiToHtml(line)}\n`; const obj = state.open[id]; if (!obj) return; + + // Сохраняем все логи в буфере + if (!obj.allLogs) obj.allLogs = []; + obj.allLogs.push(html); + + // Ограничиваем размер буфера + if (obj.allLogs.length > 10000) { + obj.allLogs = obj.allLogs.slice(-5000); + } + + // Проверяем фильтры + if (!allowedByLevel(cls)) return; + if (!applyFilter(line)) return; + if (els.pause.checked){ obj.pausedBuffer.push(html); if (obj.pausedBuffer.length>5000) obj.pausedBuffer.shift(); return; } + obj.logEl.insertAdjacentHTML('beforeend', html); if (els.autoscroll.checked) obj.wrapEl.scrollTop = obj.wrapEl.scrollHeight; @@ -1188,6 +1315,7 @@ if (els.groupBtn && els.groupBtn.onclick !== null) { els.clearBtn.onclick = ()=> { Object.values(state.open).forEach(o => { if (o.logEl) o.logEl.textContent = ''; + if (o.allLogs) o.allLogs = []; // Очищаем буфер логов }); // Очищаем современный интерфейс if (els.logContent) { @@ -1209,6 +1337,45 @@ els.projectSelect.onchange = fetchServices; els.mobileToggle.onclick = () => { document.querySelector('.sidebar').classList.toggle('open'); }; + +// Collapsible sections +document.addEventListener('DOMContentLoaded', () => { + // Обработчики для сворачивания секций + document.querySelectorAll('.control-header').forEach(header => { + header.addEventListener('click', (e) => { + if (e.target.closest('.collapse-btn')) return; // Не сворачиваем при клике на кнопку + + const group = header.closest('.control-group'); + group.classList.toggle('collapsed'); + + // Сохраняем состояние в localStorage + const section = group.dataset.section; + localStorage.setItem(`lb_collapsed_${section}`, group.classList.contains('collapsed')); + }); + }); + + // Обработчики для кнопок сворачивания + document.querySelectorAll('.collapse-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + e.stopPropagation(); + const group = btn.closest('.control-group'); + group.classList.toggle('collapsed'); + + // Сохраняем состояние в localStorage + const section = group.dataset.section; + localStorage.setItem(`lb_collapsed_${section}`, group.classList.contains('collapsed')); + }); + }); + + // Восстанавливаем состояние секций из localStorage + document.querySelectorAll('.control-group.collapsible').forEach(group => { + const section = group.dataset.section; + const isCollapsed = localStorage.getItem(`lb_collapsed_${section}`) === 'true'; + if (isCollapsed) { + group.classList.add('collapsed'); + } + }); +}); els.snapshotBtn.onclick = ()=>{ if (state.current) { sendSnapshot(state.current.id);