truncgit/mariavel
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ümit Tunç
2026-04-24 13:33:02 +03:00
parent 6594f639c3
commit 5192d950f0
3 changed files with 198 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/DatabaseTablesGrid.tsx
+1 -1
View File
@@ -170,7 +170,7 @@ const DatabaseTablesGrid: React.FC<DatabaseTablesGridProps> = ({ database, setNo
)} )}
<Paper sx={{ <Paper sx={{
flexGrow: 1, flexGrow: 1,
borderRadius: 3, borderRadius: 1,
overflow: 'hidden', overflow: 'hidden',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
frontend/src/components/TechnicalOverview.tsx
+40 -23
View File
@@ -5,7 +5,13 @@ import {
Typography, Typography,
Button, Button,
CircularProgress, CircularProgress,
Alert Alert,
Table,
TableBody,
TableCell,
TableContainer,
TableRow,
Avatar
} from '@mui/material'; } from '@mui/material';
import { import {
Terminal, Terminal,
@@ -120,28 +126,39 @@ const TechnicalOverview: React.FC<TechnicalOverviewProps> = ({ database, table,
confirmLabel="Truncate Now" confirmLabel="Truncate Now"
loading={truncating} loading={truncating}
/> />
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 3 }}> <TableContainer component={Paper} sx={{
{stats.map((stat, i) => ( borderRadius: 1,
<Paper key={i} sx={{ border: 1,
p: 3, borderColor: 'divider',
borderRadius: 4, bgcolor: 'background.paper',
border: 1, overflow: 'hidden',
borderColor: 'divider', boxShadow: 'none'
display: 'flex', }}>
flexDirection: 'column', <Table>
gap: 1, <TableBody>
bgcolor: (theme) => theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.01)', {stats.map((stat, i) => (
transition: 'all 0.2s', <TableRow key={i} sx={{ '&:last-child td, &:last-child th': { border: 0 }, '&:hover': { bgcolor: 'rgba(255,255,255,0.02)' } }}>
'&:hover': { borderColor: 'primary.main', transform: 'translateY(-2px)' } <TableCell sx={{ width: 64 }}>
}}> <Avatar sx={{
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> bgcolor: 'rgba(0,123,255,0.1)',
<Typography variant="caption" sx={{ fontWeight: 700, color: 'text.secondary', textTransform: 'uppercase', letterSpacing: 1 }}>{stat.label}</Typography> color: 'primary.main',
<Box sx={{ color: 'primary.main', opacity: 0.5 }}>{stat.icon}</Box> width: 40,
</Box> height: 40
<Typography variant="h5" sx={{ fontWeight: 800 }}>{stat.value || 'N/A'}</Typography> }}>
</Paper> {stat.icon}
))} </Avatar>
</Box> </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> </Box>
); );
}; };
frontend/src/components/TransferContent.tsx
+102 -99
View File
@@ -8,7 +8,13 @@ import {
Divider, Divider,
Alert, Alert,
LinearProgress, LinearProgress,
IconButton IconButton,
Table,
TableBody,
TableCell,
TableContainer,
TableRow,
Avatar
} from '@mui/material'; } from '@mui/material';
import { import {
CloudDownload, CloudDownload,
@@ -111,106 +117,103 @@ const TransferContent: React.FC<TransferContentProps> = ({ mode = 'both' }) => {
</Alert> </Alert>
)} )}
<Stack direction={{ xs: 'column', md: 'row' }} spacing={3}> <TableContainer component={Paper} sx={{
{/* Export Card */} borderRadius: 4,
{(mode === 'export' || mode === 'both') && ( border: 1,
<Paper sx={{ borderColor: 'divider',
flex: 1, bgcolor: 'background.paper',
p: 4, overflow: 'hidden',
borderRadius: 4, boxShadow: 'none'
border: 1, }}>
borderColor: 'divider', <Table>
display: 'flex', <TableBody>
flexDirection: 'column', {/* Export Row */}
alignItems: 'center', {(mode === 'export' || mode === 'both') && (
textAlign: 'center', <TableRow sx={{ '&:hover': { bgcolor: 'rgba(255,255,255,0.02)' } }}>
gap: 2, <TableCell sx={{ width: 80, verticalAlign: 'top', pt: 3 }}>
transition: 'all 0.3s ease', <Avatar sx={{ bgcolor: 'primary.main', color: 'white', width: 48, height: 48 }}>
'&:hover': { transform: 'translateY(-4px)', boxShadow: '0 12px 24px rgba(0,0,0,0.1)' } <CloudDownload />
}}> </Avatar>
<Box sx={{ p: 2, borderRadius: '50%', bgcolor: 'primary.main', color: 'white', mb: 1 }}> </TableCell>
<CloudDownload sx={{ fontSize: 40 }} /> <TableCell sx={{ py: 3 }}>
</Box> <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>Export {activeTable ? 'Table' : 'Database'}</Typography>
<Typography variant="h6" sx={{ fontWeight: 700 }}>Export {activeTable ? 'Table' : 'Database'}</Typography> <Typography variant="body2" color="text.secondary">
<Typography variant="body2" color="text.secondary"> Create a full backup of the current {activeTable ? 'table' : 'database'}: <br/>
Create a full backup of the current {activeTable ? 'table' : 'database'}: <strong>{activeTable ? `${activeDatabase}.${activeTable}` : (activeDatabase || 'All Databases')}</strong> <Box component="span" sx={{ color: 'primary.main', fontWeight: 600 }}>
</Typography> {activeTable ? `${activeDatabase}.${activeTable}` : (activeDatabase || 'All Databases')}
<Box sx={{ flexGrow: 1 }} /> </Box>
<Button </Typography>
variant="contained" </TableCell>
fullWidth <TableCell align="right" sx={{ py: 3 }}>
size="large" <Button
startIcon={<CloudDownload />} variant="contained"
onClick={handleExport} startIcon={<CloudDownload />}
disabled={loading} onClick={handleExport}
sx={{ borderRadius: 2, py: 1.5, fontWeight: 700 }} disabled={loading}
> sx={{ borderRadius: 2, px: 3, py: 1, fontWeight: 700, minWidth: 160 }}
Start Export >
</Button> Start Export
</Paper> </Button>
)} </TableCell>
</TableRow>
)}
{/* Import Card */} {/* Import Row */}
{(mode === 'import' || mode === 'both') && ( {(mode === 'import' || mode === 'both') && (
<Paper sx={{ <TableRow sx={{ '&:hover': { bgcolor: 'rgba(255,255,255,0.02)' } }}>
flex: 1, <TableCell sx={{ width: 80, verticalAlign: 'top', pt: 3 }}>
p: 4, <Avatar sx={{ bgcolor: 'secondary.main', color: 'white', width: 48, height: 48 }}>
borderRadius: 4, <CloudUpload />
border: 1, </Avatar>
borderColor: 'divider', </TableCell>
display: 'flex', <TableCell sx={{ py: 3 }}>
flexDirection: 'column', <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>Import {activeTable ? 'Table' : 'Database'}</Typography>
alignItems: 'center', <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
textAlign: 'center', Upload a .sql file to restore or migrate your {activeTable ? 'table' : 'database'}.
gap: 2, </Typography>
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={{ <Box sx={{
width: '100%', maxWidth: 400,
p: 2, p: 1.5,
border: '2px dashed', border: '2px dashed',
borderColor: file ? 'secondary.main' : 'divider', borderColor: file ? 'secondary.main' : 'divider',
borderRadius: 2, borderRadius: 2,
bgcolor: 'rgba(0,0,0,0.02)', bgcolor: 'rgba(0,0,0,0.02)',
cursor: 'pointer', cursor: 'pointer',
position: 'relative' position: 'relative',
}}> display: 'flex',
<input alignItems: 'center',
type="file" gap: 1
accept=".sql" }}>
onChange={handleFileChange} <input
style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0, cursor: 'pointer' }} type="file"
/> accept=".sql"
<Typography variant="caption" color="text.secondary"> onChange={handleFileChange}
{file ? file.name : "Click or drag .sql file here"} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0, cursor: 'pointer', zIndex: 1 }}
</Typography> />
</Box> <CloudUpload fontSize="small" color={file ? "secondary" : "disabled"} />
<Typography variant="caption" sx={{ fontWeight: 600 }}>
<Box sx={{ flexGrow: 1 }} /> {file ? file.name : "Select or drag .sql file here"}
<Button </Typography>
variant="outlined" </Box>
fullWidth </TableCell>
size="large" <TableCell align="right" sx={{ py: 3 }}>
color="secondary" <Button
startIcon={<CloudUpload />} variant="outlined"
onClick={handleImport} color="secondary"
disabled={loading || !file} startIcon={<CloudUpload />}
sx={{ borderRadius: 2, py: 1.5, fontWeight: 700 }} onClick={handleImport}
> disabled={loading || !file}
Start Import sx={{ borderRadius: 2, px: 3, py: 1, fontWeight: 700, minWidth: 160 }}
</Button> >
</Paper> Start Import
)} </Button>
</Stack> </TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
{loading && ( {loading && (
<Box sx={{ width: '100%' }}> <Box sx={{ width: '100%' }}>