feat: Enhance WsUpdateModal with improved message handling, auto-scroll functionality, and log management features for better user experience

frontend/src/components/WsUpdateModal.jsx

@@ -1,11 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
-import { IconX, IconPlayerPlay, IconPlugConnected } from '@tabler/icons-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { IconX, IconPlayerPlay, IconPlayerPause, IconPlugConnected, IconCopy, IconTrash, IconClock } from '@tabler/icons-react';
 
 function WsUpdateModal({ show, url, onClose }) {
-  const [messages, setMessages] = useState([]);
+  const [rawMessages, setRawMessages] = useState([]);
   const [status, setStatus] = useState('connecting'); // connecting | open | closed | error
   const wsRef = useRef(null);
   const bottomRef = useRef(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [startedAt, setStartedAt] = useState(null);
 
   useEffect(() => {
     if (!show) return;
@@ -16,7 +18,20 @@ function WsUpdateModal({ show, url, onClose }) {
       ws.onopen = () => setStatus('open');
       ws.onmessage = (evt) => {
         const text = typeof evt.data === 'string' ? evt.data : '[binary]';
-        setMessages((prev) => [...prev, text]);
+        // Пробуем распарсить JSON после префикса "$ "
+        let parsed = null;
+        let clean = text;
+        if (text.startsWith('$ ')) {
+          const jsonPart = text.slice(2);
+          try {
+            parsed = JSON.parse(jsonPart);
+            clean = parsed?.line || parsed?.event || jsonPart;
+            if (parsed?.event === 'start' && parsed?.ts) {
+              setStartedAt(new Date(parsed.ts));
+            }
+          } catch {}
+        }
+        setRawMessages((prev) => [...prev, { text: clean, json: parsed }]);
       };
       ws.onerror = () => setStatus('error');
       ws.onclose = () => setStatus('closed');
@@ -30,8 +45,16 @@ function WsUpdateModal({ show, url, onClose }) {
   }, [show, url]);
 
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages, show]);
+    if (autoScroll) bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [rawMessages, show, autoScroll]);
+
+  const plainLog = useMemo(() => rawMessages.map(m => (typeof m.text === 'string' ? m.text : '')).join('\n'), [rawMessages]);
+
+  const elapsedMs = useMemo(() => {
+    if (!startedAt || rawMessages.length === 0) return null;
+    const lastTs = Date.now();
+    return lastTs - startedAt.getTime();
+  }, [startedAt, rawMessages]);
 
   if (!show) return null;
 
@@ -41,26 +64,51 @@ function WsUpdateModal({ show, url, onClose }) {
         <div className="modal-content">
           <div className="modal-header">
             <h5 className="modal-title d-flex align-items-center">
-              <IconPlugConnected className="me-2" /> Online-обновление BGP
+              <IconPlugConnected className="me-2" /> Логи запуска
               <span className={`badge ms-2 ${status === 'open' ? 'bg-green-lt text-green' : status === 'connecting' ? 'bg-orange-lt text-orange' : status === 'error' ? 'bg-red-lt text-red' : 'bg-secondary-lt text-secondary'}`}>{status}</span>
             </h5>
-            <button type="button" className="btn btn-close" onClick={onClose}><IconX size={16} /></button>
-          </div>
-          <div className="modal-body">
-            <div className="card">
-              <div className="card-body" style={{ maxHeight: 360, overflowY: 'auto', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace', fontSize: '0.875rem' }}>
-                {messages.length === 0 ? (
-                  <div className="text-muted">Ожидание сообщений от сервера...</div>
-                ) : (
-                  messages.map((m, i) => (
-                    <div key={i} className="text-break"><span className="text-muted">$</span> {m}</div>
-                  ))
-                )}
-                <div ref={bottomRef} />
-              </div>
+            <div className="btn-list">
+              <button className="btn btn-outline-secondary btn-sm" onClick={() => setAutoScroll(!autoScroll)} title={autoScroll ? 'Отключить автопрокрутку' : 'Включить автопрокрутку'}>
+                {autoScroll ? <IconPlayerPause className="me-1" /> : <IconPlayerPlay className="me-1" />} Автопрокрутка
+              </button>
+              <button className="btn btn-outline-primary btn-sm" onClick={async () => { try { await navigator.clipboard.writeText(plainLog); } catch {} }} title="Скопировать лог">
+                <IconCopy className="me-1" /> Копировать
+              </button>
+              <button className="btn btn-outline-secondary btn-sm" onClick={() => setRawMessages([])} title="Очистить лог">
+                <IconTrash className="me-1" /> Очистить
+              </button>
+              <button type="button" className="btn btn-close" onClick={onClose}><IconX size={16} /></button>
             </div>
           </div>
-          <div className="modal-footer">
+          <div className="modal-body">
+            <div className="bg-dark text-light p-3 rounded" style={{ maxHeight: '60vh', overflowY: 'auto', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace', fontSize: '0.875rem', border: '1px solid rgba(255,255,255,0.08)' }}>
+              {rawMessages.length === 0 ? (
+                <div className="text-muted">Ожидание сообщений от сервера...</div>
+              ) : (
+                rawMessages.map((m, i) => {
+                  const isErr = m?.json?.stream === 'stderr' || /\berror\b|\bошиб/i.test(String(m.text));
+                  return (
+                    <div key={i} className={`text-break ${isErr ? 'text-danger' : ''}`}>
+                      <span className="text-secondary">$</span> {m.text}
+                    </div>
+                  );
+                })
+              )}
+              <div ref={bottomRef} />
+            </div>
+          </div>
+          <div className="modal-footer d-flex justify-content-between align-items-center">
+            <div className="text-muted small d-flex align-items-center">
+              <IconClock size={16} className="me-1" />
+              <span>
+                Начало {startedAt ? startedAt.toLocaleTimeString() : '—'}
+                {elapsedMs != null && (
+                  <>
+                    , прошло {elapsedMs} ms
+                  </>
+                )}
+              </span>
+            </div>
             <button className="btn btn-secondary" onClick={onClose}><IconX className="me-1" /> Закрыть</button>
           </div>
         </div>