TabDatabases.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { apiFetch } from '../../lib/api';
 
export default function TabDatabases() {
    const [databases, setDatabases] = useState([]);
    const [metrics, setMetrics] = useState({});
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [syncing, setSyncing] = useState(false);
    const [lastSync, setLastSync] = useState(null);
 
    useEffect(() => {
        fetchDatabases();
    }, []);
 
    const fetchDatabases = async () => {
        setLoading(true);
        setError('');
        try {
            const res = await apiFetch('/hosting/databases');
            if (res.ok) {
                const data = await res.json();
                setDatabases(data.databases || []);
                setLastSync(data.lastSync);
                
                // Metrics are already cached in the database records
                const metricsData = {};
                for (const db of (data.databases || [])) {
                    metricsData[db.do_database_id] = {
                        cpu_count: db.cpu_count,
                        memory_mb: db.memory_mb,
                        disk_gb: db.disk_gb
                    };
                }
                setMetrics(metricsData);
            } else {
                const errorData = await res.json();
                setError(errorData.error || 'Failed to fetch databases');
            }
        } catch (err) {
            console.error('Error fetching databases:', err);
            setError(err.message || 'Failed to load databases');
        } finally {
            setLoading(false);
        }
    };
 
    const handleSync = async () => {
        setSyncing(true);
        setError('');
        try {
            const res = await apiFetch('/hosting/sync', { method: 'POST' });
            if (res.ok) {
                await fetchDatabases();
            } else {
                const errorData = await res.json();
                setError(errorData.error || 'Failed to sync');
            }
        } catch (err) {
            console.error('Error syncing databases:', err);
            setError(err.message || 'Failed to sync databases');
        } finally {
            setSyncing(false);
        }
    };
 
    const getStatusColor = (status) => {
        const statusMap = {
            'online': 'success',
            'creating': 'info',
            'offline': 'secondary',
            'resizing': 'warning'
        };
        return statusMap[status?.toLowerCase()] || 'secondary';
    };
 
    const formatTime = (date) => {
        if (!date) return '';
        const now = new Date();
        const then = new Date(date);
        const diff = Math.floor((now - then) / 1000);
 
        if (diff < 60) return `${diff} seconds ago`;
        if (diff < 3600) return `${Math.floor(diff / 60)} minutes ago`;
        if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`;
        return `${Math.floor(diff / 86400)} days ago`;
    };
 
    if (loading) {
        return (
            <div style={{ padding: '40px', textAlign: 'center' }}>
                <div className="spinner"></div>
            </div>
        );
    }
 
    return (
        <div style={{ padding: '20px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
                <div>
                    <h2>Databases</h2>
                    <p style={{ color: 'var(--text-secondary)', marginTop: '8px' }}>
                        Manage your DigitalOcean managed databases
                    </p>
                </div>
                <button
                    onClick={handleSync}
                    disabled={syncing}
                    className="btn btn-primary"
                    style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                >
                    <span className="material-symbols-outlined" style={{ animation: syncing ? 'spin 1s linear infinite' : 'none' }}>
                        refresh
                    </span>
                    {syncing ? 'Syncing...' : 'Sync Now'}
                </button>
            </div>
 
            <div className="card" style={{ padding: '16px', marginBottom: '20px', background: 'var(--info-bg)', border: '1px solid var(--info-border)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                    <span className="material-symbols-outlined" style={{ color: 'var(--info-text)' }}>
                        schedule
                    </span>
                    <div style={{ fontSize: '14px', color: 'var(--info-text)' }}>
                        Data refreshes every 5 minutes from DigitalOcean.
                        {lastSync && (
                            <span style={{ marginLeft: '8px', opacity: 0.8 }}>
                                Last synced {formatTime(lastSync)}
                            </span>
                        )}
                    </div>
                </div>
            </div>
 
            {error && (
                <div className="card" style={{ padding: '16px', marginBottom: '20px', background: 'var(--error-bg)', border: '1px solid var(--error-border)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                        <span className="material-symbols-outlined" style={{ color: 'var(--error-text)' }}>
                            error
                        </span>
                        <span style={{ fontSize: '14px', color: 'var(--error-text)' }}>{error}</span>
                    </div>
                </div>
            )}
 
            {databases.length === 0 ? (
                <div className="card" style={{ padding: '60px 20px', textAlign: 'center' }}>
                    <span className="material-symbols-outlined" style={{ fontSize: '64px', marginBottom: '16px', display: 'block', opacity: 0.5, color: 'var(--text-secondary)' }}>
                        storage
                    </span>
                    <p style={{ color: 'var(--text-secondary)' }}>No databases found</p>
                    <p style={{ fontSize: '14px', color: 'var(--text-tertiary)', marginTop: '8px' }}>
                        Create a managed database in your DigitalOcean account
                    </p>
                </div>
            ) : (
                <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))' }}>
                    {databases.map((db) => {
                        const dbMetrics = metrics[db.do_database_id];
                        const isOnline = db.status?.toLowerCase() === 'online';
                        
                        return (
                            <Link 
                                key={db.database_id} 
                                to={`/hosting/databases/${db.database_id}`}
                                className="card" 
                                style={{ 
                                    overflow: 'hidden', 
                                    textDecoration: 'none', 
                                    color: 'inherit',
                                    display: 'block',
                                    transition: 'transform 0.2s, box-shadow 0.2s',
                                    cursor: 'pointer'
                                }}
                                onMouseEnter={(e) => {
                                    e.currentTarget.style.transform = 'translateY(-2px)';
                                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
                                }}
                                onMouseLeave={(e) => {
                                    e.currentTarget.style.transform = 'translateY(0)';
                                    e.currentTarget.style.boxShadow = '';
                                }}
                            >
                                <div style={{ padding: '20px', borderBottom: '1px solid var(--border)' }}>
                                    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: '12px' }}>
                                        <div style={{ flex: 1 }}>
                                            <h3 style={{ fontSize: '18px', marginBottom: '6px', fontWeight: '600' }}>{db.database_name}</h3>
                                            <p style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>
                                                {db.customer_name || 'Unassigned'}
                                            </p>
                                        </div>
                                        <span className={`badge badge-${getStatusColor(db.status)}`} style={{ textTransform: 'capitalize' }}>
                                            {isOnline && <span style={{ marginRight: '4px' }}>●</span>}
                                            {db.status}
                                        </span>
                                    </div>
                                    
                                    <div style={{ fontSize: '14px', color: 'var(--text-secondary)' }}>
                                        <strong>{db.engine}</strong> {db.version}
                                    </div>
                                </div>
 
                                {/* Metrics Section */}
                                {dbMetrics && (
                                    <div style={{ padding: '16px', background: 'var(--surface-2, #f8f9fa)', borderBottom: '1px solid var(--border)' }}>
                                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px', fontSize: '13px' }}>
                                            <div style={{ textAlign: 'center' }}>
                                                <div style={{ color: 'var(--text-secondary)', marginBottom: '4px' }}>CPU Cores</div>
                                                <div style={{ fontSize: '18px', fontWeight: '600', color: 'var(--text-primary)' }}>
                                                    {dbMetrics.cpu_count || 'N/A'}
                                                </div>
                                            </div>
                                            <div style={{ textAlign: 'center' }}>
                                                <div style={{ color: 'var(--text-secondary)', marginBottom: '4px' }}>Memory</div>
                                                <div style={{ fontSize: '18px', fontWeight: '600', color: 'var(--text-primary)' }}>
                                                    {dbMetrics.memory_mb ? `${(dbMetrics.memory_mb / 1024).toFixed(1)} GB` : 'N/A'}
                                                </div>
                                            </div>
                                            <div style={{ textAlign: 'center' }}>
                                                <div style={{ color: 'var(--text-secondary)', marginBottom: '4px' }}>Disk</div>
                                                <div style={{ fontSize: '18px', fontWeight: '600', color: 'var(--text-primary)' }}>
                                                    {dbMetrics.disk_gb ? `${dbMetrics.disk_gb} GB` : 'N/A'}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )}
 
                                <div style={{ padding: '20px' }}>
                                    <dl style={{ display: 'grid', gap: '12px', fontSize: '14px', margin: 0 }}>
                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                            <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Region</dt>
                                            <dd style={{ margin: 0, fontWeight: '600', color: 'var(--text-primary)' }}>{db.region}</dd>
                                        </div>
                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                            <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Size</dt>
                                            <dd style={{ margin: 0, fontWeight: '600', color: 'var(--text-primary)' }}>{db.size}</dd>
                                        </div>
                                        {db.num_nodes && (
                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                                <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Nodes</dt>
                                                <dd style={{ margin: 0, fontWeight: '600', color: 'var(--text-primary)' }}>{db.num_nodes}</dd>
                                            </div>
                                        )}
                                        {db.connection_host && (
                                            <div>
                                                <dt style={{ color: 'var(--text-secondary)', marginBottom: '4px' }}>Connection</dt>
                                                <dd style={{ margin: 0, fontWeight: '500', fontFamily: 'monospace', fontSize: '12px', wordBreak: 'break-all', background: 'var(--surface-1, #fff)', padding: '8px', borderRadius: '4px', border: '1px solid var(--border)' }}>
                                                    {db.connection_host}:{db.connection_port}
                                                </dd>
                                            </div>
                                        )}
                                        {db.tags && db.tags.length > 0 && (
                                            <div>
                                                <dt style={{ color: 'var(--text-secondary)', marginBottom: '4px' }}>Tags</dt>
                                                <dd style={{ display: 'flex', flexWrap: 'wrap', gap: '4px', marginTop: '4px', margin: 0 }}>
                                                    {db.tags.map((tag, i) => (
                                                        <span key={i} className="badge badge-secondary" style={{ fontSize: '11px' }}>
                                                            {tag}
                                                        </span>
                                                    ))}
                                                </dd>
                                            </div>
                                        )}
                                    </dl>
                                </div>
                            </Link>
                        );
                    })}
                </div>
            )}
        </div>
    );
}