TabServers.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { apiFetch } from '../../lib/api';
 
export default function TabServers() {
    const navigate = useNavigate();
    const [droplets, setDroplets] = 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(() => {
        fetchDroplets();
    }, []);
 
    const fetchDroplets = async () => {
        setLoading(true);
        setError('');
        try {
            const res = await apiFetch('/hosting/droplets');
            if (res.ok) {
                const data = await res.json();
                
                // Filter out WordPress and Node.js droplets
                const filteredDroplets = (data.droplets || []).filter(droplet => {
                    const name = droplet.droplet_name?.toLowerCase() || '';
                    const tags = droplet.tags || [];
                    const tagString = tags.join(' ').toLowerCase();
                    
                    // Exclude if name or tags contain wordpress, node, or nodejs
                    return !name.includes('wordpress') && 
                           !name.includes('node') && 
                           !name.includes('nodejs') &&
                           !tagString.includes('wordpress') &&
                           !tagString.includes('node');
                });
                
                setDroplets(filteredDroplets);
                setLastSync(data.lastSync);
                
                // Metrics are already cached in the droplet records
                const metricsData = {};
                for (const droplet of filteredDroplets) {
                    metricsData[droplet.do_droplet_id] = {
                        cpu_usage_percent: droplet.cpu_usage_percent,
                        memory_usage_percent: droplet.memory_usage_percent,
                        disk_usage_percent: droplet.disk_usage_percent
                    };
                }
                setMetrics(metricsData);
            } else {
                const errorData = await res.json();
                setError(errorData.error || 'Failed to fetch droplets');
            }
        } catch (err) {
            console.error('Error fetching droplets:', err);
            setError(err.message || 'Failed to load droplets');
        } finally {
            setLoading(false);
        }
    };
 
    const handleSync = async () => {
        setSyncing(true);
        setError('');
        try {
            const res = await apiFetch('/hosting/sync', { method: 'POST' });
            if (res.ok) {
                await fetchDroplets();
            } else {
                const errorData = await res.json();
                setError(errorData.error || 'Failed to sync');
            }
        } catch (err) {
            console.error('Error syncing droplets:', err);
            setError(err.message || 'Failed to sync droplets');
        } finally {
            setSyncing(false);
        }
    };
 
    const getStatusColor = (status) => {
        const statusMap = {
            'active': 'success',
            'new': 'info',
            'off': 'secondary',
            'archive': 'warning',
            'deleted': 'error',
            'terminated': 'error'
        };
        return statusMap[status?.toLowerCase()] || 'secondary';
    };
 
    const getStatusLabel = (status) => {
        if (status?.toLowerCase() === 'deleted') return 'terminated';
        return status;
    };
 
    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>Servers (Droplets)</h2>
                    <p style={{ color: 'var(--text-secondary)', marginTop: '8px' }}>
                        Manage your DigitalOcean droplets
                    </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>
            )}
 
            {droplets.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)' }}>
                        dns
                    </span>
                    <p style={{ color: 'var(--text-secondary)' }}>No droplets found</p>
                    <p style={{ fontSize: '14px', color: 'var(--text-tertiary)', marginTop: '8px' }}>
                        Create a droplet in your DigitalOcean account
                    </p>
                </div>
            ) : (
                <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))' }}>
                    {droplets.map((droplet) => {
                        const dropletMetrics = metrics[droplet.do_droplet_id];
                        const isActive = droplet.status?.toLowerCase() === 'active';
                        
                        // Calculate average CPU if metrics available
                        let avgCpu = null;
                        if (dropletMetrics && dropletMetrics.data && dropletMetrics.data.result && dropletMetrics.data.result.length > 0) {
                            const values = dropletMetrics.data.result[0].values || [];
                            if (values.length > 0) {
                                const sum = values.reduce((acc, [, value]) => acc + parseFloat(value), 0);
                                avgCpu = (sum / values.length).toFixed(1);
                            }
                        }
                        
                        return (
                            <div 
                                key={droplet.droplet_id} 
                                className="card" 
                                style={{ overflow: 'hidden', cursor: 'pointer' }}
                                onClick={() => navigate(`/hosting/servers/${droplet.droplet_id}`)}
                            >
                                <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' }}>{droplet.droplet_name}</h3>
                                            <p style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>
                                                {droplet.customer_name || 'Unassigned'}
                                            </p>
                                        </div>
                                        <span className={`badge badge-${getStatusColor(droplet.status)}`} style={{ textTransform: 'capitalize' }}>
                                            {isActive && <span style={{ marginRight: '4px' }}>●</span>}
                                            {getStatusLabel(droplet.status)}
                                        </span>
                                    </div>
                                    
                                    {droplet.ip_address && (
                                        <div style={{ fontSize: '13px', fontFamily: 'monospace', color: 'var(--text-secondary)' }}>
                                            {droplet.ip_address}
                                        </div>
                                    )}
                                </div>
 
                                {/* Metrics Section */}
                                {avgCpu && (
                                    <div style={{ padding: '16px', background: 'var(--surface-2, #f8f9fa)', borderBottom: '1px solid var(--border)' }}>
                                        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '8px' }}>
                                            <span style={{ fontSize: '13px', color: 'var(--text-secondary)', fontWeight: '500' }}>CPU Usage (avg)</span>
                                            <span style={{ fontSize: '16px', fontWeight: '600', color: 'var(--text-primary)', marginLeft: 'auto' }}>
                                                {avgCpu}%
                                            </span>
                                        </div>
                                        <div style={{ width: '100%', height: '6px', background: 'var(--border)', borderRadius: '3px', overflow: 'hidden' }}>
                                            <div style={{ 
                                                width: `${Math.min(avgCpu, 100)}%`, 
                                                height: '100%', 
                                                background: avgCpu > 80 ? 'var(--error)' : avgCpu > 50 ? 'var(--warning)' : 'var(--success)',
                                                transition: 'width 0.3s ease'
                                            }}></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)' }}>{droplet.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)' }}>{droplet.size}</dd>
                                        </div>
                                        {droplet.vcpus && (
                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                                <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Resources</dt>
                                                <dd style={{ margin: 0, fontWeight: '600', color: 'var(--text-primary)' }}>
                                                    {droplet.vcpus} vCPU • {(droplet.memory / 1024).toFixed(0)} GB • {droplet.disk} GB
                                                </dd>
                                            </div>
                                        )}
                                        {droplet.image && (
                                            <div>
                                                <dt style={{ color: 'var(--text-secondary)', marginBottom: '4px' }}>Image</dt>
                                                <dd style={{ margin: 0, fontWeight: '500', fontSize: '12px', background: 'var(--surface-1, #fff)', padding: '8px', borderRadius: '4px', border: '1px solid var(--border)' }}>
                                                    {droplet.image}
                                                </dd>
                                            </div>
                                        )}
                                        {droplet.tags && droplet.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 }}>
                                                    {droplet.tags.map((tag, i) => (
                                                        <span key={i} className="badge badge-secondary" style={{ fontSize: '11px' }}>
                                                            {tag}
                                                        </span>
                                                    ))}
                                                </dd>
                                            </div>
                                        )}
                                    </dl>
                                </div>
                            </div>
                        );
                    })}
                </div>
            )}
        </div>
    );
}