Rôles, tableau de bord et tests unitaires

This commit is contained in:
Yasser Boulayoune 2026-04-07 16:26:00 +02:00
parent f508a2fcb5
commit 1799035236
51 changed files with 4350 additions and 0 deletions

View file

@ -0,0 +1,502 @@
{% extends 'base.html.twig' %}
{% block title %}{{ server.name }} - ServerControl{% endblock %}
{% block body %}
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<a href="{{ path('app_server_index') }}" class="text-muted text-decoration-none">
<i class="bi bi-arrow-left me-1"></i>Retour aux serveur
</a>
<h1 class="h3 mt-1">{{ server.name }}</h1>
</div>
{% if is_granted('ROLE_ADMIN') %}
<div>
<a href="{{ path('app_server_edit', {id: server.id}) }}" class="btn btn-outline-secondary">
<i class="bi bi-pencil me-1"></i>Edit
</a>
</div>
{% endif %}
</div>
<div class="row mb-4">
<div class="col-md-4 mb-4">
<div class="card h-100">
<div class="card-header"><strong>Server Info</strong></div>
<div class="card-body">
<dl class="row mb-0">
<dt class="col-5">IP Address</dt>
<dd class="col-7"><code>{{ server.ipAddress }}</code></dd>
<dt class="col-5">SSH Port</dt>
<dd class="col-7">{{ server.sshPort }}</dd>
<dt class="col-5">SSH User</dt>
<dd class="col-7">{{ server.sshUser }}</dd>
<dt class="col-5">Status</dt>
<dd class="col-7">
<span class="status-{{ server.lastStatus }}" id="server-status">
<i class="bi bi-circle-fill me-1" style="font-size:.5rem;"></i>
{{ server.lastStatus|capitalize }}
</span>
</dd>
<dt class="col-5">Owner</dt>
<dd class="col-7">{{ server.owner.pseudo }}</dd>
<dt class="col-5">Added</dt>
<dd class="col-7">{{ server.createdAt|date('d/m/Y') }}</dd>
{% if server.description %}
<dt class="col-5">Description</dt>
<dd class="col-7">{{ server.description }}</dd>
{% endif %}
</dl>
</div>
</div>
</div>
<div class="col-md-8 mb-4">
<div class="card h-100" id="terminal-card">
<div class="card-header d-flex justify-content-between align-items-center">
<strong><i class="bi bi-terminal me-2"></i>Terminal SSH</strong>
<button class="btn btn-sm btn-outline-secondary" onclick="termClear()">
<i class="bi bi-trash me-1"></i>Clear
</button>
</div>
<div class="card-body p-0">
<div class="terminal-titlebar">
<span class="terminal-host">{{ server.sshUser }}@{{ server.ipAddress }}</span>
</div>
<div class="terminal-body" id="term-output">
<div class="term-line term-info">Connecté a {{ server.name }} — tapez une commande et apuyez sur Entrée.</div>
<div class="term-line term-warn">Note : utiliser sudo pour les opérations privilégiées — un mot de passe pourra être demandé.</div>
</div>
<div class="terminal-input-row">
<span class="terminal-ps1">{{ server.sshUser }}@{{ server.name }}:~$&nbsp;</span>
<input class="terminal-cmd" id="term-input" type="text"
placeholder="ex: ls /etc/nginx ou sudo systemctl status nginx"
autocomplete="off" spellcheck="false">
</div>
</div>
</div>
</div>
</div>
{% if is_granted('ROLE_ADMIN') %}
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<strong><i class="bi bi-people me-2"></i>Operator Access</strong>
<button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#addAccessForm">
<i class="bi bi-plus-lg"></i> Grant access
</button>
</div>
<div class="collapse" id="addAccessForm">
<div class="card-body border-bottom">
<form method="post" action="{{ path('app_access_new', {serverId: server.id}) }}" class="row g-2 align-items-end">
<input type="hidden" name="_token" value="{{ csrf_token('add_access_' ~ server.id) }}">
<div class="col-md-3">
<label class="form-label form-label-sm fw-semibold">User</label>
<select name="user_id" class="form-select form-select-sm" required>
<option value="">— select —</option>
{% for u in assignableUsers %}
<option value="{{ u.id }}">{{ u.pseudo }} ({{ u.email }})</option>
{% else %}
<option disabled>No more users to assign</option>
{% endfor %}
</select>
</div>
<div class="col-md-3">
<label class="form-label form-label-sm fw-semibold">SSH User</label>
<input class="form-control form-control-sm" name="ssh_user" placeholder="e.g. deploy" required>
</div>
<div class="col-md-3">
<label class="form-label form-label-sm fw-semibold">SSH Password</label>
<input class="form-control form-control-sm" name="ssh_password" type="password" placeholder="••••••" required>
</div>
<div class="col-md-3">
<button class="btn btn-sm btn-primary w-100">Grant</button>
</div>
</form>
</div>
</div>
<div class="card-body p-0">
{% if server.serverAccesses|length == 0 %}
<p class="text-muted p-3 mb-0">Aucun opérateur assignée pour l'instant.</p>
{% else %}
<table class="table mb-0">
<thead>
<tr><th>Operator</th><th>Email</th><th>SSH User</th><th></th></tr>
</thead>
<tbody>
{% for access in server.serverAccesses %}
<tr>
<td>{{ access.user.pseudo }}</td>
<td class="text-muted small">{{ access.user.email }}</td>
<td><code>{{ access.sshUser }}</code></td>
<td>
<form method="post" action="{{ path('app_access_delete', {serverId: server.id, accessId: access.id}) }}"
onsubmit="return confirm('Revoke access for {{ access.user.pseudo }}?')">
<input type="hidden" name="_token" value="{{ csrf_token('delete_access_' ~ access.id) }}">
<button class="btn btn-sm btn-outline-danger"><i class="bi bi-person-x"></i></button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
</div>
{% endif %}
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<strong>Services</strong>
{% if is_granted('ROLE_ADMIN') %}
<button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#addServiceForm">
<i class="bi bi-plus-lg"></i> Ajouter service
</button>
{% endif %}
</div>
{% if is_granted('ROLE_ADMIN') %}
<div class="collapse" id="addServiceForm">
<div class="card-body border-bottom">
<form method="post" action="{{ path('app_service_new', {serverId: server.id}) }}" class="row g-2">
<input type="hidden" name="_token" value="{{ csrf_token('add_service_' ~ server.id) }}">
<div class="col-md-5">
<input class="form-control form-control-sm" name="name" placeholder="Nom systemd (ex: nginx)" required>
</div>
<div class="col-md-5">
<input class="form-control form-control-sm" name="display_name" placeholder="Nom d'affichage" required>
</div>
<div class="col-md-2">
<button class="btn btn-sm btn-primary w-100">Add</button>
</div>
</form>
</div>
</div>
{% endif %}
<div class="card-body">
{% if server.services|length == 0 %}
<p class="text-muted mb-0">Aucun service configurée.</p>
{% else %}
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
{% for service in server.services %}
<div class="col">
<div class="card h-100 service-card">
<div class="card-body pb-2">
<div class="fw-semibold">{{ service.displayName }}</div>
<code class="small text-muted">{{ service.name }}</code>
<div class="mt-2">
<span class="badge service-status-badge"
id="svc-status-{{ service.name|replace({'.': '-', '@': '-', ':': '-'}) }}"
data-service="{{ service.name }}">
<span class="spinner-border spinner-border-sm" style="width:.7em;height:.7em;border-width:1px;"></span>
</span>
</div>
</div>
<div class="card-footer d-flex gap-1 flex-wrap">
<button class="btn btn-sm btn-success service-action"
data-server="{{ server.id }}" data-service="{{ service.name }}"
data-action="start" data-token="{{ csrf_token('server_action') }}"
title="Démarrer">
<i class="bi bi-play-fill"></i>
</button>
<button class="btn btn-sm btn-danger service-action"
data-server="{{ server.id }}" data-service="{{ service.name }}"
data-action="stop" data-token="{{ csrf_token('server_action') }}"
title="Arrêter">
<i class="bi bi-stop-fill"></i>
</button>
<button class="btn btn-sm btn-warning service-action"
data-server="{{ server.id }}" data-service="{{ service.name }}"
data-action="restart" data-token="{{ csrf_token('server_action') }}"
title="Redémarrer">
<i class="bi bi-arrow-repeat"></i>
</button>
{% if is_granted('ROLE_ADMIN') %}
<form method="post"
action="{{ path('app_service_delete', {serverId: server.id, serviceId: service.id}) }}"
onsubmit="return confirm('Delete service « {{ service.displayName }} »?')"
class="ms-auto">
<input type="hidden" name="_token" value="{{ csrf_token('delete_service_' ~ service.id) }}">
<button type="submit" class="btn btn-sm btn-outline-danger" title="Supprimer">
<i class="bi bi-trash"></i>
</button>
</form>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
<div class="modal fade" id="sudoModal" tabindex="-1" aria-labelledby="sudoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="sudoModalLabel">
<i class="bi bi-shield-lock me-2 text-warning"></i>Mot de passe sudo requis
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p class="text-muted small mb-3">
La commande <code id="sudo-cmd-preview"></code> nécessite des privilèges élevés.
</p>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-key"></i></span>
<input type="password" class="form-control" id="sudo-password-input"
placeholder="mot de passe sudo" autocomplete="current-password">
<button class="btn btn-outline-secondary" type="button" onclick="toggleSudoPwd()">
<i class="bi bi-eye" id="sudo-pwd-eye"></i>
</button>
</div>
<div id="sudo-error" class="text-danger small mt-2 d-none">
<i class="bi bi-exclamation-triangle me-1"></i>Mot de passe incorect, réessayez.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-warning btn-sm" id="sudo-confirm-btn">
<i class="bi bi-send me-1"></i>Exécuter
</button>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header d-flex justify-content-between">
<strong>Journaux récent</strong>
<a href="{{ path('app_log_index', {server: server.id}) }}" class="btn btn-sm btn-link">Voir tout</a>
</div>
<div class="card-body p-0">
{% if server.actionLogs|length == 0 %}
<p class="text-muted p-3 mb-0">Aucun journaux pour l'instant.</p>
{% else %}
<table class="table mb-0">
<thead>
<tr><th>Date</th><th>Action</th><th>Status</th><th>User</th></tr>
</thead>
<tbody>
{% for log in server.actionLogs|slice(0, 10) %}
<tr>
<td>{{ log.executedAt|date('d/m/Y H:i') }}</td>
<td><code>{{ log.actionType }}</code></td>
<td>
<span class="badge bg-{{ log.status == 'success' ? 'success' : 'danger' }}">
{{ log.status }}
</span>
</td>
<td>{{ log.user ? log.user.pseudo : 'deleted' }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
</div>
{% endblock %}
{% block javascripts %}
<script>
const TERM_CSRF = '{{ csrf_token('terminal_' ~ server.id) }}';
const ACTION_CSRF = '{{ csrf_token('server_action') }}';
const SERVER_ID = {{ server.id }};
const SSH_USER = '{{ server.sshUser }}';
const SERVER_NAME = '{{ server.name }}';
const cmdHistory = [];
let historyPos = -1;
function termLine(text, cls) {
const d = document.createElement('div');
d.className = 'term-line ' + (cls || '');
d.textContent = text;
return d;
}
function termAppend(text, cls) {
const out = document.getElementById('term-output');
if (!text) return;
text.split('\n').forEach(l => { if (l !== '') out.appendChild(termLine(l, cls)); });
out.scrollTop = out.scrollHeight;
}
function termClear() {
document.getElementById('term-output').innerHTML =
'<div class="term-line term-info">— Terminal effacé —</div>';
}
function removePending(marker) {
const out = document.getElementById('term-output');
const el = [...out.querySelectorAll('.term-line.term-info')].findLast(e => e.textContent === marker);
if (el) el.remove();
}
function showResult(data, isOk) {
const cls = isOk ? 'term-success' : 'term-error';
if (data.output) termAppend(data.output.trimEnd(), cls);
termAppend(isOk ? '[OK]' : '[FAILED]', cls);
}
function loadServiceStatuses() {
fetch(`/server/${SERVER_ID}/services/status`)
.then(r => r.json())
.then(data => {
Object.entries(data).forEach(([name, status]) => {
const safeId = name.replace(/[.@:]/g, '-');
const el = document.getElementById(`svc-status-${safeId}`);
if (!el) return;
if (status === 'active') {
el.className = 'badge bg-success';
el.textContent = 'Actif';
} else if (status === 'inactive') {
el.className = 'badge bg-danger';
el.textContent = 'Inactif';
} else {
el.className = 'badge bg-secondary';
el.textContent = 'Inconnu';
}
});
}).catch(() => {
document.querySelectorAll('.service-status-badge').forEach(el => {
el.className = 'badge bg-secondary';
el.textContent = 'Inconnu';
});
});
}
loadServiceStatuses();
let pending = null;
const sudoModal = new bootstrap.Modal(document.getElementById('sudoModal'));
function showSudoModal(pendingData, isRetry) {
pending = pendingData;
const label = pendingData.type === 'action'
? `sudo systemctl ${pendingData.action} ${pendingData.service}`
: pendingData.command;
document.getElementById('sudo-cmd-preview').textContent = label;
document.getElementById('sudo-password-input').value = '';
document.getElementById('sudo-error').classList.toggle('d-none', !isRetry);
sudoModal.show();
setTimeout(() => document.getElementById('sudo-password-input').focus(), 350);
}
document.getElementById('sudo-confirm-btn').addEventListener('click', submitSudo);
document.getElementById('sudo-password-input').addEventListener('keydown', e => {
if (e.key === 'Enter') submitSudo();
});
function submitSudo() {
const pwd = document.getElementById('sudo-password-input').value.trim();
if (!pwd) return;
sudoModal.hide();
termAppend('[sudo] authentification en cours…', 'term-warn');
if (pending.type === 'terminal') {
execTerminalCommand(pending.command, pwd);
} else {
execServiceAction(pending.action, pending.service, pending.serverId, pwd);
}
}
function toggleSudoPwd() {
const inp = document.getElementById('sudo-password-input');
const eye = document.getElementById('sudo-pwd-eye');
inp.type = inp.type === 'password' ? 'text' : 'password';
eye.className = inp.type === 'password' ? 'bi bi-eye' : 'bi bi-eye-slash';
}
function execTerminalCommand(command, sudoPassword = null) {
const form = new FormData();
form.append('_token', TERM_CSRF);
form.append('command', command);
if (sudoPassword) form.append('sudo_password', sudoPassword);
return fetch(`/server/${SERVER_ID}/terminal`, { method: 'POST', body: form })
.then(r => r.json())
.then(data => {
removePending('…');
if (data.needs_sudo) {
if (sudoPassword) {
termAppend('[sudo] mot de passe incorrect', 'term-error');
setTimeout(() => showSudoModal({ type: 'terminal', command }, true), 300);
} else {
showSudoModal({ type: 'terminal', command }, false);
}
return;
}
showResult(data, data.success);
}).catch(() => termAppend('Network error.', 'term-error'));
}
const termInput = document.getElementById('term-input');
termInput.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
e.preventDefault();
const cmd = this.value.trim();
if (!cmd) return;
cmdHistory.unshift(cmd);
if (cmdHistory.length > 50) cmdHistory.pop();
historyPos = -1;
this.value = '';
termAppend(`${SSH_USER}@${SERVER_NAME}:~$ ${cmd}`, 'term-prompt');
if (cmd === 'clear' || cmd === 'cls') { termClear(); return; }
termAppend('…', 'term-info');
execTerminalCommand(cmd);
}
if (e.key === 'ArrowUp') {
e.preventDefault();
if (historyPos < cmdHistory.length - 1) termInput.value = cmdHistory[++historyPos];
}
if (e.key === 'ArrowDown') {
e.preventDefault();
historyPos > 0 ? termInput.value = cmdHistory[--historyPos] : (historyPos = -1, termInput.value = '');
}
});
document.querySelector('.terminal-body').addEventListener('click', () => termInput.focus());
function execServiceAction(action, service, serverId, sudoPassword = null) {
const form = new FormData();
form.append('action', action);
form.append('service', service);
form.append('_token', ACTION_CSRF);
if (sudoPassword) form.append('sudo_password', sudoPassword);
return fetch(`/server/${serverId}/action`, { method: 'POST', body: form })
.then(r => r.json())
.then(data => {
removePending('Exécution…');
if (data.needs_sudo) {
if (sudoPassword) {
termAppend('[sudo] mot de passe incorrect', 'term-error');
setTimeout(() => showSudoModal({ type: 'action', action, service, serverId }, true), 300);
} else {
showSudoModal({ type: 'action', action, service, serverId }, false);
}
return;
}
showResult(data, data.status === 'success');
loadServiceStatuses();
}).catch(() => termAppend('Network error.', 'term-error'));
}
document.querySelectorAll('.service-action').forEach(btn => {
btn.addEventListener('click', function () {
const action = this.dataset.action;
const service = this.dataset.service;
const srvId = this.dataset.server;
termAppend(`${SSH_USER}@${SERVER_NAME}:~$ sudo systemctl ${action} ${service}`, 'term-prompt');
termAppend('Exécution…', 'term-info');
execServiceAction(action, service, srvId);
});
});
setInterval(() => {
fetch(`/server/${SERVER_ID}/status`)
.then(r => r.json())
.then(data => {
const el = document.getElementById('server-status');
if (el) {
el.className = `status-${data.status}`;
el.innerHTML = `<i class="bi bi-circle-fill me-1" style="font-size:.5rem;"></i>${data.status.charAt(0).toUpperCase() + data.status.slice(1)}`;
}
}).catch(() => {});
}, 30000);
</script>
{% endblock %}