Admin MPCZ
677f621c81
- Admin applications: CRUD module (list/add/edit/delete/assign/multi-app) avec push iTop bidirectionnel (applications.py + 3 templates) - Correspondance prod<->hors-prod: migration vers server_correspondance globale, suppression ancien code quickwin, ajout filtre environnement et solution applicative, colonne environnement dans builder - Servers page: colonne application_name + equivalent(s) via get_links_bulk, filtre application_id, push iTop sur changement application - Patching: bulk_update_application, bulk_update_excludes, validations - Fix paramiko sftp.put (remote_path -> positional arg) - Tools: wiki_to_pdf.py (DokuWiki -> PDF) + generate_ppt.py (PPTX 19 slides DSI patching) + contenu source (processus_patching.txt, script_presentation.txt) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
210 lines
17 KiB
HTML
210 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ app_name }} - {% block title %}{% endblock %}</title>
|
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
|
|
<link rel="stylesheet" href="/static/css/tailwind.css">
|
|
<script src="/static/js/htmx.min.js"></script>
|
|
<script src="/static/js/alpine.min.js" defer></script>
|
|
<style>
|
|
body { background: #0a0e17; color: #e2e8f0; font-family: 'Segoe UI', system-ui, sans-serif; }
|
|
.sidebar { background: #111827; border-right: 1px solid #1e3a5f; }
|
|
.card { background: #111827; border: 1px solid #1e3a5f; border-radius: 8px; }
|
|
.btn-primary { background: #00d4ff; color: #0a0e17; font-weight: 600; border-radius: 6px; }
|
|
.btn-primary:hover { background: #00b8e6; }
|
|
.btn-danger { background: #ff3366; color: white; border-radius: 6px; }
|
|
.btn-sm { padding: 2px 10px; font-size: 0.75rem; border-radius: 4px; cursor: pointer; }
|
|
.table-cyber th { background: #1e3a5f; color: #00d4ff; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.table-cyber td { border-bottom: 1px solid #1e3a5f; font-size: 0.8rem; }
|
|
.table-cyber tr:hover { background: #1a2332; cursor: pointer; }
|
|
.table-cyber tr.selected { background: #1e3a5f44; }
|
|
.badge { padding: 2px 8px; border-radius: 12px; font-size: 0.65rem; font-weight: 600; }
|
|
.badge-green { background: #00ff8822; color: #00ff88; }
|
|
.badge-red { background: #ff336622; color: #ff3366; }
|
|
.badge-yellow { background: #ffcc0022; color: #ffcc00; }
|
|
.badge-blue { background: #00d4ff22; color: #00d4ff; }
|
|
.badge-gray { background: #4a556822; color: #94a3b8; }
|
|
input, select, textarea { background: #0a0e17; border: 1px solid #1e3a5f; color: #e2e8f0; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; }
|
|
input:focus, select:focus, textarea:focus { outline: none; border-color: #00d4ff; box-shadow: 0 0 0 2px #00d4ff33; }
|
|
.panel-slide { transition: transform 0.3s ease, opacity 0.3s ease; }
|
|
.htmx-indicator { opacity: 0; transition: opacity 200ms; }
|
|
.htmx-request .htmx-indicator { opacity: 1; }
|
|
.inline-edit { background: transparent; border: 1px solid transparent; padding: 2px 4px; }
|
|
.inline-edit:hover { border-color: #1e3a5f; }
|
|
.inline-edit:focus { background: #0a0e17; border-color: #00d4ff; }
|
|
.toast { position: fixed; bottom: 20px; right: 20px; padding: 12px 24px; border-radius: 8px; z-index: 1000; animation: fadeIn 0.3s; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
[x-cloak] { display: none !important; }
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen" hx-headers='{"X-Requested-With": "htmx"}'>
|
|
{% if user %}
|
|
<div class="flex min-h-screen">
|
|
<aside class="sidebar w-52 flex-shrink-0 flex flex-col">
|
|
<div class="p-4 border-b border-cyber-border">
|
|
<div class="flex items-center gap-2">
|
|
<img src="/static/logo_sanef.jpg" alt="SANEF" class="h-8 rounded" style="opacity:0.85">
|
|
</div>
|
|
<h1 class="text-cyber-accent font-bold text-lg mt-1">PatchCenter</h1>
|
|
<p class="text-xs text-gray-500">v2.0 — SecOps</p>
|
|
</div>
|
|
<nav class="flex-1 p-3 space-y-1" x-data='{
|
|
open: localStorage.getItem("menu_open") || "",
|
|
subOpen: localStorage.getItem("menu_sub_open") || "",
|
|
toggle(k){ this.open = (this.open === k) ? "" : k; this.subOpen = ""; localStorage.setItem("menu_open", this.open); localStorage.setItem("menu_sub_open", ""); },
|
|
toggleSub(k){ this.subOpen = (this.subOpen === k) ? "" : k; localStorage.setItem("menu_sub_open", this.subOpen); }
|
|
}'>
|
|
{% set p = perms if perms is defined else request.state.perms %}
|
|
{% set path = request.url.path %}
|
|
|
|
{# Dashboard principal #}
|
|
{% if p.servers or p.qualys or p.audit or p.planning %}<a href="/dashboard" class="block px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 {% if 'dashboard' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %}">Dashboard</a>{% endif %}
|
|
|
|
{# Serveurs (groupe repliable avec Correspondance) #}
|
|
{% if p.servers %}
|
|
<div>
|
|
<button @click="toggle('servers')" class="w-full flex justify-between items-center px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 text-cyber-accent font-bold">
|
|
<span>Serveurs</span>
|
|
<span x-text="open === 'servers' ? '▾' : '▸'" class="text-xs"></span>
|
|
</button>
|
|
<div x-show="open === 'servers'" x-cloak class="space-y-1 pl-1">
|
|
<a href="/servers" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if path == '/servers' or path.startswith('/servers/') %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Liste</a>
|
|
{% if p.campaigns or p.quickwin %}<a href="/patching/correspondance" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/patching/correspondance' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Correspondance prod ↔ hors-prod</a>{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# ===== PATCHING (groupe repliable) ===== #}
|
|
{% if p.campaigns or p.planning or p.quickwin %}
|
|
<div>
|
|
<button @click="toggle('patching')" class="w-full flex justify-between items-center px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 text-cyber-accent font-bold">
|
|
<span>Patching</span>
|
|
<span x-text="open === 'patching' ? '▾' : '▸'" class="text-xs"></span>
|
|
</button>
|
|
<div x-show="open === 'patching'" x-cloak class="space-y-1 pl-1">
|
|
{% if p.planning %}<a href="/planning" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'planning' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Planning</a>{% endif %}
|
|
{% if p.campaigns in ('edit', 'admin') %}<a href="/assignments" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'assignments' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Assignation</a>{% endif %}
|
|
{% if p.campaigns %}<a href="/campaigns" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'campaigns' in path and 'assignments' not in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Campagnes</a>{% endif %}
|
|
{% if p.servers in ('edit','admin') or p.campaigns in ('edit','admin') or p.quickwin in ('edit','admin') %}<a href="/patching/config-exclusions" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'config-exclusions' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Config exclusions</a>{% endif %}
|
|
{% if p.campaigns in ('edit','admin') or p.quickwin in ('edit','admin') %}<a href="/patching/validations" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/patching/validations' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Validations</a>{% endif %}
|
|
|
|
{# Quickwin sous-groupe #}
|
|
{% if p.campaigns or p.quickwin %}
|
|
<div>
|
|
<button @click="toggleSub('quickwin')" class="w-full flex justify-between items-center px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 pl-6 {% if 'quickwin' in path %}text-cyber-accent{% else %}text-gray-400{% endif %}">
|
|
<span>QuickWin</span>
|
|
<span x-text="subOpen === 'quickwin' ? '▾' : '▸'" class="text-xs opacity-60"></span>
|
|
</button>
|
|
<div x-show="subOpen === 'quickwin'" x-cloak class="space-y-1">
|
|
<a href="/quickwin" style="padding-left:3rem" class="block py-1 pr-3 rounded-md text-xs hover:bg-cyber-border/30 {% if 'quickwin' in path and 'config' not in path and 'correspondance' not in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-500{% endif %}">Vue d'ensemble</a>
|
|
{% if p.quickwin in ('edit', 'admin') or p.campaigns in ('edit', 'admin') %}
|
|
<a href="/quickwin/config" style="padding-left:3rem" class="block py-1 pr-3 rounded-md text-xs hover:bg-cyber-border/30 {% if '/quickwin/config' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-500{% endif %}">Config exclusion</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# ===== AUDIT (au meme niveau que Patching, repliable) ===== #}
|
|
{% if p.audit %}
|
|
<div>
|
|
<button @click="toggle('audit')" class="w-full flex justify-between items-center px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 text-cyber-accent font-bold">
|
|
<span>Audit</span>
|
|
<span x-text="open === 'audit' ? '▾' : '▸'" class="text-xs"></span>
|
|
</button>
|
|
<div x-show="open === 'audit'" x-cloak class="space-y-1 pl-1">
|
|
<a href="/audit" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if path == '/audit' %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Audit global</a>
|
|
{% if p.audit in ('edit', 'admin') %}<a href="/audit/specific" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'specific' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Spécifique</a>{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# ===== QUALYS (groupe repliable) ===== #}
|
|
{% if p.qualys %}
|
|
<div>
|
|
<button @click="toggle('qualys')" class="w-full flex justify-between items-center px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 text-cyber-accent font-bold">
|
|
<span>Qualys</span>
|
|
<span x-text="open === 'qualys' ? '▾' : '▸'" class="text-xs"></span>
|
|
</button>
|
|
<div x-show="open === 'qualys'" x-cloak class="space-y-1 pl-1">
|
|
<a href="/qualys/search" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/qualys/search' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Recherche</a>
|
|
<a href="/qualys/tags" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/qualys/tags' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Tags</a>
|
|
<a href="/qualys/agents" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'agents' in path and 'deploy' not in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Agents</a>
|
|
{% if p.qualys in ('edit', 'admin') %}<a href="/qualys/deploy" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'deploy' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Déployer Agent</a>{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# ===== ADMIN (groupe repliable) ===== #}
|
|
{% if p.users or p.settings or p.servers or p.contacts %}
|
|
<div>
|
|
<button @click="toggle('admin')" class="w-full flex justify-between items-center px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 text-cyber-accent font-bold">
|
|
<span>Administration</span>
|
|
<span x-text="open === 'admin' ? '▾' : '▸'" class="text-xs"></span>
|
|
</button>
|
|
<div x-show="open === 'admin'" x-cloak class="space-y-1 pl-1">
|
|
{% if p.servers or p.contacts %}<a href="/contacts" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'contacts' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Contacts</a>{% endif %}
|
|
{% if p.users %}<a href="/users" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if path == '/users' or path.startswith('/users/') %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Utilisateurs</a>{% endif %}
|
|
{% if p.settings or p.users %}<a href="/admin/applications" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/admin/applications' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Applications</a>{% endif %}
|
|
{% if p.settings %}<a href="/settings" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'settings' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Settings</a>{% endif %}
|
|
{% if p.settings or p.referentiel %}<a href="/referentiel" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'referentiel' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Référentiel</a>{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</nav>
|
|
</aside>
|
|
<main class="flex-1 flex flex-col overflow-hidden">
|
|
<!-- Top bar -->
|
|
<header class="flex items-center justify-end px-6 py-2 border-b border-cyber-border bg-cyber-card">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-sm text-gray-400">{{ user.sub }}</span>
|
|
<span class="badge badge-blue">{{ user.role }}</span>
|
|
<a href="/logout" class="btn-sm bg-cyber-border text-gray-300 hover:bg-red-900/40 hover:text-cyber-red transition-colors">Deconnexion</a>
|
|
</div>
|
|
</header>
|
|
<div class="flex flex-1 overflow-hidden">
|
|
<div class="flex-1 p-6 overflow-auto" id="main-content">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
<div id="detail-panel" class="w-0 overflow-hidden transition-all duration-300 border-l border-cyber-border bg-cyber-card">
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% else %}
|
|
{% block fullpage %}{% endblock %}
|
|
{% endif %}
|
|
<div id="toast-container"></div>
|
|
<!-- Overlay chargement -->
|
|
<div id="loading-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(10,14,23,0.85); z-index:9999; justify-content:center; align-items:center;">
|
|
<div style="text-align:center">
|
|
<div style="border:3px solid #1e3a5f; border-top:3px solid #00d4ff; border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite; margin:0 auto 16px"></div>
|
|
<div id="loading-msg" style="color:#00d4ff; font-size:14px; font-weight:600">Opération en cours...</div>
|
|
<div id="loading-sub" style="color:#94a3b8; font-size:12px; margin-top:6px"></div>
|
|
</div>
|
|
</div>
|
|
<style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
|
|
<script>
|
|
function showLoading(msg, sub) {
|
|
document.getElementById('loading-msg').textContent = msg || 'Opération en cours...';
|
|
document.getElementById('loading-sub').textContent = sub || '';
|
|
document.getElementById('loading-overlay').style.display = 'flex';
|
|
}
|
|
function hideLoading() { document.getElementById('loading-overlay').style.display = 'none'; }
|
|
// Auto-attach: tout bouton avec data-loading affiche l'overlay au clic
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.querySelectorAll('[data-loading]').forEach(function(btn) {
|
|
btn.addEventListener('click', function(e) {
|
|
var parts = (btn.dataset.loading || 'Opération en cours...|').split('|');
|
|
showLoading(parts[0], parts[1] || '');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|