Ümit Tunç
662 lines
23 KiB
TypeScript
662 lines
23 KiB
TypeScript
import React, { useEffect, useState, useCallback } from 'react';
|
|
import {
|
|
Box,
|
|
Paper,
|
|
Typography,
|
|
CircularProgress,
|
|
Button,
|
|
Divider,
|
|
IconButton,
|
|
Tooltip,
|
|
Snackbar,
|
|
Alert,
|
|
AlertTitle,
|
|
Tabs,
|
|
Tab,
|
|
Stack,
|
|
Checkbox
|
|
} from '@mui/material';
|
|
import {
|
|
PlayArrow,
|
|
History,
|
|
Save,
|
|
CleaningServices,
|
|
Close,
|
|
TableChart,
|
|
Terminal,
|
|
CloudDownload,
|
|
CloudUpload,
|
|
Info
|
|
} from '@mui/icons-material';
|
|
import { DataGrid } from '@mui/x-data-grid';
|
|
import type { GridColDef, GridPaginationModel } from '@mui/x-data-grid';
|
|
import Editor from '@monaco-editor/react';
|
|
import { useAppStore } from '../store/useAppStore';
|
|
import { SchemaService } from '../services/api';
|
|
import TransferContent from './TransferContent';
|
|
import ConfirmDialog from './ConfirmDialog';
|
|
|
|
interface MainNotification {
|
|
open: boolean;
|
|
message: string;
|
|
title: string;
|
|
severity: 'success' | 'error' | 'info' | 'warning';
|
|
}
|
|
|
|
const DatabaseTablesGrid = ({ database, setNotification }: { database: string, setNotification: (n: MainNotification) => void }) => {
|
|
const [tableRows, setTableRows] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectionModel, setSelectionModel] = useState<string[]>([]);
|
|
const { setActiveTable } = useAppStore();
|
|
|
|
const fetchTablesMeta = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await SchemaService.getTablesMetadata(database);
|
|
setTableRows(res.data);
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [database]);
|
|
|
|
useEffect(() => {
|
|
fetchTablesMeta();
|
|
}, [fetchTablesMeta]);
|
|
|
|
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;
|
|
|
|
setLoading(true);
|
|
try {
|
|
await SchemaService.bulkAction({
|
|
tables: selectionModel,
|
|
action,
|
|
database
|
|
});
|
|
setNotification({
|
|
open: true,
|
|
title: 'Bulk Action Success',
|
|
message: `Successfully performed ${action} on ${selectionModel.length} tables.`,
|
|
severity: 'success'
|
|
});
|
|
fetchTablesMeta();
|
|
setSelectionModel([]);
|
|
} catch (error: any) {
|
|
setNotification({
|
|
open: true,
|
|
title: 'Bulk Action Error',
|
|
message: error.response?.data?.error || error.message,
|
|
severity: 'error'
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const toggleRow = (name: string) => {
|
|
setSelectionModel(prev =>
|
|
prev.includes(name) ? prev.filter(n => n !== name) : [...prev, name]
|
|
);
|
|
};
|
|
|
|
const toggleAll = () => {
|
|
if (selectionModel.length === tableRows.length) {
|
|
setSelectionModel([]);
|
|
} else {
|
|
setSelectionModel(tableRows.map(r => r.name));
|
|
}
|
|
};
|
|
|
|
const columns: GridColDef[] = [
|
|
{
|
|
field: '__check__',
|
|
headerName: '',
|
|
width: 50,
|
|
sortable: false,
|
|
filterable: false,
|
|
renderHeader: () => (
|
|
<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"
|
|
checked={selectionModel.includes(params.row.name)}
|
|
onChange={(e) => {
|
|
e.stopPropagation();
|
|
toggleRow(params.row.name);
|
|
}}
|
|
/>
|
|
)
|
|
},
|
|
{
|
|
field: 'name',
|
|
headerName: 'Table Name',
|
|
flex: 1,
|
|
minWidth: 200,
|
|
renderCell: (params) => (
|
|
<Button
|
|
size="small"
|
|
startIcon={<TableChart fontSize="small" />}
|
|
onClick={() => setActiveTable(params.value)}
|
|
sx={{ textTransform: 'none', fontWeight: 600, color: '#ffc107', '&:hover': { color: '#ffca28' } }}
|
|
>
|
|
{params.value}
|
|
</Button>
|
|
)
|
|
},
|
|
{ field: 'engine', headerName: 'Engine', width: 120 },
|
|
{ field: 'rows', headerName: 'Rows', type: 'number', width: 120 },
|
|
{
|
|
field: 'data_length',
|
|
headerName: 'Data Size',
|
|
width: 130,
|
|
valueFormatter: (value) => `${(Number(value) / 1024 / 1024).toFixed(2)} MB`
|
|
},
|
|
{
|
|
field: 'index_length',
|
|
headerName: 'Index Size',
|
|
width: 130,
|
|
valueFormatter: (value) => `${(Number(value) / 1024 / 1024).toFixed(2)} MB`
|
|
},
|
|
{ field: 'collation', headerName: 'Collation', width: 180 },
|
|
{ field: 'comment', headerName: 'Comment', flex: 1, minWidth: 150 },
|
|
];
|
|
|
|
return (
|
|
<Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
{selectionModel.length > 0 && (
|
|
<Paper sx={{ p: 1.5, borderRadius: 2, display: 'flex', alignItems: 'center', gap: 2, bgcolor: 'rgba(255, 193, 7, 0.05)', border: '1px dashed #ffc107' }}>
|
|
<Typography variant="body2" sx={{ fontWeight: 700, color: '#ffc107' }}>
|
|
{selectionModel.length} tables selected:
|
|
</Typography>
|
|
<Stack direction="row" spacing={1}>
|
|
<Button size="small" color="warning" variant="outlined" startIcon={<CleaningServices />} onClick={() => handleBulkAction('truncate')}>Truncate</Button>
|
|
<Button size="small" color="error" variant="outlined" startIcon={<Close />} onClick={() => handleBulkAction('drop')}>Drop</Button>
|
|
<Button size="small" color="info" variant="outlined" startIcon={<Save />} onClick={() => handleBulkAction('optimize')}>Optimize</Button>
|
|
</Stack>
|
|
<Box sx={{ flexGrow: 1 }} />
|
|
<Button size="small" onClick={() => setSelectionModel([])}>Clear Selection</Button>
|
|
</Paper>
|
|
)}
|
|
<Paper sx={{
|
|
flexGrow: 1,
|
|
borderRadius: 3,
|
|
overflow: 'hidden',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
border: 1,
|
|
borderColor: 'divider',
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.05)'
|
|
}}>
|
|
<DataGrid
|
|
rows={tableRows}
|
|
columns={columns}
|
|
loading={loading}
|
|
getRowId={(row: any) => row.name}
|
|
density="comfortable"
|
|
sx={{ border: 'none' }}
|
|
/>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const TechnicalOverview = ({ database, table, setNotification }: { database: string, table: string | null, setNotification: (n: MainNotification) => void }) => {
|
|
const [meta, setMeta] = useState<any>(null);
|
|
const [loadingMeta, setLoadingMeta] = useState(true);
|
|
const [truncating, setTruncating] = useState(false);
|
|
const [showConfirm, setShowConfirm] = useState(false);
|
|
|
|
const fetchMeta = useCallback(async () => {
|
|
setLoadingMeta(true);
|
|
try {
|
|
const res = table
|
|
? await SchemaService.getTableMetadata(database, table)
|
|
: await SchemaService.getDatabaseMetadata(database);
|
|
setMeta(res.data);
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
setLoadingMeta(false);
|
|
}
|
|
}, [database, table]);
|
|
|
|
useEffect(() => {
|
|
fetchMeta();
|
|
}, [fetchMeta]);
|
|
|
|
const handleTruncate = async () => {
|
|
setTruncating(true);
|
|
setShowConfirm(false);
|
|
try {
|
|
await SchemaService.truncateTable(table!);
|
|
setNotification({
|
|
open: true,
|
|
title: 'Success',
|
|
message: `Table "${table}" has been truncated.`,
|
|
severity: 'success'
|
|
});
|
|
fetchMeta();
|
|
} catch (error: any) {
|
|
setNotification({
|
|
open: true,
|
|
title: 'Truncate Error',
|
|
message: error.response?.data?.error || error.message,
|
|
severity: 'error'
|
|
});
|
|
} finally {
|
|
setTruncating(false);
|
|
}
|
|
};
|
|
|
|
if (loadingMeta) return <Box sx={{ display: 'flex', justifyContent: 'center', p: 8 }}><CircularProgress /></Box>;
|
|
if (!meta) return <Alert severity="error">Could not load metadata</Alert>;
|
|
|
|
const stats = table ? [
|
|
{ label: 'Engine', value: meta.engine, icon: <Terminal /> },
|
|
{ label: 'Rows', value: meta.rows, icon: <TableChart /> },
|
|
{ label: 'Collation', value: meta.collation, icon: <CleaningServices /> },
|
|
{ label: 'Data Size', value: `${(meta.data_length / 1024 / 1024).toFixed(2)} MB`, icon: <Save /> },
|
|
{ label: 'Index Size', value: `${(meta.index_length / 1024 / 1024).toFixed(2)} MB`, icon: <History /> },
|
|
{ label: 'Created', value: meta.create_time, icon: <Info /> },
|
|
] : [
|
|
{ label: 'Character Set', value: meta.charset, icon: <History /> },
|
|
{ label: 'Collation', value: meta.collation, icon: <CleaningServices /> },
|
|
{ label: 'Tables', value: meta.table_count, icon: <TableChart /> },
|
|
{ label: 'Views', value: meta.view_count, icon: <History /> },
|
|
{ label: 'Total Size', value: `${(meta.size_bytes / 1024 / 1024).toFixed(2)} MB`, icon: <Save /> },
|
|
];
|
|
|
|
return (
|
|
<Box sx={{ p: 1 }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
|
|
<Typography variant="h5" sx={{ fontWeight: 800, letterSpacing: -0.5 }}>
|
|
Technical Specifications: {table ? `${database}.${table}` : database}
|
|
</Typography>
|
|
{table && (
|
|
<Button
|
|
variant="outlined"
|
|
color="error"
|
|
startIcon={truncating ? <CircularProgress size={16} color="inherit" /> : <CleaningServices />}
|
|
onClick={() => setShowConfirm(true)}
|
|
disabled={truncating}
|
|
sx={{ borderRadius: 2, textTransform: 'none', fontWeight: 700 }}
|
|
>
|
|
Truncate Table
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
|
|
<ConfirmDialog
|
|
open={showConfirm}
|
|
onClose={() => setShowConfirm(false)}
|
|
onConfirm={handleTruncate}
|
|
title="Truncate Table"
|
|
message={`Are you sure you want to truncate table "${table}"? This action will permanently delete all ${meta?.rows || ''} records. This cannot be undone.`}
|
|
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>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const MainContent: React.FC = () => {
|
|
const { activeTable, activeDatabase, darkMode, dbTab, setDbTab } = useAppStore();
|
|
const [columns, setColumns] = useState<GridColDef[]>([]);
|
|
const [rows, setRows] = useState<any[]>([]);
|
|
const [rowCount, setRowCount] = useState(0);
|
|
const [loadingSchema, setLoadingSchema] = useState(false);
|
|
const [loadingData, setLoadingData] = useState(false);
|
|
const [sqlQuery, setSqlQuery] = useState('');
|
|
const [isCustomQuery, setIsCustomQuery] = useState(false);
|
|
const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
|
|
page: 0,
|
|
pageSize: 100,
|
|
});
|
|
|
|
// Custom Notification State
|
|
const [notification, setNotification] = useState<MainNotification>({
|
|
open: false,
|
|
message: '',
|
|
title: '',
|
|
severity: 'error'
|
|
});
|
|
|
|
const handleCloseNotification = () => setNotification({ ...notification, open: false });
|
|
|
|
// Helper to map SQL types to MUI X Data Grid types
|
|
const mapSqlTypeToMuiType = (sqlType: string): 'string' | 'number' | 'date' | 'dateTime' | 'boolean' => {
|
|
sqlType = sqlType.toLowerCase();
|
|
if (sqlType.includes('int') || sqlType.includes('decimal') || sqlType.includes('float') || sqlType.includes('double')) return 'number';
|
|
if (sqlType.includes('datetime') || sqlType.includes('timestamp')) return 'dateTime';
|
|
if (sqlType.includes('date')) return 'date';
|
|
if (sqlType.includes('bool') || sqlType.includes('tinyint(1)')) return 'boolean';
|
|
return 'string';
|
|
};
|
|
|
|
// Set initial SQL query when table changes
|
|
useEffect(() => {
|
|
if (activeTable && activeDatabase) {
|
|
setSqlQuery(`SELECT * FROM ${activeDatabase}.${activeTable} LIMIT 1000;`);
|
|
setIsCustomQuery(false);
|
|
}
|
|
}, [activeTable, activeDatabase]);
|
|
|
|
// Fetch Schema
|
|
useEffect(() => {
|
|
const fetchSchema = async () => {
|
|
if (!activeTable || !activeDatabase || isCustomQuery) return;
|
|
|
|
setLoadingSchema(true);
|
|
try {
|
|
const schemaRes = await SchemaService.getTableSchema(activeTable, activeDatabase);
|
|
const cols: GridColDef[] = schemaRes.data.map((col: any) => {
|
|
const type = mapSqlTypeToMuiType(col.Type);
|
|
return {
|
|
field: col.Field,
|
|
headerName: col.Field,
|
|
type: type,
|
|
width: 200,
|
|
minWidth: 100,
|
|
valueGetter: (value: any) => {
|
|
if ((type === 'date' || type === 'dateTime') && value && typeof value === 'string') {
|
|
return new Date(value);
|
|
}
|
|
return value;
|
|
},
|
|
};
|
|
});
|
|
setColumns(cols);
|
|
setPaginationModel({ page: 0, pageSize: 100 });
|
|
} catch (error) {
|
|
console.error('Failed to fetch table schema', error);
|
|
} finally {
|
|
setLoadingSchema(false);
|
|
}
|
|
};
|
|
|
|
fetchSchema();
|
|
}, [activeTable, activeDatabase, isCustomQuery]);
|
|
|
|
// Fetch Data
|
|
const fetchData = useCallback(async () => {
|
|
if (!activeTable || !activeDatabase || isCustomQuery) return;
|
|
|
|
setLoadingData(true);
|
|
try {
|
|
const params = {
|
|
skip: paginationModel.page * paginationModel.pageSize,
|
|
take: paginationModel.pageSize,
|
|
requireTotalCount: true,
|
|
database: activeDatabase,
|
|
};
|
|
|
|
const response = await SchemaService.getTableData(activeTable, params);
|
|
|
|
const dataWithIds = response.data.data.map((row: any, index: number) => ({
|
|
id: row.id || row.ID || `row-${index}-${paginationModel.page}`,
|
|
...row,
|
|
}));
|
|
|
|
setRows(dataWithIds);
|
|
setRowCount(response.data.totalCount || 0);
|
|
} catch (error) {
|
|
console.error('Data loading error', error);
|
|
} finally {
|
|
setLoadingData(false);
|
|
}
|
|
}, [activeTable, activeDatabase, paginationModel, isCustomQuery]);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [fetchData]);
|
|
|
|
const handleExecute = async () => {
|
|
if (!sqlQuery) return;
|
|
setLoadingData(true);
|
|
setIsCustomQuery(true);
|
|
try {
|
|
const response = await SchemaService.executeQuery(sqlQuery);
|
|
const rawData = response.data.data;
|
|
|
|
if (rawData && rawData.length > 0) {
|
|
const fields = Object.keys(rawData[0]);
|
|
const newCols: GridColDef[] = fields.map(field => ({
|
|
field,
|
|
headerName: field,
|
|
width: 150,
|
|
flex: fields.length < 6 ? 1 : 0
|
|
}));
|
|
setColumns(newCols);
|
|
|
|
const dataWithIds = rawData.map((row: any, index: number) => ({
|
|
id: row.id || row.ID || `row-${index}`,
|
|
...row,
|
|
}));
|
|
setRows(dataWithIds);
|
|
setRowCount(response.data.count);
|
|
} else {
|
|
setRows([]);
|
|
setRowCount(0);
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Execution error', error);
|
|
const msg = error.response?.data?.error || 'An unexpected error occurred during SQL execution.';
|
|
setNotification({
|
|
open: true,
|
|
title: 'SQL Execution Error',
|
|
message: msg,
|
|
severity: 'error'
|
|
});
|
|
} finally {
|
|
setLoadingData(false);
|
|
}
|
|
};
|
|
|
|
if (!activeDatabase) {
|
|
return (
|
|
<Box sx={{ flexGrow: 1, p: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: 'background.default' }}>
|
|
<Typography variant="h6" color="text.secondary">Select a database to start</Typography>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const handleTabChange = (_: React.SyntheticEvent, newValue: string) => {
|
|
setDbTab(newValue);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ flexGrow: 1, p: 3, bgcolor: 'background.default', display: 'flex', flexDirection: 'column', width: '100%', minWidth: 0, overflow: 'hidden', gap: 2 }}>
|
|
{/* Database Navigation Tabs */}
|
|
<Paper elevation={0} sx={{
|
|
flexShrink: 0,
|
|
borderRadius: 3,
|
|
border: 1,
|
|
borderColor: 'divider',
|
|
bgcolor: darkMode ? '#111827' : '#ffffff',
|
|
overflow: 'hidden'
|
|
}}>
|
|
<Tabs
|
|
value={dbTab}
|
|
onChange={handleTabChange}
|
|
sx={{
|
|
px: 2,
|
|
minHeight: 56,
|
|
'& .MuiTabs-indicator': { height: 3, borderRadius: '3px 3px 0 0' },
|
|
'& .MuiTab-root': {
|
|
textTransform: 'none',
|
|
fontWeight: 700,
|
|
fontSize: '0.9rem',
|
|
minHeight: 56,
|
|
minWidth: 120,
|
|
gap: 1
|
|
}
|
|
}}
|
|
>
|
|
<Tab value="tables" icon={<TableChart sx={{ fontSize: 18 }} />} iconPosition="start" label="Data Explorer" />
|
|
<Tab value="sql" icon={<Terminal sx={{ fontSize: 18 }} />} iconPosition="start" label="SQL Editor" />
|
|
<Tab value="import" icon={<CloudUpload sx={{ fontSize: 18 }} />} iconPosition="start" label="Import" />
|
|
<Tab value="export" icon={<CloudDownload sx={{ fontSize: 18 }} />} iconPosition="start" label="Export" />
|
|
<Tab value="info" icon={<Info sx={{ fontSize: 18 }} />} iconPosition="start" label="Technical Info" />
|
|
</Tabs>
|
|
</Paper>
|
|
|
|
{/* Tables View */}
|
|
{dbTab === 'tables' && (
|
|
<Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
|
|
{!activeTable ? (
|
|
<Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
<Typography variant="h6" sx={{ fontWeight: 800 }}>Database Tables: {activeDatabase}</Typography>
|
|
<DatabaseTablesGrid database={activeDatabase} setNotification={setNotification} />
|
|
</Box>
|
|
) : (
|
|
<>
|
|
<Box sx={{ mb: 1.5, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
|
<Typography variant="h6" sx={{ fontWeight: 800 }}>Table Results: {activeTable}</Typography>
|
|
<Box sx={{ px: 1.5, py: 0.5, borderRadius: 10, bgcolor: 'rgba(0, 97, 255, 0.1)', color: 'primary.main' }}>
|
|
<Typography variant="caption" sx={{ fontWeight: 700 }}>{rowCount} rows found</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Paper sx={{
|
|
flexGrow: 1,
|
|
borderRadius: 3,
|
|
overflow: 'hidden',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
width: '100%',
|
|
border: 1,
|
|
borderColor: 'divider',
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.05)'
|
|
}}>
|
|
{loadingSchema ? (
|
|
<Box sx={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
|
|
<CircularProgress />
|
|
</Box>
|
|
) : (
|
|
<DataGrid
|
|
rows={rows}
|
|
columns={columns}
|
|
rowCount={rowCount}
|
|
loading={loadingData}
|
|
paginationMode="server"
|
|
paginationModel={paginationModel}
|
|
onPaginationModelChange={setPaginationModel}
|
|
pageSizeOptions={[25, 50, 100]}
|
|
sx={{
|
|
border: 'none',
|
|
'& .MuiDataGrid-row:hover': { bgcolor: 'rgba(0, 97, 255, 0.04)' },
|
|
}}
|
|
/>
|
|
)}
|
|
</Paper>
|
|
</>
|
|
)}
|
|
</Box>
|
|
)}
|
|
|
|
{/* SQL View */}
|
|
{dbTab === 'sql' && (
|
|
<Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 2, overflow: 'hidden' }}>
|
|
<Paper elevation={0} sx={{
|
|
flexShrink: 0,
|
|
borderRadius: 3,
|
|
overflow: 'hidden',
|
|
border: 1,
|
|
borderColor: 'divider',
|
|
bgcolor: darkMode ? '#111827' : '#ffffff',
|
|
}}>
|
|
<Box sx={{ px: 3, py: 1.5, display: 'flex', alignItems: 'center', justifyContent: 'space-between', bgcolor: 'rgba(0,0,0,0.02)' }}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 800 }}>SQL CONSOLE</Typography>
|
|
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
onClick={handleExecute}
|
|
disabled={loadingData}
|
|
startIcon={loadingData ? <CircularProgress size={16} color="inherit" /> : <PlayArrow />}
|
|
sx={{ borderRadius: 2, textTransform: 'none', fontWeight: 700 }}
|
|
>
|
|
Execute Query
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
<Editor
|
|
height="200px"
|
|
defaultLanguage="sql"
|
|
theme={darkMode ? 'vs-dark' : 'light'}
|
|
value={sqlQuery}
|
|
onChange={(value) => setSqlQuery(value || '')}
|
|
options={{ minimap: { enabled: false }, fontSize: 14, automaticLayout: true }}
|
|
/>
|
|
</Paper>
|
|
|
|
<Paper sx={{ flexGrow: 1, borderRadius: 3, overflow: 'hidden', border: 1, borderColor: 'divider' }}>
|
|
<DataGrid
|
|
rows={rows}
|
|
columns={columns}
|
|
loading={loadingData}
|
|
sx={{ border: 'none' }}
|
|
/>
|
|
</Paper>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Import/Export Views */}
|
|
{dbTab === 'import' && <TransferContent mode="import" />}
|
|
{dbTab === 'export' && <TransferContent mode="export" />}
|
|
|
|
{/* Technical Info View */}
|
|
{dbTab === 'info' && <TechnicalOverview database={activeDatabase} table={activeTable} setNotification={setNotification} />}
|
|
|
|
{/* Custom Notification (Snackbar) */}
|
|
<Snackbar open={notification.open} autoHideDuration={6000} onClose={handleCloseNotification} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
|
|
<Alert onClose={handleCloseNotification} severity={notification.severity} variant="filled" sx={{
|
|
width: '100%',
|
|
borderRadius: 2,
|
|
boxShadow: notification.severity === 'success' ? '0 8px 24px rgba(46, 125, 50, 0.25)' : '0 8px 24px rgba(211, 47, 47, 0.25)'
|
|
}}>
|
|
<AlertTitle sx={{ fontWeight: 800 }}>{notification.title}</AlertTitle>
|
|
<Typography variant="body2">{notification.message}</Typography>
|
|
</Alert>
|
|
</Snackbar>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default MainContent;
|