feat: implement database export/import functionality and table management UI components

2026-04-24 13:33:02 +03:00
parent 6594f639c3
commit 5192d950f0
3 changed files with 198 additions and 178 deletions
@@ -1,17 +1,17 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { 
-  Box, 
-  Paper, 
-  Typography, 
-  Button, 
-  Stack, 
-  Checkbox 
+import {
+  Box,
+  Paper,
+  Typography,
+  Button,
+  Stack,
+  Checkbox
 } from '@mui/material';
-import { 
-  TableChart, 
-  CleaningServices, 
-  Close, 
-  Save 
+import {
+  TableChart,
+  CleaningServices,
+  Close,
+  Save
 } from '@mui/icons-material';
 import { DataGrid, type GridColDef } from '@mui/x-data-grid';
 import { SchemaService } from '../services/api';
@@ -47,7 +47,7 @@ const DatabaseTablesGrid: React.FC<DatabaseTablesGridProps> = ({ database, setNo

  const handleBulkAction = async (action: 'truncate' | 'drop' | 'optimize') => {
    if (selectionModel.length === 0) return;
-    
+
    const confirmMsg = `Are you sure you want to ${action} ${selectionModel.length} selected tables? This action is irreversible!`;
    if (!window.confirm(confirmMsg)) return;

@@ -79,7 +79,7 @@ const DatabaseTablesGrid: React.FC<DatabaseTablesGridProps> = ({ database, setNo
  };

  const toggleRow = (name: string) => {
-    setSelectionModel(prev => 
+    setSelectionModel(prev =>
      prev.includes(name) ? prev.filter(n => n !== name) : [...prev, name]
    );
  };
@@ -100,16 +100,16 @@ const DatabaseTablesGrid: React.FC<DatabaseTablesGridProps> = ({ database, setNo
      sortable: false,
      filterable: false,
      renderHeader: () => (
-        <Checkbox 
-          size="small" 
+        <Checkbox
+          size="small"
          indeterminate={selectionModel.length > 0 && selectionModel.length < tableRows.length}
          checked={tableRows.length > 0 && selectionModel.length === tableRows.length}
          onChange={toggleAll}
        />
      ),
      renderCell: (params) => (
-        <Checkbox 
-          size="small" 
+        <Checkbox
+          size="small"
          checked={selectionModel.includes(params.row.name)}
          onChange={(e) => {
            e.stopPropagation();
@@ -118,14 +118,14 @@ const DatabaseTablesGrid: React.FC<DatabaseTablesGridProps> = ({ database, setNo
        />
      )
    },
-    { 
-      field: 'name', 
-      headerName: 'Table Name', 
-      flex: 1, 
+    {
+      field: 'name',
+      headerName: 'Table Name',
+      flex: 1,
      minWidth: 200,
      renderCell: (params) => (
-        <Button 
-          size="small" 
+        <Button
+          size="small"
          startIcon={<TableChart fontSize="small" />}
          onClick={() => setActiveTable(params.value)}
          sx={{ textTransform: 'none', fontWeight: 600, color: '#ffc107', '&:hover': { color: '#ffca28' } }}
@@ -136,15 +136,15 @@ const DatabaseTablesGrid: React.FC<DatabaseTablesGridProps> = ({ database, setNo
    },
    { field: 'engine', headerName: 'Engine', width: 120 },
    { field: 'rows', headerName: 'Rows', type: 'number', width: 120 },
-    { 
-      field: 'data_length', 
-      headerName: 'Data Size', 
+    {
+      field: 'data_length',
+      headerName: 'Data Size',
      width: 130,
      valueFormatter: (value) => `${(Number(value) / 1024 / 1024).toFixed(2)} MB`
    },
-    { 
-      field: 'index_length', 
-      headerName: 'Index Size', 
+    {
+      field: 'index_length',
+      headerName: 'Index Size',
      width: 130,
      valueFormatter: (value) => `${(Number(value) / 1024 / 1024).toFixed(2)} MB`
    },
@@ -168,13 +168,13 @@ const DatabaseTablesGrid: React.FC<DatabaseTablesGridProps> = ({ database, setNo
          <Button size="small" onClick={() => setSelectionModel([])}>Clear Selection</Button>
        </Paper>
      )}
-      <Paper sx={{ 
-        flexGrow: 1, 
-        borderRadius: 3, 
-        overflow: 'hidden', 
-        display: 'flex', 
-        flexDirection: 'column', 
-        border: 1, 
+      <Paper sx={{
+        flexGrow: 1,
+        borderRadius: 1,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        border: 1,
        borderColor: 'divider',
        boxShadow: '0 4px 12px rgba(0,0,0,0.05)'
      }}>
@@ -1,19 +1,25 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { 
-  Box, 
-  Paper, 
-  Typography, 
-  Button, 
-  CircularProgress, 
-  Alert 
+import {
+  Box,
+  Paper,
+  Typography,
+  Button,
+  CircularProgress,
+  Alert,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Avatar
 } from '@mui/material';
-import { 
-  Terminal, 
-  TableChart, 
-  CleaningServices, 
-  Save, 
-  History, 
-  Info 
+import {
+  Terminal,
+  TableChart,
+  CleaningServices,
+  Save,
+  History,
+  Info
 } from '@mui/icons-material';
 import { SchemaService } from '../services/api';
 import ConfirmDialog from './ConfirmDialog';
@@ -34,7 +40,7 @@ const TechnicalOverview: React.FC<TechnicalOverviewProps> = ({ database, table,
  const fetchMeta = useCallback(async () => {
    setLoadingMeta(true);
    try {
-      const res = table 
+      const res = table
        ? await SchemaService.getTableMetadata(database, table)
        : await SchemaService.getDatabaseMetadata(database);
      setMeta(res.data);
@@ -98,9 +104,9 @@ const TechnicalOverview: React.FC<TechnicalOverviewProps> = ({ database, table,
          Technical Specifications: {table ? `${database}.${table}` : database}
        </Typography>
        {table && (
-          <Button 
-            variant="outlined" 
-            color="error" 
+          <Button
+            variant="outlined"
+            color="error"
            startIcon={truncating ? <CircularProgress size={16} color="inherit" /> : <CleaningServices />}
            onClick={() => setShowConfirm(true)}
            disabled={truncating}
@@ -111,7 +117,7 @@ const TechnicalOverview: React.FC<TechnicalOverviewProps> = ({ database, table,
        )}
      </Box>

-      <ConfirmDialog 
+      <ConfirmDialog
        open={showConfirm}
        onClose={() => setShowConfirm(false)}
        onConfirm={handleTruncate}
@@ -120,28 +126,39 @@ const TechnicalOverview: React.FC<TechnicalOverviewProps> = ({ database, table,
        confirmLabel="Truncate Now"
        loading={truncating}
      />
-      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 3 }}>
-        {stats.map((stat, i) => (
-          <Paper key={i} sx={{ 
-            p: 3, 
-            borderRadius: 4, 
-            border: 1, 
-            borderColor: 'divider',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 1,
-            bgcolor: (theme) => theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.01)',
-            transition: 'all 0.2s',
-            '&:hover': { borderColor: 'primary.main', transform: 'translateY(-2px)' }
-          }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <Typography variant="caption" sx={{ fontWeight: 700, color: 'text.secondary', textTransform: 'uppercase', letterSpacing: 1 }}>{stat.label}</Typography>
-              <Box sx={{ color: 'primary.main', opacity: 0.5 }}>{stat.icon}</Box>
-            </Box>
-            <Typography variant="h5" sx={{ fontWeight: 800 }}>{stat.value || 'N/A'}</Typography>
-          </Paper>
-        ))}
-      </Box>
+      <TableContainer component={Paper} sx={{
+        borderRadius: 1,
+        border: 1,
+        borderColor: 'divider',
+        bgcolor: 'background.paper',
+        overflow: 'hidden',
+        boxShadow: 'none'
+      }}>
+        <Table>
+          <TableBody>
+            {stats.map((stat, i) => (
+              <TableRow key={i} sx={{ '&:last-child td, &:last-child th': { border: 0 }, '&:hover': { bgcolor: 'rgba(255,255,255,0.02)' } }}>
+                <TableCell sx={{ width: 64 }}>
+                  <Avatar sx={{
+                    bgcolor: 'rgba(0,123,255,0.1)',
+                    color: 'primary.main',
+                    width: 40,
+                    height: 40
+                  }}>
+                    {stat.icon}
+                  </Avatar>
+                </TableCell>
+                <TableCell sx={{ fontWeight: 700, color: 'text.secondary', textTransform: 'uppercase', letterSpacing: 1, fontSize: '0.75rem' }}>
+                  {stat.label}
+                </TableCell>
+                <TableCell align="right" sx={{ fontWeight: 800, fontSize: '1.1rem' }}>
+                  {stat.value || 'N/A'}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
    </Box>
  );
 };
@@ -8,7 +8,13 @@ import {
  Divider, 
  Alert, 
  LinearProgress,
-  IconButton
+  IconButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Avatar
 } from '@mui/material';
 import { 
  CloudDownload, 
@@ -111,106 +117,103 @@ const TransferContent: React.FC<TransferContentProps> = ({ mode = 'both' }) => {
          </Alert>
        )}

-        <Stack direction={{ xs: 'column', md: 'row' }} spacing={3}>
-          {/* Export Card */}
-          {(mode === 'export' || mode === 'both') && (
-            <Paper sx={{ 
-              flex: 1, 
-              p: 4, 
-              borderRadius: 4, 
-              border: 1, 
-              borderColor: 'divider',
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              textAlign: 'center',
-              gap: 2,
-              transition: 'all 0.3s ease',
-              '&:hover': { transform: 'translateY(-4px)', boxShadow: '0 12px 24px rgba(0,0,0,0.1)' }
-            }}>
-              <Box sx={{ p: 2, borderRadius: '50%', bgcolor: 'primary.main', color: 'white', mb: 1 }}>
-                <CloudDownload sx={{ fontSize: 40 }} />
-              </Box>
-              <Typography variant="h6" sx={{ fontWeight: 700 }}>Export {activeTable ? 'Table' : 'Database'}</Typography>
-              <Typography variant="body2" color="text.secondary">
-                Create a full backup of the current {activeTable ? 'table' : 'database'}: <strong>{activeTable ? `${activeDatabase}.${activeTable}` : (activeDatabase || 'All Databases')}</strong>
-              </Typography>
-              <Box sx={{ flexGrow: 1 }} />
-              <Button 
-                variant="contained" 
-                fullWidth
-                size="large"
-                startIcon={<CloudDownload />}
-                onClick={handleExport}
-                disabled={loading}
-                sx={{ borderRadius: 2, py: 1.5, fontWeight: 700 }}
-              >
-                Start Export
-              </Button>
-            </Paper>
-          )}
+        <TableContainer component={Paper} sx={{ 
+          borderRadius: 4, 
+          border: 1, 
+          borderColor: 'divider',
+          bgcolor: 'background.paper',
+          overflow: 'hidden',
+          boxShadow: 'none'
+        }}>
+          <Table>
+            <TableBody>
+              {/* Export Row */}
+              {(mode === 'export' || mode === 'both') && (
+                <TableRow sx={{ '&:hover': { bgcolor: 'rgba(255,255,255,0.02)' } }}>
+                  <TableCell sx={{ width: 80, verticalAlign: 'top', pt: 3 }}>
+                    <Avatar sx={{ bgcolor: 'primary.main', color: 'white', width: 48, height: 48 }}>
+                      <CloudDownload />
+                    </Avatar>
+                  </TableCell>
+                  <TableCell sx={{ py: 3 }}>
+                    <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>Export {activeTable ? 'Table' : 'Database'}</Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      Create a full backup of the current {activeTable ? 'table' : 'database'}: <br/>
+                      <Box component="span" sx={{ color: 'primary.main', fontWeight: 600 }}>
+                        {activeTable ? `${activeDatabase}.${activeTable}` : (activeDatabase || 'All Databases')}
+                      </Box>
+                    </Typography>
+                  </TableCell>
+                  <TableCell align="right" sx={{ py: 3 }}>
+                    <Button 
+                      variant="contained" 
+                      startIcon={<CloudDownload />}
+                      onClick={handleExport}
+                      disabled={loading}
+                      sx={{ borderRadius: 2, px: 3, py: 1, fontWeight: 700, minWidth: 160 }}
+                    >
+                      Start Export
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              )}

-          {/* Import Card */}
-          {(mode === 'import' || mode === 'both') && (
-            <Paper sx={{ 
-              flex: 1, 
-              p: 4, 
-              borderRadius: 4, 
-              border: 1, 
-              borderColor: 'divider',
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              textAlign: 'center',
-              gap: 2,
-              transition: 'all 0.3s ease',
-              '&:hover': { transform: 'translateY(-4px)', boxShadow: '0 12px 24px rgba(0,0,0,0.1)' }
-            }}>
-              <Box sx={{ p: 2, borderRadius: '50%', bgcolor: 'secondary.main', color: 'white', mb: 1 }}>
-                <CloudUpload sx={{ fontSize: 40 }} />
-              </Box>
-              <Typography variant="h6" sx={{ fontWeight: 700 }}>Import {activeTable ? 'Table' : 'Database'}</Typography>
-              <Typography variant="body2" color="text.secondary">
-                Upload a .sql file to restore or migrate your {activeTable ? 'table' : 'database'}.
-              </Typography>
-              
-              <Box sx={{ 
-                width: '100%', 
-                p: 2, 
-                border: '2px dashed', 
-                borderColor: file ? 'secondary.main' : 'divider',
-                borderRadius: 2,
-                bgcolor: 'rgba(0,0,0,0.02)',
-                cursor: 'pointer',
-                position: 'relative'
-              }}>
-                <input 
-                  type="file" 
-                  accept=".sql" 
-                  onChange={handleFileChange}
-                  style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0, cursor: 'pointer' }}
-                />
-                <Typography variant="caption" color="text.secondary">
-                  {file ? file.name : "Click or drag .sql file here"}
-                </Typography>
-              </Box>
-
-              <Box sx={{ flexGrow: 1 }} />
-              <Button 
-                variant="outlined" 
-                fullWidth
-                size="large"
-                color="secondary"
-                startIcon={<CloudUpload />}
-                onClick={handleImport}
-                disabled={loading || !file}
-                sx={{ borderRadius: 2, py: 1.5, fontWeight: 700 }}
-              >
-                Start Import
-              </Button>
-            </Paper>
-          )}
-        </Stack>
+              {/* Import Row */}
+              {(mode === 'import' || mode === 'both') && (
+                <TableRow sx={{ '&:hover': { bgcolor: 'rgba(255,255,255,0.02)' } }}>
+                  <TableCell sx={{ width: 80, verticalAlign: 'top', pt: 3 }}>
+                    <Avatar sx={{ bgcolor: 'secondary.main', color: 'white', width: 48, height: 48 }}>
+                      <CloudUpload />
+                    </Avatar>
+                  </TableCell>
+                  <TableCell sx={{ py: 3 }}>
+                    <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>Import {activeTable ? 'Table' : 'Database'}</Typography>
+                    <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+                      Upload a .sql file to restore or migrate your {activeTable ? 'table' : 'database'}.
+                    </Typography>
+                    
+                    <Box sx={{ 
+                      maxWidth: 400,
+                      p: 1.5, 
+                      border: '2px dashed', 
+                      borderColor: file ? 'secondary.main' : 'divider',
+                      borderRadius: 2,
+                      bgcolor: 'rgba(0,0,0,0.02)',
+                      cursor: 'pointer',
+                      position: 'relative',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 1
+                    }}>
+                      <input 
+                        type="file" 
+                        accept=".sql" 
+                        onChange={handleFileChange}
+                        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0, cursor: 'pointer', zIndex: 1 }}
+                      />
+                      <CloudUpload fontSize="small" color={file ? "secondary" : "disabled"} />
+                      <Typography variant="caption" sx={{ fontWeight: 600 }}>
+                        {file ? file.name : "Select or drag .sql file here"}
+                      </Typography>
+                    </Box>
+                  </TableCell>
+                  <TableCell align="right" sx={{ py: 3 }}>
+                    <Button 
+                      variant="outlined" 
+                      color="secondary"
+                      startIcon={<CloudUpload />}
+                      onClick={handleImport}
+                      disabled={loading || !file}
+                      sx={{ borderRadius: 2, px: 3, py: 1, fontWeight: 700, minWidth: 160 }}
+                    >
+                      Start Import
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>

        {loading && (
          <Box sx={{ width: '100%' }}>