feat: découverte dynamique apps - portail dynamique - fix URLs
This commit is contained in:
Manus Deploy
108
frontend/src/pages/AppsPage.jsx
Normal file
108
frontend/src/pages/AppsPage.jsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Box, RefreshCw, Plus } from 'lucide-react';
|
||||
import AppCard from '../components/AppCard';
|
||||
import AddAppModal from '../components/AddAppModal';
|
||||
import { getApps, getGiteaCommits } from '../utils/api';
|
||||
|
||||
export default function AppsPage({ apps, onRefresh }) {
|
||||
const [commitsMap, setCommitsMap] = useState({});
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Charger les commits pour chaque app
|
||||
apps.forEach((app) => {
|
||||
const owner = app.giteaOwner || 'manus-admin';
|
||||
const repo = app.giteaRepo || app.id;
|
||||
getGiteaCommits(owner, repo)
|
||||
.then((res) => {
|
||||
setCommitsMap((prev) => ({
|
||||
...prev,
|
||||
[app.id]: res.data,
|
||||
}));
|
||||
})
|
||||
.catch(() => {
|
||||
// Ignorer les erreurs Gitea pour les apps sans dépôt
|
||||
});
|
||||
});
|
||||
}, [apps]);
|
||||
|
||||
const handleAddSuccess = () => {
|
||||
setShowAddModal(false);
|
||||
// Rafraîchir la liste après un délai pour laisser le temps au health check
|
||||
setTimeout(() => {
|
||||
if (onRefresh) onRefresh();
|
||||
}, 5000);
|
||||
// Rafraîchir encore après 15s
|
||||
setTimeout(() => {
|
||||
if (onRefresh) onRefresh();
|
||||
}, 15000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<Box className="w-7 h-7 text-primary-400" />
|
||||
Applications
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Gérez et surveillez vos applications déployées
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button onClick={onRefresh} className="btn-secondary flex items-center gap-2">
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Rafraîchir
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="btn-primary flex items-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Ajouter une application
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Apps List */}
|
||||
{apps.length === 0 ? (
|
||||
<div className="card p-12 text-center">
|
||||
<Box className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-400">
|
||||
Aucune application
|
||||
</h3>
|
||||
<p className="text-gray-600 mt-2">
|
||||
Les applications déployées apparaîtront ici
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowAddModal(true)}
|
||||
className="btn-primary mt-4 inline-flex items-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Ajouter votre première application
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{apps.map((app) => (
|
||||
<AppCard
|
||||
key={app.id}
|
||||
app={app}
|
||||
commits={commitsMap[app.id] || []}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add App Modal */}
|
||||
<AddAppModal
|
||||
isOpen={showAddModal}
|
||||
onClose={() => setShowAddModal(false)}
|
||||
onSuccess={handleAddSuccess}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
190
frontend/src/pages/DashboardPage.jsx
Normal file
190
frontend/src/pages/DashboardPage.jsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Activity,
|
||||
Box,
|
||||
Container,
|
||||
Server,
|
||||
Clock,
|
||||
TrendingUp,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
} from 'lucide-react';
|
||||
import { getApps, getSystemInfo } from '../utils/api';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
|
||||
function StatCard({ icon: Icon, label, value, color, subtext }) {
|
||||
return (
|
||||
<div className="card p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-400">{label}</p>
|
||||
<p className="text-2xl font-bold text-white mt-1">{value}</p>
|
||||
{subtext && <p className="text-xs text-gray-500 mt-1">{subtext}</p>}
|
||||
</div>
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl flex items-center justify-center ${color}`}
|
||||
>
|
||||
<Icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardPage({ apps }) {
|
||||
const [systemInfo, setSystemInfo] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
getSystemInfo()
|
||||
.then((res) => setSystemInfo(res.data))
|
||||
.catch(console.error);
|
||||
}, []);
|
||||
|
||||
const onlineApps = apps.filter((a) => a.status === 'online').length;
|
||||
const offlineApps = apps.filter((a) => a.status === 'offline').length;
|
||||
const errorApps = apps.filter((a) => a.status === 'error').length;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white">Tableau de bord</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Vue d'ensemble de l'infrastructure Manus
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
icon={Box}
|
||||
label="Applications"
|
||||
value={apps.length}
|
||||
color="bg-primary-600"
|
||||
subtext="Applications déployées"
|
||||
/>
|
||||
<StatCard
|
||||
icon={CheckCircle2}
|
||||
label="En ligne"
|
||||
value={onlineApps}
|
||||
color="bg-emerald-600"
|
||||
subtext="Applications fonctionnelles"
|
||||
/>
|
||||
<StatCard
|
||||
icon={XCircle}
|
||||
label="Hors ligne"
|
||||
value={offlineApps}
|
||||
color="bg-gray-600"
|
||||
subtext="Applications arrêtées"
|
||||
/>
|
||||
<StatCard
|
||||
icon={AlertCircle}
|
||||
label="Erreurs"
|
||||
value={errorApps}
|
||||
color="bg-red-600"
|
||||
subtext="Applications en erreur"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* System Info + Apps Overview */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* System Info */}
|
||||
<div className="card p-6">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Server className="w-5 h-5 text-primary-400" />
|
||||
Informations système
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
||||
<span className="text-sm text-gray-400">Serveur</span>
|
||||
<span className="text-sm text-gray-200">
|
||||
78.138.58.109 (Recette)
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
||||
<span className="text-sm text-gray-400">Conteneurs actifs</span>
|
||||
<span className="text-sm text-gray-200">
|
||||
{systemInfo?.runningContainers || '...'} /{' '}
|
||||
{systemInfo?.totalContainers || '...'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
||||
<span className="text-sm text-gray-400">Gitea</span>
|
||||
<a
|
||||
href="https://git.recette.santinova-soft.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-primary-400 hover:text-primary-300"
|
||||
>
|
||||
git.recette.santinova-soft.org
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2 border-b border-dark-700">
|
||||
<span className="text-sm text-gray-400">Reverse Proxy</span>
|
||||
<span className="text-sm text-gray-200">
|
||||
Traefik + Let's Encrypt
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<span className="text-sm text-gray-400">Heure serveur</span>
|
||||
<span className="text-sm text-gray-200">
|
||||
{systemInfo?.serverTime
|
||||
? new Date(systemInfo.serverTime).toLocaleString('fr-FR')
|
||||
: '...'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Apps Quick View */}
|
||||
<div className="card p-6">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Activity className="w-5 h-5 text-primary-400" />
|
||||
État des applications
|
||||
</h3>
|
||||
{apps.length === 0 ? (
|
||||
<p className="text-gray-500 text-sm">Aucune application détectée</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{apps.map((app) => (
|
||||
<div
|
||||
key={app.id}
|
||||
className="flex items-center justify-between py-3 px-4 rounded-lg bg-dark-700/50 border border-dark-600/50"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full ${
|
||||
app.status === 'online'
|
||||
? 'bg-emerald-400 animate-pulse-dot'
|
||||
: app.status === 'error'
|
||||
? 'bg-red-400'
|
||||
: 'bg-gray-500'
|
||||
}`}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-200">
|
||||
{app.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{app.containerName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{app.health?.recette?.responseTime && (
|
||||
<span className="text-xs text-gray-500">
|
||||
{app.health.recette.responseTime}ms
|
||||
</span>
|
||||
)}
|
||||
<StatusBadge status={app.status} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
157
frontend/src/pages/DeploymentsPage.jsx
Normal file
157
frontend/src/pages/DeploymentsPage.jsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
ScrollText,
|
||||
RefreshCw,
|
||||
Clock,
|
||||
User,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Loader,
|
||||
} from 'lucide-react';
|
||||
import { getDeployments } from '../utils/api';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
try {
|
||||
return new Date(dateStr).toLocaleString('fr-FR');
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
function DeploymentEntry({ deployment }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
const statusIcon = {
|
||||
success: <CheckCircle2 className="w-5 h-5 text-emerald-400" />,
|
||||
failed: <XCircle className="w-5 h-5 text-red-400" />,
|
||||
running: <Loader className="w-5 h-5 text-amber-400 animate-spin" />,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card overflow-hidden">
|
||||
<div
|
||||
className="p-4 flex items-center justify-between cursor-pointer hover:bg-dark-700/50 transition-colors"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
{statusIcon[deployment.status] || statusIcon.running}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-200">
|
||||
{deployment.message}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 mt-1">
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatDate(deployment.timestamp)}
|
||||
</span>
|
||||
{deployment.user && (
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<User className="w-3 h-3" />
|
||||
{deployment.user}
|
||||
</span>
|
||||
)}
|
||||
{deployment.duration && (
|
||||
<span className="text-xs text-gray-500">
|
||||
Durée: {deployment.duration}s
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<StatusBadge status={deployment.status} />
|
||||
{expanded ? (
|
||||
<ChevronUp className="w-4 h-4 text-gray-500" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4 text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{expanded && deployment.logs && (
|
||||
<div className="px-4 pb-4 border-t border-dark-700">
|
||||
<div className="bg-dark-950 rounded-lg p-4 mt-3 max-h-96 overflow-auto">
|
||||
<pre className="log-viewer text-xs text-gray-400">
|
||||
{deployment.logs}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DeploymentsPage() {
|
||||
const [deployments, setDeployments] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchDeployments = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getDeployments();
|
||||
setDeployments(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement déploiements:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchDeployments();
|
||||
const interval = setInterval(fetchDeployments, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<ScrollText className="w-7 h-7 text-primary-400" />
|
||||
Historique des déploiements
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Consultez les logs des derniers déploiements
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchDeployments}
|
||||
className="btn-secondary flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Deployments List */}
|
||||
{loading && deployments.length === 0 ? (
|
||||
<div className="card p-12 text-center">
|
||||
<RefreshCw className="w-8 h-8 text-gray-600 mx-auto mb-4 animate-spin" />
|
||||
<p className="text-gray-400">Chargement...</p>
|
||||
</div>
|
||||
) : deployments.length === 0 ? (
|
||||
<div className="card p-12 text-center">
|
||||
<ScrollText className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-400">
|
||||
Aucun déploiement
|
||||
</h3>
|
||||
<p className="text-gray-600 mt-2">
|
||||
L'historique des déploiements apparaîtra ici après le premier
|
||||
redéploiement
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{deployments.map((d) => (
|
||||
<DeploymentEntry key={d.id} deployment={d} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
164
frontend/src/pages/DockerPage.jsx
Normal file
164
frontend/src/pages/DockerPage.jsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Container, RefreshCw, Clock } from 'lucide-react';
|
||||
import { getContainers } from '../utils/api';
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
try {
|
||||
return new Date(dateStr).toLocaleString('fr-FR');
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
export default function DockerPage() {
|
||||
const [containers, setContainers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchContainers = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getContainers();
|
||||
setContainers(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement conteneurs:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchContainers();
|
||||
const interval = setInterval(fetchContainers, 15000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const stateColors = {
|
||||
running: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
|
||||
exited: 'text-red-400 bg-red-500/10 border-red-500/20',
|
||||
created: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
||||
restarting: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<Container className="w-7 h-7 text-primary-400" />
|
||||
Conteneurs Docker
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Vue d'ensemble de tous les conteneurs sur le serveur
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchContainers}
|
||||
className="btn-secondary flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Containers Table */}
|
||||
<div className="card overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-dark-700">
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
Nom
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
Image
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
État
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
Statut
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
ID
|
||||
</th>
|
||||
<th className="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-6 py-4">
|
||||
Créé
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-700">
|
||||
{loading && containers.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="6" className="px-6 py-8 text-center">
|
||||
<RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
|
||||
</td>
|
||||
</tr>
|
||||
) : containers.length === 0 ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan="6"
|
||||
className="px-6 py-8 text-center text-gray-500"
|
||||
>
|
||||
Aucun conteneur trouvé
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
containers.map((c) => (
|
||||
<tr
|
||||
key={c.id}
|
||||
className="hover:bg-dark-700/30 transition-colors"
|
||||
>
|
||||
<td className="px-6 py-3">
|
||||
<span className="text-sm font-medium text-gray-200">
|
||||
{c.names.join(', ')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<code className="text-xs text-gray-400 bg-dark-700 px-2 py-0.5 rounded">
|
||||
{c.image}
|
||||
</code>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${
|
||||
stateColors[c.state] || stateColors.created
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`w-1.5 h-1.5 rounded-full mr-1.5 ${
|
||||
c.state === 'running'
|
||||
? 'bg-emerald-400'
|
||||
: c.state === 'exited'
|
||||
? 'bg-red-400'
|
||||
: 'bg-amber-400'
|
||||
}`}
|
||||
/>
|
||||
{c.state}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span className="text-xs text-gray-400">{c.status}</span>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<code className="text-xs text-gray-500 font-mono">
|
||||
{c.id}
|
||||
</code>
|
||||
</td>
|
||||
<td className="px-6 py-3">
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatDate(c.created)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
420
frontend/src/pages/DocumentationPage.jsx
Normal file
420
frontend/src/pages/DocumentationPage.jsx
Normal file
@@ -0,0 +1,420 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
BookOpen,
|
||||
Server,
|
||||
GitBranch,
|
||||
LayoutDashboard,
|
||||
Globe,
|
||||
Database,
|
||||
Shield,
|
||||
ArrowRight,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
ExternalLink,
|
||||
Activity,
|
||||
Cpu,
|
||||
HardDrive,
|
||||
Network,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Zap,
|
||||
Package,
|
||||
} from 'lucide-react';
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
Données de l'infrastructure
|
||||
───────────────────────────────────────────── */
|
||||
const RECETTE = {
|
||||
label: 'RECETTE',
|
||||
color: 'amber',
|
||||
ip: '78.138.58.109',
|
||||
os: 'Debian GNU/Linux 12',
|
||||
cpu: '4 vCores',
|
||||
ram: '8 Go',
|
||||
disk: '147 Go',
|
||||
infra: [
|
||||
{
|
||||
icon: GitBranch,
|
||||
color: 'purple',
|
||||
name: 'Gitea',
|
||||
url: 'git.recette.santinova-soft.org',
|
||||
desc: 'Dépôt Git — 4 repositories',
|
||||
href: 'https://git.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: LayoutDashboard,
|
||||
color: 'blue',
|
||||
name: 'Dashboard',
|
||||
url: 'dashboard.recette.santinova-soft.org',
|
||||
desc: 'Monitoring CPU / RAM / Disque',
|
||||
href: 'https://dashboard.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
color: 'teal',
|
||||
name: 'Portail Applicatif',
|
||||
url: 'portail.recette.santinova-soft.org',
|
||||
desc: 'Vitrine centralisée des applications',
|
||||
href: 'https://portail.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
color: 'gray',
|
||||
name: 'Traefik',
|
||||
url: 'Reverse Proxy SSL',
|
||||
desc: "Let's Encrypt — Routage dynamique",
|
||||
},
|
||||
],
|
||||
apps: [
|
||||
{
|
||||
icon: '🧾',
|
||||
color: 'green',
|
||||
name: 'Démat. Facturation DSI',
|
||||
url: 'demat-facturation.recette.santinova-soft.org',
|
||||
href: 'https://demat-facturation.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: '👁️',
|
||||
color: 'indigo',
|
||||
name: 'Veille Réglementaire',
|
||||
url: 'veille.recette.santinova-soft.org',
|
||||
href: 'https://veille.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: '🗺️',
|
||||
color: 'cyan',
|
||||
name: 'SONUM',
|
||||
url: 'sonum.recette.santinova-soft.org',
|
||||
desc: 'Cartographie solutions numériques FEHAP',
|
||||
href: 'https://sonum.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: '👤',
|
||||
color: 'pink',
|
||||
name: 'Itinova Contacts',
|
||||
url: 'contacts.recette.santinova-soft.org',
|
||||
href: 'https://contacts.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: '🚗',
|
||||
color: 'yellow',
|
||||
name: 'Flotte Véhicules',
|
||||
url: 'flotte.recette.santinova-soft.org',
|
||||
href: 'https://flotte.recette.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: '🎧',
|
||||
color: 'orange',
|
||||
name: 'Podcasts Itinova',
|
||||
url: 'podcasts.recette.santinova-soft.org',
|
||||
href: 'https://podcasts.recette.santinova-soft.org',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const PRODUCTION = {
|
||||
label: 'PRODUCTION',
|
||||
color: 'emerald',
|
||||
ip: '180.149.196.138',
|
||||
os: 'Debian GNU/Linux 12',
|
||||
cpu: '8 vCores',
|
||||
ram: '16 Go',
|
||||
disk: '246 Go',
|
||||
services: [
|
||||
{
|
||||
icon: GitBranch,
|
||||
color: 'purple',
|
||||
name: 'Gitea',
|
||||
url: 'git.santinova-soft.org',
|
||||
desc: 'Dépôt Git principal',
|
||||
href: 'https://git.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: LayoutDashboard,
|
||||
color: 'blue',
|
||||
name: 'Dashboard',
|
||||
url: 'dashboard.santinova-soft.org',
|
||||
desc: 'Monitoring temps réel',
|
||||
href: 'https://dashboard.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
color: 'teal',
|
||||
name: 'Portail Applicatif',
|
||||
url: 'portail.santinova-soft.org',
|
||||
desc: 'Vitrine applicative production',
|
||||
href: 'https://portail.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
color: 'gray',
|
||||
name: 'Traefik',
|
||||
url: 'Reverse Proxy SSL',
|
||||
desc: "Let's Encrypt — Routage dynamique",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const CICD_STEPS = [
|
||||
{ icon: GitBranch, label: 'Push code', desc: 'Développeur pousse sur Gitea' },
|
||||
{ icon: Zap, label: 'Webhook', desc: 'Gitea déclenche le webhook' },
|
||||
{ icon: Package, label: 'docker compose build', desc: 'Build de la nouvelle image' },
|
||||
{ icon: Server, label: 'docker compose up -d', desc: 'Redémarrage du conteneur' },
|
||||
{ icon: CheckCircle, label: 'Health check', desc: 'Vérification de disponibilité' },
|
||||
];
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
Helpers de couleur
|
||||
───────────────────────────────────────────── */
|
||||
const colorMap = {
|
||||
purple: 'border-purple-500/40 bg-purple-500/10 text-purple-300',
|
||||
blue: 'border-blue-500/40 bg-blue-500/10 text-blue-300',
|
||||
teal: 'border-teal-500/40 bg-teal-500/10 text-teal-300',
|
||||
gray: 'border-gray-500/40 bg-gray-500/10 text-gray-300',
|
||||
green: 'border-green-500/40 bg-green-500/10 text-green-300',
|
||||
indigo: 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300',
|
||||
cyan: 'border-cyan-500/40 bg-cyan-500/10 text-cyan-300',
|
||||
pink: 'border-pink-500/40 bg-pink-500/10 text-pink-300',
|
||||
yellow: 'border-yellow-500/40 bg-yellow-500/10 text-yellow-300',
|
||||
orange: 'border-orange-500/40 bg-orange-500/10 text-orange-300',
|
||||
};
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
Composants
|
||||
───────────────────────────────────────────── */
|
||||
function ServerBadge({ env }) {
|
||||
const isAmber = env.color === 'amber';
|
||||
const borderColor = isAmber ? 'border-amber-500/30' : 'border-emerald-500/30';
|
||||
const bgColor = isAmber ? 'bg-amber-500/5' : 'bg-emerald-500/5';
|
||||
return (
|
||||
<div className={`flex flex-wrap gap-4 p-3 rounded-xl border ${borderColor} ${bgColor} mb-5`}>
|
||||
{[
|
||||
{ icon: Server, label: env.ip },
|
||||
{ icon: Cpu, label: env.cpu },
|
||||
{ icon: Activity, label: env.ram + ' RAM' },
|
||||
{ icon: HardDrive, label: env.disk + ' Disque' },
|
||||
{ icon: Network, label: env.os },
|
||||
].map(({ icon: Icon, label }) => (
|
||||
<div key={label} className="flex items-center gap-1.5 text-xs text-gray-400">
|
||||
<Icon className="w-3.5 h-3.5 text-gray-500" />
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ServiceCard({ item, withDb = false }) {
|
||||
const cls = colorMap[item.color] || colorMap.gray;
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<div className={`flex items-start gap-3 p-3 rounded-xl border ${cls} transition-all hover:scale-[1.01]`}>
|
||||
<div className="mt-0.5 flex-shrink-0">
|
||||
{typeof Icon === 'string' ? (
|
||||
<span className="text-xl">{Icon}</span>
|
||||
) : (
|
||||
<Icon className="w-5 h-5" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-semibold text-sm text-white">{item.name}</span>
|
||||
{item.href && (
|
||||
<a
|
||||
href={item.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-500 hover:text-gray-300 transition-colors"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 truncate">{item.url}</p>
|
||||
{item.desc && <p className="text-xs text-gray-500 mt-0.5">{item.desc}</p>}
|
||||
</div>
|
||||
{withDb && (
|
||||
<div className="flex items-center gap-1 text-xs text-gray-600 flex-shrink-0">
|
||||
<Database className="w-3 h-3" />
|
||||
<span>MySQL</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionTitle({ children, color = 'amber' }) {
|
||||
const cls = color === 'amber' ? 'text-amber-400' : 'text-emerald-400';
|
||||
return <h3 className={`text-xs font-bold uppercase tracking-widest ${cls} mb-3`}>{children}</h3>;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
Page principale
|
||||
───────────────────────────────────────────── */
|
||||
export default function DocumentationPage() {
|
||||
const [schemaOpen, setSchemaOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<div className="space-y-8 pb-12">
|
||||
{/* ── En-tête ── */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
|
||||
<BookOpen className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Documentation Infrastructure</h1>
|
||||
<p className="text-sm text-gray-400">Architecture de déploiement Santinova — Recette & Production</p>
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
|
||||
<Clock className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span className="text-xs text-emerald-400">Mis à jour le 04 Mai 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Schéma d'architecture ── */}
|
||||
<div className="rounded-2xl border border-dark-700 bg-dark-900 overflow-hidden">
|
||||
<button
|
||||
onClick={() => setSchemaOpen((v) => !v)}
|
||||
className="w-full flex items-center justify-between px-6 py-4 hover:bg-dark-800 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-blue-600/20 flex items-center justify-center">
|
||||
<Network className="w-4 h-4 text-blue-400" />
|
||||
</div>
|
||||
<span className="font-semibold text-white">Schéma d'Architecture</span>
|
||||
</div>
|
||||
{schemaOpen ? (
|
||||
<ChevronUp className="w-5 h-5 text-gray-400" />
|
||||
) : (
|
||||
<ChevronDown className="w-5 h-5 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
{schemaOpen && (
|
||||
<div className="px-6 pb-6">
|
||||
<img
|
||||
src="/infra_schema_v2.png"
|
||||
alt="Schéma d'architecture infrastructure Santinova"
|
||||
className="w-full rounded-xl border border-dark-700 shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Grille Recette / CI-CD / Production ── */}
|
||||
<div className="grid grid-cols-1 xl:grid-cols-[1fr_auto_1fr] gap-6">
|
||||
|
||||
{/* ── RECETTE ── */}
|
||||
<div className="rounded-2xl border border-amber-500/30 bg-dark-900 p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-3 h-3 rounded-full bg-amber-400 shadow-lg shadow-amber-400/50" />
|
||||
<h2 className="text-xl font-bold text-amber-400 tracking-wide">RECETTE</h2>
|
||||
<span className="ml-auto text-xs text-gray-500 font-mono">78.138.58.109</span>
|
||||
</div>
|
||||
<ServerBadge env={RECETTE} />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Infra de base */}
|
||||
<div>
|
||||
<SectionTitle color="amber">Infrastructure de base</SectionTitle>
|
||||
<div className="space-y-2">
|
||||
{RECETTE.infra.map((item) => (
|
||||
<ServiceCard key={item.name} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Applications */}
|
||||
<div>
|
||||
<SectionTitle color="amber">Applications déployées</SectionTitle>
|
||||
<div className="space-y-2">
|
||||
{RECETTE.apps.map((item) => (
|
||||
<ServiceCard key={item.name} item={item} withDb />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── CI/CD Pipeline ── */}
|
||||
<div className="flex flex-col items-center justify-center gap-3 px-4 xl:px-2 py-6">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-blue-400 mb-2">CI/CD</span>
|
||||
{CICD_STEPS.map((step, i) => {
|
||||
const Icon = step.icon;
|
||||
return (
|
||||
<React.Fragment key={step.label}>
|
||||
<div className="flex flex-col items-center gap-1 group">
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-600/20 border border-blue-500/30 flex items-center justify-center group-hover:bg-blue-600/30 transition-colors">
|
||||
<Icon className="w-5 h-5 text-blue-400" />
|
||||
</div>
|
||||
<span className="text-xs text-gray-400 text-center max-w-[80px] leading-tight">{step.label}</span>
|
||||
</div>
|
||||
{i < CICD_STEPS.length - 1 && (
|
||||
<div className="w-px h-4 bg-gradient-to-b from-blue-500/50 to-blue-500/10" />
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
<div className="mt-4 flex items-center gap-2 px-3 py-2 rounded-xl bg-blue-600/10 border border-blue-500/20">
|
||||
<ArrowRight className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-xs text-blue-300 font-semibold whitespace-nowrap">Promotion → PROD</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── PRODUCTION ── */}
|
||||
<div className="rounded-2xl border border-emerald-500/30 bg-dark-900 p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-3 h-3 rounded-full bg-emerald-400 shadow-lg shadow-emerald-400/50" />
|
||||
<h2 className="text-xl font-bold text-emerald-400 tracking-wide">PRODUCTION</h2>
|
||||
<span className="ml-auto text-xs text-gray-500 font-mono">180.149.196.138</span>
|
||||
</div>
|
||||
<ServerBadge env={PRODUCTION} />
|
||||
|
||||
<SectionTitle color="emerald">Services actifs</SectionTitle>
|
||||
<div className="space-y-2 mb-4">
|
||||
{PRODUCTION.services.map((item) => (
|
||||
<ServiceCard key={item.name} item={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Carte "Applications à venir" */}
|
||||
<div className="flex items-center gap-3 p-3 rounded-xl border border-dashed border-gray-600/40 bg-gray-500/5">
|
||||
<Package className="w-5 h-5 text-gray-500" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-gray-400">Applications à venir</p>
|
||||
<p className="text-xs text-gray-600">Déploiement progressif via CI/CD</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Badge metrics-collector */}
|
||||
<div className="mt-4 flex items-center gap-2 px-3 py-2 rounded-lg bg-emerald-500/5 border border-emerald-500/20">
|
||||
<Activity className="w-3.5 h-3.5 text-emerald-400" />
|
||||
<span className="text-xs text-emerald-400">metrics-collector · systemd · actif</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Légende technologique ── */}
|
||||
<div className="rounded-2xl border border-dark-700 bg-dark-900 p-6">
|
||||
<h3 className="text-sm font-bold text-white mb-4">Stack Technologique</h3>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{[
|
||||
{ emoji: '🐳', label: 'Docker', desc: 'Conteneurisation' },
|
||||
{ emoji: '🔒', label: 'HTTPS', desc: "Let's Encrypt SSL" },
|
||||
{ emoji: '🗄️', label: 'MySQL 8.0', desc: 'Base de données' },
|
||||
{ emoji: '🔀', label: 'Traefik', desc: 'Reverse Proxy' },
|
||||
].map((t) => (
|
||||
<div
|
||||
key={t.label}
|
||||
className="flex items-center gap-3 p-3 rounded-xl bg-dark-800 border border-dark-700"
|
||||
>
|
||||
<span className="text-2xl">{t.emoji}</span>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-white">{t.label}</p>
|
||||
<p className="text-xs text-gray-500">{t.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
227
frontend/src/pages/GiteaPage.jsx
Normal file
227
frontend/src/pages/GiteaPage.jsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
GitBranch,
|
||||
RefreshCw,
|
||||
ExternalLink,
|
||||
Lock,
|
||||
Unlock,
|
||||
GitCommit,
|
||||
Clock,
|
||||
User,
|
||||
Code,
|
||||
} from 'lucide-react';
|
||||
import { getGiteaRepos, getGiteaCommits } from '../utils/api';
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
try {
|
||||
return new Date(dateStr).toLocaleString('fr-FR');
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
}
|
||||
|
||||
function formatSize(kb) {
|
||||
if (!kb) return 'N/A';
|
||||
if (kb < 1024) return `${kb} KB`;
|
||||
return `${(kb / 1024).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
export default function GiteaPage() {
|
||||
const [repos, setRepos] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedRepo, setSelectedRepo] = useState(null);
|
||||
const [commits, setCommits] = useState([]);
|
||||
const [loadingCommits, setLoadingCommits] = useState(false);
|
||||
|
||||
const fetchRepos = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getGiteaRepos();
|
||||
setRepos(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement repos:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchCommits = async (fullName) => {
|
||||
setLoadingCommits(true);
|
||||
setSelectedRepo(fullName);
|
||||
try {
|
||||
const [owner, repo] = fullName.split('/');
|
||||
const res = await getGiteaCommits(owner, repo);
|
||||
setCommits(res.data);
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement commits:', err);
|
||||
setCommits([]);
|
||||
} finally {
|
||||
setLoadingCommits(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchRepos();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<GitBranch className="w-7 h-7 text-primary-400" />
|
||||
Dépôts Gitea
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Explorez les dépôts sur{' '}
|
||||
<a
|
||||
href="https://git.recette.santinova-soft.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary-400 hover:text-primary-300"
|
||||
>
|
||||
git.recette.santinova-soft.org
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchRepos}
|
||||
className="btn-secondary flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Repos List */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider">
|
||||
Dépôts ({repos.length})
|
||||
</h3>
|
||||
{loading ? (
|
||||
<div className="card p-8 text-center">
|
||||
<RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
|
||||
</div>
|
||||
) : repos.length === 0 ? (
|
||||
<div className="card p-8 text-center">
|
||||
<GitBranch className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
||||
<p className="text-gray-400">Aucun dépôt trouvé</p>
|
||||
</div>
|
||||
) : (
|
||||
repos.map((repo) => (
|
||||
<div
|
||||
key={repo.id}
|
||||
className={`card p-4 cursor-pointer transition-all ${
|
||||
selectedRepo === repo.fullName
|
||||
? 'border-primary-500/50 bg-primary-500/5'
|
||||
: 'hover:border-dark-600'
|
||||
}`}
|
||||
onClick={() => fetchCommits(repo.fullName)}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Code className="w-4 h-4 text-primary-400" />
|
||||
<h4 className="text-sm font-semibold text-white">
|
||||
{repo.name}
|
||||
</h4>
|
||||
{repo.private ? (
|
||||
<Lock className="w-3 h-3 text-gray-500" />
|
||||
) : (
|
||||
<Unlock className="w-3 h-3 text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{repo.description || 'Pas de description'}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 mt-2">
|
||||
{repo.language && (
|
||||
<span className="text-xs text-gray-400">
|
||||
{repo.language}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-xs text-gray-500">
|
||||
{formatSize(repo.size)}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
Mis à jour: {formatDate(repo.updatedAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href={repo.htmlUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-500 hover:text-primary-400 transition-colors"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Commits */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider">
|
||||
{selectedRepo
|
||||
? `Commits — ${selectedRepo}`
|
||||
: 'Sélectionnez un dépôt'}
|
||||
</h3>
|
||||
{!selectedRepo ? (
|
||||
<div className="card p-8 text-center">
|
||||
<GitCommit className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
||||
<p className="text-gray-400 text-sm">
|
||||
Cliquez sur un dépôt pour voir ses commits
|
||||
</p>
|
||||
</div>
|
||||
) : loadingCommits ? (
|
||||
<div className="card p-8 text-center">
|
||||
<RefreshCw className="w-6 h-6 text-gray-600 mx-auto animate-spin" />
|
||||
</div>
|
||||
) : commits.length === 0 ? (
|
||||
<div className="card p-8 text-center">
|
||||
<GitCommit className="w-10 h-10 text-gray-600 mx-auto mb-3" />
|
||||
<p className="text-gray-400">Aucun commit trouvé</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{commits.map((commit, idx) => (
|
||||
<div key={commit.sha || idx} className="card p-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-1">
|
||||
<GitCommit className="w-4 h-4 text-gray-500" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-gray-200 truncate">
|
||||
{commit.message}
|
||||
</p>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<code className="text-xs bg-dark-700 text-primary-400 px-1.5 py-0.5 rounded font-mono">
|
||||
{commit.shortSha}
|
||||
</code>
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<User className="w-3 h-3" />
|
||||
{commit.author}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{formatDate(commit.date)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
458
frontend/src/pages/InventairePage.jsx
Normal file
458
frontend/src/pages/InventairePage.jsx
Normal file
@@ -0,0 +1,458 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, RefreshCw, GitBranch, CheckCircle, XCircle, ExternalLink, Tag, AlertCircle, ArrowUp, ArrowDown, Minus, AlertTriangle } from 'lucide-react';
|
||||
import api from '../utils/api';
|
||||
|
||||
const APPS_CONFIG = [
|
||||
{
|
||||
id: 'itinova-contacts',
|
||||
name: 'Itinova Contacts',
|
||||
repoName: 'itinova-contacts',
|
||||
urlRecette: 'https://contacts.recette.santinova-soft.org',
|
||||
urlProd: 'https://contacts.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
id: 'itinova-podcasts',
|
||||
name: 'Itinova Podcasts',
|
||||
repoName: 'itinova-podcasts',
|
||||
urlRecette: 'https://podcasts.recette.santinova-soft.org',
|
||||
urlProd: 'https://podcasts.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
id: 'veille-reglementaire',
|
||||
name: 'Veille Réglementaire',
|
||||
repoName: 'veille-reglementaire',
|
||||
urlRecette: 'https://veille.recette.santinova-soft.org',
|
||||
urlProd: 'https://veille.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
id: 'itinova-vehicle-exchange',
|
||||
name: 'Itinova Gestion de Flotte',
|
||||
repoName: 'itinova-vehicle-exchange',
|
||||
urlRecette: 'https://flotte.recette.santinova-soft.org',
|
||||
urlProd: 'https://flotte.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
id: 'sonum',
|
||||
name: 'SONUM',
|
||||
repoName: 'sonum',
|
||||
urlRecette: 'https://sonum.recette.santinova-soft.org',
|
||||
urlProd: 'https://sonum.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
id: 'demat-facturation-dsi',
|
||||
name: 'Démat. Facturation DSI',
|
||||
repoName: 'demat-facturation-dsi',
|
||||
urlRecette: 'https://demat-facturation.recette.santinova-soft.org',
|
||||
urlProd: 'https://demat-facturation.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
id: 'facturation-santinova',
|
||||
name: 'Facturation Santinova',
|
||||
repoName: 'facturation-santinova',
|
||||
urlRecette: 'https://facturation.recette.santinova-soft.org',
|
||||
urlProd: null,
|
||||
},
|
||||
{
|
||||
id: 'formation-manager-itinova',
|
||||
name: 'Formation Manager',
|
||||
repoName: 'formation-manager-itinova',
|
||||
urlRecette: 'https://formation.recette.santinova-soft.org',
|
||||
urlProd: 'https://formations.itinova.org',
|
||||
},
|
||||
{
|
||||
id: 'pilotage-masse-salariale',
|
||||
name: 'Pilotage Masse Salariale',
|
||||
repoName: 'pilotage-masse-salariale',
|
||||
urlRecette: 'https://pilotage-ms.recette.santinova-soft.org',
|
||||
urlProd: null,
|
||||
},
|
||||
{
|
||||
id: 'itinova-budget-si',
|
||||
name: 'Gestion Budget Informatique',
|
||||
repoName: 'itinova-budget-si',
|
||||
urlRecette: 'https://budget-si.recette.santinova-soft.org',
|
||||
urlProd: null,
|
||||
},
|
||||
{
|
||||
id: 'falc-generator',
|
||||
name: 'FALC Generator',
|
||||
repoName: 'falc-generator',
|
||||
urlRecette: 'https://falc.recette.santinova-soft.org',
|
||||
urlProd: 'https://falc.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
id: 'portail-santinova',
|
||||
name: 'Portail Applicatif',
|
||||
repoName: 'portail-santinova',
|
||||
urlRecette: 'https://portail.recette.santinova-soft.org',
|
||||
urlProd: 'https://portail.santinova-soft.org',
|
||||
},
|
||||
{
|
||||
id: 'manus-dashboard',
|
||||
name: 'Dashboard Recette',
|
||||
repoName: 'manus-dashboard',
|
||||
urlRecette: 'https://dashboard.recette.santinova-soft.org',
|
||||
urlProd: 'https://dashboard.santinova-soft.org',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
function SyncBadge({ versionRecette, versionProd }) {
|
||||
// Extraire le SHA (7 premiers caractères avant l'espace)
|
||||
const shaRec = versionRecette ? versionRecette.split(' ')[0] : null;
|
||||
const shaProd = versionProd ? versionProd.split(' ')[0] : null;
|
||||
// Extraire la date entre parenthèses pour comparer
|
||||
const dateRec = versionRecette ? versionRecette.match(/\((.+?)\)/)?.[1] : null;
|
||||
const dateProd = versionProd ? versionProd.match(/\((.+?)\)/)?.[1] : null;
|
||||
|
||||
if (!shaRec && !shaProd) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500">
|
||||
<Minus className="w-3 h-3" />
|
||||
N/A
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (!shaRec) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-green-900/40 text-green-300 border border-green-700/40" title="Uniquement en production">
|
||||
<ArrowDown className="w-3 h-3" />
|
||||
Prod en avance
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (!shaProd) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-orange-900/40 text-orange-300 border border-orange-700/40" title="Uniquement en recette">
|
||||
<ArrowUp className="w-3 h-3" />
|
||||
Recette en avance
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (shaRec === shaProd) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-900/40 text-emerald-300 border border-emerald-700/40" title="Versions identiques">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
Synchronisé
|
||||
</span>
|
||||
);
|
||||
}
|
||||
// Comparer les dates pour savoir qui est en avance
|
||||
// Format fr-FR : dd/mm/yyyy
|
||||
const parseDate = (s) => {
|
||||
if (!s) return null;
|
||||
const parts = s.split('/');
|
||||
if (parts.length === 3) return new Date(`${parts[2]}-${parts[1]}-${parts[0]}`);
|
||||
return new Date(s);
|
||||
};
|
||||
const dRec = parseDate(dateRec);
|
||||
const dProd = parseDate(dateProd);
|
||||
|
||||
if (dRec && dProd) {
|
||||
if (dRec > dProd) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-orange-900/40 text-orange-300 border border-orange-700/40" title={`Recette : ${versionRecette} | Prod : ${versionProd}`}>
|
||||
<ArrowUp className="w-3 h-3" />
|
||||
Recette en avance
|
||||
</span>
|
||||
);
|
||||
} else if (dProd > dRec) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-green-900/40 text-green-300 border border-green-700/40" title={`Recette : ${versionRecette} | Prod : ${versionProd}`}>
|
||||
<ArrowDown className="w-3 h-3" />
|
||||
Prod en avance
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
// SHA différents mais dates non comparables
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-900/40 text-yellow-300 border border-yellow-700/40" title={`Recette : ${versionRecette} | Prod : ${versionProd}`}>
|
||||
<AlertTriangle className="w-3 h-3" />
|
||||
Divergent
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function VersionBadge({ version, loading }) {
|
||||
if (loading) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-700 text-gray-400 animate-pulse">
|
||||
<Tag className="w-3 h-3" />
|
||||
Chargement...
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (!version) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-gray-800 text-gray-500">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
N/A
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-blue-900/40 text-blue-300 border border-blue-700/40">
|
||||
<Tag className="w-3 h-3" />
|
||||
{version}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function RepoBadge({ present, url, label }) {
|
||||
if (!present) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<XCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
|
||||
<span className="text-gray-500 text-xs">Absent</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0" />
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-primary-400 hover:text-primary-300 hover:underline flex items-center gap-1 truncate max-w-[180px]"
|
||||
title={url}
|
||||
>
|
||||
{label}
|
||||
<ExternalLink className="w-3 h-3 flex-shrink-0" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function InventairePage() {
|
||||
const [inventory, setInventory] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lastUpdate, setLastUpdate] = useState(null);
|
||||
|
||||
const fetchInventory = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await api.get('/inventory');
|
||||
setInventory(res.data);
|
||||
setLastUpdate(new Date());
|
||||
} catch (err) {
|
||||
console.error('Erreur chargement inventaire:', err);
|
||||
// Fallback : construire l'inventaire depuis la config statique
|
||||
const fallback = APPS_CONFIG.map((app) => ({
|
||||
...app,
|
||||
repoRecette: { present: false, url: null, version: null },
|
||||
repoProd: { present: false, url: null, version: null },
|
||||
}));
|
||||
setInventory(fallback);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Auto-refresh toutes les 5 minutes
|
||||
useEffect(() => {
|
||||
fetchInventory();
|
||||
const interval = setInterval(fetchInventory, 5 * 60 * 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<Table className="w-7 h-7 text-emerald-400" />
|
||||
Inventaire des Applications
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
État des dépôts Git et versions déployées par environnement
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{lastUpdate && (
|
||||
<span className="text-xs text-gray-500">
|
||||
Mis à jour : {lastUpdate.toLocaleTimeString('fr-FR')}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={fetchInventory}
|
||||
disabled={loading}
|
||||
className="btn-secondary flex items-center gap-2"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
{!loading && inventory.length > 0 && (
|
||||
<div className="grid grid-cols-5 gap-4">
|
||||
<div className="card p-4 text-center border border-dark-700">
|
||||
<div className="text-2xl font-bold text-white">{inventory.length}</div>
|
||||
<div className="text-xs text-gray-400 mt-1">Applications totales</div>
|
||||
</div>
|
||||
<div className="card p-4 text-center border border-orange-700/30">
|
||||
<div className="text-2xl font-bold text-orange-400">
|
||||
{inventory.filter((a) => a.repoRecette?.present).length}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-1">Dépôts Recette</div>
|
||||
</div>
|
||||
<div className="card p-4 text-center border border-green-700/30">
|
||||
<div className="text-2xl font-bold text-green-400">
|
||||
{inventory.filter((a) => a.repoProd?.present).length}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-1">Dépôts Production</div>
|
||||
</div>
|
||||
<div className="card p-4 text-center border border-emerald-700/30">
|
||||
<div className="text-2xl font-bold text-emerald-400">
|
||||
{inventory.filter((a) => {
|
||||
const shaRec = a.repoRecette?.version?.split(' ')[0];
|
||||
const shaProd = a.repoProd?.version?.split(' ')[0];
|
||||
return shaRec && shaProd && shaRec === shaProd;
|
||||
}).length}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-1">Synchronisés</div>
|
||||
</div>
|
||||
<div className="card p-4 text-center border border-blue-700/30">
|
||||
<div className="text-2xl font-bold text-blue-400">
|
||||
{inventory.filter((a) => a.repoRecette?.present && a.repoProd?.present).length}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-1">Déployés sur les 2 envs</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Légende */}
|
||||
<div className="flex items-center gap-6 text-xs text-gray-400">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<CheckCircle className="w-4 h-4 text-green-500" />
|
||||
Dépôt présent
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<XCircle className="w-4 h-4 text-red-500" />
|
||||
Dépôt absent
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Tag className="w-4 h-4 text-blue-400" />
|
||||
Version (dernier commit)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tableau */}
|
||||
<div className="card overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-dark-700">
|
||||
<th className="text-left px-4 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider w-48">
|
||||
Application
|
||||
</th>
|
||||
<th className="text-center px-4 py-3 text-xs font-semibold text-purple-400 uppercase tracking-wider">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<ArrowUp className="w-4 h-4" />
|
||||
Synchronisation
|
||||
</div>
|
||||
</th>
|
||||
<th className="text-center px-4 py-3 text-xs font-semibold text-orange-400 uppercase tracking-wider" colSpan={2}>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<GitBranch className="w-4 h-4" />
|
||||
Recette
|
||||
</div>
|
||||
</th>
|
||||
<th className="text-center px-4 py-3 text-xs font-semibold text-green-400 uppercase tracking-wider" colSpan={2}>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<GitBranch className="w-4 h-4" />
|
||||
Production
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr className="border-b border-dark-700 bg-dark-800/50">
|
||||
<th className="px-4 py-2"></th>
|
||||
<th className="px-4 py-2"></th>
|
||||
<th className="text-center px-3 py-2 text-xs text-gray-500 font-medium">Dépôt Git</th>
|
||||
<th className="text-center px-3 py-2 text-xs text-gray-500 font-medium">Version</th>
|
||||
<th className="text-center px-3 py-2 text-xs text-gray-500 font-medium">Dépôt Git</th>
|
||||
<th className="text-center px-3 py-2 text-xs text-gray-500 font-medium">Version</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-dark-700">
|
||||
{loading && inventory.length === 0
|
||||
? APPS_CONFIG.map((app) => (
|
||||
<tr key={app.id} className="hover:bg-dark-800/30 transition-colors">
|
||||
<td className="px-4 py-3">
|
||||
<span className="text-sm font-medium text-white">{app.name}</span>
|
||||
</td>
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<td key={i} className="px-3 py-3 text-center">
|
||||
<div className="h-5 bg-dark-700 rounded animate-pulse mx-auto w-24" />
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
: inventory.map((app) => {
|
||||
const isInfra = ['portail-santinova', 'manus-dashboard'].includes(app.id);
|
||||
return (
|
||||
<tr key={app.id} className={`hover:bg-dark-800/30 transition-colors${isInfra ? ' bg-amber-950/10 border-l-2 border-amber-500/40' : ''}`}>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-sm font-medium ${isInfra ? 'text-amber-300' : 'text-white'}`}>{app.name}</span>
|
||||
{isInfra && (
|
||||
<span className="text-xs px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-400 border border-amber-500/25 font-semibold">Infra</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 mt-0.5">{app.repoName}</span>
|
||||
</div>
|
||||
</td>
|
||||
{/* Synchronisation */}
|
||||
<td className="px-3 py-3 text-center">
|
||||
<SyncBadge
|
||||
versionRecette={app.repoRecette?.version}
|
||||
versionProd={app.repoProd?.version}
|
||||
/>
|
||||
</td>
|
||||
{/* Recette - Dépôt */}
|
||||
<td className="px-3 py-3">
|
||||
<RepoBadge
|
||||
present={app.repoRecette?.present}
|
||||
url={app.repoRecette?.url}
|
||||
label={`git.recette/…/${app.repoName}`}
|
||||
/>
|
||||
</td>
|
||||
{/* Recette - Version */}
|
||||
<td className="px-3 py-3 text-center">
|
||||
<VersionBadge
|
||||
version={app.repoRecette?.version}
|
||||
loading={loading}
|
||||
/>
|
||||
</td>
|
||||
{/* Prod - Dépôt */}
|
||||
<td className="px-3 py-3">
|
||||
<RepoBadge
|
||||
present={app.repoProd?.present}
|
||||
url={app.repoProd?.url}
|
||||
label={`git.santinova/…/${app.repoName}`}
|
||||
/>
|
||||
</td>
|
||||
{/* Prod - Version */}
|
||||
<td className="px-3 py-3 text-center">
|
||||
<VersionBadge
|
||||
version={app.repoProd?.version}
|
||||
loading={loading}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
138
frontend/src/pages/LoginPage.jsx
Normal file
138
frontend/src/pages/LoginPage.jsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Lock, User, AlertCircle, Server } from 'lucide-react';
|
||||
import { login } from '../utils/api';
|
||||
|
||||
export default function LoginPage({ onLogin }) {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const response = await login(username, password);
|
||||
localStorage.setItem('dashboard_token', response.data.token);
|
||||
onLogin(response.data);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err.response?.data?.error || 'Erreur de connexion. Veuillez réessayer.'
|
||||
);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-dark-950 px-4">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Logo / Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-600 mb-4">
|
||||
<Server className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white">Dashboard Recette</h1>
|
||||
<p className="text-gray-400 mt-2">Gestion des applications</p>
|
||||
</div>
|
||||
|
||||
{/* Login Form */}
|
||||
<div className="card p-8">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">
|
||||
<AlertCircle className="w-4 h-4 flex-shrink-0" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="block text-sm font-medium text-gray-300 mb-2"
|
||||
>
|
||||
Nom d'utilisateur
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="input-field pl-11"
|
||||
placeholder="Entrez votre identifiant"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-sm font-medium text-gray-300 mb-2"
|
||||
>
|
||||
Mot de passe
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="input-field pl-11"
|
||||
placeholder="Entrez votre mot de passe"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="btn-primary w-full flex items-center justify-center gap-2 py-3"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<svg
|
||||
className="animate-spin h-5 w-5"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
||||
/>
|
||||
</svg>
|
||||
Connexion...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Lock className="w-4 h-4" />
|
||||
Se connecter
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-gray-600 text-sm mt-6">
|
||||
Santinova Soft — Serveur de recette
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
251
frontend/src/pages/MonitoringPage.jsx
Normal file
251
frontend/src/pages/MonitoringPage.jsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
Cpu,
|
||||
MemoryStick,
|
||||
HardDrive,
|
||||
Network,
|
||||
Activity,
|
||||
RefreshCw,
|
||||
Clock,
|
||||
Server,
|
||||
TrendingUp,
|
||||
} from 'lucide-react';
|
||||
import { getServerMetrics } from '../utils/api';
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (!bytes || bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'Ko', 'Mo', 'Go', 'To'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function formatUptime(seconds) {
|
||||
if (!seconds) return 'N/A';
|
||||
const days = Math.floor(seconds / 86400);
|
||||
const hours = Math.floor((seconds % 86400) / 3600);
|
||||
const mins = Math.floor((seconds % 3600) / 60);
|
||||
if (days > 0) return `${days}j ${hours}h ${mins}m`;
|
||||
if (hours > 0) return `${hours}h ${mins}m`;
|
||||
return `${mins}m`;
|
||||
}
|
||||
|
||||
function GaugeBar({ value, max = 100, color = 'primary', label, sublabel }) {
|
||||
const pct = Math.min(100, Math.round((value / max) * 100));
|
||||
const colorMap = {
|
||||
primary: { bar: 'bg-primary-500', text: 'text-primary-400', border: 'border-primary-500/30' },
|
||||
emerald: { bar: 'bg-emerald-500', text: 'text-emerald-400', border: 'border-emerald-500/30' },
|
||||
amber: { bar: 'bg-amber-500', text: 'text-amber-400', border: 'border-amber-500/30' },
|
||||
red: { bar: 'bg-red-500', text: 'text-red-400', border: 'border-red-500/30' },
|
||||
};
|
||||
const dangerColor = pct > 85 ? 'red' : pct > 65 ? 'amber' : color;
|
||||
const c = colorMap[dangerColor] || colorMap.primary;
|
||||
|
||||
return (
|
||||
<div className={`card p-5 border ${c.border}`}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-sm font-medium text-gray-300">{label}</span>
|
||||
<span className={`text-2xl font-bold ${c.text}`}>{pct}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-dark-700 rounded-full h-3 mb-3 overflow-hidden">
|
||||
<div
|
||||
className={`h-3 rounded-full transition-all duration-700 ${c.bar}`}
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">{sublabel}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MetricCard({ icon: Icon, label, value, sub, color = 'primary' }) {
|
||||
const colorMap = {
|
||||
primary: 'text-primary-400 bg-primary-500/10 border-primary-500/20',
|
||||
emerald: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
|
||||
amber: 'text-amber-400 bg-amber-500/10 border-amber-500/20',
|
||||
blue: 'text-blue-400 bg-blue-500/10 border-blue-500/20',
|
||||
};
|
||||
return (
|
||||
<div className={`card p-5 border ${colorMap[color]}`}>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className={`p-3 rounded-xl border ${colorMap[color]}`}>
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{label}</p>
|
||||
<p className="text-xl font-bold text-white truncate">{value}</p>
|
||||
{sub && <p className="text-xs text-gray-500 mt-1">{sub}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MonitoringPage() {
|
||||
const [metrics, setMetrics] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lastUpdate, setLastUpdate] = useState(null);
|
||||
const [autoRefresh, setAutoRefresh] = useState(true);
|
||||
|
||||
const fetchMetrics = useCallback(async () => {
|
||||
try {
|
||||
const res = await getServerMetrics();
|
||||
setMetrics(res.data);
|
||||
setLastUpdate(new Date());
|
||||
} catch (err) {
|
||||
console.error('Erreur métriques:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMetrics();
|
||||
}, [fetchMetrics]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!autoRefresh) return;
|
||||
const interval = setInterval(fetchMetrics, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, [autoRefresh, fetchMetrics]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<Activity className="w-7 h-7 text-primary-400" />
|
||||
Monitoring Serveur
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Consommation des ressources en temps réel
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{lastUpdate && (
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
Mis à jour : {lastUpdate.toLocaleTimeString('fr-FR')}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setAutoRefresh((v) => !v)}
|
||||
className={`btn-secondary text-sm flex items-center gap-2 ${autoRefresh ? 'text-emerald-400' : ''}`}
|
||||
>
|
||||
<Activity className="w-4 h-4" />
|
||||
{autoRefresh ? 'Auto (10s)' : 'Manuel'}
|
||||
</button>
|
||||
<button
|
||||
onClick={fetchMetrics}
|
||||
disabled={loading}
|
||||
className="btn-secondary flex items-center gap-2 text-sm"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
Rafraîchir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading && !metrics ? (
|
||||
<div className="card p-12 text-center">
|
||||
<RefreshCw className="w-8 h-8 text-primary-400 animate-spin mx-auto mb-3" />
|
||||
<p className="text-gray-400">Chargement des métriques...</p>
|
||||
</div>
|
||||
) : metrics?.error ? (
|
||||
<div className="card p-8 text-center border border-red-500/20">
|
||||
<p className="text-red-400">Erreur : {metrics.error}</p>
|
||||
</div>
|
||||
) : metrics ? (
|
||||
<>
|
||||
{/* Jauges principales */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<GaugeBar
|
||||
value={metrics.cpu?.usage || 0}
|
||||
label="Processeur (CPU)"
|
||||
sublabel={`Load avg: ${metrics.load?.load1?.toFixed(2)} / ${metrics.load?.load5?.toFixed(2)} / ${metrics.load?.load15?.toFixed(2)}`}
|
||||
color="primary"
|
||||
/>
|
||||
<GaugeBar
|
||||
value={metrics.memory?.usagePercent || 0}
|
||||
label="Mémoire RAM"
|
||||
sublabel={`${formatBytes(metrics.memory?.used)} utilisés sur ${formatBytes(metrics.memory?.total)} — ${formatBytes(metrics.memory?.available)} disponibles`}
|
||||
color="emerald"
|
||||
/>
|
||||
<GaugeBar
|
||||
value={metrics.disk?.usagePercent || 0}
|
||||
label="Espace Disque"
|
||||
sublabel={`${formatBytes(metrics.disk?.used)} utilisés sur ${formatBytes(metrics.disk?.total)} — ${formatBytes(metrics.disk?.free)} libres`}
|
||||
color="amber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Métriques détaillées */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<MetricCard
|
||||
icon={Server}
|
||||
label="Uptime serveur"
|
||||
value={formatUptime(metrics.uptime)}
|
||||
sub="Depuis le dernier redémarrage"
|
||||
color="primary"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={TrendingUp}
|
||||
label="Charge système (1 min)"
|
||||
value={metrics.load?.load1?.toFixed(2) || 'N/A'}
|
||||
sub={`5 min: ${metrics.load?.load5?.toFixed(2)} — 15 min: ${metrics.load?.load15?.toFixed(2)}`}
|
||||
color="blue"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Network}
|
||||
label="Réseau — Reçu"
|
||||
value={formatBytes(metrics.network?.rx)}
|
||||
sub="Total depuis le démarrage"
|
||||
color="emerald"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Network}
|
||||
label="Réseau — Envoyé"
|
||||
value={formatBytes(metrics.network?.tx)}
|
||||
sub="Total depuis le démarrage"
|
||||
color="amber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tableau récapitulatif */}
|
||||
<div className="card overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-dark-700">
|
||||
<h3 className="text-base font-semibold text-white flex items-center gap-2">
|
||||
<HardDrive className="w-5 h-5 text-primary-400" />
|
||||
Récapitulatif des ressources
|
||||
</h3>
|
||||
</div>
|
||||
<div className="divide-y divide-dark-700">
|
||||
{[
|
||||
{ label: 'CPU — Utilisation', value: `${metrics.cpu?.usage?.toFixed(1) || 0}%`, status: metrics.cpu?.usage > 85 ? 'critical' : metrics.cpu?.usage > 65 ? 'warning' : 'ok' },
|
||||
{ label: 'RAM — Utilisée', value: `${formatBytes(metrics.memory?.used)} / ${formatBytes(metrics.memory?.total)}`, status: metrics.memory?.usagePercent > 85 ? 'critical' : metrics.memory?.usagePercent > 65 ? 'warning' : 'ok' },
|
||||
{ label: 'RAM — Disponible', value: formatBytes(metrics.memory?.available), status: 'ok' },
|
||||
{ label: 'Disque — Utilisé', value: `${formatBytes(metrics.disk?.used)} / ${formatBytes(metrics.disk?.total)}`, status: metrics.disk?.usagePercent > 85 ? 'critical' : metrics.disk?.usagePercent > 65 ? 'warning' : 'ok' },
|
||||
{ label: 'Disque — Libre', value: formatBytes(metrics.disk?.free), status: 'ok' },
|
||||
{ label: 'Réseau — Trafic entrant', value: formatBytes(metrics.network?.rx), status: 'ok' },
|
||||
{ label: 'Réseau — Trafic sortant', value: formatBytes(metrics.network?.tx), status: 'ok' },
|
||||
{ label: 'Uptime', value: formatUptime(metrics.uptime), status: 'ok' },
|
||||
].map((row) => (
|
||||
<div key={row.label} className="px-6 py-3 flex items-center justify-between hover:bg-dark-800/50 transition-colors">
|
||||
<span className="text-sm text-gray-400">{row.label}</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium text-white">{row.value}</span>
|
||||
<span className={`w-2 h-2 rounded-full ${
|
||||
row.status === 'critical' ? 'bg-red-400' :
|
||||
row.status === 'warning' ? 'bg-amber-400' : 'bg-emerald-400'
|
||||
}`} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
449
frontend/src/pages/TerminalPage.jsx
Normal file
449
frontend/src/pages/TerminalPage.jsx
Normal file
@@ -0,0 +1,449 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { Terminal, Wifi, WifiOff, X, Plus, ChevronDown } from 'lucide-react';
|
||||
|
||||
// Serveurs SSH prédéfinis
|
||||
const PRESET_SERVERS = [
|
||||
{
|
||||
id: 'recette',
|
||||
label: 'Recette (78.138.58.109)',
|
||||
host: '78.138.58.109',
|
||||
port: 22,
|
||||
username: 'root',
|
||||
},
|
||||
{
|
||||
id: 'production',
|
||||
label: 'Production (180.149.196.138)',
|
||||
host: '180.149.196.138',
|
||||
port: 22,
|
||||
username: 'root',
|
||||
},
|
||||
];
|
||||
|
||||
export default function TerminalPage() {
|
||||
const terminalRef = useRef(null);
|
||||
const xtermRef = useRef(null);
|
||||
const fitAddonRef = useRef(null);
|
||||
const wsRef = useRef(null);
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
const [xtermLoaded, setXtermLoaded] = useState(false);
|
||||
|
||||
// Formulaire de connexion
|
||||
const [form, setForm] = useState({
|
||||
preset: 'recette',
|
||||
host: '78.138.58.109',
|
||||
port: 22,
|
||||
username: 'root',
|
||||
password: '',
|
||||
});
|
||||
const [showForm, setShowForm] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// Charger xterm.js dynamiquement depuis CDN
|
||||
useEffect(() => {
|
||||
const loadXterm = async () => {
|
||||
if (window.Terminal) {
|
||||
setXtermLoaded(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Charger le CSS xterm
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = 'https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css';
|
||||
document.head.appendChild(link);
|
||||
|
||||
// Charger xterm.js
|
||||
await loadScript('https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js');
|
||||
await loadScript('https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js');
|
||||
|
||||
setXtermLoaded(true);
|
||||
};
|
||||
|
||||
loadXterm();
|
||||
}, []);
|
||||
|
||||
const loadScript = (src) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script');
|
||||
script.src = src;
|
||||
script.onload = resolve;
|
||||
script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
};
|
||||
|
||||
// Initialiser xterm quand il est chargé et que le terminal est visible
|
||||
useEffect(() => {
|
||||
if (!xtermLoaded || !terminalRef.current || xtermRef.current) return;
|
||||
|
||||
const term = new window.Terminal({
|
||||
cursorBlink: true,
|
||||
fontSize: 14,
|
||||
fontFamily: '"Cascadia Code", "Fira Code", "JetBrains Mono", monospace',
|
||||
theme: {
|
||||
background: '#0d1117',
|
||||
foreground: '#e6edf3',
|
||||
cursor: '#58a6ff',
|
||||
cursorAccent: '#0d1117',
|
||||
black: '#484f58',
|
||||
red: '#ff7b72',
|
||||
green: '#3fb950',
|
||||
yellow: '#d29922',
|
||||
blue: '#58a6ff',
|
||||
magenta: '#bc8cff',
|
||||
cyan: '#39c5cf',
|
||||
white: '#b1bac4',
|
||||
brightBlack: '#6e7681',
|
||||
brightRed: '#ffa198',
|
||||
brightGreen: '#56d364',
|
||||
brightYellow: '#e3b341',
|
||||
brightBlue: '#79c0ff',
|
||||
brightMagenta: '#d2a8ff',
|
||||
brightCyan: '#56d4dd',
|
||||
brightWhite: '#f0f6fc',
|
||||
},
|
||||
scrollback: 1000,
|
||||
allowProposedApi: true,
|
||||
});
|
||||
|
||||
const fitAddon = new window.FitAddon.FitAddon();
|
||||
term.loadAddon(fitAddon);
|
||||
term.open(terminalRef.current);
|
||||
fitAddon.fit();
|
||||
|
||||
xtermRef.current = term;
|
||||
fitAddonRef.current = fitAddon;
|
||||
|
||||
term.writeln('\x1b[1;34m╔══════════════════════════════════════════════════╗\x1b[0m');
|
||||
term.writeln('\x1b[1;34m║ Terminal SSH — Dashboard Recette Santinova ║\x1b[0m');
|
||||
term.writeln('\x1b[1;34m╚══════════════════════════════════════════════════╝\x1b[0m');
|
||||
term.writeln('');
|
||||
term.writeln('\x1b[90mSélectionnez un serveur et connectez-vous pour démarrer.\x1b[0m');
|
||||
term.writeln('');
|
||||
|
||||
// Gérer la saisie utilisateur
|
||||
term.onData((data) => {
|
||||
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(JSON.stringify({ type: 'input', data }));
|
||||
}
|
||||
});
|
||||
|
||||
// Gérer le redimensionnement
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
if (fitAddonRef.current) {
|
||||
fitAddonRef.current.fit();
|
||||
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(JSON.stringify({
|
||||
type: 'resize',
|
||||
rows: term.rows,
|
||||
cols: term.cols,
|
||||
}));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (terminalRef.current) {
|
||||
resizeObserver.observe(terminalRef.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect();
|
||||
};
|
||||
}, [xtermLoaded]);
|
||||
|
||||
const handlePresetChange = (presetId) => {
|
||||
const preset = PRESET_SERVERS.find(s => s.id === presetId);
|
||||
if (preset) {
|
||||
setForm(prev => ({
|
||||
...prev,
|
||||
preset: presetId,
|
||||
host: preset.host,
|
||||
port: preset.port,
|
||||
username: preset.username,
|
||||
}));
|
||||
} else {
|
||||
setForm(prev => ({ ...prev, preset: 'custom' }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleConnect = useCallback(() => {
|
||||
if (!form.host || !form.username || !form.password) {
|
||||
setError('Hôte, utilisateur et mot de passe sont requis');
|
||||
return;
|
||||
}
|
||||
|
||||
setError('');
|
||||
setConnecting(true);
|
||||
setShowForm(false);
|
||||
|
||||
const token = localStorage.getItem('dashboard_token');
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${wsProtocol}//${window.location.host}/ws-ssh?token=${token}`;
|
||||
|
||||
const ws = new WebSocket(wsUrl);
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.onopen = () => {
|
||||
ws.send(JSON.stringify({
|
||||
type: 'connect',
|
||||
host: form.host,
|
||||
port: parseInt(form.port),
|
||||
username: form.username,
|
||||
password: form.password,
|
||||
}));
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const msg = JSON.parse(event.data);
|
||||
|
||||
switch (msg.type) {
|
||||
case 'status':
|
||||
if (xtermRef.current) {
|
||||
xtermRef.current.writeln(`\x1b[33m${msg.message}\x1b[0m`);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'connected':
|
||||
setConnected(true);
|
||||
setConnecting(false);
|
||||
if (xtermRef.current) {
|
||||
xtermRef.current.writeln(`\x1b[32m✓ ${msg.message}\x1b[0m`);
|
||||
xtermRef.current.writeln('');
|
||||
xtermRef.current.focus();
|
||||
}
|
||||
break;
|
||||
|
||||
case 'output':
|
||||
if (xtermRef.current) {
|
||||
const data = atob(msg.data);
|
||||
xtermRef.current.write(data);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'disconnected':
|
||||
setConnected(false);
|
||||
setConnecting(false);
|
||||
if (xtermRef.current) {
|
||||
xtermRef.current.writeln('');
|
||||
xtermRef.current.writeln(`\x1b[33m⚠ ${msg.message}\x1b[0m`);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'error':
|
||||
setConnected(false);
|
||||
setConnecting(false);
|
||||
setError(msg.message);
|
||||
if (xtermRef.current) {
|
||||
xtermRef.current.writeln(`\x1b[31m✗ Erreur: ${msg.message}\x1b[0m`);
|
||||
}
|
||||
setShowForm(true);
|
||||
break;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erreur parsing message SSH:', err);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
setConnected(false);
|
||||
setConnecting(false);
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
setConnected(false);
|
||||
setConnecting(false);
|
||||
setError('Erreur de connexion WebSocket');
|
||||
setShowForm(true);
|
||||
};
|
||||
}, [form]);
|
||||
|
||||
const handleDisconnect = () => {
|
||||
if (wsRef.current) {
|
||||
wsRef.current.send(JSON.stringify({ type: 'disconnect' }));
|
||||
wsRef.current.close();
|
||||
wsRef.current = null;
|
||||
}
|
||||
setConnected(false);
|
||||
setConnecting(false);
|
||||
setShowForm(true);
|
||||
if (xtermRef.current) {
|
||||
xtermRef.current.writeln('');
|
||||
xtermRef.current.writeln('\x1b[90mDéconnecté. Configurez une nouvelle connexion.\x1b[0m');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<Terminal className="w-7 h-7 text-emerald-400" />
|
||||
Terminal SSH
|
||||
</h2>
|
||||
<p className="text-gray-400 mt-1">
|
||||
Connexion SSH sécurisée aux serveurs de l'infrastructure
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{connected ? (
|
||||
<>
|
||||
<span className="flex items-center gap-2 text-emerald-400 text-sm">
|
||||
<Wifi className="w-4 h-4" />
|
||||
Connecté à {form.host}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleDisconnect}
|
||||
className="flex items-center gap-2 px-3 py-1.5 bg-red-600/20 text-red-400 border border-red-500/30 rounded-lg text-sm hover:bg-red-600/30 transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
Déconnecter
|
||||
</button>
|
||||
</>
|
||||
) : connecting ? (
|
||||
<span className="flex items-center gap-2 text-yellow-400 text-sm">
|
||||
<div className="w-4 h-4 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin" />
|
||||
Connexion en cours...
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2 text-gray-500 text-sm">
|
||||
<WifiOff className="w-4 h-4" />
|
||||
Non connecté
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Formulaire de connexion */}
|
||||
{showForm && (
|
||||
<div className="bg-dark-800 border border-dark-600 rounded-xl p-6">
|
||||
<h3 className="text-white font-semibold mb-4 flex items-center gap-2">
|
||||
<Plus className="w-4 h-4 text-primary-400" />
|
||||
Nouvelle connexion SSH
|
||||
</h3>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 px-4 py-3 bg-red-900/30 border border-red-500/40 rounded-lg text-red-400 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Serveur prédéfini */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm text-gray-400 mb-1">Serveur prédéfini</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={form.preset}
|
||||
onChange={(e) => handlePresetChange(e.target.value)}
|
||||
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm appearance-none focus:outline-none focus:border-primary-500"
|
||||
>
|
||||
{PRESET_SERVERS.map(s => (
|
||||
<option key={s.id} value={s.id}>{s.label}</option>
|
||||
))}
|
||||
<option value="custom">Serveur personnalisé...</option>
|
||||
</select>
|
||||
<ChevronDown className="absolute right-3 top-3 w-4 h-4 text-gray-400 pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hôte */}
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Hôte / IP</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.host}
|
||||
onChange={(e) => setForm(prev => ({ ...prev, host: e.target.value, preset: 'custom' }))}
|
||||
placeholder="192.168.1.1"
|
||||
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Port */}
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Port SSH</label>
|
||||
<input
|
||||
type="number"
|
||||
value={form.port}
|
||||
onChange={(e) => setForm(prev => ({ ...prev, port: e.target.value }))}
|
||||
placeholder="22"
|
||||
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Utilisateur */}
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Utilisateur</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.username}
|
||||
onChange={(e) => setForm(prev => ({ ...prev, username: e.target.value }))}
|
||||
placeholder="root"
|
||||
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Mot de passe */}
|
||||
<div>
|
||||
<label className="block text-sm text-gray-400 mb-1">Mot de passe</label>
|
||||
<input
|
||||
type="password"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm(prev => ({ ...prev, password: e.target.value }))}
|
||||
placeholder="••••••••"
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleConnect()}
|
||||
className="w-full bg-dark-700 border border-dark-500 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-primary-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end">
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
disabled={connecting}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
|
||||
>
|
||||
<Terminal className="w-4 h-4" />
|
||||
Se connecter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Terminal xterm.js */}
|
||||
<div className="bg-dark-900 border border-dark-600 rounded-xl overflow-hidden">
|
||||
{/* Barre de titre style terminal */}
|
||||
<div className="flex items-center gap-2 px-4 py-3 bg-dark-800 border-b border-dark-600">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500/70" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500/70" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-500/70" />
|
||||
<span className="ml-2 text-xs text-gray-500 font-mono">
|
||||
{connected ? `${form.username}@${form.host}` : 'terminal — non connecté'}
|
||||
</span>
|
||||
{connected && !showForm && (
|
||||
<button
|
||||
onClick={() => setShowForm(!showForm)}
|
||||
className="ml-auto text-xs text-gray-500 hover:text-gray-300 transition-colors"
|
||||
>
|
||||
{showForm ? 'Masquer' : 'Nouvelle connexion'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Zone du terminal */}
|
||||
<div
|
||||
ref={terminalRef}
|
||||
style={{ height: '500px', padding: '8px', backgroundColor: '#0d1117' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!xtermLoaded && (
|
||||
<div className="text-center text-gray-500 text-sm py-4">
|
||||
Chargement du terminal...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user