feat: implement dynamic database connection service with MySQL driver and API schema endpoints

2026-04-24 07:21:59 +03:00
parent 1a75c32469
commit ce67df1067
12 changed files with 417 additions and 78 deletions
@@ -1,45 +1,105 @@
-import React from 'react';
-import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Divider } from '@mui/material';
-import { Storage, TableChart, Folder } from '@mui/icons-material';
+import React, { useEffect, useState } from 'react';
+import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Divider, CircularProgress } from '@mui/material';
+import { Storage } from '@mui/icons-material';
 import { useAppStore } from '../store/useAppStore';
+import { SchemaService } from '../services/api';

 const Sidebar: React.FC = () => {
-  const { activeDatabase, setActiveDatabase } = useAppStore();
+  const { activeDatabase, setActiveDatabase, setActiveTable, activeTable } = useAppStore();
+  const [databases, setDatabases] = useState<string[]>([]);
+  const [tables, setTables] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [tablesLoading, setTablesLoading] = useState(false);

-  // Mock data for initial UI
-  const databases = ['information_schema', 'mysql', 'performance_schema', 'sys', 'mariavel_db'];
+  useEffect(() => {
+    const fetchDatabases = async () => {
+      try {
+        const response = await SchemaService.getDatabases();
+        setDatabases(response.data);
+      } catch (error) {
+        console.error('Failed to fetch databases', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchDatabases();
+  }, []);
+
+  const handleDatabaseClick = async (db: string) => {
+    if (activeDatabase === db) {
+      setActiveDatabase(null);
+      setTables([]);
+      return;
+    }
+    
+    setActiveDatabase(db);
+    setTablesLoading(true);
+    try {
+      const response = await SchemaService.getTables(db);
+      setTables(response.data);
+    } catch (error) {
+      console.error('Failed to fetch tables', error);
+    } finally {
+      setTablesLoading(false);
+    }
+  };

  return (
-    <Box sx={{ width: 260, borderRight: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column' }}>
-      <Box sx={{ p: 2 }}>
-        <Typography variant="overline" sx={{ fontWeight: 700, color: 'text.secondary' }}>
-          Databases
-        </Typography>
+    <Box sx={{ width: 260, borderRight: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column', bgcolor: 'background.paper' }}>
+      <Box sx={{ p: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
+        <Storage color="primary" />
+        <Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1.1rem' }}>Explorer</Typography>
      </Box>
-      <List sx={{ flexGrow: 1, overflow: 'auto' }}>
-        {databases.map((db) => (
-          <ListItem key={db} disablePadding>
-            <ListItemButton 
-              selected={activeDatabase === db}
-              onClick={() => setActiveDatabase(db)}
-            >
-              <ListItemIcon>
-                <Storage color={activeDatabase === db ? 'primary' : 'inherit'} />
-              </ListItemIcon>
-              <ListItemText 
-                primary={
-                  <Typography 
-                    variant="body2" 
-                    sx={{ fontWeight: activeDatabase === db ? 600 : 400 }}
+      <Divider />
+      
+      <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>
+        {loading ? (
+          <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress size={24} /></Box>
+        ) : (
+          <List dense sx={{ p: 0 }}>
+            {databases.map((db) => (
+              <React.Fragment key={db}>
+                <ListItem disablePadding>
+                  <ListItemButton 
+                    onClick={() => handleDatabaseClick(db)}
+                    selected={activeDatabase === db}
+                    sx={{ py: 1 }}
                  >
-                    {db}
-                  </Typography>
-                } 
-              />
-            </ListItemButton>
-          </ListItem>
-        ))}
-      </List>
+                    <ListItemIcon sx={{ minWidth: 36 }}>
+                      <Storage fontSize="small" color={activeDatabase === db ? 'primary' : 'inherit'} />
+                    </ListItemIcon>
+                    <ListItemText 
+                      primary={<Typography variant="body2" sx={{ fontWeight: activeDatabase === db ? 600 : 400 }}>{db}</Typography>} 
+                    />
+                  </ListItemButton>
+                </ListItem>
+                
+                {activeDatabase === db && (
+                  <List dense sx={{ pl: 4, bgcolor: 'rgba(0,0,0,0.02)' }}>
+                    {tablesLoading ? (
+                      <ListItem><CircularProgress size={16} /></ListItem>
+                    ) : tables.length === 0 ? (
+                      <ListItem><Typography variant="caption" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>No tables found</Typography></ListItem>
+                    ) : tables.map((table) => (
+                      <ListItem key={table} disablePadding>
+                        <ListItemButton 
+                          selected={activeTable === table}
+                          onClick={() => setActiveTable(table)}
+                          sx={{ py: 0.5 }}
+                        >
+                          <ListItemText 
+                            primary={<Typography variant="caption" sx={{ fontWeight: activeTable === table ? 600 : 400 }}>{table}</Typography>} 
+                          />
+                        </ListItemButton>
+                      </ListItem>
+                    ))}
+                  </List>
+                )}
+              </React.Fragment>
+            ))}
+          </List>
+        )}
+      </Box>
      <Divider />
      <Box sx={{ p: 2 }}>
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>