diff --git a/index.css b/index.css
new file mode 100644
index 0000000..84c45bb
--- /dev/null
+++ b/index.css
@@ -0,0 +1,2251 @@
+/* ============================================================================
+ * Styles - Batman, Spider-Man, Aquaman Theme (Fully Responsive - Enhanced)
+ * ============================================================================
+ */
+
+/* CSS Variables for better maintainability */
+:root {
+ --primary-gold: #ffd700;
+ --primary-gold-dark: #ffaa00;
+ --primary-blue: #00ffff;
+ --primary-red: #ff3333;
+ --primary-red-dark: #cc0000;
+ --primary-green: #00ff00;
+ --primary-green-dark: #00cc00;
+ --primary-info: #2196F3;
+ --primary-warning: #ff9800;
+ --primary-error: #f44336;
+ --primary-success: #4CAF50;
+
+ --bg-dark: #0a0f1e;
+ --bg-medium: #1a1f2f;
+ --bg-light: #0f172a;
+ --bg-card: rgba(0, 30, 50, 0.7);
+ --bg-overlay: rgba(0, 0, 0, 0.5);
+ --bg-hover: rgba(255, 215, 0, 0.1);
+
+ --text-primary: #fff;
+ --text-secondary: #aaffff;
+ --text-muted: #94a3b8;
+
+ --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
+ --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+ --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
+ --shadow-gold: 0 0 20px var(--primary-gold);
+ --shadow-blue: 0 0 20px var(--primary-blue);
+ --shadow-red: 0 0 20px var(--primary-red);
+
+ --transition-fast: 0.2s ease;
+ --transition-normal: 0.3s ease;
+ --transition-slow: 0.5s ease;
+
+ --spacing-xs: 4px;
+ --spacing-sm: 8px;
+ --spacing-md: 12px;
+ --spacing-lg: 16px;
+ --spacing-xl: 20px;
+ --spacing-xxl: 30px;
+
+ --radius-sm: 4px;
+ --radius-md: 8px;
+ --radius-lg: 12px;
+ --radius-xl: 20px;
+ --radius-xxl: 30px;
+ --radius-full: 40px;
+ --radius-circle: 50%;
+
+ --font-xs: 0.75rem;
+ --font-sm: 0.875rem;
+ --font-md: 1rem;
+ --font-lg: 1.125rem;
+ --font-xl: 1.25rem;
+ --font-xxl: 1.5rem;
+ --font-xxxl: 2rem;
+
+ --header-height: 80px;
+ --footer-height: 50px;
+}
+
+/* Base Styles */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 16px;
+ -webkit-text-size-adjust: 100%;
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-medium) 50%, var(--bg-light) 100%);
+ color: var(--text-primary);
+ min-height: 100vh;
+ position: relative;
+ overflow-x: hidden;
+ line-height: 1.6;
+ padding-bottom: var(--footer-height);
+}
+
+/* Optimized Animations */
+@keyframes slideIn {
+ from { transform: translateX(100%); opacity: 0; }
+ to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slideOut {
+ from { transform: translateX(0); opacity: 1; }
+ to { transform: translateX(100%); opacity: 0; }
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.05); }
+}
+
+@keyframes spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+@keyframes batSignal {
+ 0% { transform: rotate(0deg) scale(1); }
+ 50% { transform: rotate(5deg) scale(1.1); }
+ 100% { transform: rotate(0deg) scale(1); }
+}
+
+@keyframes gradientShift {
+ 0% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+ 100% { background-position: 0% 50%; }
+}
+
+@keyframes oceanWaves {
+ 0%, 100% { box-shadow: 0 0 30px rgba(0, 255, 255, 0.3), 0 0 60px rgba(255, 215, 0, 0.2); }
+ 50% { box-shadow: 0 0 50px rgba(0, 255, 255, 0.5), 0 0 80px rgba(255, 215, 0, 0.4); }
+}
+
+@keyframes shine {
+ 0% { transform: rotate(45deg) translateX(-100%); }
+ 100% { transform: rotate(45deg) translateX(100%); }
+}
+
+@keyframes swingIn {
+ 0% { transform: rotate(-10deg) scale(0.8); opacity: 0; }
+ 50% { transform: rotate(5deg) scale(1.02); }
+ 100% { transform: rotate(0deg) scale(1); opacity: 1; }
+}
+
+@keyframes wave {
+ 0%, 100% { top: -100%; }
+ 50% { top: 100%; }
+}
+
+@keyframes rotate {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+@keyframes blink {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.5; }
+}
+
+@keyframes borderFlow {
+ 0% { border-image-slice: 1; border-image-source: linear-gradient(90deg, #00ffff, #ffd700, #ff3333, #00ffff); }
+ 100% { border-image-slice: 1; border-image-source: linear-gradient(90deg, #00ffff, #ff3333, #ffd700, #00ffff); }
+}
+
+@keyframes batFly {
+ 0%, 100% { transform: scale(1) rotate(0deg); }
+ 33% { transform: scale(1.2) rotate(10deg); }
+ 66% { transform: scale(1.1) rotate(-10deg); }
+}
+
+@keyframes webSwing {
+ 0%, 100% { transform: rotate(0deg) scale(1); }
+ 33% { transform: rotate(10deg) scale(1.1); }
+ 66% { transform: rotate(-10deg) scale(0.9); }
+}
+
+@keyframes shimmer {
+ 0% { background-position: -1000px 0; }
+ 100% { background-position: 1000px 0; }
+}
+
+/* Background Effects */
+body::before {
+ content: '';
+ position: fixed;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle at 30% 50%, rgba(10, 15, 30, 0.8) 0%, transparent 50%),
+ repeating-linear-gradient(45deg, rgba(255, 215, 0, 0.02) 0px, rgba(255, 215, 0, 0.02) 2px, transparent 2px, transparent 8px);
+ z-index: -1;
+ animation: batSignal 20s linear infinite;
+ pointer-events: none;
+}
+
+body::after {
+ content: '';
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: url('data:image/svg+xml;utf8,');
+ pointer-events: none;
+ z-index: -1;
+ opacity: 0.3;
+}
+
+/* Container */
+.container {
+ width: 100%;
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: var(--spacing-lg);
+ position: relative;
+ backdrop-filter: blur(10px);
+}
+
+/* Header - Enhanced for mobile */
+.header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ background: linear-gradient(135deg, rgba(0, 20, 40, 0.95) 0%, rgba(0, 50, 80, 0.95) 50%, rgba(0, 30, 60, 0.95) 100%);
+ border: 2px solid transparent;
+ border-image: linear-gradient(45deg, var(--primary-blue), var(--primary-gold), var(--primary-red)) 1;
+ border-radius: var(--radius-xl);
+ padding: var(--spacing-xl);
+ margin-bottom: var(--spacing-xl);
+ box-shadow: 0 0 30px rgba(0, 255, 255, 0.2), 0 0 60px rgba(255, 215, 0, 0.1);
+ position: relative;
+ overflow: hidden;
+ animation: oceanWaves 8s ease-in-out infinite;
+}
+
+@media (min-width: 768px) {
+ .header {
+ flex-direction: row;
+ justify-content: space-between;
+ text-align: left;
+ padding: var(--spacing-xl) var(--spacing-xxl);
+ }
+}
+
+.header-content {
+ flex: 1;
+}
+
+.header h1 {
+ font-size: clamp(var(--font-xxl), 5vw, var(--font-xxxl));
+ background: linear-gradient(45deg, var(--primary-blue), var(--primary-gold), var(--primary-red));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-size: 300% 300%;
+ animation: gradientShift 8s ease infinite;
+ margin-bottom: var(--spacing-xs);
+ line-height: 1.2;
+ word-wrap: break-word;
+}
+
+.header p {
+ font-size: clamp(var(--font-sm), 2vw, var(--font-md));
+ opacity: 0.9;
+ color: var(--text-secondary);
+}
+
+.header-actions {
+ margin-top: var(--spacing-md);
+}
+
+@media (min-width: 768px) {
+ .header-actions {
+ margin-top: 0;
+ margin-left: var(--spacing-xl);
+ }
+}
+
+.security-badge {
+ background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
+ padding: var(--spacing-xs) var(--spacing-lg);
+ border-radius: var(--radius-full);
+ border: 2px solid var(--primary-gold);
+ box-shadow: var(--shadow-gold);
+ animation: pulse 2s ease-in-out infinite;
+ font-size: clamp(var(--font-xs), 1.5vw, var(--font-sm));
+ font-weight: 600;
+ display: inline-block;
+}
+
+/* Tabs - Enhanced for mobile */
+.tabs {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--spacing-xs);
+ margin-bottom: var(--spacing-xl);
+ background: var(--bg-overlay);
+ padding: var(--spacing-sm);
+ border-radius: var(--radius-full);
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 215, 0, 0.2);
+}
+
+.tab-btn {
+ padding: var(--spacing-sm) var(--spacing-lg);
+ background: transparent;
+ border: none;
+ color: var(--text-secondary);
+ border-radius: var(--radius-full);
+ cursor: pointer;
+ font-size: clamp(var(--font-sm), 2vw, var(--font-md));
+ font-weight: 600;
+ transition: all var(--transition-normal);
+ flex: 1 1 auto;
+ min-width: fit-content;
+ white-space: nowrap;
+ position: relative;
+ overflow: hidden;
+}
+
+@media (max-width: 768px) {
+ .tab-btn {
+ flex: 1 1 calc(50% - var(--spacing-xs));
+ white-space: normal;
+ text-align: center;
+ padding: var(--spacing-md) var(--spacing-sm);
+ }
+}
+
+@media (max-width: 480px) {
+ .tab-btn {
+ flex: 1 1 100%;
+ }
+}
+
+.tab-btn::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), rgba(0, 255, 255, 0.1), transparent);
+ transform: rotate(45deg);
+ animation: shine 4s linear infinite;
+ opacity: 0;
+ transition: opacity 0.3s;
+ pointer-events: none;
+}
+
+.tab-btn:hover::before {
+ opacity: 1;
+}
+
+.tab-btn:hover {
+ color: var(--primary-gold);
+ transform: translateY(-1px);
+}
+
+.tab-btn.active {
+ background: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-gold-dark) 100%);
+ color: #000;
+ box-shadow: var(--shadow-gold);
+ border: none;
+}
+
+/* Tab Content */
+.tab-content {
+ display: none;
+ background: rgba(10, 20, 30, 0.8);
+ backdrop-filter: blur(10px);
+ border-radius: var(--radius-xl);
+ padding: var(--spacing-xl);
+ border: 1px solid rgba(255, 215, 0, 0.2);
+ animation: fadeIn var(--transition-slow);
+}
+
+.tab-content.active {
+ display: block;
+}
+
+.tab-content h2 {
+ font-size: clamp(var(--font-xl), 4vw, var(--font-xxl));
+ margin-bottom: var(--spacing-xl);
+ color: var(--primary-gold);
+ border-bottom: 2px solid rgba(255, 215, 0, 0.3);
+ padding-bottom: var(--spacing-sm);
+}
+
+.tab-content h3 {
+ font-size: clamp(var(--font-lg), 3vw, var(--font-xl));
+ margin: var(--spacing-lg) 0;
+ color: var(--primary-blue);
+}
+
+.tab-content h4 {
+ font-size: clamp(var(--font-md), 2.5vw, var(--font-lg));
+ color: var(--primary-red);
+ margin-bottom: var(--spacing-sm);
+}
+
+/* Migration Layout - Enhanced for mobile */
+.migration-layout {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--spacing-xl);
+}
+
+@media (min-width: 992px) {
+ .migration-layout {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+.migration-column {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-lg);
+}
+
+/* Environment Layout */
+.environment-layout {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--spacing-xl);
+}
+
+@media (min-width: 992px) {
+ .environment-layout {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+.environment-column {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-lg);
+}
+
+/* Config Sections */
+.config-section {
+ background: rgba(0, 0, 0, 0.2);
+ border-radius: var(--radius-lg);
+ padding: var(--spacing-lg);
+ border: 1px solid rgba(255, 215, 0, 0.1);
+}
+
+/* Config Cards */
+.config-cards {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--spacing-lg);
+ margin: var(--spacing-lg) 0;
+}
+
+@media (min-width: 640px) {
+ .config-cards {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 1200px) {
+ .config-cards {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+.config-card {
+ background: linear-gradient(135deg, rgba(20, 20, 30, 0.95) 0%, rgba(30, 30, 40, 0.95) 100%);
+ border-radius: var(--radius-lg);
+ padding: var(--spacing-lg);
+ border-left: 4px solid var(--primary-red);
+ transition: all var(--transition-normal);
+ box-shadow: var(--shadow-md);
+ position: relative;
+ overflow: hidden;
+}
+
+.config-card::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle at 30% 50%, rgba(255, 51, 51, 0.1) 0%, transparent 50%);
+ animation: webSwing 8s ease-in-out infinite;
+ pointer-events: none;
+}
+
+.config-card:hover {
+ transform: translateY(-3px);
+ box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 215, 0, 0.2);
+ border-left-color: var(--primary-gold);
+}
+
+.config-card h4 {
+ background: linear-gradient(45deg, var(--primary-red), var(--primary-gold));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ margin-bottom: var(--spacing-md);
+ font-size: var(--font-lg);
+ position: relative;
+ z-index: 1;
+}
+
+.config-card pre {
+ background: rgba(0, 0, 0, 0.6);
+ padding: var(--spacing-md);
+ border-radius: var(--radius-md);
+ color: var(--text-secondary);
+ font-family: 'Courier New', monospace;
+ font-size: var(--font-sm);
+ overflow-x: auto;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ border: 1px solid rgba(255, 215, 0, 0.2);
+ position: relative;
+ z-index: 1;
+}
+
+/* Input Groups - Enhanced for mobile */
+.config-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: var(--spacing-md);
+ margin-bottom: var(--spacing-lg);
+}
+
+@media (min-width: 480px) {
+ .config-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media (min-width: 768px) {
+ .config-grid {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+.config-group {
+ background: rgba(0, 30, 50, 0.6);
+ padding: var(--spacing-md);
+ border-radius: var(--radius-md);
+ border: 1px solid rgba(0, 255, 255, 0.2);
+ transition: all var(--transition-normal);
+}
+
+.config-group:hover {
+ border-color: var(--primary-blue);
+ background: rgba(0, 50, 80, 0.7);
+ box-shadow: var(--shadow-blue);
+}
+
+.config-group label {
+ display: block;
+ margin-bottom: var(--spacing-xs);
+ color: var(--primary-blue);
+ font-weight: 600;
+ font-size: var(--font-sm);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.config-group input,
+.config-group select,
+.config-group textarea {
+ width: 100%;
+ padding: var(--spacing-sm) var(--spacing-md);
+ background: rgba(0, 0, 0, 0.5);
+ border: 2px solid rgba(0, 255, 255, 0.2);
+ border-radius: var(--radius-md);
+ color: var(--text-primary);
+ font-size: var(--font-md);
+ transition: all var(--transition-normal);
+}
+
+.config-group input:hover,
+.config-group select:hover,
+.config-group textarea:hover {
+ border-color: var(--primary-blue);
+}
+
+.config-group input:focus,
+.config-group select:focus,
+.config-group textarea:focus {
+ outline: none;
+ border-color: var(--primary-gold);
+ box-shadow: var(--shadow-gold);
+ background: rgba(0, 0, 0, 0.7);
+}
+
+.config-group input[type="checkbox"] {
+ width: auto;
+ margin-right: var(--spacing-sm);
+ accent-color: var(--primary-gold);
+ transform: scale(1.1);
+ cursor: pointer;
+}
+
+/* URI Input Group - Enhanced */
+.uri-input-group {
+ margin: var(--spacing-lg) 0;
+}
+
+.uri-input-group label {
+ display: block;
+ color: var(--primary-blue);
+ font-weight: 600;
+ margin-bottom: var(--spacing-xs);
+}
+
+.uri-input-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm);
+}
+
+@media (min-width: 480px) {
+ .uri-input-wrapper {
+ flex-direction: row;
+ }
+}
+
+.uri-input-wrapper input {
+ flex: 1;
+ padding: var(--spacing-md);
+ background: rgba(0, 0, 0, 0.5);
+ border: 2px solid rgba(0, 255, 255, 0.2);
+ border-radius: var(--radius-md);
+ color: var(--text-primary);
+ font-size: var(--font-md);
+}
+
+.uri-input-wrapper input:focus {
+ border-color: var(--primary-gold);
+ box-shadow: var(--shadow-gold);
+ outline: none;
+}
+
+.uri-input-wrapper button {
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .uri-input-wrapper button {
+ width: auto;
+ }
+}
+
+/* Action Groups */
+.action-group {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--spacing-sm);
+ margin: var(--spacing-lg) 0;
+}
+
+.action-group button {
+ flex: 1 1 auto;
+}
+
+@media (max-width: 480px) {
+ .action-group button {
+ flex: 1 1 100%;
+ }
+}
+
+/* Buttons - Enhanced */
+button {
+ padding: var(--spacing-sm) var(--spacing-xl);
+ background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+ border: 2px solid transparent;
+ background-clip: padding-box;
+ color: var(--text-primary);
+ border-radius: var(--radius-full);
+ cursor: pointer;
+ font-size: var(--font-md);
+ font-weight: 600;
+ transition: all var(--transition-normal);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin: var(--spacing-xs);
+ white-space: nowrap;
+ position: relative;
+ overflow: hidden;
+ box-shadow: var(--shadow-sm);
+}
+
+button::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: var(--radius-full);
+ padding: 2px;
+ background: linear-gradient(45deg, var(--primary-gold), var(--primary-blue));
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+ opacity: 0;
+ transition: opacity var(--transition-normal);
+ pointer-events: none;
+}
+
+button:hover::after {
+ opacity: 1;
+}
+
+button:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 215, 0, 0.3);
+}
+
+button:active {
+ transform: translateY(0);
+}
+
+button:focus-visible {
+ outline: 2px solid var(--primary-gold);
+ outline-offset: 2px;
+}
+
+button:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ pointer-events: none;
+}
+
+/* Button variants */
+.btn-migrate {
+ background: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-gold-dark) 100%);
+ color: #000;
+ font-size: var(--font-lg);
+ padding: var(--spacing-md) var(--spacing-xxl);
+ width: 100%;
+ max-width: 100%;
+}
+
+@media (min-width: 768px) {
+ .btn-migrate {
+ max-width: 400px;
+ }
+}
+
+.btn-migrate::after {
+ background: linear-gradient(45deg, #000, #333);
+}
+
+.btn-warning {
+ background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
+ color: white;
+}
+
+.btn-success {
+ background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
+ color: white;
+}
+
+.btn-small {
+ padding: var(--spacing-xs) var(--spacing-lg);
+ font-size: var(--font-sm);
+}
+
+.btn-large {
+ padding: var(--spacing-lg) var(--spacing-xxl);
+ font-size: var(--font-lg);
+}
+
+.btn-secondary {
+ background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
+}
+
+.btn-test {
+ background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
+}
+
+.btn-primary {
+ background: linear-gradient(135deg, var(--primary-blue), #00cccc);
+ color: #000;
+}
+
+/* Migration Options Panel */
+.migration-options-panel {
+ margin-top: var(--spacing-xl);
+ padding: var(--spacing-xl);
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: var(--radius-lg);
+ border: 1px solid rgba(255, 215, 0, 0.2);
+}
+
+.options-row {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ margin-bottom: var(--spacing-md);
+}
+
+@media (min-width: 640px) {
+ .options-row {
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+}
+
+.options-row.full-width {
+ flex-direction: column;
+}
+
+.options-row .option-item {
+ flex: 1 1 200px;
+}
+
+/* Checkbox Labels */
+.checkbox-label {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+ color: var(--text-secondary);
+ cursor: pointer;
+ padding: var(--spacing-sm);
+ background: rgba(0, 30, 50, 0.5);
+ border-radius: var(--radius-md);
+ border: 1px solid rgba(0, 255, 255, 0.2);
+ transition: all var(--transition-fast);
+}
+
+.checkbox-label:hover {
+ border-color: var(--primary-blue);
+ background: rgba(0, 50, 80, 0.6);
+}
+
+.checkbox-label input[type="checkbox"] {
+ accent-color: var(--primary-gold);
+ width: 18px;
+ height: 18px;
+ cursor: pointer;
+}
+
+/* Config Row */
+.config-row {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-md);
+ margin: var(--spacing-lg) 0;
+}
+
+@media (min-width: 480px) {
+ .config-row {
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
+
+.select-wrapper {
+ flex: 1;
+}
+
+.select-wrapper select {
+ width: 100%;
+ padding: var(--spacing-sm) var(--spacing-md);
+ background: rgba(0, 0, 0, 0.5);
+ border: 2px solid rgba(0, 255, 255, 0.2);
+ border-radius: var(--radius-md);
+ color: var(--text-primary);
+ font-size: var(--font-md);
+}
+
+/* Format Controls */
+.format-controls {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm);
+ margin: var(--spacing-lg) 0;
+}
+
+@media (min-width: 480px) {
+ .format-controls {
+ flex-direction: row;
+ }
+}
+
+.format-controls select {
+ flex: 1;
+ padding: var(--spacing-sm) var(--spacing-md);
+ background: rgba(0, 0, 0, 0.5);
+ border: 2px solid rgba(0, 255, 255, 0.2);
+ border-radius: var(--radius-md);
+ color: var(--text-primary);
+ font-size: var(--font-md);
+}
+
+.format-controls button {
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .format-controls button {
+ width: auto;
+ }
+}
+
+/* Status Messages */
+.status-message {
+ margin-top: var(--spacing-lg);
+ padding: var(--spacing-lg);
+ border-radius: var(--radius-lg);
+ animation: fadeIn var(--transition-normal);
+ overflow-x: auto;
+}
+
+.status-message.success {
+ background: linear-gradient(135deg, rgba(0, 255, 0, 0.15), rgba(0, 200, 0, 0.15));
+ border: 1px solid var(--primary-green);
+ box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
+}
+
+.status-message.error {
+ background: linear-gradient(135deg, rgba(255, 0, 0, 0.15), rgba(200, 0, 0, 0.15));
+ border: 1px solid var(--primary-red);
+ box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
+}
+
+.status-message p {
+ margin: var(--spacing-xs) 0;
+ color: var(--text-secondary);
+ font-size: var(--font-sm);
+}
+
+/* Results Sections */
+.results-section {
+ margin-top: var(--spacing-xl);
+ padding: var(--spacing-lg);
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: var(--radius-lg);
+ border: 1px solid rgba(255, 215, 0, 0.1);
+}
+
+/* Schema Cards */
+.schemas-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+ gap: var(--spacing-sm);
+ margin: var(--spacing-lg) 0;
+}
+
+.schema-card {
+ background: rgba(0, 50, 80, 0.6);
+ padding: var(--spacing-md);
+ border-radius: var(--radius-md);
+ border: 1px solid rgba(0, 255, 255, 0.3);
+ text-align: center;
+ cursor: pointer;
+ transition: all var(--transition-normal);
+ font-size: var(--font-sm);
+ user-select: none;
+ position: relative;
+ overflow: hidden;
+}
+
+.schema-card::before {
+ content: '';
+ position: absolute;
+ top: -100%;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(transparent, rgba(0, 255, 255, 0.2));
+ animation: wave 3s ease-in-out infinite;
+ pointer-events: none;
+}
+
+.schema-card:hover {
+ transform: translateY(-2px);
+ border-color: var(--primary-gold);
+ box-shadow: var(--shadow-gold);
+ background: rgba(0, 80, 120, 0.7);
+}
+
+.schema-card label {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-xs);
+}
+
+.schema-card input[type="checkbox"] {
+ accent-color: var(--primary-gold);
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+}
+
+/* Tables */
+.table-group {
+ margin-bottom: var(--spacing-xl);
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: var(--radius-lg);
+ padding: var(--spacing-lg);
+ border: 1px solid rgba(255, 215, 0, 0.1);
+ overflow-x: auto;
+}
+
+.group-stats {
+ margin-bottom: var(--spacing-md);
+ color: var(--text-secondary);
+ font-size: var(--font-sm);
+ display: flex;
+ gap: var(--spacing-sm);
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.group-stats span {
+ background: rgba(255, 215, 0, 0.1);
+ padding: var(--spacing-xs) var(--spacing-sm);
+ border-radius: var(--radius-full);
+ border: 1px solid rgba(255, 215, 0, 0.2);
+}
+
+.table-responsive {
+ overflow-x: auto;
+ margin: var(--spacing-md) 0;
+}
+
+.tables-table {
+ width: 100%;
+ min-width: 600px;
+ border-collapse: collapse;
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: var(--radius-md);
+ overflow: hidden;
+}
+
+.tables-table th {
+ background: rgba(0, 0, 0, 0.6);
+ padding: var(--spacing-md);
+ text-align: left;
+ color: var(--primary-gold);
+ font-weight: 600;
+ font-size: var(--font-sm);
+ border-bottom: 2px solid var(--primary-gold);
+}
+
+.tables-table td {
+ padding: var(--spacing-sm) var(--spacing-md);
+ border-bottom: 1px solid rgba(255, 215, 0, 0.1);
+ font-size: var(--font-sm);
+}
+
+.tables-table tr:hover td {
+ background: rgba(255, 215, 0, 0.1);
+}
+
+.tables-table input[type="checkbox"] {
+ accent-color: var(--primary-gold);
+ cursor: pointer;
+}
+
+/* Bucket Cards */
+.bucket-card {
+ background: rgba(0, 30, 50, 0.8);
+ padding: var(--spacing-lg);
+ margin: var(--spacing-md) 0;
+ border-radius: var(--radius-lg);
+ border: 1px solid rgba(0, 255, 255, 0.3);
+ transition: all var(--transition-normal);
+ position: relative;
+ overflow: hidden;
+}
+
+.bucket-card::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle at 30% 50%, rgba(0, 255, 255, 0.15), transparent 70%);
+ animation: rotate 10s linear infinite;
+ pointer-events: none;
+}
+
+.bucket-card:hover {
+ transform: translateX(5px);
+ border-color: var(--primary-gold);
+ box-shadow: var(--shadow-gold);
+ background: rgba(0, 50, 80, 0.9);
+}
+
+.bucket-name {
+ font-size: clamp(var(--font-lg), 3vw, var(--font-xl));
+ color: var(--primary-gold);
+ margin-bottom: var(--spacing-sm);
+ font-weight: 600;
+ position: relative;
+ z-index: 1;
+ word-break: break-word;
+}
+
+.bucket-details {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--spacing-sm);
+ color: var(--text-secondary);
+ font-size: var(--font-sm);
+ position: relative;
+ z-index: 1;
+}
+
+.bucket-details span {
+ background: rgba(0, 0, 0, 0.6);
+ padding: var(--spacing-xs) var(--spacing-md);
+ border-radius: var(--radius-full);
+ border: 1px solid rgba(0, 255, 255, 0.2);
+ word-break: break-word;
+}
+
+.select-bucket-btn {
+ margin-top: var(--spacing-md);
+ width: 100%;
+ position: relative;
+ z-index: 1;
+}
+
+/* Migration Cards */
+.migration-card {
+ background: linear-gradient(135deg, rgba(20, 20, 30, 0.95), rgba(30, 30, 40, 0.95));
+ padding: var(--spacing-lg);
+ margin: var(--spacing-md) 0;
+ border-radius: var(--radius-lg);
+ border: 1px solid rgba(255, 215, 0, 0.2);
+ transition: all var(--transition-normal);
+}
+
+.migration-card:hover {
+ transform: translateX(5px);
+ box-shadow: var(--shadow-gold);
+ border-color: var(--primary-gold);
+}
+
+.migration-header {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--spacing-sm);
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: var(--spacing-md);
+}
+
+.migration-id {
+ font-family: 'Courier New', monospace;
+ color: var(--primary-gold);
+ font-size: var(--font-md);
+ font-weight: 600;
+ word-wrap: break-word;
+}
+
+.migration-status {
+ padding: var(--spacing-xs) var(--spacing-md);
+ border-radius: var(--radius-full);
+ font-weight: 600;
+ text-transform: uppercase;
+ font-size: var(--font-xs);
+ display: inline-block;
+}
+
+.migration-status.running {
+ background: rgba(255, 215, 0, 0.2);
+ color: var(--primary-gold);
+ border: 1px solid var(--primary-gold);
+ animation: pulse 1.5s ease-in-out infinite;
+}
+
+.migration-status.completed {
+ background: rgba(0, 255, 0, 0.2);
+ color: var(--primary-green);
+ border: 1px solid var(--primary-green);
+}
+
+.migration-status.failed {
+ background: rgba(255, 0, 0, 0.2);
+ color: var(--primary-red);
+ border: 1px solid var(--primary-red);
+}
+
+.migration-body p {
+ margin: var(--spacing-xs) 0;
+ color: var(--text-secondary);
+ font-size: var(--font-sm);
+}
+
+.migration-body strong {
+ color: var(--text-primary);
+}
+
+.migration-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--spacing-sm);
+ margin-top: var(--spacing-md);
+}
+
+.migration-actions button {
+ flex: 1 1 auto;
+}
+
+@media (max-width: 480px) {
+ .migration-actions button {
+ flex: 1 1 100%;
+ }
+}
+
+/* Migration Controls Panel */
+.migration-controls-panel {
+ margin-top: var(--spacing-xl);
+ text-align: center;
+}
+
+.migration-controls {
+ margin-top: var(--spacing-xl);
+ text-align: center;
+}
+
+/* Logs */
+#logsContainer {
+ max-height: 400px;
+ overflow-y: auto;
+ padding: var(--spacing-md);
+ background: rgba(0, 0, 0, 0.4);
+ border-radius: var(--radius-md);
+ font-family: 'Courier New', monospace;
+ border: 1px solid rgba(255, 215, 0, 0.2);
+}
+
+.log-entry {
+ padding: var(--spacing-sm) var(--spacing-md);
+ margin: var(--spacing-xs) 0;
+ border-radius: var(--radius-sm);
+ animation: fadeIn var(--transition-normal);
+ font-size: var(--font-sm);
+ word-wrap: break-word;
+ border-left: 4px solid transparent;
+ transition: background var(--transition-fast);
+}
+
+.log-entry:hover {
+ background: rgba(255, 255, 255, 0.05);
+}
+
+.log-entry.info {
+ background: rgba(0, 255, 255, 0.1);
+ border-left-color: var(--primary-blue);
+}
+
+.log-entry.success {
+ background: rgba(0, 255, 0, 0.1);
+ border-left-color: var(--primary-green);
+}
+
+.log-entry.error {
+ background: rgba(255, 0, 0, 0.1);
+ border-left-color: var(--primary-red);
+}
+
+.log-entry.warning {
+ background: rgba(255, 255, 0, 0.1);
+ border-left-color: #ffff00;
+}
+
+.log-time {
+ color: var(--primary-gold);
+ margin-right: var(--spacing-md);
+ font-weight: 600;
+ display: inline-block;
+ min-width: 80px;
+}
+
+.log-message {
+ color: var(--text-primary);
+ display: inline;
+}
+
+/* Notifications */
+.notification {
+ position: fixed;
+ top: var(--spacing-xl);
+ right: var(--spacing-xl);
+ left: var(--spacing-xl);
+ padding: var(--spacing-md) var(--spacing-xl);
+ color: white;
+ border-radius: var(--radius-lg);
+ z-index: 9999;
+ box-shadow: var(--shadow-lg);
+ animation: slideIn var(--transition-normal);
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-md);
+ min-width: auto;
+ max-width: 480px;
+ margin: 0 auto;
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ font-weight: 500;
+}
+
+@media (min-width: 768px) {
+ .notification {
+ left: auto;
+ right: var(--spacing-xl);
+ min-width: 320px;
+ }
+}
+
+.notification.error {
+ background: linear-gradient(135deg, var(--primary-error), #d32f2f);
+}
+
+.notification.success {
+ background: linear-gradient(135deg, var(--primary-success), #388e3c);
+}
+
+.notification.warning {
+ background: linear-gradient(135deg, var(--primary-warning), #f57c00);
+}
+
+.notification.info {
+ background: linear-gradient(135deg, var(--primary-info), #1976d2);
+}
+
+.notification-icon {
+ font-size: var(--font-xl);
+}
+
+.notification-message {
+ flex: 1;
+ font-size: var(--font-md);
+ word-break: break-word;
+}
+
+.notification-close {
+ background: none;
+ border: none;
+ color: white;
+ font-size: var(--font-xl);
+ cursor: pointer;
+ padding: 0 var(--spacing-xs);
+ line-height: 1;
+ opacity: 0.7;
+ transition: opacity var(--transition-fast);
+}
+
+.notification-close:hover {
+ opacity: 1;
+ background: none;
+ transform: none;
+ box-shadow: none;
+}
+
+.notification-close::after {
+ display: none;
+}
+
+/* Status Bar */
+.status-bar {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 20, 40, 0.98);
+ backdrop-filter: blur(10px);
+ padding: var(--spacing-sm) var(--spacing-xl);
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ gap: var(--spacing-sm);
+ border-top: 2px solid;
+ border-image: linear-gradient(90deg, var(--primary-blue), var(--primary-gold), var(--primary-red), var(--primary-blue)) 1;
+ animation: borderFlow 4s linear infinite;
+ z-index: 100;
+ font-size: var(--font-sm);
+}
+
+#statusInfo {
+ color: var(--text-secondary);
+ flex: 1;
+ min-width: 200px;
+ font-size: var(--font-sm);
+ word-break: break-word;
+}
+
+#loading {
+ color: var(--primary-gold);
+ font-weight: 600;
+ animation: spin 1s linear infinite;
+ display: inline-flex;
+ align-items: center;
+ gap: var(--spacing-xs);
+}
+
+/* Loading Overlay */
+.loading-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.9);
+ display: none;
+ justify-content: center;
+ align-items: center;
+ z-index: 99999;
+ backdrop-filter: blur(5px);
+}
+
+.loading-overlay.active {
+ display: flex;
+}
+
+.bat-symbol {
+ width: min(100px, 20vw);
+ height: min(100px, 20vw);
+ background: linear-gradient(45deg, var(--primary-gold), var(--primary-gold-dark));
+ clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
+ animation: batFly 2s ease-in-out infinite;
+ box-shadow: 0 0 50px var(--primary-gold), 0 0 100px var(--primary-gold);
+}
+
+/* Migration Stats */
+.migration-stats {
+ margin: var(--spacing-xl) 0;
+ padding: var(--spacing-lg);
+ background: rgba(0, 30, 50, 0.6);
+ border-radius: var(--radius-lg);
+ border: 1px solid rgba(255, 215, 0, 0.2);
+}
+
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: var(--spacing-md);
+ margin-top: var(--spacing-md);
+}
+
+.stat-item {
+ background: rgba(0, 0, 0, 0.5);
+ padding: var(--spacing-md);
+ border-radius: var(--radius-md);
+ text-align: center;
+ border: 1px solid rgba(255, 215, 0, 0.1);
+ transition: all var(--transition-fast);
+}
+
+.stat-item:hover {
+ border-color: var(--primary-gold);
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-gold);
+}
+
+.stat-label {
+ color: var(--primary-blue);
+ font-size: var(--font-sm);
+ text-transform: uppercase;
+ margin-bottom: var(--spacing-xs);
+ font-weight: 500;
+}
+
+.stat-value {
+ color: var(--primary-gold);
+ font-size: var(--font-xl);
+ font-weight: 700;
+}
+
+/* Option Items */
+.option-item {
+ background: rgba(0, 30, 50, 0.6);
+ padding: var(--spacing-md);
+ border-radius: var(--radius-md);
+ border: 1px solid rgba(0, 255, 255, 0.2);
+}
+
+.option-item label {
+ display: block;
+ margin-bottom: var(--spacing-xs);
+ color: var(--primary-blue);
+ font-weight: 600;
+ font-size: var(--font-sm);
+}
+
+.option-item input[type="text"],
+.option-item input[type="number"],
+.option-item select {
+ width: 100%;
+ padding: var(--spacing-sm);
+ background: rgba(0, 0, 0, 0.5);
+ border: 1px solid rgba(0, 255, 255, 0.3);
+ border-radius: var(--radius-sm);
+ color: var(--text-primary);
+ font-size: var(--font-sm);
+ transition: all var(--transition-fast);
+}
+
+.option-item input:focus,
+.option-item select:focus {
+ border-color: var(--primary-gold);
+ box-shadow: var(--shadow-gold);
+ outline: none;
+}
+
+/* Security Info */
+.security-info {
+ background: rgba(0, 30, 50, 0.6);
+ padding: var(--spacing-lg);
+ border-radius: var(--radius-lg);
+ margin: var(--spacing-lg) 0;
+ border: 1px solid rgba(255, 215, 0, 0.2);
+}
+
+.security-info p {
+ margin: var(--spacing-sm) 0;
+ font-size: var(--font-md);
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs);
+}
+
+@media (min-width: 480px) {
+ .security-info p {
+ flex-direction: row;
+ align-items: center;
+ }
+}
+
+.security-info strong {
+ color: var(--primary-blue);
+ min-width: 120px;
+ display: inline-block;
+}
+
+.security-features {
+ background: rgba(0, 30, 50, 0.6);
+ padding: var(--spacing-lg);
+ border-radius: var(--radius-lg);
+ margin: var(--spacing-lg) 0;
+}
+
+.security-feature {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs);
+ padding: var(--spacing-md) 0;
+ border-bottom: 1px solid rgba(255, 215, 0, 0.2);
+}
+
+@media (min-width: 480px) {
+ .security-feature {
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ }
+}
+
+.security-feature:last-child {
+ border-bottom: none;
+}
+
+.feature-name {
+ color: var(--primary-blue);
+ font-weight: 500;
+}
+
+.feature-value {
+ color: var(--primary-gold);
+ font-weight: 600;
+}
+
+/* Cleanup Controls */
+.cleanup-controls {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-sm);
+ margin: var(--spacing-lg) 0;
+}
+
+@media (min-width: 480px) {
+ .cleanup-controls {
+ flex-direction: row;
+ }
+}
+
+.cleanup-controls input {
+ flex: 1;
+ padding: var(--spacing-md);
+ background: rgba(0, 0, 0, 0.5);
+ border: 2px solid rgba(255, 51, 51, 0.3);
+ border-radius: var(--radius-md);
+ color: var(--text-primary);
+ font-size: var(--font-md);
+ transition: all var(--transition-fast);
+}
+
+.cleanup-controls input:focus {
+ outline: none;
+ border-color: var(--primary-red);
+ box-shadow: var(--shadow-red);
+}
+
+.cleanup-controls button {
+ width: 100%;
+}
+
+@media (min-width: 480px) {
+ .cleanup-controls button {
+ width: auto;
+ }
+}
+
+/* Environment Preview */
+.env-preview {
+ background: rgba(0, 0, 0, 0.6);
+ padding: var(--spacing-lg);
+ border-radius: var(--radius-lg);
+ font-family: 'Courier New', monospace;
+ font-size: var(--font-sm);
+ overflow-x: auto;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ max-height: 400px;
+ overflow-y: auto;
+ border: 1px solid rgba(255, 215, 0, 0.2);
+}
+
+/* Section Header */
+.section-header {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: var(--spacing-md);
+}
+
+/* No Migrations / No Logs */
+.no-migrations,
+.no-logs {
+ text-align: center;
+ color: var(--text-muted);
+ padding: var(--spacing-xl);
+ font-style: italic;
+ font-size: var(--font-md);
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+/* ==================== Progress Modal Styles ==================== */
+.progress-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+ animation: fadeIn 0.3s ease;
+}
+
+.modal-content {
+ background: white;
+ border-radius: 12px;
+ width: 600px;
+ max-width: 90%;
+ max-height: 80vh;
+ overflow-y: auto;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+ animation: slideUp 0.3s ease;
+}
+
+.modal-header {
+ padding: 20px 24px;
+ border-bottom: 1px solid #e0e0e0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ border-radius: 12px 12px 0 0;
+}
+
+.modal-header h3 {
+ margin: 0;
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.migration-status-badge {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+ 0% { opacity: 1; }
+ 50% { opacity: 0.5; }
+ 100% { opacity: 1; }
+}
+
+.close-modal {
+ background: rgba(255,255,255,0.2);
+ border: none;
+ font-size: 24px;
+ cursor: pointer;
+ color: white;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.2s;
+}
+
+.close-modal:hover {
+ background: rgba(255,255,255,0.3);
+}
+
+.modal-body {
+ padding: 24px;
+}
+
+.progress-container {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.progress-bar-container {
+ position: relative;
+ width: 100%;
+ height: 30px;
+ background: #f0f0f0;
+ border-radius: 15px;
+ overflow: hidden;
+}
+
+.progress-bar-fill {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ background: linear-gradient(90deg, #4CAF50, #45a049);
+ transition: width 0.3s ease;
+ border-radius: 15px;
+}
+
+.progress-bar-label {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: white;
+ font-weight: bold;
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+
+.progress-bar-text {
+ font-family: monospace;
+ font-size: 14px;
+ color: #4CAF50;
+ background: #f0f0f0;
+ padding: 10px;
+ border-radius: 8px;
+ margin: 0;
+ text-align: center;
+}
+
+.progress-stats-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 15px;
+ background: #f8f9fa;
+ padding: 15px;
+ border-radius: 8px;
+ border: 1px solid #e0e0e0;
+}
+
+.stat-item {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+}
+
+.stat-label {
+ font-size: 12px;
+ color: #666;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.stat-value {
+ font-size: 16px;
+ font-weight: bold;
+ color: #333;
+}
+
+.current-item {
+ background: #e3f2fd;
+ padding: 15px;
+ border-radius: 8px;
+ border-left: 4px solid #2196F3;
+}
+
+.current-item h4 {
+ margin: 0 0 10px 0;
+ color: #1976D2;
+ font-size: 14px;
+}
+
+.current-object, .current-table {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-family: monospace;
+}
+
+.current-icon {
+ font-size: 18px;
+}
+
+.current-name {
+ font-weight: 500;
+ color: #333;
+ word-break: break-all;
+}
+
+.current-progress {
+ margin-left: auto;
+ font-size: 12px;
+ color: #666;
+}
+
+.progress-logs {
+ background: #f5f5f5;
+ border-radius: 8px;
+ padding: 15px;
+}
+
+.progress-logs h4 {
+ margin: 0 0 10px 0;
+ color: #333;
+ font-size: 14px;
+}
+
+.logs-container {
+ max-height: 200px;
+ overflow-y: auto;
+ font-family: monospace;
+ font-size: 12px;
+}
+
+.log-entry {
+ padding: 5px;
+ border-bottom: 1px solid #e0e0e0;
+ display: flex;
+ gap: 10px;
+}
+
+.log-entry:last-child {
+ border-bottom: none;
+}
+
+.log-entry.info {
+ color: #2196F3;
+}
+
+.log-entry.success {
+ color: #4CAF50;
+}
+
+.log-entry.error {
+ color: #f44336;
+ background: #ffebee;
+}
+
+.log-time {
+ color: #999;
+ min-width: 70px;
+}
+
+.log-message {
+ flex: 1;
+ word-break: break-word;
+}
+
+.progress-controls {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+ margin-top: 10px;
+}
+
+.progress-history {
+ margin-top: 20px;
+ padding: 15px;
+ background: #f8f9fa;
+ border-radius: 8px;
+}
+
+.progress-history h4 {
+ margin: 0 0 10px 0;
+ color: #333;
+}
+
+.history-list {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+}
+
+.history-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 12px;
+ background: white;
+ border-radius: 6px;
+ border: 1px solid #e0e0e0;
+ font-size: 13px;
+}
+
+.history-item.completed {
+ border-left: 3px solid #4CAF50;
+}
+
+.history-item.failed {
+ border-left: 3px solid #f44336;
+}
+
+.history-id {
+ font-family: monospace;
+ font-weight: bold;
+ color: #333;
+}
+
+.history-type {
+ padding: 2px 8px;
+ background: #e0e0e0;
+ border-radius: 12px;
+ font-size: 11px;
+}
+
+.history-status {
+ padding: 2px 8px;
+ border-radius: 12px;
+ font-size: 11px;
+ text-transform: uppercase;
+}
+
+.history-item.completed .history-status {
+ background: #e8f5e8;
+ color: #4CAF50;
+}
+
+.history-item.failed .history-status {
+ background: #ffebee;
+ color: #f44336;
+}
+
+.history-time {
+ margin-left: auto;
+ color: #999;
+ font-size: 11px;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes slideUp {
+ from { transform: translateY(50px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+}
+
+/* تحديث أنماط بطاقات الترحيل */
+.migration-card {
+ position: relative;
+ overflow: hidden;
+}
+
+.migration-card .progress-bar-container {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background: transparent;
+}
+
+.migration-card .progress-bar-fill {
+ height: 4px;
+ border-radius: 0;
+}
+
+.migration-card .progress-text {
+ display: none;
+}
+::-webkit-scrollbar-track {
+ background: #1a1a1a;
+ border-radius: var(--radius-sm);
+}
+
+::-webkit-scrollbar-thumb {
+ background: linear-gradient(135deg, var(--primary-red), var(--primary-gold));
+ border-radius: var(--radius-sm);
+ border: 2px solid #1a1a1a;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: linear-gradient(135deg, var(--primary-gold), var(--primary-red));
+}
+
+::-webkit-scrollbar-corner {
+ background: #1a1a1a;
+}
+
+/* Utility Classes */
+.full-width {
+ width: 100%;
+ grid-column: 1 / -1;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-glow {
+ text-shadow: 0 0 10px var(--primary-blue);
+}
+
+.border-glow {
+ box-shadow: 0 0 10px var(--primary-blue), 0 0 20px var(--primary-gold);
+}
+
+/* Loading Skeleton Animation */
+.skeleton {
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0.05) 25%,
+ rgba(255, 215, 0, 0.1) 50%,
+ rgba(255, 255, 255, 0.05) 75%
+ );
+ background-size: 200% 100%;
+ animation: shimmer 1.5s infinite;
+ border-radius: var(--radius-sm);
+}
+
+/* Print Styles */
+@media print {
+ body {
+ background: white;
+ color: black;
+ }
+
+ .status-bar,
+ .loading-overlay,
+ .notification,
+ button,
+ .tabs,
+ .security-badge {
+ display: none !important;
+ }
+
+ .tab-content {
+ display: block !important;
+ background: white;
+ color: black;
+ border: 1px solid #ccc;
+ box-shadow: none;
+ page-break-inside: avoid;
+ }
+ /* ==================== Progress Tracking Styles ==================== */
+
+.progress-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.modal-content {
+ background: white;
+ border-radius: 8px;
+ width: 500px;
+ max-width: 90%;
+ max-height: 80vh;
+ overflow-y: auto;
+}
+
+.modal-header {
+ padding: 15px 20px;
+ border-bottom: 1px solid #e0e0e0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.modal-header h3 {
+ margin: 0;
+ color: #333;
+}
+
+.close-modal {
+ background: none;
+ border: none;
+ font-size: 24px;
+ cursor: pointer;
+ color: #666;
+}
+
+.modal-body {
+ padding: 20px;
+}
+
+.progress-container {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+
+.progress-bar-container {
+ width: 100%;
+ height: 20px;
+ background: #f0f0f0;
+ border-radius: 10px;
+ overflow: hidden;
+}
+
+.progress-bar-fill {
+ height: 100%;
+ background: linear-gradient(90deg, #4CAF50, #45a049);
+ transition: width 0.3s ease;
+ border-radius: 10px;
+}
+
+.progress-stats {
+ font-family: monospace;
+ background: #f8f9fa;
+ padding: 10px;
+ border-radius: 4px;
+ border: 1px solid #e0e0e0;
+ white-space: pre-wrap;
+ font-size: 12px;
+}
+
+.progress-details {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 15px;
+ padding: 10px;
+ background: #f8f9fa;
+ border-radius: 4px;
+ border: 1px solid #e0e0e0;
+}
+
+.progress-detail {
+ flex: 1 1 auto;
+ min-width: 120px;
+}
+
+.progress-detail span {
+ font-weight: bold;
+ color: #555;
+}
+
+.progress-bar-text {
+ font-family: monospace;
+ font-size: 12px;
+ color: #4CAF50;
+ background: #f0f0f0;
+ padding: 5px;
+ border-radius: 4px;
+ margin: 0;
+}
+
+.stop-progress-btn {
+ background: #ff6b6b;
+ color: white;
+ border: none;
+ padding: 8px 16px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: background 0.2s;
+}
+
+.stop-progress-btn:hover {
+ background: #ff5252;
+}
+
+.progress-area {
+ margin-top: 10px;
+ padding: 10px;
+ background: #f8f9fa;
+ border-radius: 4px;
+ border: 1px solid #e0e0e0;
+}
+ .header {
+ background: none;
+ border: 1px solid #ccc;
+ box-shadow: none;
+ animation: none;
+ }
+
+ .header h1 {
+ color: black;
+ -webkit-text-fill-color: black;
+ animation: none;
+ }
+
+ .config-card,
+ .migration-card,
+ .bucket-card {
+ break-inside: avoid;
+ border: 1px solid #ccc;
+ box-shadow: none;
+ }
+}
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..b8fe2de
--- /dev/null
+++ b/index.js
@@ -0,0 +1,3366 @@
+const API_BASE = "";
+
+// ============================================================================
+// تعريف دوال التدفق (Stream) محلياً - حل المشكلة
+// ============================================================================
+
+function createProgressStream(migrationId, type = 's3', options = {}) {
+ const {
+ onProgress = () => {},
+ onComplete = () => {},
+ onError = () => {},
+ reconnectInterval = 3000,
+ maxReconnectAttempts = 5
+ } = options;
+
+ let eventSource = null;
+ let reconnectAttempts = 0;
+ let isActive = true;
+ let reconnectTimer = null;
+
+ const connect = () => {
+ if (!isActive) return;
+
+ if (eventSource) {
+ eventSource.close();
+ }
+
+ try {
+ const safeMigrationId = encodeURIComponent(migrationId);
+ const safeType = encodeURIComponent(type);
+ const url = `${API_BASE}/api/stream-progress/${safeMigrationId}?type=${safeType}`;
+ eventSource = new EventSource(url);
+
+ eventSource.onmessage = (event) => {
+ try {
+ const data = JSON.parse(event.data);
+
+ // التحقق الموحد من الإكمال
+ if (data.type === 'completion' ||
+ data.status === 'completed' ||
+ data.status === 'success' ||
+ data.success === true) {
+ onComplete(data);
+ if (eventSource) eventSource.close();
+ }
+ // التحقق الموحد من الخطأ
+ else if (data.type === 'error' ||
+ data.status === 'failed' ||
+ data.status === 'error' ||
+ data.error) {
+ onError(data);
+ if (eventSource) eventSource.close();
+ }
+ else {
+ onProgress(data);
+ }
+ } catch (error) {
+ console.error('Error parsing stream data:', error);
+ }
+ };
+
+ eventSource.onerror = (error) => {
+ console.error('EventSource error:', error);
+
+ if (isActive && reconnectAttempts < maxReconnectAttempts) {
+ reconnectAttempts++;
+ console.log(`Reconnecting... Attempt ${reconnectAttempts}/${maxReconnectAttempts}`);
+
+ if (reconnectTimer) clearTimeout(reconnectTimer);
+ reconnectTimer = setTimeout(connect, reconnectInterval);
+ } else if (reconnectAttempts >= maxReconnectAttempts) {
+ onError({ error: 'Max reconnection attempts reached' });
+ }
+
+ if (eventSource) {
+ eventSource.close();
+ eventSource = null;
+ }
+ };
+
+ eventSource.onopen = () => {
+ console.log(`Stream connected for ${migrationId}`);
+ reconnectAttempts = 0;
+ };
+
+ } catch (error) {
+ console.error('Error creating EventSource:', error);
+ onError({ error: error.message });
+ }
+ };
+
+ connect();
+
+ return {
+ stop: () => {
+ isActive = false;
+ if (reconnectTimer) clearTimeout(reconnectTimer);
+ if (eventSource) {
+ eventSource.close();
+ eventSource = null;
+ }
+ },
+ pause: () => {
+ isActive = false;
+ if (reconnectTimer) clearTimeout(reconnectTimer);
+ if (eventSource) {
+ eventSource.close();
+ eventSource = null;
+ }
+ },
+ resume: () => {
+ if (!isActive) {
+ isActive = true;
+ reconnectAttempts = 0;
+ connect();
+ }
+ }
+ };
+}
+
+function formatProgressDisplay(progress) {
+ if (!progress) return 'Connecting...';
+
+ const lines = [];
+
+ if (progress.migration_id) {
+ lines.push(`🚀 Migration: ${progress.migration_id}`);
+ }
+
+ if (progress.status) {
+ const statusEmoji = {
+ 'running': '🟢',
+ 'completed': '✅',
+ 'failed': '❌',
+ 'cancelled': '⏹️',
+ 'success': '✅',
+ 'error': '❌'
+ }[progress.status] || '📊';
+
+ lines.push(`${statusEmoji} Status: ${progress.status}`);
+ }
+
+ if (progress.percentage !== undefined) {
+ lines.push(`📊 Progress: ${progress.percentage.toFixed(1)}%`);
+ }
+
+ if (progress.processed_objects !== undefined && progress.total_objects !== undefined) {
+ lines.push(`📦 Objects: ${progress.processed_objects}/${progress.total_objects}`);
+ }
+
+ if (progress.processed?.tables !== undefined && progress.total?.tables !== undefined) {
+ lines.push(`📋 Tables: ${progress.processed.tables}/${progress.total.tables}`);
+ }
+
+ if (progress.processed_size_formatted && progress.total_size_formatted) {
+ lines.push(`💾 Size: ${progress.processed_size_formatted}/${progress.total_size_formatted}`);
+ }
+
+ if (progress.current_speed_formatted) {
+ lines.push(`⚡ Speed: ${progress.current_speed_formatted}`);
+ }
+
+ if (progress.elapsed_time_formatted) {
+ lines.push(`⏱️ Elapsed: ${progress.elapsed_time_formatted}`);
+ }
+
+ if (progress.eta_formatted) {
+ lines.push(`⏳ ETA: ${progress.eta_formatted}`);
+ }
+
+ if (progress.current_object) {
+ const objName = progress.current_object.length > 50
+ ? '...' + progress.current_object.slice(-50)
+ : progress.current_object;
+ lines.push(`📄 Current: ${objName}`);
+ }
+
+ return lines.join('\n');
+}
+// Copy to clipboard
+async function copyToClipboard(text) {
+ try {
+ await navigator.clipboard.writeText(text);
+ return true;
+ } catch (err) {
+ console.error('Failed to copy:', err);
+ return false;
+ }
+}
+
+// Show notification
+function showNotification(message, type = 'info') {
+ const notification = document.createElement('div');
+ notification.className = `notification ${type}`;
+ notification.innerHTML = `
+ ${type === 'success' ? '✅' : type === 'error' ? '❌' : type === 'warning' ? '⚠️' : 'ℹ️'}
+ ${message}
+
+ `;
+
+ document.body.appendChild(notification);
+
+ setTimeout(() => {
+ if (notification.parentElement) {
+ notification.style.animation = 'slideOut 0.3s ease';
+ setTimeout(() => notification.remove(), 300);
+ }
+ }, 3000);
+}
+
+// Format environment variables
+function formatEnvVars(envVars, format = 'dotenv') {
+ if (!envVars) return '';
+
+ switch(format) {
+ case 'dotenv':
+ return Object.entries(envVars)
+ .map(([key, value]) => `${key}=${value}`)
+ .join('\n');
+
+ case 'json':
+ return JSON.stringify(envVars, null, 2);
+
+ case 'shell_export':
+ return Object.entries(envVars)
+ .map(([key, value]) => `export ${key}="${value}"`)
+ .join('\n');
+
+ case 'docker_env':
+ return Object.entries(envVars)
+ .map(([key, value]) => `-e ${key}="${value}"`)
+ .join(' ');
+
+ case 'docker_compose':
+ return Object.entries(envVars)
+ .map(([key, value]) => ` ${key}: ${value}`)
+ .join('\n');
+
+ default:
+ return Object.entries(envVars)
+ .map(([key, value]) => `${key}: ${value}`)
+ .join('\n');
+ }
+}
+
+// Format file size
+function formatFileSize(bytes) {
+ if (bytes === 0 || !bytes) return '0 Bytes';
+ if (typeof bytes !== 'number') bytes = parseInt(bytes);
+
+ const k = 1024;
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+// Format PostgreSQL configuration for display
+function formatPostgresConfig(config) {
+ if (!config) return '';
+
+ const details = [
+ `📍 PostgreSQL Configuration:`,
+ `━━━━━━━━━━━━━━━━━━━━━━━━━━━`,
+ `Host: ${config.host || 'Not set'}`,
+ `Port: ${config.port || 5432}`,
+ `User: ${config.user || 'Not set'}`,
+ `Database: ${config.database || 'Not set'}`,
+ `━━━━━━━━━━━━━━━━━━━━━━━━━━━`
+ ];
+
+ if (config.host && config.user && config.password) {
+ details.push(`✅ Credentials: Configured`);
+ } else {
+ details.push(`❌ Credentials: Not configured`);
+ }
+
+ return details.join('\n');
+}
+
+// Format S3 configuration for display
+function formatS3Config(config, type = 'source') {
+ if (!config) return '';
+
+ const details = [
+ `📍 ${type.toUpperCase()} S3 Configuration:`,
+ `━━━━━━━━━━━━━━━━━━━━━━━━━━━`,
+ `Endpoint: ${config.endpoint_url || 'AWS S3 (default)'}`,
+ `Region: ${config.region || 'us-east-1'}`,
+ `Bucket: ${config.bucket || 'Not set'}`,
+ `━━━━━━━━━━━━━━━━━━━━━━━━━━━`
+ ];
+
+ if (config.access_key_id && config.secret_access_key) {
+ details.push(`✅ Credentials: Configured`);
+ } else {
+ details.push(`❌ Credentials: Not configured`);
+ }
+
+ return details.join('\n');
+}
+
+// Format migration details for display
+function formatMigrationDetails(migrationData) {
+ if (!migrationData) return '';
+
+ const details = [
+ `🔄 Migration ID: ${migrationData.migration_id || migrationData.id || 'N/A'}`,
+ `━━━━━━━━━━━━━━━━━━━━━━━━━━━`,
+ `Status: ${migrationData.status || 'N/A'}`,
+ `Started: ${migrationData.started_at ? new Date(migrationData.started_at * 1000).toLocaleString() : 'N/A'}`
+ ];
+
+ if (migrationData.stats) {
+ details.push(`━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
+ details.push(`📊 Statistics:`);
+ Object.entries(migrationData.stats).forEach(([key, value]) => {
+ details.push(` ${key}: ${value}`);
+ });
+ }
+
+ if (migrationData.message) {
+ details.push(`━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
+ details.push(`📝 Message: ${migrationData.message}`);
+ }
+
+ return details.join('\n');
+}
+
+// Extract PostgreSQL info from URI
+function extractPostgresInfo(uri) {
+ try {
+ const match = uri.match(/postgresql:\/\/([^:]+):([^@]+)@([^:]+):(\d+)\/(.+)/);
+ if (match) {
+ return {
+ user: match[1],
+ password: match[2],
+ host: match[3],
+ port: parseInt(match[4]),
+ database: match[5],
+ isValid: true
+ };
+ }
+ return { isValid: false };
+ } catch (error) {
+ console.error('Error extracting PostgreSQL info:', error);
+ return { isValid: false, error: error.message };
+ }
+}
+
+// Extract S3 info from URI
+function extractS3Info(s3Uri) {
+ try {
+ if (s3Uri.startsWith('s3://')) {
+ const uri = s3Uri.substring(5);
+ const parts = uri.split('/', 1);
+ const bucket = parts[0];
+ const key = uri.substring(bucket.length + 1);
+ return {
+ bucket,
+ key: key || '',
+ fullUri: s3Uri,
+ isValid: true
+ };
+ }
+ return { isValid: false };
+ } catch (error) {
+ console.error('Error parsing S3 URI:', error);
+ return { isValid: false, error: error.message };
+ }
+}
+
+// Build PostgreSQL connection string
+function buildPostgresConnectionString(host, database, user, port = 5432) {
+ if (!host || !database) return '';
+ return `postgresql://${user ? user + '@' : ''}${host}:${port}/${database}`;
+}
+
+// Build S3 URL
+function buildS3Url(bucket, key, endpointUrl = null) {
+ if (!bucket) return '';
+ if (!key) return `s3://${bucket}`;
+
+ if (endpointUrl) {
+ return `${endpointUrl}/${bucket}/${key}`;
+ }
+ return `s3://${bucket}/${key}`;
+}
+
+// Group tables by schema
+function groupTablesBySchema(tables) {
+ const groups = {};
+
+ tables.forEach(table => {
+ const schema = table.schema || 'public';
+
+ if (!groups[schema]) {
+ groups[schema] = {
+ count: 0,
+ tables: []
+ };
+ }
+
+ groups[schema].count++;
+ groups[schema].tables.push(table);
+ });
+
+ return groups;
+}
+
+// Group objects by prefix
+function groupObjectsByPrefix(objects, depth = 1) {
+ const groups = {};
+
+ objects.forEach(obj => {
+ const parts = obj.key.split('/');
+ let prefix = '';
+
+ for (let i = 0; i < Math.min(depth, parts.length - 1); i++) {
+ prefix += parts[i] + '/';
+ }
+
+ if (!prefix) prefix = '/';
+
+ if (!groups[prefix]) {
+ groups[prefix] = {
+ count: 0,
+ totalSize: 0,
+ objects: []
+ };
+ }
+
+ groups[prefix].count++;
+ groups[prefix].totalSize += obj.size;
+ groups[prefix].objects.push(obj);
+ });
+
+ return groups;
+}
+
+// Estimate migration time
+function estimateMigrationTime(totalItems, averageItemsPerSecond = 100) {
+ if (!totalItems) return 'Unknown';
+
+ const seconds = totalItems / averageItemsPerSecond;
+
+ if (seconds < 60) return `${Math.ceil(seconds)} seconds`;
+ if (seconds < 3600) return `${Math.ceil(seconds / 60)} minutes`;
+ if (seconds < 86400) return `${(seconds / 3600).toFixed(1)} hours`;
+ return `${(seconds / 86400).toFixed(1)} days`;
+}
+
+// ============================================================================
+// PostgreSQL API Functions
+// ============================================================================
+
+// Test PostgreSQL connection
+async function testPostgresConnection(options = {}) {
+ const {
+ useEnvVars = false,
+ uri,
+ host,
+ user,
+ password,
+ database,
+ port = 5432
+ } = options;
+
+ const body = {
+ use_env_vars: useEnvVars
+ };
+
+ if (uri) {
+ body.uri = uri;
+ } else if (host && user && password && database) {
+ body.uri = `postgresql://${user}:${password}@${host}:${port}/${database}`;
+ }
+
+ const r = await fetch(`${API_BASE}/api/postgres/test-connection`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// Get PostgreSQL schemas
+async function getPostgresSchemas(options = {}) {
+ const {
+ useEnvVars = false,
+ uri,
+ host,
+ user,
+ password,
+ database,
+ port = 5432
+ } = options;
+
+ const body = {
+ use_env_vars: useEnvVars
+ };
+
+ // بناء الرابط إذا لم يتم توفيره
+ if (uri) {
+ body.uri = uri;
+ } else if (host && user && password && database) {
+ body.uri = `postgresql://${user}:${password}@${host}:${port}/${database}`;
+ }
+
+ const r = await fetch(`${API_BASE}/api/postgres/get-schemas`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body) // ✅ الآن يرسل الجسم كاملاً
+ });
+ return r.json();
+}
+// Get PostgreSQL tables
+async function getPostgresTables(options = {}){
+ const {
+ useEnvVars = false,
+ uri,
+ host,
+ user,
+ password,
+ database,
+ port = 5432,
+ schema = ''
+ } = options;
+
+ const body = {
+ use_env_vars: useEnvVars
+ };
+
+ // بناء الرابط إذا لم يتم توفيره
+ if (uri) {
+ body.uri = uri;
+ } else if (host && user && password && database) {
+ body.uri = `postgresql://${user}:${password}@${host}:${port}/${database}`;
+ }
+
+ const r = await fetch(`${API_BASE}/api/postgres/get-tables`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// Get PostgreSQL table counts
+async function getPostgresTableCounts(uri, schema = '') {
+ const r = await fetch(`${API_BASE}/api/postgres/get-table-counts`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// Parse PostgreSQL URI
+async function parsePostgresUri(uri) {
+ const r = await fetch(`${API_BASE}/api/postgres/parse-uri`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ uri })
+ });
+ return r.json();
+}
+
+// Start PostgreSQL to PostgreSQL migration
+async function startPostgresMigration(sourceUri, destUri, schemas = null, tables = null) {
+ const r = await fetch(`${API_BASE}/api/postgres/start-migration`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ source_uri: sourceUri,
+ dest_uri: destUri,
+ schemas,
+ tables
+ })
+ });
+ return r.json();
+}
+
+// Get PostgreSQL migration status
+async function getPostgresMigrationStatus(migrationId) {
+ const r = await fetch(`${API_BASE}/api/postgres/migration-status/${migrationId}`);
+ return r.json();
+}
+
+// List PostgreSQL migrations
+async function listPostgresMigrations() {
+ const r = await fetch(`${API_BASE}/api/postgres/list-migrations`);
+ return r.json();
+}
+
+// ============================================================================
+// S3 API Functions
+// ============================================================================
+
+// Test source S3 connection
+async function testSourceS3Connection(options = {}) {
+ const {
+ useEnvVars = false,
+ accessKeyId,
+ secretAccessKey,
+ region = 'us-east-1',
+ endpointUrl,
+ sessionToken
+ } = options;
+
+ const body = {
+ use_env_vars: useEnvVars,
+ access_key_id: accessKeyId,
+ secret_access_key: secretAccessKey,
+ region,
+ endpoint_url: endpointUrl,
+ session_token: sessionToken
+ };
+
+ const r = await fetch(`${API_BASE}/api/s3-source/test-connection`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// Test destination S3 connection
+async function testDestinationS3Connection(options = {}) {
+ const {
+ useEnvVars = false,
+ accessKeyId,
+ secretAccessKey,
+ region = 'us-east-1',
+ endpointUrl,
+ sessionToken
+ } = options;
+
+ const body = {
+ use_env_vars: useEnvVars,
+ access_key_id: accessKeyId,
+ secret_access_key: secretAccessKey,
+ region,
+ endpoint_url: endpointUrl,
+ session_token: sessionToken
+ };
+
+ const r = await fetch(`${API_BASE}/api/s3-destination/test-connection`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// List source S3 buckets
+async function listSourceS3Buckets(accessKeyId, secretAccessKey, region = 'us-east-1', endpointUrl = null, sessionToken = null) {
+ const r = await fetch(`${API_BASE}/api/s3-source/list-buckets`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ access_key_id: accessKeyId,
+ secret_access_key: secretAccessKey,
+ region,
+ endpoint_url: endpointUrl,
+ session_token: sessionToken
+ })
+ });
+ return r.json();
+}
+
+// List destination S3 buckets
+async function listDestinationS3Buckets(accessKeyId, secretAccessKey, region = 'us-east-1', endpointUrl = null, sessionToken = null) {
+ const r = await fetch(`${API_BASE}/api/s3-destination/list-buckets`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ access_key_id: accessKeyId,
+ secret_access_key: secretAccessKey,
+ region,
+ endpoint_url: endpointUrl,
+ session_token: sessionToken
+ })
+ });
+ return r.json();
+}
+
+// List objects in S3 bucket
+async function listS3Objects(bucket, prefix = '', isSource = true, credentials = {}) {
+ const body = {
+ bucket,
+ prefix,
+ is_source: isSource,
+ access_key_id: credentials.accessKeyId,
+ secret_access_key: credentials.secretAccessKey,
+ region: credentials.region || 'us-east-1',
+ endpoint_url: credentials.endpointUrl,
+ session_token: credentials.sessionToken,
+ max_keys: credentials.maxKeys || 1000
+ };
+
+ const r = await fetch(`${API_BASE}/api/s3/list-objects`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// Create S3 bucket in destination
+async function createS3Bucket(bucket, region = 'us-east-1', options = {}) {
+ const body = {
+ bucket,
+ region,
+ access_key_id: options.accessKeyId,
+ secret_access_key: options.secretAccessKey,
+ endpoint_url: options.endpointUrl,
+ session_token: options.sessionToken
+ };
+
+ const r = await fetch(`${API_BASE}/api/s3-destination/create-bucket`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// Migrate single S3 object
+async function migrateS3Object(sourceBucket, sourceKey, destBucket, destKey = null, options = {}) {
+ const body = {
+ source_bucket: sourceBucket,
+ source_key: sourceKey,
+ dest_bucket: destBucket,
+ dest_key: destKey || sourceKey,
+ source_access_key_id: options.sourceAccessKeyId,
+ source_secret_access_key: options.sourceSecretAccessKey,
+ source_region: options.sourceRegion || 'us-east-1',
+ source_endpoint_url: options.sourceEndpointUrl,
+ source_session_token: options.sourceSessionToken,
+ dest_access_key_id: options.destAccessKeyId,
+ dest_secret_access_key: options.destSecretAccessKey,
+ dest_region: options.destRegion || 'us-east-1',
+ dest_endpoint_url: options.destEndpointUrl,
+ dest_session_token: options.destSessionToken,
+ preserve_metadata: options.preserveMetadata !== undefined ? options.preserveMetadata : true,
+ storage_class: options.storageClass || 'STANDARD'
+ };
+
+ const r = await fetch(`${API_BASE}/api/s3/migrate-object`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// Migrate multiple S3 objects in batch
+async function migrateS3Batch(objects, sourceBucket, destBucket, options = {}) {
+ const body = {
+ objects,
+ source_bucket: sourceBucket,
+ dest_bucket: destBucket,
+ source_access_key_id: options.sourceAccessKeyId,
+ source_secret_access_key: options.sourceSecretAccessKey,
+ source_region: options.sourceRegion || 'us-east-1',
+ source_endpoint_url: options.sourceEndpointUrl,
+ source_session_token: options.sourceSessionToken,
+ dest_access_key_id: options.destAccessKeyId,
+ dest_secret_access_key: options.destSecretAccessKey,
+ dest_region: options.destRegion || 'us-east-1',
+ dest_endpoint_url: options.destEndpointUrl,
+ dest_session_token: options.destSessionToken,
+ preserve_metadata: options.preserveMetadata !== undefined ? options.preserveMetadata : true,
+ storage_class: options.storageClass || 'STANDARD',
+ max_concurrent: options.maxConcurrent || 5
+ };
+
+ const r = await fetch(`${API_BASE}/api/s3/migrate-batch`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// Start full S3 to S3 migration
+async function startS3Migration(sourceBucket, destBucket, prefix = '', options = {}) {
+ const body = {
+ source_bucket: sourceBucket,
+ dest_bucket: destBucket,
+ prefix,
+ source_access_key_id: options.sourceAccessKeyId,
+ source_secret_access_key: options.sourceSecretAccessKey,
+ source_region: options.sourceRegion || 'us-east-1',
+ source_endpoint_url: options.sourceEndpointUrl,
+ source_session_token: options.sourceSessionToken,
+ dest_access_key_id: options.destAccessKeyId,
+ dest_secret_access_key: options.destSecretAccessKey,
+ dest_region: options.destRegion || 'us-east-1',
+ dest_endpoint_url: options.destEndpointUrl,
+ dest_session_token: options.destSessionToken,
+ include_patterns: options.includePatterns,
+ exclude_patterns: options.excludePatterns,
+ preserve_metadata: options.preserveMetadata !== undefined ? options.preserveMetadata : true,
+ storage_class: options.storageClass || 'STANDARD',
+ create_dest_bucket: options.createDestBucket !== undefined ? options.createDestBucket : true,
+ max_concurrent: options.maxConcurrent || 5
+ };
+
+ const r = await fetch(`${API_BASE}/api/s3/start-migration`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// Get S3 migration status
+async function getS3MigrationStatus(migrationId) {
+ const r = await fetch(`${API_BASE}/api/s3/migration-status/${migrationId}`);
+ return r.json();
+}
+
+// List S3 migrations
+async function listS3Migrations() {
+ const r = await fetch(`${API_BASE}/api/s3/list-migrations`);
+ return r.json();
+}
+
+// Cancel S3 migration
+async function cancelS3Migration(migrationId) {
+ const r = await fetch(`${API_BASE}/api/s3/cancel-migration/${migrationId}`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" }
+ });
+ return r.json();
+}
+
+// Parse S3 URI
+async function parseS3Uri(s3Uri) {
+ const r = await fetch(`${API_BASE}/api/s3/parse-uri`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ s3_uri: s3Uri })
+ });
+ return r.json();
+}
+
+// Generate presigned URL for S3 object
+async function generatePresignedUrl(bucket, key, isSource = true, expiration = 3600, credentials = {}) {
+ const body = {
+ bucket,
+ key,
+ is_source: isSource,
+ expiration,
+ access_key_id: credentials.accessKeyId,
+ secret_access_key: credentials.secretAccessKey,
+ region: credentials.region || 'us-east-1',
+ endpoint_url: credentials.endpointUrl,
+ session_token: credentials.sessionToken
+ };
+
+ const r = await fetch(`${API_BASE}/api/s3/generate-presigned-url`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// ============================================================================
+// PostgreSQL to S3 API Functions
+// ============================================================================
+
+// Test PostgreSQL connection for PG to S3
+async function testPgToS3PostgresConnection(uri) {
+ const r = await fetch(`${API_BASE}/api/postgres-s3/test-postgres-connection`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ uri })
+ });
+ return r.json();
+}
+
+// Test S3 connection for PG to S3
+async function testPgToS3S3Connection(accessKeyId, secretAccessKey, region = 'us-east-1', endpointUrl = null) {
+ const r = await fetch(`${API_BASE}/api/postgres-s3/test-s3-connection`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ access_key_id: accessKeyId,
+ secret_access_key: secretAccessKey,
+ region,
+ endpoint_url: endpointUrl
+ })
+ });
+ return r.json();
+}
+
+// Get PostgreSQL schemas for PG to S3
+async function getPgToS3Schemas(uri) {
+ const r = await fetch(`${API_BASE}/api/postgres-s3/get-schemas`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ uri })
+ });
+ return r.json();
+}
+
+// Get PostgreSQL tables for PG to S3
+async function getPgToS3Tables(uri, schema = '') {
+ const r = await fetch(`${API_BASE}/api/postgres-s3/get-tables`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ uri, schema })
+ });
+ return r.json();
+}
+
+// Export single PostgreSQL table to S3
+async function exportTableToS3(postgresUri, schema, table, s3Bucket, s3Key, options = {}) {
+ const body = {
+ postgres_uri: postgresUri,
+ schema,
+ table,
+ s3_bucket: s3Bucket,
+ s3_key: s3Key,
+ compress: options.compress !== undefined ? options.compress : true,
+ format: options.format || 'csv',
+ access_key_id: options.accessKeyId,
+ secret_access_key: options.secretAccessKey,
+ region: options.region || 'us-east-1',
+ endpoint_url: options.endpointUrl
+ };
+
+ const r = await fetch(`${API_BASE}/api/postgres-s3/export-table`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// Start full PostgreSQL to S3 migration
+async function startPgToS3Migration(postgresUri, s3Bucket, s3Prefix = '', options = {}) {
+ const body = {
+ postgres_uri: postgresUri,
+ s3_bucket: s3Bucket,
+ s3_prefix: s3Prefix,
+ schemas: options.schemas,
+ tables: options.tables,
+ compress: options.compress !== undefined ? options.compress : true,
+ format: options.format || 'csv',
+ access_key_id: options.accessKeyId,
+ secret_access_key: options.secretAccessKey,
+ region: options.region || 'us-east-1',
+ endpoint_url: options.endpointUrl
+ };
+
+ const r = await fetch(`${API_BASE}/api/postgres-s3/start-migration`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(body)
+ });
+ return r.json();
+}
+
+// Get PostgreSQL to S3 migration status
+async function getPgToS3MigrationStatus(migrationId) {
+ const r = await fetch(`${API_BASE}/api/postgres-s3/migration-status/${migrationId}`);
+ return r.json();
+}
+
+// List PostgreSQL to S3 migrations
+async function listPgToS3Migrations() {
+ const r = await fetch(`${API_BASE}/api/postgres-s3/list-migrations`);
+ return r.json();
+}
+
+// ============================================================================
+// Common Environment Functions
+// ============================================================================
+
+// Inject environment variables
+async function injectEnv(envVars) {
+ const r = await fetch(`${API_BASE}/api/inject-env`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ environment_variables: envVars })
+ });
+ return r.json();
+}
+
+// Get current environment
+async function getCurrentEnv() {
+ const r = await fetch(`${API_BASE}/api/get-current-env`);
+ return r.json();
+}
+
+// Health check
+async function healthCheck() {
+ const r = await fetch(`${API_BASE}/api/health`);
+ return r.json();
+}
+
+// ============================================================================
+// Security API Functions
+// ============================================================================
+
+// Clear session
+async function clearSession() {
+ const r = await fetch(`${API_BASE}/api/clear-session`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" }
+ });
+ return r.json();
+}
+
+// Clear migration
+async function clearMigration(migrationId) {
+ const r = await fetch(`${API_BASE}/api/clear-migration/${migrationId}`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" }
+ });
+ return r.json();
+}
+
+// Get security status
+async function getSecurityStatus() {
+ const r = await fetch(`${API_BASE}/api/security-status`);
+ return r.json();
+}
+
+// ============================================================================
+// Main App
+// ============================================================================
+
+function App() {
+ const root = document.getElementById("root");
+
+ root.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
🐘 → 📤 PostgreSQL to S3 Migration
+
+
+
+
+
+
PostgreSQL Source
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
S3 Destination
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
🐘 → 🐘 PostgreSQL to PostgreSQL Migration
+
+
+
+
+
+
Source PostgreSQL
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Destination PostgreSQL
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Migration Options
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📤 → 📥 S3 to S3 Migration
+
+
+
+
+
+
Source S3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Available Buckets:
+
+
+
+
+
+
+
+
+
Destination S3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Available Buckets:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
⚙️ Environment & Security
+
+
+
+
+
+
Environment Variables
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Current Configuration
+
+
+
+
+
Environment Preview
+
+
+
+
+
+
+
+
Security
+
+
+
Session ID: Loading...
+
Active Sessions: -
+
Expiry: 10 minutes
+
+
+
+
+ Encryption:
+ AES-256
+
+
+ Session Isolation:
+ ✅ Enabled
+
+
+ Auto-cleanup:
+ 10 minutes
+
+
+
+
+
+
+
+
+
+
Migration Data Cleanup
+
Clear sensitive data from migrations
+
+
+
+
+
+
+
+
Migration History
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ready
+
⏳ Processing...
+
+
Success: ✅ Connected
+ Host: ${psqlToS3Config.source.host || result.connection?.host}:${psqlToS3Config.source.port || result.connection?.port}
+ Version: ${result.version || 'Unknown'}
+ `;
+ statusDiv.className = 'status-message success';
+ } else {
+ showNotification(`❌ PSQL to S3 - Source connection failed: ${result.error}`, 'error');
+ statusDiv.innerHTML = `Error: ${result.error}
`;
+ statusDiv.className = 'status-message error';
+ }
+ statusDiv.style.display = 'block';
+ } catch (error) {
+ showNotification(`❌ Error testing source PostgreSQL connection: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function parsePsqlToS3SourceUriHandler() {
+ const uri = document.getElementById('psqlToS3_sourceUri')?.value;
+ if (!uri) {
+ showNotification('Please enter PostgreSQL URI', 'warning');
+ return;
+ }
+
+ setLoading(true);
+ try {
+ const result = await parsePostgresUri(uri);
+ if (result.success && result.parsed) {
+ psqlToS3Config.source = {
+ host: result.parsed.host || '',
+ user: result.parsed.user || '',
+ password: result.parsed.password || '',
+ port: result.parsed.port || 5432,
+ database: result.parsed.database || '',
+ uri: uri
+ };
+
+ document.getElementById('psqlToS3_sourceHost').value = result.parsed.host;
+ document.getElementById('psqlToS3_sourceUser').value = result.parsed.user;
+ document.getElementById('psqlToS3_sourcePassword').value = result.parsed.password;
+ document.getElementById('psqlToS3_sourcePort').value = result.parsed.port;
+ document.getElementById('psqlToS3_sourceDatabase').value = result.parsed.database;
+
+ showNotification('✅ Source PostgreSQL URI parsed successfully', 'success');
+ } else {
+ showNotification(`❌ Failed to parse PostgreSQL URI: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error parsing PostgreSQL URI: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function getPsqlToS3SchemasHandler() {
+ setLoading(true);
+ try {
+ const params = {};
+
+ if (psqlToS3Config.source.uri) {
+ params.uri = psqlToS3Config.source.uri;
+ } else if (psqlToS3Config.source.host && psqlToS3Config.source.user && psqlToS3Config.source.password && psqlToS3Config.source.database) {
+ params.host = psqlToS3Config.source.host;
+ params.user = psqlToS3Config.source.user;
+ params.password = psqlToS3Config.source.password;
+ params.database = psqlToS3Config.source.database;
+ params.port = psqlToS3Config.source.port;
+ } else {
+ showNotification('Please enter source PostgreSQL connection details', 'warning');
+ setLoading(false);
+ return;
+ }
+
+ const result = await getPostgresSchemas(params);
+
+ if (result.success) {
+ renderPsqlToS3Schemas(result.schemas || []);
+ document.getElementById('psqlToS3_schemasSection').style.display = 'block';
+ showNotification(`✅ Found ${result.count} schema(s)`, 'success');
+ } else {
+ showNotification(`❌ Failed to get schemas: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error getting schemas: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function getPsqlToS3TablesHandler() {
+ setLoading(true);
+ try {
+ const params = {};
+
+ if (psqlToS3Config.source.uri) {
+ params.uri = psqlToS3Config.source.uri;
+ } else if (psqlToS3Config.source.host && psqlToS3Config.source.user && psqlToS3Config.source.password && psqlToS3Config.source.database) {
+ params.host = psqlToS3Config.source.host;
+ params.user = psqlToS3Config.source.user;
+ params.password = psqlToS3Config.source.password;
+ params.database = psqlToS3Config.source.database;
+ params.port = psqlToS3Config.source.port;
+ } else {
+ showNotification('Please enter source PostgreSQL connection details', 'warning');
+ setLoading(false);
+ return;
+ }
+
+ const result = await getPostgresTables(params);
+ if (result.success) {
+ renderPsqlToS3Tables(result.tables || []);
+ document.getElementById('psqlToS3_tablesSection').style.display = 'block';
+ showNotification(`✅ Found ${result.count} table(s)`, 'success');
+ } else {
+ showNotification(`❌ Failed to get tables: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error getting tables: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function testPsqlToS3PgConnectionHandler() {
+ if (!psqlToS3Config.source.uri && !psqlToS3Config.source.host) {
+ showNotification('Please enter PostgreSQL connection details', 'warning');
+ return;
+ }
+
+ setLoading(true);
+ try {
+ const uri = psqlToS3Config.source.uri || buildPostgresConnectionString(
+ psqlToS3Config.source.host,
+ psqlToS3Config.source.database,
+ psqlToS3Config.source.user,
+ psqlToS3Config.source.port
+ );
+
+ const result = await testPgToS3PostgresConnection(uri);
+ if (result.success) {
+ showNotification(`✅ PostgreSQL connection successful!`, 'success');
+ } else {
+ showNotification(`❌ PostgreSQL connection failed: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error testing PostgreSQL connection: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function testPsqlToS3S3ConnectionHandler() {
+ setLoading(true);
+ try {
+ const result = await testPgToS3S3Connection(
+ psqlToS3Config.s3.accessKeyId,
+ psqlToS3Config.s3.secretAccessKey,
+ psqlToS3Config.s3.region,
+ psqlToS3Config.s3.endpointUrl
+ );
+
+ if (result.success) {
+ showNotification(`✅ S3 connection successful!`, 'success');
+ } else {
+ showNotification(`❌ S3 connection failed: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error testing S3 connection: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function startPsqlToS3MigrationHandler() {
+ if (!psqlToS3Config.source.uri && !psqlToS3Config.source.host) {
+ showNotification('Please enter PostgreSQL connection details', 'warning');
+ return;
+ }
+
+ if (!psqlToS3Config.s3.bucket) {
+ showNotification('Please enter S3 bucket name', 'warning');
+ return;
+ }
+
+ setLoading(true);
+
+ try {
+ const uri = psqlToS3Config.source.uri || buildPostgresConnectionString(
+ psqlToS3Config.source.host,
+ psqlToS3Config.source.database,
+ psqlToS3Config.source.user,
+ psqlToS3Config.source.port
+ );
+
+ const result = await startPgToS3Migration(
+ uri,
+ psqlToS3Config.s3.bucket,
+ psqlToS3Config.s3.prefix,
+ {
+ compress: psqlToS3Config.compress,
+ format: psqlToS3Config.format,
+ accessKeyId: psqlToS3Config.s3.accessKeyId,
+ secretAccessKey: psqlToS3Config.s3.secretAccessKey,
+ region: psqlToS3Config.s3.region,
+ endpointUrl: psqlToS3Config.s3.endpointUrl
+ }
+ );
+
+ if (result.success) {
+ activeMigration = result.migration_id;
+ showNotification(`✅ PostgreSQL to S3 migration ${activeMigration} started!`, 'success');
+ pollPgToS3MigrationStatus(activeMigration);
+ } else {
+ showNotification(`❌ Failed to start migration: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error starting migration: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ // ==================== PSQL to PSQL Handlers ====================
+
+ async function testPsqlToPsqlSourceConnectionHandler() {
+ setLoading(true);
+ try {
+ let uri = psqlToPsqlConfig.source.uri;
+ if (!uri && psqlToPsqlConfig.source.host && psqlToPsqlConfig.source.user && psqlToPsqlConfig.source.password && psqlToPsqlConfig.source.database) {
+ uri = `postgresql://${psqlToPsqlConfig.source.user}:${psqlToPsqlConfig.source.password}@${psqlToPsqlConfig.source.host}:${psqlToPsqlConfig.source.port}/${psqlToPsqlConfig.source.database}`;
+ }
+
+ const result = await testPostgresConnection({ uri });
+
+ const statusDiv = document.getElementById('psqlToPsql_sourceConnectionStatus');
+ if (result.success) {
+ showNotification(`✅ PSQL to PSQL - Source connection successful!`, 'success');
+ statusDiv.innerHTML = `
+ Success: ✅ Connected
+ Host: ${psqlToPsqlConfig.source.host || result.connection?.host}:${psqlToPsqlConfig.source.port || result.connection?.port}
+ Version: ${result.version || 'Unknown'}
+ `;
+ statusDiv.className = 'status-message success';
+ } else {
+ showNotification(`❌ PSQL to PSQL - Source connection failed: ${result.error}`, 'error');
+ statusDiv.innerHTML = `Error: ${result.error}
`;
+ statusDiv.className = 'status-message error';
+ }
+ statusDiv.style.display = 'block';
+ } catch (error) {
+ showNotification(`❌ Error testing source PostgreSQL connection: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function parsePsqlToPsqlSourceUriHandler() {
+ const uri = document.getElementById('psqlToPsql_sourceUri')?.value;
+ if (!uri) {
+ showNotification('Please enter PostgreSQL URI', 'warning');
+ return;
+ }
+
+ setLoading(true);
+ try {
+ const result = await parsePostgresUri(uri);
+ if (result.success && result.parsed) {
+ psqlToPsqlConfig.source = {
+ host: result.parsed.host || '',
+ user: result.parsed.user || '',
+ password: result.parsed.password || '',
+ port: result.parsed.port || 5432,
+ database: result.parsed.database || '',
+ uri: uri
+ };
+
+ document.getElementById('psqlToPsql_sourceHost').value = result.parsed.host;
+ document.getElementById('psqlToPsql_sourceUser').value = result.parsed.user;
+ document.getElementById('psqlToPsql_sourcePassword').value = result.parsed.password;
+ document.getElementById('psqlToPsql_sourcePort').value = result.parsed.port;
+ document.getElementById('psqlToPsql_sourceDatabase').value = result.parsed.database;
+
+ showNotification('✅ Source PostgreSQL URI parsed successfully', 'success');
+ } else {
+ showNotification(`❌ Failed to parse PostgreSQL URI: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error parsing PostgreSQL URI: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function getPsqlToPsqlSchemasHandler() {
+ setLoading(true);
+ try {
+ const params = {};
+
+ if (psqlToPsqlConfig.source.uri) {
+ params.uri = psqlToPsqlConfig.source.uri;
+ } else if (psqlToPsqlConfig.source.host && psqlToPsqlConfig.source.user && psqlToPsqlConfig.source.password && psqlToPsqlConfig.source.database) {
+ params.host = psqlToPsqlConfig.source.host;
+ params.user = psqlToPsqlConfig.source.user;
+ params.password = psqlToPsqlConfig.source.password;
+ params.database = psqlToPsqlConfig.source.database;
+ params.port = psqlToPsqlConfig.source.port;
+ } else {
+ showNotification('Please enter source PostgreSQL connection details', 'warning');
+ setLoading(false);
+ return;
+ }
+
+ const result = await getPostgresSchemas(params);
+
+ if (result.success) {
+ psqlToPsqlSchemas = result.schemas || [];
+ renderPsqlToPsqlSchemas();
+ document.getElementById('psqlToPsql_schemasSection').style.display = 'block';
+ showNotification(`✅ Found ${result.count} schema(s)`, 'success');
+ } else {
+ showNotification(`❌ Failed to get schemas: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error getting schemas: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function getPsqlToPsqlTablesHandler() {
+ setLoading(true);
+ try {
+ const params = {};
+
+ if (psqlToPsqlConfig.source.uri) {
+ params.uri = psqlToPsqlConfig.source.uri;
+ } else if (psqlToPsqlConfig.source.host && psqlToPsqlConfig.source.user && psqlToPsqlConfig.source.password && psqlToPsqlConfig.source.database) {
+ params.host = psqlToPsqlConfig.source.host;
+ params.user = psqlToPsqlConfig.source.user;
+ params.password = psqlToPsqlConfig.source.password;
+ params.database = psqlToPsqlConfig.source.database;
+ params.port = psqlToPsqlConfig.source.port;
+ } else {
+ showNotification('Please enter source PostgreSQL connection details', 'warning');
+ setLoading(false);
+ return;
+ }
+
+ const result = await getPostgresTables(params);
+ if (result.success) {
+ psqlToPsqlTables = result.tables || [];
+ renderPsqlToPsqlTables();
+ document.getElementById('psqlToPsql_tablesSection').style.display = 'block';
+ showNotification(`✅ Found ${result.count} table(s)`, 'success');
+ } else {
+ showNotification(`❌ Failed to get tables: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error getting tables: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function testPsqlToPsqlDestConnectionHandler() {
+ setLoading(true);
+ try {
+ let uri = psqlToPsqlConfig.dest.uri;
+ if (!uri && psqlToPsqlConfig.dest.host && psqlToPsqlConfig.dest.user && psqlToPsqlConfig.dest.password && psqlToPsqlConfig.dest.database) {
+ uri = `postgresql://${psqlToPsqlConfig.dest.user}:${psqlToPsqlConfig.dest.password}@${psqlToPsqlConfig.dest.host}:${psqlToPsqlConfig.dest.port}/${psqlToPsqlConfig.dest.database}`;
+ }
+
+ const result = await testPostgresConnection({ uri });
+
+ const statusDiv = document.getElementById('psqlToPsql_destConnectionStatus');
+ if (result.success) {
+ showNotification(`✅ PSQL to PSQL - Destination connection successful!`, 'success');
+ statusDiv.innerHTML = `
+ Success: ✅ Connected
+ Host: ${psqlToPsqlConfig.dest.host || result.connection?.host}:${psqlToPsqlConfig.dest.port || result.connection?.port}
+ Version: ${result.version || 'Unknown'}
+ `;
+ statusDiv.className = 'status-message success';
+ } else {
+ showNotification(`❌ PSQL to PSQL - Destination connection failed: ${result.error}`, 'error');
+ statusDiv.innerHTML = `Error: ${result.error}
`;
+ statusDiv.className = 'status-message error';
+ }
+ statusDiv.style.display = 'block';
+ } catch (error) {
+ showNotification(`❌ Error testing destination PostgreSQL connection: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function parsePsqlToPsqlDestUriHandler() {
+ const uri = document.getElementById('psqlToPsql_destUri')?.value;
+ if (!uri) {
+ showNotification('Please enter destination PostgreSQL URI', 'warning');
+ return;
+ }
+
+ setLoading(true);
+ try {
+ const result = await parsePostgresUri(uri);
+ if (result.success && result.parsed) {
+ psqlToPsqlConfig.dest = {
+ host: result.parsed.host || '',
+ user: result.parsed.user || '',
+ password: result.parsed.password || '',
+ port: result.parsed.port || 5432,
+ database: result.parsed.database || '',
+ uri: uri
+ };
+
+ document.getElementById('psqlToPsql_destHost').value = result.parsed.host;
+ document.getElementById('psqlToPsql_destUser').value = result.parsed.user;
+ document.getElementById('psqlToPsql_destPassword').value = result.parsed.password;
+ document.getElementById('psqlToPsql_destPort').value = result.parsed.port;
+ document.getElementById('psqlToPsql_destDatabase').value = result.parsed.database;
+
+ showNotification('✅ Destination PostgreSQL URI parsed successfully', 'success');
+ updatePostgresSummaries();
+ } else {
+ showNotification(`❌ Failed to parse PostgreSQL URI: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error parsing PostgreSQL URI: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function startPsqlToPsqlMigrationHandler() {
+ let sourceUri = psqlToPsqlConfig.source.uri || buildPostgresConnectionString(
+ psqlToPsqlConfig.source.host,
+ psqlToPsqlConfig.source.database,
+ psqlToPsqlConfig.source.user,
+ psqlToPsqlConfig.source.port
+ );
+
+ let destUri = psqlToPsqlConfig.dest.uri || buildPostgresConnectionString(
+ psqlToPsqlConfig.dest.host,
+ psqlToPsqlConfig.dest.database,
+ psqlToPsqlConfig.dest.user,
+ psqlToPsqlConfig.dest.port
+ );
+
+ if (!sourceUri) {
+ showNotification('Please enter source PostgreSQL connection details', 'warning');
+ return;
+ }
+
+ if (!destUri) {
+ showNotification('Please enter destination PostgreSQL connection details', 'warning');
+ return;
+ }
+
+ setLoading(true);
+
+ try {
+ const result = await startPostgresMigration(
+ sourceUri,
+ destUri,
+ psqlToPsqlSelectedSchemas.length > 0 ? psqlToPsqlSelectedSchemas : null,
+ psqlToPsqlSelectedTables.length > 0 ? psqlToPsqlSelectedTables : null
+ );
+
+ if (result.success) {
+ activeMigration = result.migration_id;
+ showNotification(`✅ PostgreSQL migration ${activeMigration} started!`, 'success');
+ pollPostgresMigrationStatus(activeMigration);
+ } else {
+ showNotification(`❌ Failed to start migration: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error starting migration: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ // ==================== S3 to S3 Handlers ====================
+
+ async function testS3ToS3SourceConnectionHandler() {
+ setLoading(true);
+ try {
+ const result = await testSourceS3Connection({
+ useEnvVars: false,
+ accessKeyId: s3ToS3Config.source.accessKeyId,
+ secretAccessKey: s3ToS3Config.source.secretAccessKey,
+ region: s3ToS3Config.source.region,
+ endpointUrl: s3ToS3Config.source.endpointUrl,
+ sessionToken: s3ToS3Config.source.sessionToken
+ });
+
+ const statusDiv = document.getElementById('s3ToS3_sourceConnectionStatus');
+ if (result.success) {
+ showNotification(`✅ S3 to S3 - Source connection successful!`, 'success');
+ statusDiv.innerHTML = `
+ Success: ✅ Connected
+ Endpoint: ${s3ToS3Config.source.endpointUrl || 'AWS S3 (default)'}
+ Region: ${s3ToS3Config.source.region}
+ Buckets Found: ${result.bucket_count || 0}
+ `;
+ statusDiv.className = 'status-message success';
+ } else {
+ showNotification(`❌ S3 to S3 - Source connection failed: ${result.error}`, 'error');
+ statusDiv.innerHTML = `Error: ${result.error}
`;
+ statusDiv.className = 'status-message error';
+ }
+ statusDiv.style.display = 'block';
+ } catch (error) {
+ showNotification(`❌ Error testing source S3 connection: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function listS3ToS3SourceBucketsHandler() {
+ setLoading(true);
+ try {
+ const result = await listSourceS3Buckets(
+ s3ToS3Config.source.accessKeyId,
+ s3ToS3Config.source.secretAccessKey,
+ s3ToS3Config.source.region,
+ s3ToS3Config.source.endpointUrl,
+ s3ToS3Config.source.sessionToken
+ );
+
+ if (result.success) {
+ s3ToS3SourceBuckets = result.buckets || [];
+ renderS3ToS3SourceBuckets();
+ document.getElementById('s3ToS3_sourceBucketsList').style.display = 'block';
+ showNotification(`✅ Found ${s3ToS3SourceBuckets.length} source bucket(s)`, 'success');
+ } else {
+ showNotification(`❌ Failed to list source buckets: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error listing source buckets: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function testS3ToS3DestConnectionHandler() {
+ setLoading(true);
+ try {
+ const result = await testDestinationS3Connection({
+ useEnvVars: false,
+ accessKeyId: s3ToS3Config.dest.accessKeyId,
+ secretAccessKey: s3ToS3Config.dest.secretAccessKey,
+ region: s3ToS3Config.dest.region,
+ endpointUrl: s3ToS3Config.dest.endpointUrl,
+ sessionToken: s3ToS3Config.dest.sessionToken
+ });
+
+ const statusDiv = document.getElementById('s3ToS3_destConnectionStatus');
+ if (result.success) {
+ showNotification(`✅ S3 to S3 - Destination connection successful!`, 'success');
+ statusDiv.innerHTML = `
+ Success: ✅ Connected
+ Endpoint: ${s3ToS3Config.dest.endpointUrl || 'AWS S3 (default)'}
+ Region: ${s3ToS3Config.dest.region}
+ Buckets Found: ${result.bucket_count || 0}
+ `;
+ statusDiv.className = 'status-message success';
+ } else {
+ showNotification(`❌ S3 to S3 - Destination connection failed: ${result.error}`, 'error');
+ statusDiv.innerHTML = `Error: ${result.error}
`;
+ statusDiv.className = 'status-message error';
+ }
+ statusDiv.style.display = 'block';
+ } catch (error) {
+ showNotification(`❌ Error testing destination S3 connection: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function listS3ToS3DestBucketsHandler() {
+ setLoading(true);
+ try {
+ const result = await listDestinationS3Buckets(
+ s3ToS3Config.dest.accessKeyId,
+ s3ToS3Config.dest.secretAccessKey,
+ s3ToS3Config.dest.region,
+ s3ToS3Config.dest.endpointUrl,
+ s3ToS3Config.dest.sessionToken
+ );
+
+ if (result.success) {
+ s3ToS3DestBuckets = result.buckets || [];
+ renderS3ToS3DestBuckets();
+ document.getElementById('s3ToS3_destBucketsList').style.display = 'block';
+ showNotification(`✅ Found ${s3ToS3DestBuckets.length} destination bucket(s)`, 'success');
+ } else {
+ showNotification(`❌ Failed to list destination buckets: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error listing destination buckets: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function createS3ToS3DestBucketHandler() {
+ if (!s3ToS3Config.dest.bucket) {
+ showNotification('Please enter destination bucket name', 'warning');
+ return;
+ }
+
+ setLoading(true);
+ try {
+ const result = await createS3Bucket(
+ s3ToS3Config.dest.bucket,
+ s3ToS3Config.dest.region,
+ {
+ accessKeyId: s3ToS3Config.dest.accessKeyId,
+ secretAccessKey: s3ToS3Config.dest.secretAccessKey,
+ endpointUrl: s3ToS3Config.dest.endpointUrl,
+ sessionToken: s3ToS3Config.dest.sessionToken
+ }
+ );
+
+ if (result.success) {
+ if (result.created) {
+ showNotification(`✅ Bucket created successfully: ${s3ToS3Config.dest.bucket}`, 'success');
+ } else {
+ showNotification(`ℹ️ Bucket already exists: ${s3ToS3Config.dest.bucket}`, 'info');
+ }
+ } else {
+ showNotification(`❌ Failed to create bucket: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error creating bucket: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function startS3ToS3MigrationHandler() {
+ if (!s3ToS3Config.source.bucket) {
+ showNotification('Please select source bucket', 'warning');
+ return;
+ }
+
+ if (!s3ToS3Config.dest.bucket) {
+ showNotification('Please select destination bucket', 'warning');
+ return;
+ }
+
+ setLoading(true);
+
+ try {
+ const includePatterns = document.getElementById('psqlToPsql_includePatterns')?.value
+ ?.split(',').map(p => p.trim()).filter(p => p) || null;
+ const excludePatterns = document.getElementById('psqlToPsql_excludePatterns')?.value
+ ?.split(',').map(p => p.trim()).filter(p => p) || null;
+
+ const result = await startS3Migration(
+ s3ToS3Config.source.bucket,
+ s3ToS3Config.dest.bucket,
+ '',
+ {
+ sourceAccessKeyId: s3ToS3Config.source.accessKeyId,
+ sourceSecretAccessKey: s3ToS3Config.source.secretAccessKey,
+ sourceRegion: s3ToS3Config.source.region,
+ sourceEndpointUrl: s3ToS3Config.source.endpointUrl,
+ sourceSessionToken: s3ToS3Config.source.sessionToken,
+
+ destAccessKeyId: s3ToS3Config.dest.accessKeyId,
+ destSecretAccessKey: s3ToS3Config.dest.secretAccessKey,
+ destRegion: s3ToS3Config.dest.region,
+ destEndpointUrl: s3ToS3Config.dest.endpointUrl,
+ destSessionToken: s3ToS3Config.dest.sessionToken,
+
+ includePatterns,
+ excludePatterns,
+ preserveMetadata: document.getElementById('psqlToPsql_preserveMetadata')?.checked,
+ storageClass: document.getElementById('psqlToPsql_storageClass')?.value,
+ createDestBucket: document.getElementById('psqlToPsql_createDestBucket')?.checked,
+ maxConcurrent: parseInt(document.getElementById('psqlToPsql_maxConcurrent')?.value) || 5
+ }
+ );
+
+ if (result.success) {
+ activeMigration = result.migration_id;
+ showNotification(`✅ S3 to S3 migration ${activeMigration} started!`, 'success');
+ pollS3MigrationStatus(activeMigration);
+ } else {
+ showNotification(`❌ Failed to start migration: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error starting migration: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ // ==================== Polling Functions ====================
+
+ async function pollPostgresMigrationStatus(migrationId) {
+ try {
+ const status = await getPostgresMigrationStatus(migrationId);
+ if (status.success && status.status) {
+ if (status.status.logs) {
+ migrationLogs = status.status.logs;
+ renderMigrationLogs();
+ document.getElementById('migrationLogs').style.display = 'block';
+ }
+
+ if (status.status.success === true) {
+ showNotification(`✅ Migration ${migrationId} completed!`, 'success');
+ loadMigrationsHandler();
+ } else if (status.status.success === false) {
+ showNotification(`❌ Migration ${migrationId} failed: ${status.status.error}`, 'error');
+ } else {
+ setTimeout(() => pollPostgresMigrationStatus(migrationId), 2000);
+ }
+ }
+ } catch (error) {
+ console.error('Error polling migration status:', error);
+ setTimeout(() => pollPostgresMigrationStatus(migrationId), 5000);
+ }
+ }
+
+ async function pollS3MigrationStatus(migrationId) {
+ try {
+ const status = await getS3MigrationStatus(migrationId);
+ if (status.success && status.status) {
+ if (status.status.logs) {
+ migrationLogs = status.status.logs;
+ renderMigrationLogs();
+ document.getElementById('migrationLogs').style.display = 'block';
+ }
+
+ if (status.status.success === true) {
+ showNotification(`✅ Migration ${migrationId} completed!`, 'success');
+ loadMigrationsHandler();
+ } else if (status.status.success === false) {
+ showNotification(`❌ Migration ${migrationId} failed: ${status.status.error}`, 'error');
+ } else {
+ setTimeout(() => pollS3MigrationStatus(migrationId), 2000);
+ }
+ }
+ } catch (error) {
+ console.error('Error polling migration status:', error);
+ setTimeout(() => pollS3MigrationStatus(migrationId), 5000);
+ }
+ }
+
+ async function pollPgToS3MigrationStatus(migrationId) {
+ try {
+ const status = await getPgToS3MigrationStatus(migrationId);
+ if (status.success && status.status) {
+ if (status.status.logs) {
+ migrationLogs = status.status.logs;
+ renderMigrationLogs();
+ document.getElementById('migrationLogs').style.display = 'block';
+ }
+
+ if (status.status.success === true) {
+ showNotification(`✅ Migration ${migrationId} completed!`, 'success');
+ loadMigrationsHandler();
+ } else if (status.status.success === false) {
+ showNotification(`❌ Migration ${migrationId} failed: ${status.status.error}`, 'error');
+ } else {
+ setTimeout(() => pollPgToS3MigrationStatus(migrationId), 2000);
+ }
+ }
+ } catch (error) {
+ console.error('Error polling migration status:', error);
+ setTimeout(() => pollPgToS3MigrationStatus(migrationId), 5000);
+ }
+ }
+
+ // ==================== Migration Status Functions ====================
+
+ async function loadMigrationsHandler() {
+ setLoading(true);
+ try {
+ const postgresResult = await listPostgresMigrations();
+ const s3Result = await listS3Migrations();
+ const pgToS3Result = await listPgToS3Migrations();
+
+ migrations = [];
+ if (postgresResult.success) migrations = migrations.concat(postgresResult.migrations || []);
+ if (s3Result.success) migrations = migrations.concat(s3Result.migrations || []);
+ if (pgToS3Result.success) migrations = migrations.concat(pgToS3Result.migrations || []);
+
+ renderMigrations();
+ document.getElementById('migrationsList').style.display = 'block';
+ showNotification(`✅ Found ${migrations.length} migrations`, 'success');
+ } catch (error) {
+ console.error('Error loading migrations:', error);
+ showNotification(`❌ Error loading migrations: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ // ==================== Environment Handlers ====================
+
+ async function loadCurrentEnvHandler() {
+ try {
+ const result = await getCurrentEnv();
+ if (result.success) {
+ currentEnv = result.environment_variables || {};
+ envPreview.textContent = formatEnvVars(currentEnv, 'dotenv');
+ renderEnvConfigCards();
+ showNotification('✅ Environment refreshed', 'success');
+ updateStatusInfo();
+ }
+ } catch (error) {
+ showNotification(`❌ Error loading environment: ${error.message}`, 'error');
+ }
+ }
+// ==================== إضافة دوال التتبع إلى App() ====================
+
+// أضف هذه الدوال داخل App() بعد دوال الـ polling الحالية
+
+/**
+ * Track migration with real-time progress using Server-Sent Events
+ * @param {string} migrationId - Migration ID to track
+ * @param {string} type - Migration type ('postgres', 's3', 'postgres-s3')
+ */
+function trackMigrationWithProgress(migrationId, type) {
+ showNotification(`📊 Tracking migration ${migrationId}...`, 'info');
+
+ // إنشاء منطقة عرض التقدم
+ const progressContainer = document.createElement('div');
+ progressContainer.className = 'progress-modal';
+ progressContainer.innerHTML = `
+
+ `;
+
+ document.body.appendChild(progressContainer);
+
+ const closeBtn = progressContainer.querySelector('.close-modal');
+ closeBtn.addEventListener('click', () => progressContainer.remove());
+
+ // بدء تتبع التقدم
+ const progressDiv = progressContainer.querySelector(`#progress-${migrationId}`);
+
+ progressDiv.innerHTML = `
+
+
+
Connecting...
+
+
+
');
+
+ // تحديث التفاصيل
+ let details = '';
+ if (progress.current_speed_formatted || progress.speed?.current_formatted) {
+ details += `⚡ Speed: ${progress.current_speed_formatted || progress.speed?.current_formatted}
`;
+ }
+ if (progress.eta_formatted || progress.time?.eta_formatted) {
+ details += `⏳ ETA: ${progress.eta_formatted || progress.time?.eta_formatted}
`;
+ }
+ if (progress.elapsed_time_formatted || progress.time?.elapsed_formatted) {
+ details += `⏱️ Elapsed: ${progress.elapsed_time_formatted || progress.time?.elapsed_formatted}
`;
+ }
+ detailsDiv.innerHTML = details;
+ },
+ onComplete: (completion) => {
+ statsDiv.innerHTML = '✅ Migration completed successfully!';
+ progressBar.style.width = '100%';
+ showNotification(`Migration ${migrationId} completed!`, 'success');
+ stopBtn.remove();
+
+ // تحديث قائمة الترحيلات
+ loadMigrationsHandler();
+ },
+ onError: (error) => {
+ statsDiv.innerHTML = `❌ Error: ${error.error}`;
+ showNotification(`Migration error: ${error.error}`, 'error');
+ }
+ });
+
+ stopBtn.addEventListener('click', () => {
+ stream.stop();
+ progressContainer.remove();
+ showNotification('Progress tracking stopped', 'info');
+ });
+}
+
+// ==================== تعديل دوال بدء الترحيل ====================
+
+// استبدل دوال بدء الترحيل بهذه النسخ المعدلة:
+
+async function startPsqlToS3MigrationHandler() {
+ if (!psqlToS3Config.source.uri && !psqlToS3Config.source.host) {
+ showNotification('Please enter PostgreSQL connection details', 'warning');
+ return;
+ }
+
+ if (!psqlToS3Config.s3.bucket) {
+ showNotification('Please enter S3 bucket name', 'warning');
+ return;
+ }
+
+ setLoading(true);
+
+ try {
+ const uri = psqlToS3Config.source.uri || buildPostgresConnectionString(
+ psqlToS3Config.source.host,
+ psqlToS3Config.source.database,
+ psqlToS3Config.source.user,
+ psqlToS3Config.source.port
+ );
+
+ const result = await startPgToS3Migration(
+ uri,
+ psqlToS3Config.s3.bucket,
+ psqlToS3Config.s3.prefix,
+ {
+ compress: psqlToS3Config.compress,
+ format: psqlToS3Config.format,
+ accessKeyId: psqlToS3Config.s3.accessKeyId,
+ secretAccessKey: psqlToS3Config.s3.secretAccessKey,
+ region: psqlToS3Config.s3.region,
+ endpointUrl: psqlToS3Config.s3.endpointUrl
+ }
+ );
+
+ if (result.success) {
+ activeMigration = result.migration_id;
+ showNotification(`✅ PostgreSQL to S3 migration ${activeMigration} started!`, 'success');
+
+ // استخدام التدفق المباشر بدلاً من polling
+ trackMigrationWithProgress(activeMigration, 'postgres-s3');
+ } else {
+ showNotification(`❌ Failed to start migration: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error starting migration: ${error.message}`, 'error');
+ }
+ setLoading(false);
+}
+
+async function startPsqlToPsqlMigrationHandler() {
+ let sourceUri = psqlToPsqlConfig.source.uri || buildPostgresConnectionString(
+ psqlToPsqlConfig.source.host,
+ psqlToPsqlConfig.source.database,
+ psqlToPsqlConfig.source.user,
+ psqlToPsqlConfig.source.port
+ );
+
+ let destUri = psqlToPsqlConfig.dest.uri || buildPostgresConnectionString(
+ psqlToPsqlConfig.dest.host,
+ psqlToPsqlConfig.dest.database,
+ psqlToPsqlConfig.dest.user,
+ psqlToPsqlConfig.dest.port
+ );
+
+ if (!sourceUri) {
+ showNotification('Please enter source PostgreSQL connection details', 'warning');
+ return;
+ }
+
+ if (!destUri) {
+ showNotification('Please enter destination PostgreSQL connection details', 'warning');
+ return;
+ }
+
+ setLoading(true);
+
+ try {
+ const result = await startPostgresMigration(
+ sourceUri,
+ destUri,
+ psqlToPsqlSelectedSchemas.length > 0 ? psqlToPsqlSelectedSchemas : null,
+ psqlToPsqlSelectedTables.length > 0 ? psqlToPsqlSelectedTables : null
+ );
+
+ if (result.success) {
+ activeMigration = result.migration_id;
+ showNotification(`✅ PostgreSQL migration ${activeMigration} started!`, 'success');
+
+ // استخدام التدفق المباشر بدلاً من polling
+ trackMigrationWithProgress(activeMigration, 'postgres');
+ } else {
+ showNotification(`❌ Failed to start migration: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error starting migration: ${error.message}`, 'error');
+ }
+ setLoading(false);
+}
+
+async function startS3ToS3MigrationHandler() {
+ if (!s3ToS3Config.source.bucket) {
+ showNotification('Please select source bucket', 'warning');
+ return;
+ }
+
+ if (!s3ToS3Config.dest.bucket) {
+ showNotification('Please select destination bucket', 'warning');
+ return;
+ }
+
+ setLoading(true);
+
+ try {
+ const includePatterns = document.getElementById('psqlToPsql_includePatterns')?.value
+ ?.split(',').map(p => p.trim()).filter(p => p) || null;
+ const excludePatterns = document.getElementById('psqlToPsql_excludePatterns')?.value
+ ?.split(',').map(p => p.trim()).filter(p => p) || null;
+
+ const result = await startS3Migration(
+ s3ToS3Config.source.bucket,
+ s3ToS3Config.dest.bucket,
+ '',
+ {
+ sourceAccessKeyId: s3ToS3Config.source.accessKeyId,
+ sourceSecretAccessKey: s3ToS3Config.source.secretAccessKey,
+ sourceRegion: s3ToS3Config.source.region,
+ sourceEndpointUrl: s3ToS3Config.source.endpointUrl,
+ sourceSessionToken: s3ToS3Config.source.sessionToken,
+
+ destAccessKeyId: s3ToS3Config.dest.accessKeyId,
+ destSecretAccessKey: s3ToS3Config.dest.secretAccessKey,
+ destRegion: s3ToS3Config.dest.region,
+ destEndpointUrl: s3ToS3Config.dest.endpointUrl,
+ destSessionToken: s3ToS3Config.dest.sessionToken,
+
+ includePatterns,
+ excludePatterns,
+ preserveMetadata: document.getElementById('psqlToPsql_preserveMetadata')?.checked,
+ storageClass: document.getElementById('psqlToPsql_storageClass')?.value,
+ createDestBucket: document.getElementById('psqlToPsql_createDestBucket')?.checked,
+ maxConcurrent: parseInt(document.getElementById('psqlToPsql_maxConcurrent')?.value) || 5
+ }
+ );
+
+ if (result.success) {
+ activeMigration = result.migration_id;
+ showNotification(`✅ S3 to S3 migration ${activeMigration} started!`, 'success');
+
+ // استخدام التدفق المباشر بدلاً من polling
+ trackMigrationWithProgress(activeMigration, 's3');
+ } else {
+ showNotification(`❌ Failed to start migration: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error starting migration: ${error.message}`, 'error');
+ }
+ setLoading(false);
+}
+ async function injectEnvironmentHandler() {
+ setLoading(true);
+ try {
+ const envVars = {
+ // PSQL to PSQL Source
+ SOURCE_PG_HOST: psqlToPsqlConfig.source.host,
+ SOURCE_PG_PORT: psqlToPsqlConfig.source.port.toString(),
+ SOURCE_PG_USER: psqlToPsqlConfig.source.user,
+ SOURCE_PG_PASSWORD: psqlToPsqlConfig.source.password,
+ SOURCE_PG_DATABASE: psqlToPsqlConfig.source.database,
+
+ // PSQL to PSQL Destination
+ DEST_PG_HOST: psqlToPsqlConfig.dest.host,
+ DEST_PG_PORT: psqlToPsqlConfig.dest.port.toString(),
+ DEST_PG_USER: psqlToPsqlConfig.dest.user,
+ DEST_PG_PASSWORD: psqlToPsqlConfig.dest.password,
+ DEST_PG_DATABASE: psqlToPsqlConfig.dest.database,
+
+ // S3 Source
+ SOURCE_AWS_ACCESS_KEY_ID: s3ToS3Config.source.accessKeyId,
+ SOURCE_AWS_SECRET_ACCESS_KEY: s3ToS3Config.source.secretAccessKey,
+ SOURCE_AWS_REGION: s3ToS3Config.source.region,
+ SOURCE_AWS_ENDPOINT_URL: s3ToS3Config.source.endpointUrl,
+ SOURCE_S3_BUCKET: s3ToS3Config.source.bucket,
+
+ // S3 Destination
+ DEST_AWS_ACCESS_KEY_ID: s3ToS3Config.dest.accessKeyId,
+ DEST_AWS_SECRET_ACCESS_KEY: s3ToS3Config.dest.secretAccessKey,
+ DEST_AWS_REGION: s3ToS3Config.dest.region,
+ DEST_AWS_ENDPOINT_URL: s3ToS3Config.dest.endpointUrl,
+ DEST_S3_BUCKET: s3ToS3Config.dest.bucket
+ };
+
+ const result = await injectEnv(envVars);
+ if (result.success) {
+ showNotification(`✅ Injected ${result.injected_variables?.length || 0} environment variables`, 'success');
+ loadCurrentEnvHandler();
+ } else {
+ showNotification(`❌ Failed to inject environment: ${result.error}`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error injecting environment: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function clearEnvironmentHandler() {
+ try {
+ const result = await injectEnv({});
+ if (result.success) {
+ showNotification('✅ Environment cleared', 'success');
+ loadCurrentEnvHandler();
+ }
+ } catch (error) {
+ showNotification(`❌ Error clearing environment: ${error.message}`, 'error');
+ }
+ }
+
+ async function copyEnvToClipboardHandler() {
+ if (!currentEnv || Object.keys(currentEnv).length === 0) {
+ showNotification('No environment variables to copy', 'warning');
+ return;
+ }
+
+ const format = document.getElementById('envFormat')?.value || 'dotenv';
+ const formatted = formatEnvVars(currentEnv, format);
+ const success = await copyToClipboard(formatted);
+ if (success) {
+ showNotification(`✅ Copied ${Object.keys(currentEnv).length} variables to clipboard`, 'success');
+ } else {
+ showNotification(`❌ Failed to copy to clipboard`, 'error');
+ }
+ }
+
+ // ==================== Security Handlers ====================
+
+ async function clearSessionHandler() {
+ setLoading(true);
+ try {
+ const result = await clearSession();
+ if (result.success) {
+ showNotification(`✅ ${result.message}`, 'success');
+ // Reset all configs
+ psqlToS3Config = { source: { host: '', user: '', password: '', port: 5432, database: '', uri: '' }, s3: { accessKeyId: '', secretAccessKey: '', region: 'us-east-1', endpointUrl: '', bucket: '', prefix: '' }, compress: true, format: 'csv' };
+ psqlToPsqlConfig = { source: { host: '', user: '', password: '', port: 5432, database: '', uri: '' }, dest: { host: '', user: '', password: '', port: 5432, database: '', uri: '' } };
+ s3ToS3Config = { source: { accessKeyId: '', secretAccessKey: '', region: 'us-east-1', endpointUrl: '', sessionToken: '', bucket: 'my-source-bucket' }, dest: { accessKeyId: '', secretAccessKey: '', region: 'us-east-1', endpointUrl: '', sessionToken: '', bucket: 'my-destination-bucket' } };
+ currentEnv = {};
+ envPreview.textContent = '';
+ updateStatusInfo();
+ loadSecurityStatus();
+ } else {
+ showNotification(`❌ Failed to clear session`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error clearing session: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function clearMigrationHandler() {
+ const migrationId = document.getElementById('cleanupMigrationId')?.value;
+ if (!migrationId) {
+ showNotification('Please enter migration ID', 'warning');
+ return;
+ }
+
+ setLoading(true);
+ try {
+ const result = await clearMigration(migrationId);
+ if (result.success) {
+ showNotification(`✅ ${result.message}`, 'success');
+ document.getElementById('cleanupMigrationId').value = '';
+ } else {
+ showNotification(`❌ Failed to clear migration data`, 'error');
+ }
+ } catch (error) {
+ showNotification(`❌ Error clearing migration: ${error.message}`, 'error');
+ }
+ setLoading(false);
+ }
+
+ async function loadSecurityStatus() {
+ try {
+ const result = await getSecurityStatus();
+ if (result.success) {
+ document.getElementById('sessionId').textContent = result.security_status.current_session_id || 'Unknown';
+ document.getElementById('activeSessions').textContent = result.security_status.active_sessions || 0;
+ }
+ } catch (error) {
+ console.error('Error loading security status:', error);
+ }
+ }
+
+ // ==================== Render Functions ====================
+
+ function renderPsqlToS3Schemas(schemas) {
+ const container = document.getElementById('psqlToS3_schemasContainer');
+ container.innerHTML = schemas.map(schema => `
+
+
+
+ `).join('');
+ }
+
+ function renderPsqlToS3Tables(tables) {
+ const container = document.getElementById('psqlToS3_tablesContainer');
+ const groups = groupTablesBySchema(tables);
+
+ let html = '';
+ Object.entries(groups).forEach(([schema, group]) => {
+ html += `
+
+
📚 Schema: ${schema}
+
+ ${group.count} tables
+
+
+
+
+
+ `).join('');
+
+ document.querySelectorAll('#psqlToPsql_schemasContainer .schema-checkbox').forEach(checkbox => {
+ checkbox.addEventListener('change', (e) => {
+ if (e.target.checked) {
+ psqlToPsqlSelectedSchemas.push(e.target.value);
+ } else {
+ psqlToPsqlSelectedSchemas = psqlToPsqlSelectedSchemas.filter(s => s !== e.target.value);
+ }
+ });
+ });
+ }
+
+ function renderPsqlToPsqlTables() {
+ const container = document.getElementById('psqlToPsql_tablesContainer');
+ const groups = groupTablesBySchema(psqlToPsqlTables);
+
+ let html = '';
+ Object.entries(groups).forEach(([schema, group]) => {
+ html += `
+
+
📚 Schema: ${schema}
+
+ ${group.count} tables
+
+
+
+
${bucket.name}
+
+ Region: ${bucket.region}
+ Created: ${new Date(bucket.creation_date).toLocaleDateString()}
+ Objects: ${bucket.object_count}
+ Size: ${formatFileSize(bucket.total_size)}
+
+
+
+
${bucket.name}
+
+ Region: ${bucket.region}
+ Created: ${new Date(bucket.creation_date).toLocaleDateString()}
+ Objects: ${bucket.object_count}
+ Size: ${formatFileSize(bucket.total_size)}
+
+
+
No migrations found
';
+ return;
+ }
+
+ container.innerHTML = migrations.map(migration => `
+
+
+
+
Status: ${migration.status}
+
Started: ${migration.started_at ? new Date(migration.started_at * 1000).toLocaleString() : 'N/A'}
+
+
+
+ ${migration.status === 'running' ? `
+
+ ` : ''}
+
+
No logs available
';
+ return;
+ }
+
+ container.innerHTML = migrationLogs.map(log => `
+
+ ${log.timestamp ? new Date(log.timestamp).toLocaleTimeString() : ''}
+ ${log.message}
+
+ `).join('');
+ }
+
+ function renderEnvConfigCards() {
+ const container = document.getElementById('envConfigCards');
+ if (!container) return;
+
+ container.innerHTML = `
+
+
🐘 PSQL to PSQL Source
+
${formatPostgresConfig(psqlToPsqlConfig.source)}
+
+
🐘 PSQL to PSQL Dest
+
${formatPostgresConfig(psqlToPsqlConfig.dest)}
+
+
📤 S3 to S3 Source
+
${formatS3Config({
+ endpoint_url: s3ToS3Config.source.endpointUrl,
+ region: s3ToS3Config.source.region,
+ bucket: s3ToS3Config.source.bucket,
+ access_key_id: s3ToS3Config.source.accessKeyId,
+ secret_access_key: s3ToS3Config.source.secretAccessKey
+ }, 'source')}
+
+
📥 S3 to S3 Dest
+
${formatS3Config({
+ endpoint_url: s3ToS3Config.dest.endpointUrl,
+ region: s3ToS3Config.dest.region,
+ bucket: s3ToS3Config.dest.bucket,
+ access_key_id: s3ToS3Config.dest.accessKeyId,
+ secret_access_key: s3ToS3Config.dest.secretAccessKey
+ }, 'destination')}
+