proxmoxPanel/viewServices
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: module viewServices — gestion services systemd via systemctl

Browse source 
- module.json : métadonnées du module (nav_href, nav_icon, nav_color, nav_label_key)
- backend/go.mod : dépendance sur core/backend via replace directive
- backend/services.go : implémente modules.Module, routes /api/services et /api/services/{name}/*
  - Utilise r.RunOnTarget du Registry (pas d'accès internal)
  - Liste services, statut détaillé, actions start/stop/restart/reload/enable/disable
  - Enregistrement du nav item via r.RegisterNavItem
- frontend/services.html : page de gestion des services systemd
  - Composant servicePage Alpine.js inline (autonome, indépendant de core app.js)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
enzo 2026-03-22 04:01:59 +01:00
commit f1d475c7e5
4 changed files with 408 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

223
frontend/services.html Normal file
View file

@ -0,0 +1,223 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<script>(function(){document.documentElement.setAttribute("data-theme",localStorage.getItem("pxp_theme")||"dark");document.documentElement.setAttribute("data-sidebar",localStorage.getItem("pxp_sidebar_pos")||"left")})()</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ProxmoxPanel — Services</title>
<link rel="stylesheet" href="/css/neu.css" />
<link rel="stylesheet" href="/css/dark.css" />
<link rel="stylesheet" href="/css/light.css" />
<link rel="stylesheet" href="/css/pages.css" />
<link rel="stylesheet" href="/css/lineicons-duotone.css" />
<link rel="manifest" href="/manifest.json" />
<script src="/js/vendors/htmx.min.js"></script>
<script src="/js/vendors/swup.iife.js"></script>
<script src="/js/app.js"></script>
<script>
// Composant servicePage — fourni par le module viewServices
document.addEventListener('alpine:init', () => {
Alpine.data('servicePage', () => ({
services: [],
loading: false,
target: 'host',
targets: [{ value: 'host', label: 'Host Proxmox' }],
filter: '',
actioning: {},
get filtered() {
const q = this.filter.toLowerCase()
if (!q) return this.services
return this.services.filter(s =>
s.name.toLowerCase().includes(q) || (s.description || '').toLowerCase().includes(q)
)
},
async init() {
await this.loadTargets()
await this.load()
},
async loadTargets() {
try {
const res = await apiFetch('/api/proxmox/lxc')
if (res.ok) {
const lxc = await res.json() || []
this.targets = [
{ value: 'host', label: 'Host Proxmox' },
...lxc.map(c => ({ value: `lxc:${c.vmid}`, label: `LXC ${c.vmid} — ${c.name || 'CT'+c.vmid}` }))
]
}
} catch(e) {}
},
async load() {
this.loading = true
try {
const res = await apiFetch(`/api/services?target=${this.target}`)
if (res.ok) this.services = await res.json() || []
} finally {
this.loading = false
}
},
async action(name, act) {
this.actioning[name] = act
try {
const res = await apiFetch(`/api/services/${name}/${act}`, {
method: 'POST',
body: JSON.stringify({ target: this.target })
})
if (res.ok) {
Alpine.store('toasts').success(`${act} ${name}`)
await this.load()
} else {
const b = await res.json().catch(() => ({}))
Alpine.store('toasts').error(b.error || `Erreur ${act}`)
}
} catch(e) {
Alpine.store('toasts').error(e.message)
} finally {
this.actioning[name] = false
}
},
stateClass(svc) {
if (svc.active_state === 'active') return 'state-active'
if (svc.active_state === 'failed') return 'state-failed'
if (svc.active_state === 'inactive') return 'state-inactive'
return 'state-other'
},
t(key) { return Alpine.store('i18n').t(key) },
}))
})
</script>
<script src="/js/vendors/alpine.min.js" defer></script>
</head>
<body x-data x-init="$store.ui.init()">
<aside class="sidebar" x-data="sidebar()" :class="{ collapsed: collapsed }" x-cloak>
<div class="sidebar-header" @click="toggle()">
<i class="sidebar-logo lnid-layout-1"></i>
<span class="sidebar-title" x-show="!collapsed">ProxmoxPanel</span>
</div>
<nav class="sidebar-nav">
<template x-for="item in navItems" :key="item.id">
<a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
<i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
<span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
</a>
</template>
</nav>
<div class="sidebar-footer">
<a class="sidebar-link" href="/profile.html" @click.prevent="navigate('/profile.html')">
<i class="sidebar-icon lnid-user-circle-1"></i>
<span class="sidebar-label" x-show="!collapsed" x-text="$store.auth.user?.username || t('nav.profile')"></span>
</a>
</div>
</aside>
<div class="main-layout">
<nav class="navbar" x-data="navbar()" x-cloak>
<h2 class="navbar-title" x-text="t('nav.services')"></h2>
<div class="navbar-actions">
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="toggleTheme()" :title="theme==='dark'?t('navbar.lightMode'):t('navbar.darkMode')">
<i :class="theme==='dark' ? 'lnid-sun-1' : 'lnid-moon-half-left-1'"></i>
</button>
<button class="neu-btn neu-btn--sm neu-btn--icon-sm" @click="logout()" :title="t('navbar.logout')">
<i class="lnid-power-button"></i>
</button>
</div>
</nav>
<main id="swup" class="page-content transition-fade">
<div x-data="servicePage()" x-cloak>
<!-- Barre de contrôle -->
<div class="services-toolbar">
<select class="neu-input services-target-sel" x-model="target" @change="load()">
<template x-for="tgt in targets" :key="tgt.value">
<option :value="tgt.value" x-text="tgt.label"></option>
</template>
</select>
<div class="services-search">
<i class="lnid-search-1"></i>
<input class="neu-input" type="text" x-model="filter"
:placeholder="t('services.filter')" />
</div>
<button class="neu-btn neu-btn--sm" @click="load()" :disabled="loading">
<i :class="loading ? 'spinner-sm' : 'lnid-refresh-circle-1-clockwise'"></i>
<span x-text="t('common.refresh')"></span>
</button>
</div>
<!-- Chargement -->
<div class="loading-state" x-show="loading && services.length === 0">
<div class="spinner-lg"></div>
<span>Chargement…</span>
</div>
<!-- Tableau des services -->
<div class="neu-card services-table-wrap" x-show="!loading || services.length > 0">
<table class="services-table">
<thead>
<tr>
<th x-text="t('services.status')"></th>
<th x-text="t('services.name')"></th>
<th x-text="t('services.substate')"></th>
<th x-text="t('services.description')"></th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<template x-for="svc in filtered" :key="svc.name">
<tr>
<td>
<span class="svc-state-dot" :class="stateClass(svc)"></span>
<span class="svc-state-label" x-text="svc.active_state"></span>
</td>
<td class="svc-name" x-text="svc.name"></td>
<td class="svc-sub" x-text="svc.sub_state"></td>
<td class="svc-desc" x-text="svc.description"></td>
<td class="svc-actions">
<button class="neu-btn neu-btn--sm neu-btn--success neu-btn--icon-sm"
@click="action(svc.name, 'start')"
:disabled="actioning[svc.name] || svc.active_state === 'active'"
:title="t('services.start')">
<span x-show="actioning[svc.name] === 'start'" class="spinner-sm"></span>
<i x-show="actioning[svc.name] !== 'start'" class="lnid-play"></i>
</button>
<button class="neu-btn neu-btn--sm neu-btn--danger neu-btn--icon-sm"
@click="action(svc.name, 'stop')"
:disabled="actioning[svc.name] || svc.active_state !== 'active'"
:title="t('services.stop')">
<span x-show="actioning[svc.name] === 'stop'" class="spinner-sm"></span>
<i x-show="actioning[svc.name] !== 'stop'" class="lnid-stop"></i>
</button>
<button class="neu-btn neu-btn--sm neu-btn--icon-sm"
@click="action(svc.name, 'restart')"
:disabled="actioning[svc.name]"
:title="t('services.restart')">
<span x-show="actioning[svc.name] === 'restart'" class="spinner-sm"></span>
<i x-show="actioning[svc.name] !== 'restart'" class="lnid-refresh-circle-1-clockwise"></i>
</button>
</td>
</tr>
</template>
<tr x-show="!loading && filtered.length === 0">
<td colspan="5" class="empty-state" style="text-align:center;padding:1.5rem"
x-text="t('services.noServices')"></td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</body>
</html>