ServerDetail.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 ServerDetail() {
    const { id } = useParams();
    const navigate = useNavigate();
    const [server, setServer] = 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 [tenants, setTenants] = useState([]);
 
    const [formData, setFormData] = useState({
        customer_id: '',
        assigned_tenant_id: ''
    });
 
    useEffect(() => {
        fetchServerDetail();
        fetchCustomers();
        fetchTenants();
    }, [id]);
 
    async function fetchServerDetail() {
        setLoading(true);
        setError('');
        try {
            const res = await apiFetch(`/hosting/droplets/${id}`);
            if (!res.ok) throw new Error('Failed to load server');
            const data = await res.json();
            setServer(data.droplet);
            setFormData({
                customer_id: data.droplet.customer_id || '',
                assigned_tenant_id: data.droplet.assigned_tenant_id || ''
            });
 
            // Metrics are already cached in the droplet record
            if (data.droplet) {
                setMetrics({
                    cpu_usage_percent: data.droplet.cpu_usage_percent
                });
            }
        } catch (err) {
            console.error(err);
            setError(err.message || 'Failed to load server');
        } 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 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/droplets/${id}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });
 
            if (!res.ok) throw new Error('Failed to update server');
 
            notifySuccess('Server updated successfully');
            fetchServerDetail();
        } catch (err) {
            console.error(err);
            notifyError(err.message || 'Failed to update server');
        } finally {
            setSaving(false);
        }
    }
 
    function handleInputChange(field, value) {
        setFormData(prev => ({ ...prev, [field]: value }));
    }
 
    function getStatusColor(status) {
        const statusMap = {
            'active': 'success',
            'new': 'info',
            'off': 'secondary',
            'archive': 'warning',
            'deleted': 'error',
            'terminated': 'error'
        };
        return statusMap[status?.toLowerCase()] || 'secondary';
    }
 
    function getStatusLabel(status) {
        if (status?.toLowerCase() === 'deleted') return 'terminated';
        return status;
    }
 
    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 (!server) {
        return (
            <MainLayout>
                <div className="card" style={{ padding: '20px', margin: '20px' }}>
                    <p>Server not found</p>
                </div>
            </MainLayout>
        );
    }
 
    return (
        <MainLayout>
            <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
                {/* Header */}
                <div style={{ marginBottom: '24px' }}>
                    <button
                        onClick={() => navigate('/services?tab=servers')}
                        className="btn btn-secondary"
                        style={{ marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}
                    >
                        <span className="material-symbols-outlined">arrow_back</span>
                        Back to Servers
                    </button>
                    
                    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                        <span className="material-symbols-outlined" style={{ fontSize: '48px', color: 'var(--primary)' }}>
                            dns
                        </span>
                        <div>
                            <h1 style={{ fontSize: '28px', marginBottom: '8px' }}>{server.droplet_name}</h1>
                            <span className={`badge badge-${getStatusColor(server.status)}`} style={{ fontSize: '14px' }}>
                                {getStatusLabel(server.status)}
                            </span>
                        </div>
                    </div>
                </div>
 
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px' }}>
                    {/* Left Column - Details */}
                    <div className="card" style={{ padding: '24px' }}>
                        <h2 style={{ fontSize: '20px', marginBottom: '20px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                            <span className="material-symbols-outlined">info</span>
                            Server Details
                        </h2>
                        
                        <dl style={{ display: 'grid', gap: '16px' }}>
                            <div>
                                <dt style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '4px' }}>Region</dt>
                                <dd style={{ fontWeight: '600', fontSize: '16px' }}>{server.region}</dd>
                            </div>
                            
                            <div>
                                <dt style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '4px' }}>Size</dt>
                                <dd style={{ fontWeight: '600', fontSize: '16px' }}>{server.size}</dd>
                            </div>
 
                            {server.vcpus && (
                                <div>
                                    <dt style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '4px' }}>Resources</dt>
                                    <dd style={{ fontWeight: '600', fontSize: '16px' }}>
                                        {server.vcpus} vCPU • {(server.memory / 1024).toFixed(0)} GB RAM • {server.disk} GB Disk
                                    </dd>
                                </div>
                            )}
 
                            {server.ip_address && (
                                <div>
                                    <dt style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '4px' }}>IPv4 Address</dt>
                                    <dd style={{ fontFamily: 'monospace', fontSize: '16px', color: 'var(--primary)' }}>
                                        {server.ip_address}
                                    </dd>
                                </div>
                            )}
 
                            {server.ipv6_address && (
                                <div>
                                    <dt style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '4px' }}>IPv6 Address</dt>
                                    <dd style={{ fontFamily: 'monospace', fontSize: '14px', color: 'var(--primary)', wordBreak: 'break-all' }}>
                                        {server.ipv6_address}
                                    </dd>
                                </div>
                            )}
 
                            {server.image && (
                                <div>
                                    <dt style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '4px' }}>Image</dt>
                                    <dd style={{ fontWeight: '500', fontSize: '14px' }}>{server.image}</dd>
                                </div>
                            )}
 
                            {server.tags && server.tags.length > 0 && (
                                <div>
                                    <dt style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '8px' }}>Tags</dt>
                                    <dd style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                                        {server.tags.map((tag, i) => (
                                            <span key={i} className="badge badge-secondary">
                                                {tag}
                                            </span>
                                        ))}
                                    </dd>
                                </div>
                            )}
 
                            <div>
                                <dt style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '4px' }}>Created</dt>
                                <dd style={{ fontSize: '14px' }}>
                                    {server.created_at ? new Date(server.created_at).toLocaleString() : 'N/A'}
                                </dd>
                            </div>
 
                            <div>
                                <dt style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '4px' }}>Last Updated</dt>
                                <dd style={{ fontSize: '14px' }}>
                                    {server.updated_at ? new Date(server.updated_at).toLocaleString() : 'N/A'}
                                </dd>
                            </div>
 
                            <div>
                                <dt style={{ color: 'var(--text-secondary)', fontSize: '14px', marginBottom: '4px' }}>DO Droplet ID</dt>
                                <dd style={{ fontFamily: 'monospace', fontSize: '12px', color: 'var(--text-secondary)' }}>
                                    {server.do_droplet_id}
                                </dd>
                            </div>
                        </dl>
 
                        {/* Metrics */}
                        {metrics && metrics.cpu_usage_percent !== null && (
                            <div style={{ marginTop: '24px', padding: '16px', background: 'var(--surface-2, #f8f9fa)', borderRadius: '8px' }}>
                                <h3 style={{ fontSize: '16px', marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                                    <span className="material-symbols-outlined">monitoring</span>
                                    Cached Metrics
                                </h3>
                                <div style={{ display: 'grid', gap: '12px' }}>
                                    <div>
                                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
                                            <span style={{ fontSize: '14px', color: 'var(--text-secondary)' }}>CPU Usage (avg)</span>
                                            <span style={{ fontSize: '16px', fontWeight: '600' }}>{metrics.cpu_usage_percent}%</span>
                                        </div>
                                        <div style={{ width: '100%', height: '8px', background: 'var(--border)', borderRadius: '4px', overflow: 'hidden' }}>
                                            <div style={{ 
                                                width: `${Math.min(metrics.cpu_usage_percent, 100)}%`, 
                                                height: '100%', 
                                                background: metrics.cpu_usage_percent > 80 ? 'var(--error)' : metrics.cpu_usage_percent > 50 ? 'var(--warning)' : 'var(--success)',
                                                transition: 'width 0.3s ease'
                                            }}></div>
                                        </div>
                                    </div>
                                </div>
                                {server.metrics_last_updated && (
                                    <p style={{ fontSize: '12px', color: 'var(--text-secondary)', marginTop: '12px' }}>
                                        Last updated: {new Date(server.metrics_last_updated).toLocaleString()}
                                    </p>
                                )}
                            </div>
                        )}
                    </div>
 
                    {/* Right Column - Assignment Form */}
                    <div>
                        <div className="card" style={{ padding: '24px', marginBottom: '20px' }}>
                            <h2 style={{ fontSize: '20px', marginBottom: '20px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                                <span className="material-symbols-outlined">business</span>
                                Assignment
                            </h2>
 
                            <form onSubmit={handleSubmit}>
                                <div style={{ marginBottom: '20px' }}>
                                    <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                                        Customer
                                    </label>
                                    <select
                                        className="form-control"
                                        value={formData.customer_id}
                                        onChange={(e) => handleInputChange('customer_id', e.target.value)}
                                        style={{ width: '100%', padding: '10px', borderRadius: '4px', border: '1px solid var(--border)' }}
                                    >
                                        <option value="">-- Select Customer --</option>
                                        {customers.map(c => (
                                            <option key={c.customer_id} value={c.customer_id}>
                                                {c.name}
                                            </option>
                                        ))}
                                    </select>
                                </div>
 
                                <div style={{ marginBottom: '24px' }}>
                                    <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                                        Tenant
                                    </label>
                                    <select
                                        className="form-control"
                                        value={formData.assigned_tenant_id}
                                        onChange={(e) => handleInputChange('assigned_tenant_id', e.target.value)}
                                        style={{ width: '100%', padding: '10px', borderRadius: '4px', border: '1px solid var(--border)', color: 'var(--text)' }}
                                    >
                                        <option value="">-- Select Tenant --</option>
                                        {tenants.map(t => (
                                            <option key={t.tenant_id} value={t.tenant_id}>
                                                {t.company_name}
                                            </option>
                                        ))}
                                    </select>
                                </div>
 
                                <button
                                    type="submit"
                                    className="btn btn-primary"
                                    disabled={saving}
                                    style={{ width: '100%' }}
                                >
                                    {saving ? 'Saving...' : 'Save Assignment'}
                                </button>
                            </form>
                        </div>
 
                        {/* Quick Actions */}
                        <div className="card" style={{ padding: '24px' }}>
                            <h2 style={{ fontSize: '20px', marginBottom: '20px', display: 'flex', alignItems: 'center', gap: '8px' }}>
                                <span className="material-symbols-outlined">bolt</span>
                                Quick Actions
                            </h2>
 
                            <div style={{ display: 'grid', gap: '12px' }}>
                                <button
                                    className="btn btn-secondary"
                                    onClick={() => window.open(`https://cloud.digitalocean.com/droplets/${server.do_droplet_id}`, '_blank')}
                                    style={{ display: 'flex', alignItems: 'center', gap: '8px', justifyContent: 'center' }}
                                >
                                    <span className="material-symbols-outlined">open_in_new</span>
                                    View in DigitalOcean Console
                                </button>
 
                                {server.ip_address && (
                                    <button
                                        className="btn btn-secondary"
                                        onClick={() => navigator.clipboard.writeText(server.ip_address)}
                                        style={{ display: 'flex', alignItems: 'center', gap: '8px', justifyContent: 'center' }}
                                    >
                                        <span className="material-symbols-outlined">content_copy</span>
                                        Copy IP Address
                                    </button>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </MainLayout>
    );
}
 
export default ServerDetail;