TabAppServices.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 TabAppServices() {
    const navigate = useNavigate();
    const [apps, setApps] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [syncing, setSyncing] = useState(false);
    const [lastSync, setLastSync] = useState(null);
 
    useEffect(() => {
        fetchApps();
    }, []);
 
    const fetchApps = async () => {
        setLoading(true);
        setError('');
        try {
            const res = await apiFetch('/hosting/apps');
            if (res.ok) {
                const data = await res.json();
                setApps(data.apps || []);
                setLastSync(data.lastSync);
            } else {
                const errorData = await res.json();
                setError(errorData.error || 'Failed to fetch apps');
            }
        } catch (err) {
            console.error('Error fetching apps:', err);
            setError(err.message || 'Failed to load apps');
        } finally {
            setLoading(false);
        }
    };
 
    const handleSync = async () => {
        setSyncing(true);
        setError('');
        try {
            const res = await apiFetch('/hosting/sync', { method: 'POST' });
            if (res.ok) {
                await fetchApps();
            } else {
                const errorData = await res.json();
                setError(errorData.error || 'Failed to sync');
            }
        } catch (err) {
            console.error('Error syncing apps:', err);
            setError(err.message || 'Failed to sync apps');
        } finally {
            setSyncing(false);
        }
    };
 
    const getStatusColor = (status) => {
        const statusMap = {
            'running': 'success',
            'active': 'success',
            'building': 'info',
            'deploying': 'info',
            'error': 'danger',
            'canceled': '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>App Services</h2>
                    <p style={{ color: 'var(--text-secondary)', marginTop: '8px' }}>
                        Manage your DigitalOcean App Platform applications (Node.js, Static Sites)
                    </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>
            )}
 
            {apps.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)' }}>
                        cloud
                    </span>
                    <p style={{ color: 'var(--text-secondary)' }}>No apps found</p>
                    <p style={{ fontSize: '14px', color: 'var(--text-tertiary)', marginTop: '8px' }}>
                        Deploy an app in your DigitalOcean App Platform
                    </p>
                </div>
            ) : (
                <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))' }}>
                    {apps.map((app) => (
                        <div 
                            key={app.do_app_id} 
                            className="card" 
                            style={{ overflow: 'hidden', cursor: 'pointer' }}
                            onClick={() => navigate(`/hosting/apps/${app.app_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' }}>{app.app_name}</h3>
                                        <p style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>
                                            {app.customer_name || 'Unassigned'}
                                        </p>
                                    </div>
                                    <span className={`badge badge-${getStatusColor(app.status)}`} style={{ textTransform: 'capitalize' }}>
                                        {getStatusLabel(app.status)}
                                    </span>
                                </div>
                                
                                {app.live_url && (
                                    <a 
                                        href={app.live_url} 
                                        target="_blank" 
                                        rel="noopener noreferrer"
                                        style={{ 
                                            fontSize: '13px', 
                                            color: 'var(--primary)', 
                                            textDecoration: 'none',
                                            display: 'flex',
                                            alignItems: 'center',
                                            gap: '4px'
                                        }}
                                    >
                                        <span>{app.live_url}</span>
                                        <span className="material-symbols-outlined" style={{ fontSize: '16px' }}>open_in_new</span>
                                    </a>
                                )}
                            </div>
 
                            <div style={{ padding: '20px', background: 'var(--surface-2, #f8f9fa)' }}>
                                <dl style={{ display: 'grid', gap: '14px', fontSize: '14px', margin: 0 }}>
                                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                        <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Type</dt>
                                        <dd style={{ margin: 0, fontWeight: '600', color: 'var(--text-primary)' }}>{app.app_type || 'nodejs'}</dd>
                                    </div>
                                    <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)' }}>{app.region || 'N/A'}</dd>
                                    </div>
                                    {app.metadata?.tier_slug && (
                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                            <dt style={{ color: 'var(--text-secondary)', fontWeight: '500' }}>Tier</dt>
                                            <dd style={{ margin: 0, fontWeight: '600', color: 'var(--text-primary)', textTransform: 'capitalize' }}>
                                                {app.metadata.tier_slug}
                                            </dd>
                                        </div>
                                    )}
                                </dl>
                            </div>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}