import React, { useState, useEffect } from 'react'; import Head from 'next/head'; interface DeployResponse { success: boolean; message: string; output?: string; error?: string; timestamp: string; } interface StatusResponse { success: boolean; repo_path?: string; current_commit?: string; has_local_changes?: boolean; timestamp: string; message?: string; } export default function DeployPage() { const [secret, setSecret] = useState(''); const [loading, setLoading] = useState(false); const [result, setResult] = useState(null); const [status, setStatus] = useState(null); const [autoRefresh, setAutoRefresh] = useState(false); const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'; useEffect(() => { // Спроба завантажити секрет з localStorage const savedSecret = localStorage.getItem('deploy_secret'); if (savedSecret) { setSecret(savedSecret); // Автоматично завантажити статус при наявності секрету fetchStatus(savedSecret); } }, []); useEffect(() => { let interval: NodeJS.Timeout; if (autoRefresh && secret) { interval = setInterval(() => { fetchStatus(secret); }, 10000); // Оновлення кожні 10 секунд } return () => { if (interval) clearInterval(interval); }; }, [autoRefresh, secret]); const fetchStatus = async (secretKey: string) => { try { const response = await fetch( `${API_BASE}/api/deploy/status?secret=${encodeURIComponent(secretKey)}` ); const data = await response.json(); setStatus(data); } catch (error) { console.error('Error fetching status:', error); } }; const handleDeploy = async (e: React.FormEvent) => { e.preventDefault(); if (!secret) { alert('Введіть секретний ключ'); return; } setLoading(true); setResult(null); try { // Зберігаємо секрет localStorage.setItem('deploy_secret', secret); // Виконуємо deploy через POST const response = await fetch(`${API_BASE}/api/deploy/pull`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ secret }), }); const data = await response.json(); setResult(data); // Оновлюємо статус після деплою await fetchStatus(secret); } catch (error: any) { setResult({ success: false, message: `Error: ${error.message}`, timestamp: new Date().toISOString(), }); } finally { setLoading(false); } }; const handleRefreshStatus = () => { if (secret) { fetchStatus(secret); } }; const handleClearSecret = () => { setSecret(''); localStorage.removeItem('deploy_secret'); setStatus(null); setResult(null); }; return (
Git Deploy - Admin

🚀 Git Deploy Manager

setSecret(e.target.value)} style={{ width: '100%', padding: '10px', fontSize: '14px', border: '1px solid #ccc', borderRadius: '4px' }} placeholder="Введіть секретний ключ для деплою" />
{/* Repository Status */} {status && (

📊 Repository Status

{status.success ? ( <>

Path: {status.repo_path}

Current Commit: {status.current_commit}

Local Changes:{' '} {status.has_local_changes ? ( ⚠️ Yes (uncommitted changes) ) : ( ✅ No (clean) )}

Updated: {new Date(status.timestamp).toLocaleString('uk-UA')}

) : (

{status.message}

)}
)} {/* Deploy Result */} {result && (

{result.success ? '✅ Deploy Success' : '❌ Deploy Failed'}

Message: {result.message}

{result.output && (
Output: 
                {result.output}
)} {result.error && (
Error: 
                {result.error}
)}

Timestamp: {new Date(result.timestamp).toLocaleString('uk-UA')}

)} {/* Help Section */}

ℹ️ Інструкція

  1. Введіть секретний ключ (налаштований в DEPLOY_SECRET)
  2. Натисніть "Execute git pull" для оновлення коду
  3. Перевіряйте статус через "Refresh Status"
  4. Ключ зберігається в localStorage для зручності

API Endpoints:

  • GET: {API_BASE}/api/deploy/pull?secret=YOUR_KEY
  • POST: {API_BASE}/api/deploy/pull (body: {`{secret: "YOUR_KEY"}`})
  • GET: {API_BASE}/api/deploy/status?secret=YOUR_KEY
); }