feat: implement dynamic database management via MySQL driver and API controllers

2026-04-24 12:52:01 +03:00
parent 9fe07a1985
commit 23f8eeb560
8 changed files with 164 additions and 33 deletions
@@ -196,29 +196,63 @@ const MainContent: React.FC = () => {
    setDbTab(newValue);
  };

-  const DatabaseOverview = ({ database }: { database: string }) => {
+  const TechnicalOverview = ({ database, table }: { database: string, table: string | null }) => {
    const [meta, setMeta] = useState<any>(null);
    const [loadingMeta, setLoadingMeta] = useState(true);
+    const [truncating, setTruncating] = 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(() => {
-      const fetchMeta = async () => {
-        setLoadingMeta(true);
-        try {
-          const res = await SchemaService.getDatabaseMetadata(database);
-          setMeta(res.data);
-        } catch (e) {
-          console.error(e);
-        } finally {
-          setLoadingMeta(false);
-        }
-      };
      fetchMeta();
-    }, [database]);
+    }, [fetchMeta]);
+
+    const handleTruncate = async () => {
+      if (!table || !window.confirm(`Are you sure you want to truncate table "${table}"? This will delete all data!`)) return;
+      
+      setTruncating(true);
+      try {
+        await SchemaService.truncateTable(table);
+        setErrorInfo({
+          open: true,
+          title: 'Success',
+          message: `Table "${table}" has been truncated.`
+        });
+        fetchMeta();
+      } catch (error: any) {
+        setErrorInfo({
+          open: true,
+          title: 'Truncate Error',
+          message: error.response?.data?.error || error.message
+        });
+      } 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 = [
+    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 /> },
@@ -228,7 +262,23 @@ const MainContent: React.FC = () => {

    return (
      <Box sx={{ p: 1 }}>
-        <Typography variant="h5" sx={{ fontWeight: 800, mb: 4, letterSpacing: -0.5 }}>Technical Specifications: {database}</Typography>
+        <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={handleTruncate}
+              disabled={truncating}
+              sx={{ borderRadius: 2, textTransform: 'none', fontWeight: 700 }}
+            >
+              Truncate Table
+            </Button>
+          )}
+        </Box>
        <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 3 }}>
          {stats.map((stat, i) => (
            <Paper key={i} sx={{ 
@@ -247,7 +297,7 @@ const MainContent: React.FC = () => {
                <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}</Typography>
+              <Typography variant="h5" sx={{ fontWeight: 800 }}>{stat.value || 'N/A'}</Typography>
            </Paper>
          ))}
        </Box>
@@ -399,7 +449,7 @@ const MainContent: React.FC = () => {
      {dbTab === 'export' && <TransferContent mode="export" />}

      {/* Technical Info View */}
-      {dbTab === 'info' && <DatabaseOverview database={activeDatabase} />}
+      {dbTab === 'info' && <TechnicalOverview database={activeDatabase} table={activeTable} />}

      {/* Custom Alert (Snackbar) */}
      <Snackbar open={errorInfo.open} autoHideDuration={10000} onClose={handleCloseError} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
@@ -26,7 +26,7 @@ interface TransferContentProps {
 }

 const TransferContent: React.FC<TransferContentProps> = ({ mode = 'both' }) => {
-  const { activeDatabase, darkMode } = useAppStore();
+  const { activeDatabase, activeTable, darkMode } = useAppStore();
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
@@ -37,15 +37,16 @@ const TransferContent: React.FC<TransferContentProps> = ({ mode = 'both' }) => {
    setError(null);
    setSuccess(null);
    try {
-      const response = await SchemaService.exportDatabase(activeDatabase || undefined);
+      const response = await SchemaService.exportDatabase(activeDatabase || undefined, activeTable || undefined);
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
-      const filename = `backup-${activeDatabase || 'all'}-${new Date().toISOString().split('T')[0]}.sql`;
+      const contextName = activeTable ? `${activeDatabase}-${activeTable}` : (activeDatabase || 'all');
+      const filename = `backup-${contextName}-${new Date().toISOString().split('T')[0]}.sql`;
      link.setAttribute('download', filename);
      document.body.appendChild(link);
      link.click();
-      setSuccess('Database exported successfully!');
+      setSuccess(`${activeTable ? 'Table' : 'Database'} exported successfully!`);
    } catch (err: any) {
      setError('Export failed: ' + (err.response?.data?.error || err.message));
    } finally {
@@ -68,9 +69,10 @@ const TransferContent: React.FC<TransferContentProps> = ({ mode = 'both' }) => {
      const formData = new FormData();
      formData.append('file', file);
      if (activeDatabase) formData.append('database', activeDatabase);
+      if (activeTable) formData.append('table', activeTable);

      await SchemaService.importDatabase(formData);
-      setSuccess('Database imported successfully!');
+      setSuccess(`${activeTable ? 'Table' : 'Database'} imported successfully!`);
      setFile(null);
    } catch (err: any) {
      setError('Import failed: ' + (err.response?.data?.error || err.message));
@@ -83,9 +85,9 @@ const TransferContent: React.FC<TransferContentProps> = ({ mode = 'both' }) => {
    <Box sx={{ flexGrow: 1, p: 4, bgcolor: 'background.default', display: 'flex', justifyContent: 'center' }}>
      <Stack spacing={4} sx={{ width: '100%', maxWidth: 800 }}>
        <Box>
-          <Typography variant="h4" sx={{ fontWeight: 800, mb: 1 }}>Database Transfer</Typography>
+          <Typography variant="h4" sx={{ fontWeight: 800, mb: 1 }}>{activeTable ? 'Table' : 'Database'} Transfer</Typography>
          <Typography variant="body1" color="text.secondary">
-            Export your database to a SQL file or import an existing SQL dump using <strong>mysqldump</strong>.
+            Export your {activeTable ? 'table' : 'database'} to a SQL file or import an existing SQL dump using <strong>mysqldump</strong>.
          </Typography>
        </Box>

@@ -128,9 +130,9 @@ const TransferContent: React.FC<TransferContentProps> = ({ mode = 'both' }) => {
              <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 Database</Typography>
+              <Typography variant="h6" sx={{ fontWeight: 700 }}>Export {activeTable ? 'Table' : 'Database'}</Typography>
              <Typography variant="body2" color="text.secondary">
-                Create a full backup of the current database: <strong>{activeDatabase || 'All Databases'}</strong>
+                Create a full backup of the current {activeTable ? 'table' : 'database'}: <strong>{activeTable ? `${activeDatabase}.${activeTable}` : (activeDatabase || 'All Databases')}</strong>
              </Typography>
              <Box sx={{ flexGrow: 1 }} />
              <Button 
@@ -166,9 +168,9 @@ const TransferContent: React.FC<TransferContentProps> = ({ mode = 'both' }) => {
              <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 Database</Typography>
+              <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 data.
+                Upload a .sql file to restore or migrate your {activeTable ? 'table' : 'database'}.
              </Typography>
              
              <Box sx={{ 
@@ -26,10 +26,12 @@ export const SchemaService = {
  getDatabases: () => api.get('/schema/databases'),
  getTables: (db: string) => api.get(`/schema/tables/${db}`, { params: { database: db } }),
  getDatabaseMetadata: (db: string) => api.get(`/schema/metadata/${db}`, { params: { database: db } }),
+  getTableMetadata: (db: string, table: string) => api.get(`/schema/metadata/${db}/${table}`, { params: { database: db } }),
  getTableSchema: (table: string, database?: string) => api.get(`/schema/${table}`, { params: { database } }),
  getTableData: (table: string, params: any) => api.get(`/schema/${table}/data`, { params }),
+  truncateTable: (table: string) => api.post(`/schema/truncate/${table}`),
  executeQuery: (query: string) => api.post('/schema/execute', { query }),
-  exportDatabase: (database?: string) => api.post('/schema/export', { database }, { responseType: 'blob' }),
+  exportDatabase: (database?: string, table?: string) => api.post('/schema/export', { database, table }, { responseType: 'blob' }),
  importDatabase: (formData: FormData) => api.post('/schema/import', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  }),
@@ -41,8 +41,8 @@ export const useAppStore = create<AppState>()(
      setDbTab: (tab) => set({ dbTab: tab }),
      setConnection: (config) => set({ connection: config, connected: true }),
      clearConnection: () => set({ connection: null, connected: false, activeDatabase: null, activeTable: null }),
-      setActiveDatabase: (db) => set({ activeDatabase: db, activeTable: null, dbTab: 'tables' }),
-      setActiveTable: (table) => set({ activeTable: table, dbTab: 'tables' }),
+      setActiveDatabase: (db) => set({ activeDatabase: db, activeTable: null }),
+      setActiveTable: (table) => set({ activeTable: table }),
    }),
    {
      name: 'mariavel-storage',