feat(MikrotikBackupsManager): implement diff modal for enhanced configuration comparison

frontend/src/MikrotikBackupsManager.jsx

@@ -7,6 +7,7 @@ import TableSkeleton from './components/TableSkeleton.jsx';
 import EmptyState from './components/EmptyState.jsx';
 import Tooltip from './components/Tooltip.jsx';
 import DataTable from './components/DataTable.jsx';
+import { FullscreenModal } from './components/Modal.jsx';
 import { countryToFlag } from './utils/serverUtils.js';
 import {
   IconRefresh,
@@ -139,6 +140,7 @@ function MikrotikBackupsManager() {
   const [viewLoading, setViewLoading] = useState(false);
   const [diffResult, setDiffResult] = useState(null);
   const [diffLoading, setDiffLoading] = useState(false);
+  const [diffModalOpen, setDiffModalOpen] = useState(false);
 
   // UI-состояние выбора сервера для просмотра бэкапов (в стиле /filters)
   const [serverSearch, setServerSearch] = useState('');
@@ -364,6 +366,7 @@ function MikrotikBackupsManager() {
       return;
     }
     try {
+      setDiffModalOpen(true);
       setDiffLoading(true);
       setDiffResult(null);
       const res = await api.post('/mikrotik/backups/diff', {
@@ -817,97 +820,113 @@ function MikrotikBackupsManager() {
         </div>
       </div>
 
-      {(viewConfigKey || diffResult) && (
+      {viewConfigKey && (
         <div className="row mt-4">
-          {viewConfigKey && (
+          <div className="col-12">
-            <div className={diffResult ? 'col-md-6' : 'col-12'}>
+            <div className="card">
-              <div className="card">
+              <div className="card-header d-flex align-items-center justify-content-between">
-                <div className="card-header d-flex align-items-center justify-content-between">
+                <div>
-                  <div>
+                  <div className="card-title mb-0">Содержимое бэкапа</div>
-                    <div className="card-title mb-0">Содержимое бэкапа</div>
+                  <div className="text-muted small text-truncate" title={viewConfigKey}>
-                    <div className="text-muted small text-truncate" title={viewConfigKey}>
+                    {viewConfigKey}
-                      {viewConfigKey}
-                    </div>
-                  </div>
-                  <div className="btn-list">
-                    <button
-                      type="button"
-                      className="btn btn-outline-secondary btn-sm"
-                      onClick={() => handleCopyToClipboard(viewConfigText)}
-                      disabled={!viewConfigText}
-                    >
-                      <IconCopy size={16} className="me-1" />
-                      Копировать
-                    </button>
                   </div>
                 </div>
-                <div className="card-body">
+                <div className="btn-list">
-                  {viewLoading ? (
+                  <button
-                    <TableSkeleton rows={6} columns={1} />
+                    type="button"
-                  ) : (
+                    className="btn btn-outline-secondary btn-sm"
-                    <pre
+                    onClick={() => handleCopyToClipboard(viewConfigText)}
-                      className="mb-0"
+                    disabled={!viewConfigText}
-                      style={{ maxHeight: 420, overflow: 'auto', fontSize: 12 }}
+                  >
-                    >
+                    <IconCopy size={16} className="me-1" />
-                      {viewConfigText || '# Нет данных для отображения'}
+                    Копировать
-                    </pre>
+                  </button>
-                  )}
                 </div>
               </div>
-            </div>
+              <div className="card-body">
-          )}
+                {viewLoading ? (
-
+                  <TableSkeleton rows={6} columns={1} />
-          {diffResult && (
+                ) : (
-            <div className={viewConfigKey ? 'col-md-6 mt-3 mt-md-0' : 'col-12'}>
+                  <pre
-              <div className="card">
+                    className="mb-0"
-                <div className="card-header d-flex align-items-center justify-content-between">
+                    style={{ maxHeight: 420, overflow: 'auto', fontSize: 12 }}
-                  <div>
+                  >
-                    <div className="card-title mb-0">Сравнение бэкапов</div>
+                    {viewConfigText || '# Нет данных для отображения'}
-                    <div className="text-muted small">
+                  </pre>
-                      {diffResult.same
+                )}
-                        ? 'Конфигурации идентичны'
-                        : 'Конфигурации отличаются — проверьте различия перед откатом.'}
-                      {!diffResult.same && (
-                        <span className="ms-2">
-                          <span style={{ background: 'rgba(248, 81, 73, 0.35)', padding: '0 4px', borderRadius: 2 }}> удалено (A)</span>
-                          {' · '}
-                          <span style={{ background: 'rgba(63, 185, 80, 0.35)', padding: '0 4px', borderRadius: 2 }}> добавлено (B)</span>
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-                <div className="card-body">
-                  {diffLoading ? (
-                    <TableSkeleton rows={6} columns={2} />
-                  ) : (
-                    <div className="row">
-                      <div className="col-md-6 mb-3 mb-md-0">
-                        <div className="mb-2 small text-muted text-truncate" title={diffResult.a?.key}>
-                          A: {diffResult.a?.key}
-                        </div>
-                        <DiffPanel
-                          lines={diffLines.left}
-                          side="left"
-                        />
-                      </div>
-                      <div className="col-md-6">
-                        <div className="mb-2 small text-muted text-truncate" title={diffResult.b?.key}>
-                          B: {diffResult.b?.key}
-                        </div>
-                        <DiffPanel
-                          lines={diffLines.right}
-                          side="right"
-                        />
-                      </div>
-                    </div>
-                  )}
-                </div>
               </div>
             </div>
-          )}
+          </div>
         </div>
       )}
+
+      <FullscreenModal
+        show={diffModalOpen}
+        onClose={() => {
+          setDiffModalOpen(false);
+        }}
+        title="Сравнение бэкапов MikroTik"
+        footer={(
+          <div className="d-flex justify-content-between w-100">
+            <div className="text-muted small">
+              {diffResult?.same
+                ? 'Конфигурации идентичны'
+                : 'Конфигурации отличаются — проверьте различия перед откатом.'}
+            </div>
+            <button
+              type="button"
+              className="btn btn-secondary"
+              onClick={() => setDiffModalOpen(false)}
+            >
+              Закрыть
+            </button>
+          </div>
+        )}
+      >
+        {diffLoading ? (
+          <TableSkeleton rows={8} columns={2} />
+        ) : !diffResult ? (
+          <div className="text-muted small">
+            Не удалось загрузить результат сравнения. Попробуйте ещё раз.
+          </div>
+        ) : (
+          <>
+            {!diffResult.same && (
+              <div className="alert alert-info mb-3 small">
+                <IconAlertTriangle size={16} className="me-1 text-warning" />
+                Конфигурации отличаются — слева A, справа B. Проверьте различия перед откатом.
+              </div>
+            )}
+            <div className="row">
+              <div className="col-md-6 mb-3 mb-md-0">
+                <div className="mb-2 small text-muted text-truncate" title={diffResult.a?.key}>
+                  A: {diffResult.a?.key}
+                </div>
+                <DiffPanel
+                  lines={diffLines.left}
+                  side="left"
+                />
+              </div>
+              <div className="col-md-6">
+                <div className="mb-2 small text-muted text-truncate" title={diffResult.b?.key}>
+                  B: {diffResult.b?.key}
+                </div>
+                <DiffPanel
+                  lines={diffLines.right}
+                  side="right"
+                />
+              </div>
+            </div>
+            {!diffResult.same && (
+              <div className="mt-3 text-muted small">
+                <span style={{ background: 'rgba(248, 81, 73, 0.35)', padding: '0 4px', borderRadius: 2 }}> удалено (A)</span>
+                {' · '}
+                <span style={{ background: 'rgba(63, 185, 80, 0.35)', padding: '0 4px', borderRadius: 2 }}> добавлено (B)</span>
+              </div>
+            )}
+          </>
+        )}
+      </FullscreenModal>
     </div>
   );
 }