more abstraction and simple dashboard for processes

2025-08-06 13:57:34 +02:00
parent e188813adf
commit 9f262c4a55
17 changed files with 428 additions and 564 deletions
--- a/mainPage/mainPage.go
+++ b/mainPage/mainPage.go
@@ -0,0 +1,96 @@
+package mainPage
+
+import (
+	"embed"
+	"html/template"
+	"log"
+	"net/http"
+	"os"
+	"path/filepath"
+	"processSupervisor/supervisor"
+	"time"
+)
+
+//go:embed templates
+var templatesFS embed.FS
+
+type MainPage struct {
+	Supervisor *supervisor.Supervisor
+}
+
+func NewMainPage(cfgDir string) (*MainPage, error) {
+	var sv supervisor.Supervisor
+	file := filepath.Join(cfgDir, "supervisorTemplate.json")
+	if _, err := os.Stat(file); err == nil {
+		sv, err = supervisor.ReadTemplate(file)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	if err := sv.StartProcesses(); err != nil {
+		return nil, err
+	}
+	m := MainPage{
+		Supervisor: &sv,
+	}
+
+	return &m, nil
+}
+
+func (m *MainPage) LoadMainPage(w http.ResponseWriter, r *http.Request) {
+	tmpl := template.Must(
+		template.New("index.html").ParseFS(
+			templatesFS,
+			"templates/index.html",
+			"templates/processes.html",
+		),
+	)
+	tmpl.Execute(w, m)
+}
+
+func (m *MainPage) UpdateMainPage(w http.ResponseWriter, r *http.Request) {
+	tmpl := template.Must(
+		template.New("processes.html").ParseFS(
+			templatesFS,
+			"templates/processes.html",
+		),
+	)
+	tmpl.Execute(w, m)
+}
+
+func (m *MainPage) StartProcess(w http.ResponseWriter, r *http.Request) {
+	name := r.PostFormValue("name")
+
+	// This is where you trigger the .Start method
+	err := m.Supervisor.StartProcessByName(name)
+	if err != nil {
+		log.Println("Failed to start process", err)
+	}
+	m.UpdateMainPage(w, r)
+}
+
+func (m *MainPage) StopProcess(w http.ResponseWriter, r *http.Request) {
+	name := r.PostFormValue("name")
+
+	err := m.Supervisor.StopProcessByName(name)
+	if err != nil {
+		log.Println("Failed to stop process", err)
+	}
+	m.UpdateMainPage(w, r)
+}
+
+func (m *MainPage) RestartProcess(w http.ResponseWriter, r *http.Request) {
+	name := r.PostFormValue("name")
+
+	err := m.Supervisor.StopProcessByName(name)
+	if err != nil {
+		log.Println(err)
+	}
+	time.Sleep(time.Second)
+	err = m.Supervisor.StartProcessByName(name)
+	if err != nil {
+		log.Println(err)
+	}
+	m.UpdateMainPage(w, r)
+}
--- a/mainPage/templates/index.html
+++ b/mainPage/templates/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Process Dashboard</title>
+  <script src="https://unpkg.com/htmx.org@1.9.5"></script>
+  
+</head>
+<body>
+<ul id="process-page">
+      <div class="top-link-container">
+        <a href="/taskmanager/htop" class="top-link" target="_blank" rel="noopener noreferrer">
+            📈 Task Manager
+        </a>
+    </div>
+
+  <!-- Header -->
+  <h2>Processes</h2>
+  <ul id="process-list"
+    hx-get="/processes"
+    hx-trigger="every 5s"
+    hx-swap="innerHTML">
+    {{ template "processes.html" . }}
+  </ul> 
+</body>
+<style>
+  body {
+    font-family: "Segoe UI", Roboto, sans-serif;
+    margin: 2rem;
+    background-color: #f7f9fb;
+    color: #222;
+  }
+
+  .top-link-container {
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+
+  .top-link {
+    font-size: 1.2rem;
+    text-decoration: none;
+    color: #4a90e2;
+    font-weight: 500;
+  }
+
+  .top-link:hover {
+    text-decoration: underline;
+  }
+  h2 {
+    text-align: center;
+    color: #444;
+    margin-bottom: 1.5rem;
+  }
+
+</style>
+</html>
--- a/mainPage/templates/processes.html
+++ b/mainPage/templates/processes.html
@@ -0,0 +1,135 @@
+{{ range .Supervisor.GetProcesses }}
+  <li>
+    <span class="process-name">📦
+      {{ if .Running }}
+        🟢 {{ .Name }}{{if ne .Description ""}}   <span class="process-description">{{.Description}}</span>{{end}}
+      {{ else }}
+        🔴 {{ .Name }}{{if ne .Description ""}}   <span class="process-description">{{.Description}}</span>{{end}}
+      {{ end }}
+    </span>
+
+    <div class="dropdown">
+      <button class="dot-button">⋮</button>
+      <div class="dropdown-content">
+      {{ if not .Running }}
+        <button 
+          hx-post="/start-process"
+          hx-vals='{"name": "{{ .Name }}"}'
+          hx-trigger="click"
+          hx-target="#process-list"
+            hx-swap="innerHTML">
+          ▶️ Start
+        </button>
+        {{else}}
+        <button 
+          hx-post="/stop-process"
+          hx-vals='{"name": "{{ .Name }}"}'
+          hx-trigger="click"
+          hx-target="#process-list"
+            hx-swap="innerHTML">
+          ⏹️ Stop
+        </button>
+        <button 
+          hx-post="/restart-process"
+          hx-vals='{"name": "{{ .Name }}"}'
+          hx-trigger="click"
+          hx-target="#process-list"
+            hx-swap="innerHTML">
+          🔁 Restart
+        </button>
+      {{ end }}
+      </div>
+    </div>
+  </li>
+{{ end }}
+
+<style>
+  ul#process-list {
+    list-style: none;
+    padding: 0;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  ul#process-list li {
+    background: #fff;
+    margin: 0.75rem 0;
+    padding: 1rem 1.25rem;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: box-shadow 0.25s ease;
+  }
+
+  ul#process-list li:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+  }
+
+  .process-name {
+    font-weight: 600;
+    font-size: 1rem;
+    color: #2c3e50;
+  }
+
+
+  .process-description {
+    font-weight: 400; /* normal or lighter */
+    color: #2c3e50; /* optional: same color or adjust if needed */
+  }
+
+  .dot-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #777;
+    padding: 0 4px;
+    transition: color 0.2s;
+  }
+
+  .dot-button:hover {
+    color: #333;
+  }
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 1.8rem;
+    background-color: #fff;
+    min-width: 130px;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
+    border-radius: 6px;
+    overflow: hidden;
+    z-index: 100;
+  }
+
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+
+  .dropdown-content button {
+    width: 100%;
+    padding: 10px 12px;
+    text-align: left;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.95rem;
+    color: #333;
+    transition: background 0.2s, color 0.2s;
+  }
+
+  .dropdown-content button:hover {
+    background-color: #f0f0f0;
+    color: #000;
+  }
+</style>
+</html>