125 lines
3.9 KiB
TypeScript
125 lines
3.9 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import './App.css'
|
||
|
||
interface APIInfo {
|
||
platform?: string;
|
||
version?: string;
|
||
features?: string[];
|
||
tech_stack?: any;
|
||
}
|
||
|
||
function App() {
|
||
const [apiInfo, setApiInfo] = useState<APIInfo | null>(null)
|
||
const [health, setHealth] = useState<any>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
|
||
useEffect(() => {
|
||
// Проверяем подключение к API
|
||
Promise.all([
|
||
fetch('http://147.45.146.17:8100/api/v1/info').then(r => r.json()),
|
||
fetch('http://147.45.146.17:8100/health').then(r => r.json())
|
||
])
|
||
.then(([info, healthData]) => {
|
||
setApiInfo(info)
|
||
setHealth(healthData)
|
||
setLoading(false)
|
||
})
|
||
.catch(err => {
|
||
console.error('API Error:', err)
|
||
setLoading(false)
|
||
})
|
||
}, [])
|
||
|
||
return (
|
||
<div className="app">
|
||
<header className="app-header">
|
||
<h1>🚀 ERV Insurance Platform</h1>
|
||
<p>Python FastAPI + React TypeScript</p>
|
||
</header>
|
||
|
||
<main className="app-main">
|
||
{loading ? (
|
||
<div className="loading">⏳ Подключение к API...</div>
|
||
) : (
|
||
<>
|
||
<div className="card">
|
||
<h2>📊 Информация о платформе</h2>
|
||
{apiInfo ? (
|
||
<>
|
||
<p><strong>Платформа:</strong> {apiInfo.platform}</p>
|
||
<p><strong>Версия:</strong> {apiInfo.version}</p>
|
||
|
||
<h3>✨ Возможности:</h3>
|
||
<ul>
|
||
{apiInfo.features?.map((f, i) => (
|
||
<li key={i}>{f}</li>
|
||
))}
|
||
</ul>
|
||
|
||
<h3>🛠️ Технологический стек:</h3>
|
||
<pre>{JSON.stringify(apiInfo.tech_stack, null, 2)}</pre>
|
||
</>
|
||
) : (
|
||
<p className="error">❌ Не удалось получить данные</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="card">
|
||
<h2>🏥 Здоровье сервисов</h2>
|
||
{health ? (
|
||
<>
|
||
<p className={health.status === 'healthy' ? 'success' : 'warning'}>
|
||
Статус: <strong>{health.status}</strong>
|
||
</p>
|
||
|
||
<h3>Сервисы:</h3>
|
||
<ul className="services">
|
||
{Object.entries(health.services || {}).map(([name, status]) => (
|
||
<li key={name}>
|
||
<span className={status === 'ok' ? 'status-ok' : 'status-error'}>
|
||
{status === 'ok' ? '✅' : '❌'}
|
||
</span>
|
||
<strong>{name}:</strong> {String(status)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</>
|
||
) : (
|
||
<p className="error">❌ Health check недоступен</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="card">
|
||
<h2>🔗 Полезные ссылки</h2>
|
||
<ul>
|
||
<li>
|
||
<a href="http://147.45.146.17:8100/docs" target="_blank">
|
||
📚 API Документация (Swagger UI)
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://147.45.146.17:8100/health" target="_blank">
|
||
🏥 Health Check
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://147.45.146.17:3002" target="_blank">
|
||
🐙 Gitea (Git репозиторий)
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</>
|
||
)}
|
||
</main>
|
||
|
||
<footer className="app-footer">
|
||
<p>© 2025 ERV Insurance Platform | Powered by FastAPI + React</p>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default App
|
||
|