diff --git a/DATABASE_EXPLORER_README.md b/DATABASE_EXPLORER_README.md new file mode 100644 index 00000000..bb24968b --- /dev/null +++ b/DATABASE_EXPLORER_README.md @@ -0,0 +1,213 @@ +# Database Explorer + +A comprehensive database exploration tool that supports MongoDB, PostgreSQL, MySQL, and SQLite databases. This tool provides a modern, intuitive interface for database administrators and developers to connect to, explore, and analyze their databases. + +## Features + +### 🔌 Multi-Database Support +- **MongoDB**: Native support for collections, documents, and MongoDB query syntax +- **PostgreSQL**: Full SQL support with schema introspection +- **MySQL**: Complete MySQL compatibility +- **SQLite**: Lightweight database support + +### 🚀 Core Functionality +- **Connection Management**: Create, save, and manage multiple database connections +- **Database Exploration**: Browse tables, collections, views, and their contents +- **Query Execution**: Run custom queries with syntax highlighting +- **Schema Inspection**: Detailed view of database structure, indexes, and constraints +- **Data Visualization**: Multiple chart types and export options + +### 🎯 Key Components + +#### 1. Connection Manager +- Secure connection storage +- Connection status monitoring +- Support for connection strings and individual parameters +- Authentication for SQL databases + +#### 2. Database Explorer +- Tree-view navigation of database objects +- Object metadata (size, record count, last modified) +- Quick data preview +- Object type identification + +#### 3. Query Builder +- Visual query construction +- Drag-and-drop field selection +- Condition builder with logical operators +- Support for both SQL and MongoDB syntax +- Query templates and examples + +#### 4. Schema Inspector +- Detailed field information +- Index and constraint details +- Relationship visualization +- Schema export capabilities + +#### 5. Data Visualizer +- Multiple chart types (Bar, Pie, Line, Table) +- Interactive data filtering +- Sorting and search capabilities +- Data export (CSV, JSON) + +## Getting Started + +### 1. Access the Explorer +Navigate to the Database module in your dashboard and click on "Database Explorer" or go directly to `/database/explorer`. + +### 2. Create a Connection +1. Click "New Connection" button +2. Fill in connection details: + - **Connection Name**: A friendly name for your connection + - **Database Type**: Select from MongoDB, PostgreSQL, MySQL, or SQLite + - **Host**: Database server address + - **Port**: Database port number + - **Database**: Database name + - **Username/Password**: For SQL databases (optional for MongoDB) + +### 3. Connect and Explore +1. Click "Connect" on your connection +2. Browse database objects in the Explorer tab +3. Click on objects to view their data +4. Use the Query tab to execute custom queries +5. Explore schema details in the Schema tab +6. Visualize data in the Visualize tab + +## Usage Examples + +### MongoDB Query Examples +```javascript +// Find all users +db.users.find({}) + +// Find users with specific criteria +db.users.find({ status: "active", age: { $gte: 18 } }) + +// Project specific fields +db.users.find({}).project({ username: 1, email: 1, _id: 0 }) + +// Sort and limit +db.users.find({}).sort({ created_at: -1 }).limit(10) +``` + +### SQL Query Examples +```sql +-- Basic select +SELECT * FROM users LIMIT 10 + +-- With conditions +SELECT username, email FROM users WHERE status = 'active' AND created_at > '2024-01-01' + +-- Joins +SELECT u.username, o.total_amount +FROM users u +JOIN orders o ON u.id = o.user_id +WHERE o.status = 'completed' + +-- Aggregations +SELECT status, COUNT(*) as count +FROM orders +GROUP BY status +ORDER BY count DESC +``` + +## Advanced Features + +### Query Builder +The visual query builder helps construct complex queries: +1. Select fields to include +2. Add filtering conditions +3. Set sorting order +4. Apply limits +5. Generate the final query + +### Schema Analysis +- View table structures +- Analyze indexes and their performance impact +- Understand relationships between tables +- Export schema documentation + +### Data Visualization +- **Bar Charts**: Compare values across categories +- **Pie Charts**: Show proportions and percentages +- **Line Charts**: Track trends over time +- **Data Tables**: Sort, filter, and search results + +### Export Options +- **CSV**: For spreadsheet applications +- **JSON**: For API integrations +- **Schema Documentation**: For team collaboration + +## Security Features + +- **Connection Encryption**: Secure connections to databases +- **Password Protection**: Secure storage of credentials +- **Access Control**: Role-based permissions +- **Audit Logging**: Track database operations + +## Performance Tips + +1. **Use Indexes**: Ensure proper indexing for frequently queried fields +2. **Limit Results**: Use LIMIT clauses to avoid large result sets +3. **Optimize Queries**: Use the query builder to create efficient queries +4. **Monitor Performance**: Check execution times for slow queries + +## Troubleshooting + +### Connection Issues +- Verify network connectivity +- Check firewall settings +- Ensure correct port numbers +- Verify database credentials + +### Query Errors +- Check syntax for your database type +- Verify table/collection names +- Ensure field names are correct +- Check data types match + +### Performance Issues +- Review query execution plans +- Check database server resources +- Optimize slow queries +- Consider adding indexes + +## Browser Compatibility + +- **Chrome**: 90+ +- **Firefox**: 88+ +- **Safari**: 14+ +- **Edge**: 90+ + +## Technical Requirements + +- **Node.js**: 18.0.0+ +- **React**: 18.0.0+ +- **TypeScript**: 4.9.0+ +- **Tailwind CSS**: 3.0.0+ + +## Contributing + +To contribute to the Database Explorer: + +1. Fork the repository +2. Create a feature branch +3. Make your changes +4. Add tests if applicable +5. Submit a pull request + +## Support + +For support and questions: +- Check the documentation +- Review existing issues +- Create a new issue with detailed information +- Contact the development team + +## License + +This project is licensed under the MIT License - see the LICENSE file for details. + +--- + +**Note**: This is a demonstration version with mock data. In production, it would connect to real databases and include additional security measures. \ No newline at end of file diff --git a/src/app/(dashboard)/(modules)/database/explorer/page.tsx b/src/app/(dashboard)/(modules)/database/explorer/page.tsx new file mode 100644 index 00000000..cde84c37 --- /dev/null +++ b/src/app/(dashboard)/(modules)/database/explorer/page.tsx @@ -0,0 +1,742 @@ +'use client'; + +import React, { useState, useEffect } from 'react'; +import { Database, Server, Database as DatabaseIcon, Table, FileText, Search, Plus, Settings, RefreshCw, Eye, Edit, Trash2, BarChart3, Code, Database as SchemaIcon } from 'lucide-react'; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { Badge } from '@/components/ui/badge'; +import { Separator } from '@/components/ui/separator'; +import { ScrollArea } from '@/components/ui/scroll-area'; +import { Alert, AlertDescription } from '@/components/ui/alert'; +import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; +import { Textarea } from '@/components/ui/textarea'; +import { Table as TableComponent, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; +import { SchemaInspector } from '@/components/database/SchemaInspector'; +import { QueryBuilder } from '@/components/database/QueryBuilder'; +import { DataVisualizer } from '@/components/database/DataVisualizer'; + +interface DatabaseConnection { + id: string; + name: string; + type: 'mongodb' | 'postgresql' | 'mysql' | 'sqlite'; + host: string; + port: number; + database: string; + username?: string; + password?: string; + connectionString?: string; + isConnected: boolean; +} + +interface DatabaseObject { + name: string; + type: 'collection' | 'table' | 'view'; + size?: number; + count?: number; + lastModified?: Date; +} + +interface QueryResult { + columns: string[]; + rows: any[]; + executionTime: number; + affectedRows?: number; +} + +interface SchemaTable { + name: string; + type: 'table' | 'view' | 'collection'; + fields: Array<{ + name: string; + type: string; + nullable?: boolean; + primaryKey?: boolean; + foreignKey?: boolean; + defaultValue?: any; + description?: string; + constraints?: string[]; + }>; + indexes?: Array<{ + name: string; + columns: string[]; + type: 'primary' | 'unique' | 'index'; + }>; + rowCount?: number; + size?: number; + lastModified?: Date; +} + +export default function DatabaseExplorer() { + const [connections, setConnections] = useState([]); + const [selectedConnection, setSelectedConnection] = useState(null); + const [databaseObjects, setDatabaseObjects] = useState([]); + const [selectedObject, setSelectedObject] = useState(null); + const [objectData, setObjectData] = useState([]); + const [query, setQuery] = useState(''); + const [queryResults, setQueryResults] = useState(null); + const [isLoading, setIsLoading] = useState(false); + const [showNewConnectionDialog, setShowNewConnectionDialog] = useState(false); + const [newConnection, setNewConnection] = useState>({ + type: 'mongodb', + host: 'localhost', + port: 27017, + database: '', + }); + const [activeTab, setActiveTab] = useState('explorer'); + const [schema, setSchema] = useState([]); + + // Mock data for demonstration + useEffect(() => { + const mockConnections: DatabaseConnection[] = [ + { + id: '1', + name: 'Local MongoDB', + type: 'mongodb', + host: 'localhost', + port: 27017, + database: 'testdb', + isConnected: true, + }, + { + id: '2', + name: 'PostgreSQL Production', + type: 'postgresql', + host: 'prod-db.company.com', + port: 5432, + database: 'production', + username: 'admin', + isConnected: false, + }, + ]; + setConnections(mockConnections); + + // Mock schema data + const mockSchema: SchemaTable[] = [ + { + name: 'users', + type: 'table', + fields: [ + { name: 'id', type: 'integer', primaryKey: true, nullable: false }, + { name: 'username', type: 'varchar(255)', nullable: false }, + { name: 'email', type: 'varchar(255)', nullable: false }, + { name: 'created_at', type: 'timestamp', nullable: false, defaultValue: 'CURRENT_TIMESTAMP' }, + { name: 'status', type: 'varchar(50)', nullable: true }, + ], + indexes: [ + { name: 'users_pkey', columns: ['id'], type: 'primary' }, + { name: 'users_username_idx', columns: ['username'], type: 'unique' }, + { name: 'users_email_idx', columns: ['email'], type: 'unique' }, + ], + rowCount: 1250, + size: 1024000, + }, + { + name: 'orders', + type: 'table', + fields: [ + { name: 'id', type: 'integer', primaryKey: true, nullable: false }, + { name: 'user_id', type: 'integer', foreignKey: true, nullable: false }, + { name: 'total_amount', type: 'decimal(10,2)', nullable: false }, + { name: 'status', type: 'varchar(50)', nullable: false }, + { name: 'created_at', type: 'timestamp', nullable: false }, + ], + indexes: [ + { name: 'orders_pkey', columns: ['id'], type: 'primary' }, + { name: 'orders_user_id_idx', columns: ['user_id'], type: 'index' }, + ], + rowCount: 567, + size: 512000, + }, + ]; + setSchema(mockSchema); + }, []); + + const handleConnect = async (connection: DatabaseConnection) => { + setIsLoading(true); + try { + // Simulate connection + await new Promise(resolve => setTimeout(resolve, 1000)); + + const updatedConnections = connections.map(conn => + conn.id === connection.id ? { ...conn, isConnected: true } : conn + ); + setConnections(updatedConnections); + setSelectedConnection(connection); + + // Load database objects + await loadDatabaseObjects(connection); + } catch (error) { + console.error('Connection failed:', error); + } finally { + setIsLoading(false); + } + }; + + const handleDisconnect = (connection: DatabaseConnection) => { + const updatedConnections = connections.map(conn => + conn.id === connection.id ? { ...conn, isConnected: false } : conn + ); + setConnections(updatedConnections); + if (selectedConnection?.id === connection.id) { + setSelectedConnection(null); + setDatabaseObjects([]); + setObjectData([]); + setQueryResults(null); + } + }; + + const loadDatabaseObjects = async (connection: DatabaseConnection) => { + // Mock database objects + const mockObjects: DatabaseObject[] = [ + { name: 'users', type: connection.type === 'mongodb' ? 'collection' : 'table', count: 1250, size: 1024000 }, + { name: 'orders', type: connection.type === 'mongodb' ? 'collection' : 'table', count: 567, size: 512000 }, + { name: 'products', type: connection.type === 'mongodb' ? 'collection' : 'table', count: 89, size: 256000 }, + { name: 'user_stats', type: 'view', count: 1250 }, + ]; + setDatabaseObjects(mockObjects); + }; + + const handleObjectSelect = async (object: DatabaseObject) => { + setSelectedObject(object); + // Mock data loading + const mockData = Array.from({ length: 10 }, (_, i) => ({ + id: i + 1, + name: `Item ${i + 1}`, + email: `item${i + 1}@example.com`, + created: new Date(Date.now() - Math.random() * 10000000000).toISOString(), + })); + setObjectData(mockData); + }; + + const executeQuery = async () => { + if (!query.trim() || !selectedConnection) return; + + setIsLoading(true); + try { + // Simulate query execution + await new Promise(resolve => setTimeout(resolve, 500)); + + // Mock query results + const mockResult: QueryResult = { + columns: ['id', 'name', 'email', 'created'], + rows: Array.from({ length: 5 }, (_, i) => ({ + id: i + 1, + name: `Result ${i + 1}`, + email: `result${i + 1}@example.com`, + created: new Date().toISOString(), + })), + executionTime: 45, + affectedRows: 5, + }; + setQueryResults(mockResult); + } catch (error) { + console.error('Query execution failed:', error); + } finally { + setIsLoading(false); + } + }; + + const addNewConnection = () => { + const connection: DatabaseConnection = { + id: Date.now().toString(), + name: newConnection.name || 'New Connection', + type: newConnection.type || 'mongodb', + host: newConnection.host || 'localhost', + port: newConnection.port || 27017, + database: newConnection.database || '', + username: newConnection.username, + password: newConnection.password, + isConnected: false, + }; + + setConnections([...connections, connection]); + setNewConnection({ + type: 'mongodb', + host: 'localhost', + port: 27017, + database: '', + }); + setShowNewConnectionDialog(false); + }; + + const getConnectionIcon = (type: string) => { + switch (type) { + case 'mongodb': + return ; + case 'postgresql': + return ; + case 'mysql': + return ; + case 'sqlite': + return ; + default: + return ; + } + }; + + const getConnectionBadgeColor = (type: string) => { + switch (type) { + case 'mongodb': + return 'bg-green-100 text-green-800'; + case 'postgresql': + return 'bg-blue-100 text-blue-800'; + case 'mysql': + return 'bg-orange-100 text-orange-800'; + case 'sqlite': + return 'bg-purple-100 text-purple-800'; + default: + return 'bg-gray-100 text-gray-800'; + } + }; + + const getTablesForQueryBuilder = () => { + return schema.map(table => ({ + name: table.name, + columns: table.fields.map(field => ({ + name: field.name, + type: field.type, + })), + })); + }; + + return ( +
+
+
+

Database Explorer

+

+ Connect to and explore MongoDB, PostgreSQL, MySQL, and SQLite databases +

+
+ +
+ +
+ {/* Connections Panel */} + + + + + Connections + + Manage database connections + + + {connections.map((connection) => ( +
setSelectedConnection(connection)} + > +
+
+ {getConnectionIcon(connection.type)} + {connection.name} +
+ + {connection.isConnected ? 'Connected' : 'Disconnected'} + +
+
+ {connection.host}:{connection.port}/{connection.database} +
+
+ + {connection.type} + + {connection.isConnected ? ( + + ) : ( + + )} +
+
+ ))} + + + + {/* Main Content */} +
+ {selectedConnection ? ( + <> + {/* Main Tabs */} + + + + + Explorer + + + + Query + + + + Schema + + + + Visualize + + + + {/* Explorer Tab */} + + {/* Database Objects */} + + + + + Database Objects + + + {selectedConnection.database} on {selectedConnection.host} + + + +
+ {databaseObjects.map((object) => ( +
handleObjectSelect(object)} + > +
+ {object.name} + + {object.type} + +
+
+ {object.count && `${object.count} records`} + {object.size && ` • ${(object.size / 1024).toFixed(1)} KB`} +
+
+ ))} +
+ + + + {/* Object Data */} + {selectedObject && objectData.length > 0 && ( + + + + + {selectedObject.name} + + + {objectData.length} records • {selectedObject.type} + + + + + + + + {Object.keys(objectData[0]).map((key) => ( + {key} + ))} + + + + {objectData.map((row, index) => ( + + {Object.values(row).map((value, valueIndex) => ( + + {typeof value === 'object' + ? JSON.stringify(value) + : String(value ?? '') + } + + ))} + + ))} + + + + + + )} + + + {/* Query Tab */} + + + + {/* Query Editor */} + + + + + Query Editor + + + Execute queries against {selectedConnection.database} + + + +
+ +