patchcenter/app/templates/servers.html

{% extends 'base.html' %}
{% block title %}Serveurs{% endblock %}

{% macro sort_url(col) -%}
?sort={{ col }}&sort_dir={% if sort == col and sort_dir == 'asc' %}desc{% else %}asc{% endif %}&search={{ filters.search or '' }}&domain={{ filters.domain or '' }}&env={{ filters.env or '' }}&tier={{ filters.tier or '' }}&etat={{ filters.etat or '' }}&page=1
{%- endmacro %}

{% macro sort_icon(col) -%}
{% if sort == col %}{% if sort_dir == 'asc' %}▲{% else %}▼{% endif %}{% endif %}
{%- endmacro %}

{% macro qs(p) -%}
?page={{ p }}&search={{ filters.search or '' }}&domain={{ filters.domain or '' }}&env={{ filters.env or '' }}&tier={{ filters.tier or '' }}&etat={{ filters.etat or '' }}&sort={{ sort }}&sort_dir={{ sort_dir }}
{%- endmacro %}

{% block content %}
<div class="flex justify-between items-center mb-4">
    <h2 class="text-xl font-bold text-cyber-accent">Serveurs <span class="text-sm text-gray-500">({{ total }})</span></h2>
    <div class="flex gap-2">
        <button class="btn-sm bg-cyber-green text-black" onclick="alert('Export bientot')">Export CSV</button>
    </div>
</div>

<!-- Filtres -->
<form method="GET" class="card p-3 mb-4 flex gap-3 items-center flex-wrap">
    <input type="hidden" name="sort" value="{{ sort }}">
    <input type="hidden" name="sort_dir" value="{{ sort_dir }}">
    <input type="text" name="search" value="{{ filters.search or '' }}" placeholder="Rechercher..." class="w-44" hx-get="/servers" hx-trigger="keyup changed delay:300ms" hx-target="#server-table" hx-select="#server-table" hx-push-url="true">
    <select name="domain" onchange="this.form.submit()"><option value="">Domaine</option>
        {% for d in domains_list %}<option value="{{ d.code }}" {% if filters.domain == d.code %}selected{% endif %}>{{ d.name }}</option>{% endfor %}
    </select>
    <select name="env" onchange="this.form.submit()"><option value="">Env</option>
        {% for e in envs_list %}<option value="{{ e.code }}" {% if filters.env == e.code %}selected{% endif %}>{{ e.name }}</option>{% endfor %}
    </select>
    <select name="tier" onchange="this.form.submit()"><option value="">Tier</option>
        {% for t in ['tier0','tier1','tier2','tier3'] %}<option value="{{ t }}" {% if filters.tier == t %}selected{% endif %}>{{ t }}</option>{% endfor %}
    </select>
    <select name="etat" onchange="this.form.submit()"><option value="">Etat</option>
        {% for e in ['en_production','en_implementation','en_decommissionnement','decommissionne','eol'] %}<option value="{{ e }}" {% if filters.etat == e %}selected{% endif %}>{{ e }}</option>{% endfor %}
    </select>
    <button type="submit" class="btn-primary px-3 py-1 text-sm">Filtrer</button>
    <a href="/servers" class="text-xs text-gray-500 hover:text-gray-300">Reset</a>
</form>

<!-- Actions groupées -->
<div id="bulk-bar" class="card p-3 mb-2 flex gap-3 items-center flex-wrap" style="display:none">
    <span class="text-xs text-gray-400" id="bulk-count">0 sélectionné(s)</span>
    <form method="POST" action="/servers/bulk" id="bulk-form" class="flex gap-2 items-center flex-wrap">
        <input type="hidden" name="server_ids" id="bulk-ids">
        <select name="bulk_field" class="text-xs py-1 px-2" id="bulk-field">
            <option value="">— Action —</option>
            <option value="domain_code">Domaine</option>
            <option value="env_code">Environnement</option>
            <option value="tier">Tier</option>
            <option value="etat">État</option>
            <option value="patch_os_owner">Owner</option>
            <option value="licence_support">Licence</option>
        </select>
        <select name="bulk_value" class="text-xs py-1 px-2" id="bulk-value">
            <option value="">— Valeur —</option>
        </select>
        <button type="submit" class="btn-primary px-3 py-1 text-xs">Appliquer</button>
    </form>
</div>

<script>
const bulkValues = {
    domain_code: [{% for d in domains_list %}{v:"{{ d.code }}", l:"{{ d.name }}"},{% endfor %}],
    env_code: [{% for e in envs_list %}{v:"{{ e.code }}", l:"{{ e.name }}"},{% endfor %}],
    tier: [{v:"tier0",l:"tier0"},{v:"tier1",l:"tier1"},{v:"tier2",l:"tier2"},{v:"tier3",l:"tier3"}],
    etat: [{v:"en_production",l:"en_production"},{v:"en_implementation",l:"en_implementation"},{v:"en_decommissionnement",l:"en_decommissionnement"},{v:"decommissionne",l:"décommissionné"}],
    patch_os_owner: [{v:"secops",l:"secops"},{v:"ipop",l:"ipop"},{v:"na",l:"na"}],
    licence_support: [{v:"active",l:"active"},{v:"eol",l:"eol"},{v:"els",l:"els"}],
};
document.getElementById('bulk-field').addEventListener('change', function() {
    const sel = document.getElementById('bulk-value');
    sel.innerHTML = '<option value="">— Valeur —</option>';
    (bulkValues[this.value] || []).forEach(o => { sel.innerHTML += '<option value="'+o.v+'">'+o.l+'</option>'; });
});
function updateBulk() {
    const checks = document.querySelectorAll('input[name=srv]:checked');
    const bar = document.getElementById('bulk-bar');
    const count = document.getElementById('bulk-count');
    const ids = document.getElementById('bulk-ids');
    if (checks.length > 0) {
        bar.style.display = 'flex';
        count.textContent = checks.length + ' sélectionné(s)';
        ids.value = Array.from(checks).map(c => c.value).join(',');
    } else { bar.style.display = 'none'; }
}
</script>

<!-- Table -->
<div id="server-table" class="card overflow-x-auto">
    <table class="w-full table-cyber">
        <thead><tr>
            <th class="p-2 w-8"><input type="checkbox" id="check-all"></th>
            <th class="text-left p-2"><a href="{{ sort_url('hostname') }}" class="hover:text-cyber-accent">Hostname {{ sort_icon('hostname') }}</a></th>
            <th class="p-2"><a href="{{ sort_url('domaine') }}" class="hover:text-cyber-accent">Domaine {{ sort_icon('domaine') }}</a></th>
            <th class="p-2"><a href="{{ sort_url('env') }}" class="hover:text-cyber-accent">Env {{ sort_icon('env') }}</a></th>
            <th class="p-2"><a href="{{ sort_url('zone') }}" class="hover:text-cyber-accent">Zone {{ sort_icon('zone') }}</a></th>
            <th class="p-2"><a href="{{ sort_url('os') }}" class="hover:text-cyber-accent">OS {{ sort_icon('os') }}</a></th>
            <th class="p-2">Version</th>
            <th class="p-2">Licence</th>
            <th class="p-2"><a href="{{ sort_url('tier') }}" class="hover:text-cyber-accent">Tier {{ sort_icon('tier') }}</a></th>
            <th class="p-2"><a href="{{ sort_url('etat') }}" class="hover:text-cyber-accent">Etat {{ sort_icon('etat') }}</a></th>
            <th class="p-2"><a href="{{ sort_url('owner') }}" class="hover:text-cyber-accent">Owner {{ sort_icon('owner') }}</a></th>
            <th class="p-2">Actions</th>
        </tr></thead>
        <tbody>
        {% for s in servers %}
        <tr id="row-{{ s.id }}" class="group" hx-get="/servers/{{ s.id }}/detail" hx-target="#detail-panel" hx-swap="innerHTML" onclick="openPanel()">
            <td class="p-2" onclick="event.stopPropagation()"><input type="checkbox" name="srv" value="{{ s.id }}" onchange="updateBulk()"></td>
            <td class="p-2 font-mono text-sm text-cyber-accent">{{ s.hostname }}</td>
            <td class="p-2 text-center text-xs">{{ s.domaine or '-' }}</td>
            <td class="p-2 text-center"><span class="badge {% if s.environnement == 'Production' %}badge-green{% elif s.environnement == 'Recette' %}badge-yellow{% else %}badge-gray{% endif %}">{{ (s.environnement or '-')[:6] }}</span></td>
            <td class="p-2 text-center"><span class="badge {% if s.zone == 'DMZ' %}badge-red{% elif s.zone == 'EMV' %}badge-yellow{% else %}badge-blue{% endif %}">{{ s.zone or 'LAN' }}</span></td>
            <td class="p-2 text-center text-xs">{{ s.os_family or '-' }}</td>
            <td class="p-2 text-center text-xs text-gray-400" title="{{ s.os_version or '' }}">{{ s.os_short or '-' }}</td>
            <td class="p-2 text-center"><span class="badge {% if s.licence_support == 'active' %}badge-green{% elif s.licence_support == 'eol' %}badge-red{% elif s.licence_support == 'els' %}badge-yellow{% else %}badge-gray{% endif %}">{{ s.licence_support }}</span></td>
            <td class="p-2 text-center"><span class="badge {% if s.tier == 'tier0' %}badge-red{% elif s.tier == 'tier1' %}badge-yellow{% elif s.tier == 'tier2' %}badge-blue{% else %}badge-green{% endif %}">{{ s.tier }}</span></td>
            <td class="p-2 text-center"><span class="badge {% if s.etat == 'en_production' %}badge-green{% elif s.etat == 'decommissionne' %}badge-red{% else %}badge-yellow{% endif %}">{{ (s.etat or '')[:8] }}</span></td>
            <td class="p-2 text-center text-xs">{{ s.patch_os_owner or '-' }}</td>
            <td class="p-2 text-center" onclick="event.stopPropagation()">
                <button class="btn-sm bg-cyber-border text-cyber-accent" hx-get="/servers/{{ s.id }}/edit" hx-target="#detail-panel" hx-swap="innerHTML" onclick="openPanel()">Edit</button>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<!-- Pagination -->
<div class="flex justify-between items-center mt-4 text-sm text-gray-500">
    <span>Page {{ page }} / {{ ((total - 1) // per_page) + 1 }} — {{ total }} serveurs</span>
    <div class="flex gap-2">
        {% if page > 1 %}<a href="{{ qs(page - 1) }}" class="btn-sm bg-cyber-border text-gray-300">Precedent</a>{% endif %}
        {% if page * per_page < total %}<a href="{{ qs(page + 1) }}" class="btn-sm bg-cyber-border text-gray-300">Suivant</a>{% endif %}
    </div>
</div>

<script>
function openPanel() {
    document.getElementById("detail-panel").scrollTop = 0;
    document.getElementById('detail-panel').style.width = '400px';
    document.getElementById('detail-panel').style.overflow = 'auto';
    window.scrollTo({top: 0, behavior: 'smooth'});
}
function closePanel() {
    document.getElementById('detail-panel').style.width = '0';
    document.getElementById('detail-panel').style.overflow = 'hidden';
}
document.getElementById('check-all').addEventListener('change', function(e) {
    document.querySelectorAll('input[name=srv]').forEach(cb => cb.checked = e.target.checked);
    updateBulk();
});
</script>
{% endblock %}