502 lines
22 KiB
Twig
502 lines
22 KiB
Twig
{% 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 }}:~$ </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 %}
|