feat: add Services and Logs modules (systemctl + journalctl via SSH)
Backend: - modules/services: list, status, start/stop/restart systemctl services with pct exec support for LXC targets - modules/logs: journalctl unit listing + WebSocket live streaming (direct SSH connection, journalctl -f, graceful teardown on WS close) - migrations/003: seed services and logs modules in DB - main.go: register services.New() and logs.New() in module loader Frontend: - services.html: target selector, search/filter, services table with active state indicators and start/stop/restart buttons - logs.html: target + unit selectors, live follow toggle, scrollable terminal output with 3000-line cap - app.js: servicePage() and logsPage() Alpine components + navItems - locales: services and logs i18n keys (fr + en) - pages.css: services table, state dots, logs output styles Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
98cdabf3e1
commit
5836f2201a
10 changed files with 1012 additions and 2 deletions
4
backend/internal/db/migrations/003_modules_extra.sql
Normal file
4
backend/internal/db/migrations/003_modules_extra.sql
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
-- Migration 003 : Ajout des modules logs et services
|
||||
INSERT OR IGNORE INTO modules (id, name, description, version, is_core, is_enabled) VALUES
|
||||
('logs', 'Journaux', 'Consultation des journaux système via journalctl', '1.0.0', 0, 1),
|
||||
('services', 'Services', 'Gestion des services systemd (start/stop/restart)', '1.0.0', 0, 1);
|
||||
|
|
@ -17,6 +17,8 @@ import (
|
|||
sshpool "git.geronzi.fr/proxmoxPanel/core/backend/internal/ssh"
|
||||
"git.geronzi.fr/proxmoxPanel/core/backend/internal/websocket"
|
||||
"git.geronzi.fr/proxmoxPanel/core/backend/modules"
|
||||
"git.geronzi.fr/proxmoxPanel/core/backend/modules/logs"
|
||||
"git.geronzi.fr/proxmoxPanel/core/backend/modules/services"
|
||||
|
||||
"github.com/go-chi/chi/v5"
|
||||
"github.com/go-chi/chi/v5/middleware"
|
||||
|
|
@ -68,8 +70,8 @@ func main() {
|
|||
|
||||
// ── Chargement des modules actifs ──────────────────────────────────────
|
||||
loader := modules.NewLoader(database.DB)
|
||||
// Les modules sont enregistrés ici (compilés dans le binaire)
|
||||
// loader.RegisterModule(dashboard.New(...)) ← à décommenter quand implémentés
|
||||
loader.RegisterModule(services.New(database, sshPool, encryptor))
|
||||
loader.RegisterModule(logs.New(database, sshPool, encryptor))
|
||||
if err := loader.LoadActive(); err != nil {
|
||||
log.Fatalf("Erreur chargement modules : %v", err)
|
||||
}
|
||||
|
|
|
|||
206
backend/modules/logs/logs.go
Normal file
206
backend/modules/logs/logs.go
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
// Module Logs — streaming de journalctl via WebSocket + SSH.
|
||||
// Expose : liste des unités journald, streaming WebSocket journalctl.
|
||||
package logs
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"net/http"
|
||||
"strconv"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
"git.geronzi.fr/proxmoxPanel/core/backend/internal/api"
|
||||
"git.geronzi.fr/proxmoxPanel/core/backend/internal/crypto"
|
||||
"git.geronzi.fr/proxmoxPanel/core/backend/internal/db"
|
||||
sshpool "git.geronzi.fr/proxmoxPanel/core/backend/internal/ssh"
|
||||
"git.geronzi.fr/proxmoxPanel/core/backend/modules"
|
||||
gorillaws "github.com/gorilla/websocket"
|
||||
gossh "golang.org/x/crypto/ssh"
|
||||
)
|
||||
|
||||
// LogsModule gère la lecture des journaux systemd via SSH.
|
||||
type LogsModule struct {
|
||||
db *db.DB
|
||||
pool *sshpool.Pool
|
||||
enc *crypto.Encryptor
|
||||
}
|
||||
|
||||
// New crée un LogsModule avec les dépendances nécessaires.
|
||||
func New(database *db.DB, pool *sshpool.Pool, enc *crypto.Encryptor) *LogsModule {
|
||||
return &LogsModule{db: database, pool: pool, enc: enc}
|
||||
}
|
||||
|
||||
func (m *LogsModule) ID() string { return "logs" }
|
||||
|
||||
// Register enregistre les routes du module dans le registry CORE.
|
||||
func (m *LogsModule) Register(r modules.Registry) error {
|
||||
r.RegisterRoute("GET", "/api/logs/units", m.ListUnits, false)
|
||||
r.RegisterRoute("GET", "/ws/logs", m.StreamLogs, false)
|
||||
return nil
|
||||
}
|
||||
|
||||
// sshCreds récupère et déchiffre les credentials SSH depuis la configuration.
|
||||
func (m *LogsModule) sshCreds() (host, user, pass string, err error) {
|
||||
host, _, _ = m.db.GetSetting("ssh_host")
|
||||
user, _, _ = m.db.GetSetting("ssh_username")
|
||||
encPass, _, _ := m.db.GetSetting("ssh_password")
|
||||
if encPass != "" {
|
||||
pass, err = m.enc.Decrypt(encPass)
|
||||
if err != nil {
|
||||
return "", "", "", fmt.Errorf("impossible de déchiffrer le mot de passe SSH")
|
||||
}
|
||||
}
|
||||
if host == "" || user == "" || pass == "" {
|
||||
return "", "", "", fmt.Errorf("SSH non configuré")
|
||||
}
|
||||
return host, user, pass, nil
|
||||
}
|
||||
|
||||
// buildJournalCmd construit la commande journalctl, en la wrappant via pct exec pour les LXC.
|
||||
func buildJournalCmd(target, journalArgs string) string {
|
||||
if strings.HasPrefix(target, "lxc:") {
|
||||
vmid := strings.TrimPrefix(target, "lxc:")
|
||||
if _, err := strconv.Atoi(vmid); err == nil {
|
||||
return fmt.Sprintf("pct exec %s -- journalctl %s", vmid, journalArgs)
|
||||
}
|
||||
}
|
||||
return "journalctl " + journalArgs
|
||||
}
|
||||
|
||||
// sanitizeUnit valide un nom d'unité systemd pour éviter l'injection de commandes.
|
||||
func sanitizeUnit(unit string) string {
|
||||
for _, c := range unit {
|
||||
ok := (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') ||
|
||||
(c >= '0' && c <= '9') || c == '-' || c == '.' || c == '_' || c == '@' || c == ':'
|
||||
if !ok {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
return unit
|
||||
}
|
||||
|
||||
// ListUnits retourne la liste des unités systemd présentes dans les journaux.
|
||||
// GET /api/logs/units?target=host|lxc:ID
|
||||
func (m *LogsModule) ListUnits(w http.ResponseWriter, r *http.Request) {
|
||||
sshHost, user, pass, err := m.sshCreds()
|
||||
if err != nil {
|
||||
api.JSONError(w, err.Error(), http.StatusServiceUnavailable)
|
||||
return
|
||||
}
|
||||
|
||||
target := r.URL.Query().Get("target")
|
||||
if target == "" {
|
||||
target = "host"
|
||||
}
|
||||
|
||||
cmd := buildJournalCmd(target, "--field=_SYSTEMD_UNIT --no-pager 2>/dev/null | sort -u | head -300")
|
||||
out, _ := m.pool.RunCommand(sshHost, user, pass, cmd)
|
||||
|
||||
units := []string{}
|
||||
for _, line := range strings.Split(out, "\n") {
|
||||
line = strings.TrimSpace(line)
|
||||
if line != "" {
|
||||
units = append(units, line)
|
||||
}
|
||||
}
|
||||
api.JSONResponse(w, http.StatusOK, units)
|
||||
}
|
||||
|
||||
// wsUpgrader est l'upgrader WebSocket pour le module logs.
|
||||
var wsUpgrader = gorillaws.Upgrader{
|
||||
CheckOrigin: func(r *http.Request) bool { return true },
|
||||
}
|
||||
|
||||
// StreamLogs ouvre un WebSocket et stream journalctl en temps réel via SSH.
|
||||
// GET /ws/logs?target=host|lxc:ID&unit=sshd.service&lines=100
|
||||
func (m *LogsModule) StreamLogs(w http.ResponseWriter, r *http.Request) {
|
||||
sshHost, user, pass, err := m.sshCreds()
|
||||
if err != nil {
|
||||
http.Error(w, err.Error(), http.StatusServiceUnavailable)
|
||||
return
|
||||
}
|
||||
|
||||
conn, err := wsUpgrader.Upgrade(w, r, nil)
|
||||
if err != nil {
|
||||
return
|
||||
}
|
||||
defer conn.Close()
|
||||
|
||||
target := r.URL.Query().Get("target")
|
||||
if target == "" {
|
||||
target = "host"
|
||||
}
|
||||
|
||||
unit := r.URL.Query().Get("unit")
|
||||
linesStr := r.URL.Query().Get("lines")
|
||||
lines := 100
|
||||
if n, err2 := strconv.Atoi(linesStr); err2 == nil && n > 0 && n <= 2000 {
|
||||
lines = n
|
||||
}
|
||||
|
||||
// Construction des arguments journalctl
|
||||
args := fmt.Sprintf("-f --no-pager -n %d", lines)
|
||||
if safe := sanitizeUnit(unit); safe != "" {
|
||||
args += " -u " + safe
|
||||
}
|
||||
cmd := buildJournalCmd(target, args)
|
||||
|
||||
// Connexion SSH directe (hors pool — session longue durée avec journalctl -f)
|
||||
sshConfig := &gossh.ClientConfig{
|
||||
User: user,
|
||||
Auth: []gossh.AuthMethod{gossh.Password(pass)},
|
||||
Timeout: 15 * time.Second,
|
||||
HostKeyCallback: gossh.InsecureIgnoreHostKey(),
|
||||
}
|
||||
client, err := gossh.Dial("tcp", sshHost, sshConfig)
|
||||
if err != nil {
|
||||
conn.WriteMessage(gorillaws.TextMessage, []byte("Erreur SSH : "+err.Error()))
|
||||
return
|
||||
}
|
||||
defer client.Close()
|
||||
|
||||
session, err := client.NewSession()
|
||||
if err != nil {
|
||||
conn.WriteMessage(gorillaws.TextMessage, []byte("Erreur session SSH : "+err.Error()))
|
||||
return
|
||||
}
|
||||
defer session.Close()
|
||||
|
||||
stdout, err := session.StdoutPipe()
|
||||
if err != nil {
|
||||
return
|
||||
}
|
||||
if err := session.Start(cmd); err != nil {
|
||||
conn.WriteMessage(gorillaws.TextMessage, []byte("Erreur commande : "+err.Error()))
|
||||
return
|
||||
}
|
||||
|
||||
// Goroutine : SSH stdout → WebSocket
|
||||
done := make(chan struct{})
|
||||
go func() {
|
||||
defer close(done)
|
||||
buf := make([]byte, 4096)
|
||||
for {
|
||||
n, err := stdout.Read(buf)
|
||||
if n > 0 {
|
||||
conn.WriteMessage(gorillaws.TextMessage, buf[:n])
|
||||
}
|
||||
if err != nil {
|
||||
break
|
||||
}
|
||||
}
|
||||
}()
|
||||
|
||||
// Boucle principale : attendre fermeture WebSocket (ou message de contrôle)
|
||||
for {
|
||||
_, _, err := conn.ReadMessage()
|
||||
if err != nil {
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// Fermer la session SSH → interrompt journalctl -f
|
||||
session.Close()
|
||||
client.Close()
|
||||
<-done
|
||||
}
|
||||
198
backend/modules/services/services.go
Normal file
198
backend/modules/services/services.go
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
// Module Services — gestion des services systemd via SSH.
|
||||
// Expose : liste des services, statut détaillé, start/stop/restart (admin).
|
||||
package services
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"net/http"
|
||||
"strconv"
|
||||
"strings"
|
||||
|
||||
"git.geronzi.fr/proxmoxPanel/core/backend/internal/api"
|
||||
"git.geronzi.fr/proxmoxPanel/core/backend/internal/crypto"
|
||||
"git.geronzi.fr/proxmoxPanel/core/backend/internal/db"
|
||||
sshpool "git.geronzi.fr/proxmoxPanel/core/backend/internal/ssh"
|
||||
"git.geronzi.fr/proxmoxPanel/core/backend/modules"
|
||||
"github.com/go-chi/chi/v5"
|
||||
)
|
||||
|
||||
// ServicesModule gère les opérations systemctl sur le host et les LXC.
|
||||
type ServicesModule struct {
|
||||
db *db.DB
|
||||
pool *sshpool.Pool
|
||||
enc *crypto.Encryptor
|
||||
}
|
||||
|
||||
// New crée un ServicesModule avec les dépendances nécessaires.
|
||||
func New(database *db.DB, pool *sshpool.Pool, enc *crypto.Encryptor) *ServicesModule {
|
||||
return &ServicesModule{db: database, pool: pool, enc: enc}
|
||||
}
|
||||
|
||||
func (m *ServicesModule) ID() string { return "services" }
|
||||
|
||||
// Register enregistre les routes du module dans le registry CORE.
|
||||
func (m *ServicesModule) Register(r modules.Registry) error {
|
||||
r.RegisterRoute("GET", "/api/services", m.ListServices, false)
|
||||
r.RegisterRoute("GET", "/api/services/{name}/status", m.ServiceStatus, false)
|
||||
r.RegisterRoute("POST", "/api/services/{name}/{action}", m.ServiceAction, true)
|
||||
return nil
|
||||
}
|
||||
|
||||
// sshCreds récupère et déchiffre les credentials SSH depuis la configuration.
|
||||
func (m *ServicesModule) sshCreds() (host, user, pass string, err error) {
|
||||
host, _, _ = m.db.GetSetting("ssh_host")
|
||||
user, _, _ = m.db.GetSetting("ssh_username")
|
||||
encPass, _, _ := m.db.GetSetting("ssh_password")
|
||||
if encPass != "" {
|
||||
pass, err = m.enc.Decrypt(encPass)
|
||||
if err != nil {
|
||||
return "", "", "", fmt.Errorf("impossible de déchiffrer le mot de passe SSH")
|
||||
}
|
||||
}
|
||||
if host == "" || user == "" || pass == "" {
|
||||
return "", "", "", fmt.Errorf("SSH non configuré")
|
||||
}
|
||||
return host, user, pass, nil
|
||||
}
|
||||
|
||||
// buildCmd construit la commande systemctl, en la wrappant via pct exec pour les LXC.
|
||||
func buildCmd(target, systemctlArgs string) string {
|
||||
if strings.HasPrefix(target, "lxc:") {
|
||||
vmid := strings.TrimPrefix(target, "lxc:")
|
||||
if _, err := strconv.Atoi(vmid); err == nil {
|
||||
return fmt.Sprintf("pct exec %s -- systemctl %s", vmid, systemctlArgs)
|
||||
}
|
||||
}
|
||||
return "systemctl " + systemctlArgs
|
||||
}
|
||||
|
||||
// ServiceEntry représente un service systemd dans la liste.
|
||||
type ServiceEntry struct {
|
||||
Name string `json:"name"`
|
||||
LoadState string `json:"load_state"`
|
||||
ActiveState string `json:"active_state"`
|
||||
SubState string `json:"sub_state"`
|
||||
Description string `json:"description"`
|
||||
}
|
||||
|
||||
// ListServices retourne la liste des services systemd d'une cible.
|
||||
// GET /api/services?target=host|lxc:ID
|
||||
func (m *ServicesModule) ListServices(w http.ResponseWriter, r *http.Request) {
|
||||
host, user, pass, err := m.sshCreds()
|
||||
if err != nil {
|
||||
api.JSONError(w, err.Error(), http.StatusServiceUnavailable)
|
||||
return
|
||||
}
|
||||
|
||||
target := r.URL.Query().Get("target")
|
||||
if target == "" {
|
||||
target = "host"
|
||||
}
|
||||
|
||||
cmd := buildCmd(target, "list-units --type=service --all --no-legend --plain --no-pager 2>/dev/null")
|
||||
out, err := m.pool.RunCommand(host, user, pass, cmd)
|
||||
if err != nil {
|
||||
api.JSONError(w, "Erreur commande SSH : "+err.Error(), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
services := parseServiceList(out)
|
||||
api.JSONResponse(w, http.StatusOK, services)
|
||||
}
|
||||
|
||||
// parseServiceList parse la sortie de systemctl list-units.
|
||||
// Format : "nom.service load active running Description..."
|
||||
func parseServiceList(output string) []ServiceEntry {
|
||||
var services []ServiceEntry
|
||||
for _, line := range strings.Split(output, "\n") {
|
||||
line = strings.TrimSpace(line)
|
||||
if line == "" || strings.HasPrefix(line, "UNIT") || strings.HasPrefix(line, "Legend") ||
|
||||
strings.HasPrefix(line, "To show") || strings.HasPrefix(line, "Pass") {
|
||||
continue
|
||||
}
|
||||
// Certaines lignes commencent par "●" (service failed) — on supprime ce caractère
|
||||
line = strings.TrimPrefix(line, "● ")
|
||||
line = strings.TrimPrefix(line, " ")
|
||||
|
||||
fields := strings.Fields(line)
|
||||
if len(fields) < 4 {
|
||||
continue
|
||||
}
|
||||
name := strings.TrimSuffix(fields[0], ".service")
|
||||
desc := ""
|
||||
if len(fields) >= 5 {
|
||||
desc = strings.Join(fields[4:], " ")
|
||||
}
|
||||
services = append(services, ServiceEntry{
|
||||
Name: name,
|
||||
LoadState: fields[1],
|
||||
ActiveState: fields[2],
|
||||
SubState: fields[3],
|
||||
Description: desc,
|
||||
})
|
||||
}
|
||||
return services
|
||||
}
|
||||
|
||||
// ServiceStatus retourne le statut détaillé d'un service.
|
||||
// GET /api/services/{name}/status?target=host|lxc:ID
|
||||
func (m *ServicesModule) ServiceStatus(w http.ResponseWriter, r *http.Request) {
|
||||
host, user, pass, err := m.sshCreds()
|
||||
if err != nil {
|
||||
api.JSONError(w, err.Error(), http.StatusServiceUnavailable)
|
||||
return
|
||||
}
|
||||
|
||||
name := chi.URLParam(r, "name")
|
||||
target := r.URL.Query().Get("target")
|
||||
if target == "" {
|
||||
target = "host"
|
||||
}
|
||||
|
||||
cmd := buildCmd(target, fmt.Sprintf("status %s --no-pager 2>&1", name))
|
||||
out, _ := m.pool.RunCommand(host, user, pass, cmd)
|
||||
|
||||
api.JSONResponse(w, http.StatusOK, map[string]string{"output": out})
|
||||
}
|
||||
|
||||
// ServiceAction exécute une action (start/stop/restart/reload) sur un service.
|
||||
// POST /api/services/{name}/{action}
|
||||
// Body: { "target": "host" | "lxc:ID" }
|
||||
func (m *ServicesModule) ServiceAction(w http.ResponseWriter, r *http.Request) {
|
||||
host, user, pass, err := m.sshCreds()
|
||||
if err != nil {
|
||||
api.JSONError(w, err.Error(), http.StatusServiceUnavailable)
|
||||
return
|
||||
}
|
||||
|
||||
name := chi.URLParam(r, "name")
|
||||
action := chi.URLParam(r, "action")
|
||||
|
||||
// Valider l'action pour éviter l'injection de commandes
|
||||
allowed := map[string]bool{"start": true, "stop": true, "restart": true, "reload": true, "enable": true, "disable": true}
|
||||
if !allowed[action] {
|
||||
api.JSONError(w, "Action invalide", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
var body struct {
|
||||
Target string `json:"target"`
|
||||
}
|
||||
if err := json.NewDecoder(r.Body).Decode(&body); err != nil || body.Target == "" {
|
||||
body.Target = "host"
|
||||
}
|
||||
|
||||
cmd := buildCmd(body.Target, fmt.Sprintf("%s %s 2>&1", action, name))
|
||||
out, err := m.pool.RunCommand(host, user, pass, cmd)
|
||||
|
||||
if err != nil {
|
||||
api.JSONError(w, fmt.Sprintf("Erreur action %s sur %s : %v\n%s", action, name, err, out), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
api.JSONResponse(w, http.StatusOK, map[string]string{
|
||||
"message": fmt.Sprintf("Action « %s » exécutée sur %s", action, name),
|
||||
"output": out,
|
||||
})
|
||||
}
|
||||
|
|
@ -826,6 +826,131 @@
|
|||
.toast--info { border-left-color: var(--neu-info); }
|
||||
.toast--info > i:first-child { color: var(--neu-info); }
|
||||
|
||||
/* ── Page Services ───────────────────────────────────────────────────────────── */
|
||||
.services-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.services-target-sel { min-width: 12rem; }
|
||||
.services-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
flex: 1;
|
||||
min-width: 10rem;
|
||||
background: var(--neu-bg);
|
||||
border: 1px solid var(--neu-border);
|
||||
border-radius: var(--neu-radius);
|
||||
padding: 0 .75rem;
|
||||
}
|
||||
.services-search i { color: var(--neu-text-muted); font-size: .9rem; flex-shrink: 0; }
|
||||
.services-search .neu-input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: .45rem 0;
|
||||
flex: 1;
|
||||
box-shadow: none;
|
||||
min-width: 0;
|
||||
}
|
||||
.services-table-wrap { padding: 0; overflow-x: auto; }
|
||||
.services-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: .875rem;
|
||||
}
|
||||
.services-table thead tr {
|
||||
border-bottom: 1px solid var(--neu-border);
|
||||
}
|
||||
.services-table th {
|
||||
padding: .6rem 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: var(--neu-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.services-table td {
|
||||
padding: .5rem 1rem;
|
||||
border-bottom: 1px solid var(--neu-border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.services-table tbody tr:last-child td { border-bottom: none; }
|
||||
.services-table tbody tr:hover { background: var(--neu-bg-raised); }
|
||||
|
||||
.svc-state-dot {
|
||||
display: inline-block;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: 50%;
|
||||
margin-right: .4rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.state-active .svc-state-dot { background: var(--neu-success); }
|
||||
.state-failed .svc-state-dot { background: var(--neu-danger); }
|
||||
.state-inactive .svc-state-dot { background: var(--neu-text-muted); }
|
||||
.state-other .svc-state-dot { background: var(--neu-warning); }
|
||||
|
||||
.state-active .svc-state-label { color: var(--neu-success); }
|
||||
.state-failed .svc-state-label { color: var(--neu-danger); }
|
||||
.state-inactive .svc-state-label { color: var(--neu-text-muted); }
|
||||
|
||||
.svc-name { font-weight: 500; font-family: var(--neu-font-mono, monospace); white-space: nowrap; }
|
||||
.svc-sub { color: var(--neu-text-muted); font-size: .8rem; white-space: nowrap; }
|
||||
.svc-desc { color: var(--neu-text-muted); font-size: .8rem; max-width: 22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.svc-actions { display: flex; gap: .35rem; white-space: nowrap; }
|
||||
|
||||
/* ── Page Logs ───────────────────────────────────────────────────────────────── */
|
||||
.logs-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.logs-sel { min-width: 10rem; }
|
||||
.logs-sel-sm { min-width: 5rem; width: 5rem; }
|
||||
|
||||
.logs-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
font-size: .8rem;
|
||||
color: var(--neu-success);
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.logs-status-dot {
|
||||
width: .45rem;
|
||||
height: .45rem;
|
||||
border-radius: 50%;
|
||||
background: var(--neu-success);
|
||||
animation: pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: .35; }
|
||||
}
|
||||
|
||||
.logs-output-wrap { padding: 0; min-height: 22rem; display: flex; flex-direction: column; }
|
||||
.logs-output {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
font-family: var(--neu-font-mono, 'Courier New', monospace);
|
||||
font-size: .78rem;
|
||||
line-height: 1.5;
|
||||
color: var(--neu-text);
|
||||
overflow-y: auto;
|
||||
max-height: 65vh;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
.logs-empty {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Éditeur de raccourcis ───────────────────────────────────────────────────── */
|
||||
.shortcuts-editor { display: flex; flex-direction: column; gap: .5rem; }
|
||||
.shortcut-row {
|
||||
|
|
|
|||
|
|
@ -328,6 +328,8 @@ document.addEventListener('alpine:init', () => {
|
|||
{ id: 'proxmox', iconClass: 'lnid-server-1', iconColor: '#22c55e', labelKey: 'nav.proxmox', href: '/proxmox.html' },
|
||||
{ id: 'updates', iconClass: 'lnid-arrow-upward', iconColor: '#f59e0b', labelKey: 'nav.updates', href: '/updates.html' },
|
||||
{ id: 'terminal', iconClass: 'lnid-terminal', iconColor: '#a78bfa', labelKey: 'nav.terminal', href: '/terminal.html' },
|
||||
{ id: 'services', iconClass: 'lnid-gear-loading', iconColor: '#fb923c', labelKey: 'nav.services', href: '/services.html' },
|
||||
{ id: 'logs', iconClass: 'lnid-scroll-document-1', iconColor: '#38bdf8', labelKey: 'nav.logs', href: '/logs.html' },
|
||||
{ id: 'settings', iconClass: 'lnid-gear-1', iconColor: '#94a3b8', labelKey: 'nav.settings', href: '/settings.html' },
|
||||
{ id: 'modules', iconClass: 'lnid-puzzle', iconColor: '#f472b6', labelKey: 'nav.modules', href: '/modules.html' },
|
||||
],
|
||||
|
|
@ -1083,6 +1085,169 @@ document.addEventListener('alpine:init', () => {
|
|||
t(key) { return Alpine.store('i18n').t(key) },
|
||||
}))
|
||||
|
||||
// ── Composant: servicePage ──────────────────────────────────────────────
|
||||
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) },
|
||||
}))
|
||||
|
||||
// ── Composant: logsPage ─────────────────────────────────────────────────
|
||||
Alpine.data('logsPage', () => ({
|
||||
lines: [],
|
||||
target: 'host',
|
||||
targets: [{ value: 'host', label: 'Host Proxmox' }],
|
||||
unit: '',
|
||||
units: [],
|
||||
linesCount: '100',
|
||||
following: false,
|
||||
ws: null,
|
||||
|
||||
async init() {
|
||||
await this.loadTargets()
|
||||
await this.loadUnits()
|
||||
},
|
||||
|
||||
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 loadUnits() {
|
||||
try {
|
||||
const res = await apiFetch(`/api/logs/units?target=${this.target}`)
|
||||
if (res.ok) this.units = await res.json() || []
|
||||
} catch(e) {}
|
||||
},
|
||||
|
||||
async onTargetChange() {
|
||||
this.stopFollow()
|
||||
this.unit = ''
|
||||
await this.loadUnits()
|
||||
},
|
||||
|
||||
toggleFollow() {
|
||||
if (this.following) {
|
||||
this.stopFollow()
|
||||
} else {
|
||||
this.startFollow()
|
||||
}
|
||||
},
|
||||
|
||||
startFollow() {
|
||||
this.lines = []
|
||||
const token = encodeURIComponent(localStorage.getItem('pxp_token') || '')
|
||||
const proto = location.protocol === 'https:' ? 'wss' : 'ws'
|
||||
const unit = this.unit ? `&unit=${encodeURIComponent(this.unit)}` : ''
|
||||
const url = `${proto}://${location.host}/ws/logs?token=${token}&target=${this.target}&lines=${this.linesCount}${unit}`
|
||||
this.ws = new WebSocket(url)
|
||||
this.following = true
|
||||
|
||||
this.ws.onmessage = (e) => {
|
||||
const incoming = e.data.split('\n').filter(l => l !== '')
|
||||
this.lines.push(...incoming)
|
||||
if (this.lines.length > 3000) this.lines = this.lines.slice(-3000)
|
||||
this.$nextTick(() => {
|
||||
const el = this.$refs.logOutput
|
||||
if (el) el.scrollTop = el.scrollHeight
|
||||
})
|
||||
}
|
||||
this.ws.onclose = () => { this.following = false; this.ws = null }
|
||||
this.ws.onerror = () => { this.following = false; this.ws = null }
|
||||
},
|
||||
|
||||
stopFollow() {
|
||||
if (this.ws) {
|
||||
this.ws.close()
|
||||
this.ws = null
|
||||
}
|
||||
this.following = false
|
||||
},
|
||||
|
||||
clearLog() {
|
||||
this.lines = []
|
||||
},
|
||||
|
||||
t(key) { return Alpine.store('i18n').t(key) },
|
||||
}))
|
||||
|
||||
}) // end alpine:init
|
||||
|
||||
// ── DOMContentLoaded : init stores + Swup ─────────────────────────────────
|
||||
|
|
|
|||
|
|
@ -115,6 +115,34 @@
|
|||
"desc": "SFTP file browser",
|
||||
"moduleNotEnabled": "Module not enabled. Go to Settings → Modules to enable it."
|
||||
},
|
||||
"services": {
|
||||
"desc": "systemd service management",
|
||||
"target": "Target",
|
||||
"filter": "Filter by name or description…",
|
||||
"noServices": "No services found",
|
||||
"name": "Service",
|
||||
"status": "Status",
|
||||
"substate": "Sub-state",
|
||||
"description": "Description",
|
||||
"start": "Start",
|
||||
"stop": "Stop",
|
||||
"restart": "Restart",
|
||||
"reload": "Reload",
|
||||
"enable": "Enable",
|
||||
"disable": "Disable"
|
||||
},
|
||||
"logs": {
|
||||
"desc": "System journal viewer via journalctl",
|
||||
"target": "Target",
|
||||
"unit": "Unit",
|
||||
"unitAll": "All units",
|
||||
"lines": "Lines",
|
||||
"follow": "Follow live",
|
||||
"stopFollow": "Stop",
|
||||
"clear": "Clear",
|
||||
"noLogs": "No logs — click «Follow» to start",
|
||||
"connecting": "Connecting…"
|
||||
},
|
||||
"settings": {
|
||||
"general": "General",
|
||||
"infrastructure": "Infrastructure",
|
||||
|
|
|
|||
|
|
@ -115,6 +115,34 @@
|
|||
"desc": "Navigateur de fichiers SFTP",
|
||||
"moduleNotEnabled": "Module non activé. Rendez-vous dans Paramètres → Modules pour l'activer."
|
||||
},
|
||||
"services": {
|
||||
"desc": "Gestion des services systemd",
|
||||
"target": "Cible",
|
||||
"filter": "Filtrer par nom ou description…",
|
||||
"noServices": "Aucun service trouvé",
|
||||
"name": "Service",
|
||||
"status": "Statut",
|
||||
"substate": "Sous-état",
|
||||
"description": "Description",
|
||||
"start": "Démarrer",
|
||||
"stop": "Arrêter",
|
||||
"restart": "Redémarrer",
|
||||
"reload": "Recharger",
|
||||
"enable": "Activer",
|
||||
"disable": "Désactiver"
|
||||
},
|
||||
"logs": {
|
||||
"desc": "Consultation des journaux système via journalctl",
|
||||
"target": "Cible",
|
||||
"unit": "Unité",
|
||||
"unitAll": "Toutes les unités",
|
||||
"lines": "Lignes",
|
||||
"follow": "Suivre en temps réel",
|
||||
"stopFollow": "Arrêter",
|
||||
"clear": "Effacer",
|
||||
"noLogs": "Aucun journal — cliquez sur « Suivre » pour démarrer",
|
||||
"connecting": "Connexion en cours…"
|
||||
},
|
||||
"settings": {
|
||||
"general": "Général",
|
||||
"infrastructure": "Infrastructure",
|
||||
|
|
|
|||
110
frontend/logs.html
Normal file
110
frontend/logs.html
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<!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 — Journaux</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 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.logs')"></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="logsPage()" x-cloak>
|
||||
|
||||
<!-- Barre de contrôle -->
|
||||
<div class="logs-toolbar">
|
||||
<select class="neu-input logs-sel" x-model="target" @change="onTargetChange()">
|
||||
<template x-for="tgt in targets" :key="tgt.value">
|
||||
<option :value="tgt.value" x-text="tgt.label"></option>
|
||||
</template>
|
||||
</select>
|
||||
|
||||
<select class="neu-input logs-sel" x-model="unit">
|
||||
<option value="" x-text="t('logs.unitAll')"></option>
|
||||
<template x-for="u in units" :key="u">
|
||||
<option :value="u" x-text="u"></option>
|
||||
</template>
|
||||
</select>
|
||||
|
||||
<select class="neu-input logs-sel-sm" x-model="linesCount">
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
<option value="200">200</option>
|
||||
<option value="500">500</option>
|
||||
</select>
|
||||
|
||||
<button class="neu-btn neu-btn--sm"
|
||||
:class="following ? 'neu-btn--danger' : 'neu-btn--primary'"
|
||||
@click="toggleFollow()">
|
||||
<i :class="following ? 'lnid-stop' : 'lnid-play'"></i>
|
||||
<span x-text="following ? t('logs.stopFollow') : t('logs.follow')"></span>
|
||||
</button>
|
||||
|
||||
<button class="neu-btn neu-btn--sm" @click="clearLog()" :disabled="lines.length === 0">
|
||||
<i class="lnid-trash-1"></i>
|
||||
<span x-text="t('logs.clear')"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Indicateur de connexion -->
|
||||
<div class="logs-status" x-show="following">
|
||||
<span class="logs-status-dot"></span>
|
||||
<span x-text="t('logs.connecting')"></span>
|
||||
</div>
|
||||
|
||||
<!-- Sortie des logs -->
|
||||
<div class="neu-card logs-output-wrap">
|
||||
<pre class="logs-output" x-ref="logOutput" x-show="lines.length > 0"><template x-for="(line, idx) in lines" :key="idx"><span x-text="line + '\n'"></span></template></pre>
|
||||
<p class="empty-state logs-empty" x-show="lines.length === 0" x-text="t('logs.noLogs')"></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
144
frontend/services.html
Normal file
144
frontend/services.html
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<!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 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="t in targets" :key="t.value">
|
||||
<option :value="t.value" x-text="t.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-show="!collapsed" 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue