DatabaseDetail.jsx

Go to the documentation of this file.

import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
import { apiFetch } from '../lib/api';
import { notifySuccess, notifyError } from '../utils/notifications';
 
function DatabaseDetail() {
    const { id } = useParams();
    const navigate = useNavigate();
    const [database, setDatabase] = useState(null);
    const [metrics, setMetrics] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [saving, setSaving] = useState(false);
 
    const [customers, setCustomers] = useState([]);
    const [contracts, setContracts] = useState([]);
    const [tenants, setTenants] = useState([]);
 
    const [formData, setFormData] = useState({
        customer_id: '',
        contract_id: '',
        assigned_tenant_id: ''
    });
 
    useEffect(() => {
        fetchDatabaseDetail();
        fetchCustomers();
        fetchContracts();
        fetchTenants();
    }, [id]);
 
    async function fetchDatabaseDetail() {
        setLoading(true);
        setError('');
        try {
            const res = await apiFetch(`/hosting/databases/${id}`);
            if (!res.ok) throw new Error('Failed to load database');
            const data = await res.json();
            setDatabase(data.database);
            setFormData({
                customer_id: data.database.customer_id || '',
                contract_id: data.database.contract_id || '',
                assigned_tenant_id: data.database.assigned_tenant_id || ''
            });
 
            // Metrics are already cached in the database record
            if (data.database) {
                setMetrics({
                    cpu_count: data.database.cpu_count,
                    memory_mb: data.database.memory_mb,
                    disk_gb: data.database.disk_gb
                });
            }
        } catch (err) {
            console.error(err);
            setError(err.message || 'Failed to load database');
        } finally {
            setLoading(false);
        }
    }
 
    async function fetchCustomers() {
        try {
            const res = await apiFetch('/customers');
            if (res.ok) {
                const data = await res.json();
                setCustomers(data.customers || []);
            }
        } catch (err) {
            console.error('Error fetching customers:', err);
        }
    }
 
    async function fetchContracts() {
        try {
            const res = await apiFetch('/contracts');
            if (res.ok) {
                const data = await res.json();
                setContracts(data.contracts || []);
            }
        } catch (err) {
            console.error('Error fetching contracts:', err);
        }
    }
 
    async function fetchTenants() {
        try {
            const res = await apiFetch('/tenants');
            if (res.ok) {
                const data = await res.json();
                setTenants(data.tenants || []);
            }
        } catch (err) {
            console.error('Error fetching tenants:', err);
        }
    }
 
    async function handleSubmit(e) {
        e.preventDefault();
        setSaving(true);
        try {
            const res = await apiFetch(`/hosting/databases/${id}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });
 
            if (!res.ok) throw new Error('Failed to update database');
 
            notifySuccess('Database updated successfully');
            fetchDatabaseDetail();
        } catch (err) {
            console.error(err);
            notifyError(err.message || 'Failed to update database');
        } finally {
            setSaving(false);
        }
    }
 
    function handleInputChange(field, value) {
        setFormData(prev => ({ ...prev, [field]: value }));
    }
 
    // Filter contracts based on selected customer and tenant
    function getFilteredContracts() {
        return contracts.filter(contract => {
            // Filter by customer if one is selected
            if (formData.customer_id && contract.customer_id !== parseInt(formData.customer_id)) {
                return false;
            }
            // Filter by tenant if one is selected, otherwise show only root tenant contracts
            if (formData.assigned_tenant_id) {
                return contract.tenant_id === parseInt(formData.assigned_tenant_id);
            } else {
                // No tenant selected = show root tenant contracts (tenant_id is null)
                return !contract.tenant_id;
            }
        });
    }
 
    function getStatusColor(status) {
        const statusMap = {
            'online': 'success',
            'creating': 'info',
            'offline': 'danger'
        };
        return statusMap[status?.toLowerCase()] || 'secondary';
    }
 
    if (loading) {
        return (
            <MainLayout>
                <div style={{ padding: '40px', textAlign: 'center' }}>
                    <div className="spinner"></div>
                </div>
            </MainLayout>
        );
    }
 
    if (error) {
        return (
            <MainLayout>
                <div className="card" style={{ padding: '20px', margin: '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={{ color: 'var(--error-text)' }}>{error}</span>
                    </div>
                </div>
            </MainLayout>
        );
    }
 
    if (!database) {
        return (
            <MainLayout>
                <div className="card" style={{ padding: '20px', margin: '20px', textAlign: 'center' }}>
                    <p>Database not found</p>
                </div>
            </MainLayout>
        );
    }
 
    return (
        <MainLayout>
            <div style={{ padding: '20px' }}>
                {/* Header */}
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '20px' }}>
                    <button
                        onClick={() => navigate('/services?tab=databases')}
                        className="btn btn-secondary"
                        style={{ display: 'flex', alignItems: 'center', gap: '6px' }}
                    >
                        <span className="material-symbols-outlined">arrow_back</span>
                        Back
                    </button>
                    <h1 style={{ margin: 0, fontSize: '28px' }}>{database.database_name}</h1>
                    <span className={`badge badge-${getStatusColor(database.status)}`} style={{ textTransform: 'capitalize', fontSize: '14px' }}>
                        {database.status?.toLowerCase() === 'online' && <span style={{ marginRight: '4px' }}>●</span>}
                        {database.status}
                    </span>
                </div>
 
                <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: '2fr 1fr' }}>
                    {/* Main Info Card */}
                    <div className="card" style={{ padding: '24px' }}>
                        <h2 style={{ marginBottom: '20px', fontSize: '20px' }}>Database Information</h2>
                        
                        <dl style={{ display: 'grid', gap: '16px', fontSize: '15px' }}>
                            <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: '12px' }}>
                                <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Engine</dt>
                                <dd style={{ margin: 0, fontWeight: '600' }}>
                                    {database.engine} {database.version}
                                </dd>
                            </div>
                            
                            <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: '12px' }}>
                                <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Region</dt>
                                <dd style={{ margin: 0, fontWeight: '600' }}>{database.region}</dd>
                            </div>
 
                            <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: '12px' }}>
                                <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Size</dt>
                                <dd style={{ margin: 0, fontWeight: '600' }}>{database.size}</dd>
                            </div>
 
                            {database.num_nodes && (
                                <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: '12px' }}>
                                    <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Nodes</dt>
                                    <dd style={{ margin: 0, fontWeight: '600' }}>{database.num_nodes}</dd>
                                </div>
                            )}
 
                            {database.connection_host && (
                                <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: '12px' }}>
                                    <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Connection Host</dt>
                                    <dd style={{ margin: 0, fontFamily: 'monospace', fontSize: '13px', background: 'var(--surface-2, #f8f9fa)', padding: '8px 12px', borderRadius: '4px', border: '1px solid var(--border)' }}>
                                        {database.connection_host}:{database.connection_port}
                                    </dd>
                                </div>
                            )}
 
                            {database.connection_database && (
                                <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: '12px' }}>
                                    <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Default Database</dt>
                                    <dd style={{ margin: 0, fontFamily: 'monospace', fontWeight: '600' }}>
                                        {database.connection_database}
                                    </dd>
                                </div>
                            )}
 
                            {database.tags && database.tags.length > 0 && (
                                <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: '12px' }}>
                                    <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Tags</dt>
                                    <dd style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', margin: 0 }}>
                                        {database.tags.map((tag, i) => (
                                            <span key={i} className="badge badge-secondary">
                                                {tag}
                                            </span>
                                        ))}
                                    </dd>
                                </div>
                            )}
                        </dl>
                    </div>
 
                    {/* Metrics Card */}
                    {metrics && (
                        <div className="card" style={{ padding: '24px' }}>
                            <h2 style={{ marginBottom: '20px', fontSize: '20px' }}>Resources</h2>
                            
                            <div style={{ display: 'grid', gap: '20px' }}>
                                <div style={{ textAlign: 'center', padding: '20px', background: 'var(--surface-2, #f8f9fa)', borderRadius: '8px' }}>
                                    <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '8px', fontWeight: '500' }}>
                                        CPU Cores
                                    </div>
                                    <div style={{ fontSize: '36px', fontWeight: '700', color: 'var(--text-primary)' }}>
                                        {metrics.cpu_count || 'N/A'}
                                    </div>
                                </div>
 
                                <div style={{ textAlign: 'center', padding: '20px', background: 'var(--surface-2, #f8f9fa)', borderRadius: '8px' }}>
                                    <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '8px', fontWeight: '500' }}>
                                        Memory
                                    </div>
                                    <div style={{ fontSize: '36px', fontWeight: '700', color: 'var(--text-primary)' }}>
                                        {metrics.memory_mb ? `${(metrics.memory_mb / 1024).toFixed(1)}` : 'N/A'}
                                    </div>
                                    <div style={{ fontSize: '14px', color: 'var(--text-secondary)', marginTop: '4px' }}>GB</div>
                                </div>
 
                                <div style={{ textAlign: 'center', padding: '20px', background: 'var(--surface-2, #f8f9fa)', borderRadius: '8px' }}>
                                    <div style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '8px', fontWeight: '500' }}>
                                        Disk Storage
                                    </div>
                                    <div style={{ fontSize: '36px', fontWeight: '700', color: 'var(--text-primary)' }}>
                                        {metrics.disk_gb || 'N/A'}
                                    </div>
                                    <div style={{ fontSize: '14px', color: 'var(--text-secondary)', marginTop: '4px' }}>GB</div>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
 
                {/* Assignment Form */}
                <div className="card" style={{ padding: '24px', marginTop: '20px' }}>
                    <h2 style={{ marginBottom: '20px', fontSize: '20px' }}>Assignment</h2>
                    
                    <form onSubmit={handleSubmit}>
                        <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))' }}>
                            <div>
                                <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                                    Customer
                                </label>
                                <select
                                    value={formData.customer_id}
                                    onChange={(e) => handleInputChange('customer_id', e.target.value)}
                                    className="input"
                                    style={{ width: '100%' }}
                                >
                                    <option value="">-- Select Customer --</option>
                                    {customers.map(c => (
                                        <option key={c.customer_id} value={c.customer_id}>
                                            {c.customer_name}
                                        </option>
                                    ))}
                                </select>
                                {database.customer_name && (
                                    <div style={{ marginTop: '6px', fontSize: '13px', color: 'var(--text-secondary)' }}>
                                        Current: {database.customer_name}
                                    </div>
                                )}
                            </div>
 
                            <div>
                                <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                                    Contract
                                </label>
                                <select
                                    value={formData.contract_id}
                                    onChange={(e) => handleInputChange('contract_id', e.target.value)}
                                    className="input"
                                    style={{ width: '100%', color: 'var(--text)' }}
                                >
                                    <option value="">-- Select Contract --</option>
                                    {getFilteredContracts().map(c => (
                                        <option key={c.contract_id} value={c.contract_id}>
                                            {c.title || c.contract_name} {c.customer_name ? `- ${c.customer_name}` : ''}
                                        </option>
                                    ))}
                                </select>
                            </div>
 
                            <div>
                                <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                                    Tenant
                                </label>
                                <select
                                    value={formData.assigned_tenant_id}
                                    onChange={(e) => handleInputChange('assigned_tenant_id', e.target.value)}
                                    className="input"
                                    style={{ width: '100%', color: 'var(--text)' }}
                                >
                                    <option value="">-- Select Tenant --</option>
                                    {tenants.map(t => (
                                        <option key={t.tenant_id} value={t.tenant_id}>
                                            {t.tenant_name}
                                        </option>
                                    ))}
                                </select>
                            </div>
                        </div>
 
                        <div style={{ marginTop: '24px', display: 'flex', gap: '12px' }}>
                            <button type="submit" disabled={saving} className="btn btn-primary">
                                {saving ? 'Saving...' : 'Save Changes'}
                            </button>
                            <button
                                type="button"
                                onClick={() => navigate('/services?tab=databases')}
                                className="btn btn-secondary"
                            >
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </MainLayout>
    );
}
 
export default DatabaseDetail;