feat(agent): amélioration UI étudiante - instances, statut et lien site

2026-06-12 18:36:31 +00:00
parent 479a8de858
commit 7ecc2abe0a
4 changed files with 259 additions and 36 deletions
@@ -0,0 +1,123 @@
+package main
+
+import (
+	"encoding/json"
+	"fmt"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"strings"
+)
+
+type InstanceInfo struct {
+	ID           string `json:"id"`
+	TemplateName string `json:"templateName,omitempty"`
+	Port         int    `json:"port"`
+	Status       string `json:"status"`
+}
+
+func instancesFile(dataDir string) string {
+	return filepath.Join(dataDir, "instances.json")
+}
+
+func loadInstances(dataDir string) (map[string]*InstanceInfo, error) {
+	f := instancesFile(dataDir)
+	data, err := os.ReadFile(f)
+	if err != nil {
+		if os.IsNotExist(err) {
+			return make(map[string]*InstanceInfo), nil
+		}
+		return nil, err
+	}
+	var list []*InstanceInfo
+	if err := json.Unmarshal(data, &list); err != nil {
+		return nil, err
+	}
+	m := make(map[string]*InstanceInfo)
+	for _, inst := range list {
+		m[inst.ID] = inst
+	}
+	return m, nil
+}
+
+func saveInstances(dataDir string, instances map[string]*InstanceInfo) error {
+	if err := os.MkdirAll(dataDir, 0755); err != nil {
+		return err
+	}
+	list := make([]*InstanceInfo, 0, len(instances))
+	for _, inst := range instances {
+		list = append(list, inst)
+	}
+	data, err := json.MarshalIndent(list, "", "  ")
+	if err != nil {
+		return err
+	}
+	return os.WriteFile(instancesFile(dataDir), data, 0644)
+}
+
+func upsertInstance(dataDir string, inst *InstanceInfo) error {
+	instances, err := loadInstances(dataDir)
+	if err != nil {
+		return err
+	}
+	instances[inst.ID] = inst
+	return saveInstances(dataDir, instances)
+}
+
+func removeInstance(dataDir, instanceID string) error {
+	instances, err := loadInstances(dataDir)
+	if err != nil {
+		return err
+	}
+	delete(instances, instanceID)
+	return saveInstances(dataDir, instances)
+}
+
+func instanceURL(inst *InstanceInfo) string {
+	return fmt.Sprintf("http://localhost:%d", inst.Port)
+}
+
+func getInstanceStatus(dataDir, instanceID string) string {
+	dir := instanceDir(dataDir, instanceID)
+	composeFile := filepath.Join(dir, "docker-compose.yml")
+	if _, err := os.Stat(composeFile); err != nil {
+		return "stopped"
+	}
+
+	engine := getContainerEngine()
+	cmd := exec.Command(engine, "compose", "-f", composeFile, "ps", "--format", "json")
+	out, err := cmd.Output()
+	if err != nil {
+		return "error"
+	}
+
+	outStr := strings.TrimSpace(string(out))
+	if outStr == "" || outStr == "[]" {
+		return "stopped"
+	}
+
+	// Docker compose JSON output can be a single object or an array
+	if strings.HasPrefix(outStr, "[") {
+		var containers []map[string]interface{}
+		if err := json.Unmarshal(out, &containers); err != nil {
+			return "error"
+		}
+		for _, c := range containers {
+			state, _ := c["State"].(string)
+			if state == "running" {
+				return "running"
+			}
+		}
+		return "stopped"
+	}
+
+	var c map[string]interface{}
+	if err := json.Unmarshal(out, &c); err != nil {
+		return "error"
+	}
+	state, _ := c["State"].(string)
+	if state == "running" {
+		return "running"
+	}
+	return "stopped"
+}
@@ -5,8 +5,6 @@ import (
 	"fmt"
 	"log"
 	"net/http"
-	"os"
-	"path/filepath"

 	"github.com/gorilla/websocket"
 )
@@ -81,17 +79,28 @@ func startUI(dataDir, nodeID, serverAddr string) {
 }

 func listInstances(dataDir string, conn *websocket.Conn) {
-	dir := filepath.Join(dataDir, "instances")
-	entries, err := os.ReadDir(dir)
+	instances, err := loadInstances(dataDir)
 	if err != nil {
+		log.Printf("loadInstances error: %v", err)
 		conn.WriteJSON(map[string]interface{}{"action": "instances_list", "instances": []interface{}{}})
 		return
 	}
-	var instances []map[string]interface{}
-	for _, e := range entries {
-		if e.IsDir() {
-			instances = append(instances, map[string]interface{}{"id": e.Name()})
+
+	var list []map[string]interface{}
+	for _, inst := range instances {
+		status := getInstanceStatus(dataDir, inst.ID)
+		if status != inst.Status {
+			inst.Status = status
+			_ = upsertInstance(dataDir, inst)
 		}
+		list = append(list, map[string]interface{}{
+			"id":           inst.ID,
+			"templateName": inst.TemplateName,
+			"port":         inst.Port,
+			"status":       inst.Status,
+			"url":          instanceURL(inst),
+		})
 	}
-	conn.WriteJSON(map[string]interface{}{"action": "instances_list", "instances": instances})
+
+	conn.WriteJSON(map[string]interface{}{"action": "instances_list", "instances": list})
 }
@@ -3,32 +3,54 @@
 <head>
  <meta charset="UTF-8">
  <title>EduBox Agent</title>
-  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
  <style>
-    body { font-family: system-ui, sans-serif; background: #f8fafc; margin: 0; padding: 2rem; }
-    .card { background: white; border-radius: 8px; padding: 1.5rem; max-width: 400px; margin: 2rem auto; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-    h1 { font-size: 1.5rem; margin-bottom: 1rem; color: #1e293b; }
-    input { width: 100%; padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 4px; margin-bottom: 0.75rem; box-sizing: border-box; }
-    button { width: 100%; padding: 0.6rem; background: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; }
+    * { box-sizing: border-box; }
+    body { font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: #f1f5f9; margin: 0; padding: 2rem; color: #1e293b; }
+    .container { max-width: 640px; margin: 0 auto; }
+    .card { background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1rem; }
+    h1 { font-size: 1.5rem; margin: 0 0 1rem; }
+    h2 { font-size: 1.125rem; margin: 0 0 1rem; }
+    input { width: 100%; padding: 0.6rem; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 0.75rem; font-size: 1rem; }
+    button { width: 100%; padding: 0.7rem; background: #2563eb; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1rem; }
    button:hover { background: #1d4ed8; }
-    .status { margin-top: 1rem; font-size: 0.875rem; }
+    .status { margin-top: 0.75rem; font-size: 0.9rem; min-height: 1.2rem; }
    .success { color: #16a34a; }
    .error { color: #dc2626; }
-    .instance-list { margin-top: 1rem; }
-    .instance-item { padding: 0.5rem; border: 1px solid #e2e8f0; border-radius: 4px; margin-bottom: 0.5rem; }
+    .info { color: #64748b; }
+    .instance-list { display: flex; flex-direction: column; gap: 0.75rem; }
+    .instance-item { border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+    .instance-meta { flex: 1; }
+    .instance-name { font-weight: 600; margin-bottom: 0.25rem; }
+    .instance-port { font-size: 0.85rem; color: #64748b; }
+    .badge { display: inline-block; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
+    .badge-running { background: #dcfce7; color: #166534; }
+    .badge-starting { background: #fef9c3; color: #854d0e; }
+    .badge-stopped { background: #f1f5f9; color: #475569; }
+    .badge-error { background: #fee2e2; color: #991b1b; }
+    .instance-link { font-size: 0.875rem; color: #2563eb; text-decoration: none; font-weight: 500; }
+    .instance-link:hover { text-decoration: underline; }
+    .empty { text-align: center; color: #64748b; padding: 1rem 0; }
  </style>
 </head>
 <body>
-  <div class="card">
-    <h1>EduBox Agent</h1>
-    <div id="main">
-      <p>Chargement...</p>
+  <div class="container">
+    <div class="card">
+      <h1>EduBox Agent</h1>
+      <div id="main">
+        <p class="info">Connexion en cours...</p>
+      </div>
+    </div>
+    <div id="instances-card" class="card" style="display:none;">
+      <h2>Mes instances</h2>
+      <div id="instances" class="instance-list"></div>
    </div>
  </div>

  <script>
    const ws = new WebSocket('ws://' + location.host + '/ws');
    const main = document.getElementById('main');
+    const instancesCard = document.getElementById('instances-card');
+    const instancesContainer = document.getElementById('instances');

    ws.onopen = () => {
      ws.send(JSON.stringify({action: 'check'}));
@@ -36,35 +58,42 @@

    ws.onmessage = (ev) => {
      const msg = JSON.parse(ev.data);
+
      if (msg.action === 'not_activated') {
        main.innerHTML = `
-          <p>Veuillez entrer votre code d'activation (6 caractères) :</p>
-          <input type="text" id="code" maxlength="6" placeholder="XXXXXX">
+          <p>Entre ton code d'activation (6 caractères) :</p>
+          <input type="text" id="code" maxlength="6" placeholder="XXXXXX" onkeydown="if(event.key==='Enter')activate()">
          <button onclick="activate()">Activer</button>
          <div id="status" class="status"></div>
        `;
      } else if (msg.action === 'activated') {
        main.innerHTML = `
-          <p class="success">✅ Activé : <strong>${msg.studentName}</strong></p>
-          <div class="instance-list" id="instances"></div>
+          <p class="success">✅ Activé : <strong>${escapeHtml(msg.studentName || '')}</strong></p>
+          <p class="info">Tes instances apparaissent ci-dessous.</p>
        `;
+        instancesCard.style.display = 'block';
        ws.send(JSON.stringify({action: 'instances'}));
      } else if (msg.action === 'activation_failed') {
-        document.getElementById('status').innerHTML = `<span class="error">❌ ${msg.error || 'Code invalide'}</span>`;
+        const status = document.getElementById('status');
+        if (status) status.innerHTML = `<span class="error">❌ ${escapeHtml(msg.error || 'Code invalide')}</span>`;
      } else if (msg.action === 'instances_list') {
-        const container = document.getElementById('instances');
-        if (!container) return;
-        if (msg.instances.length === 0) {
-          container.innerHTML = '<p class="status">Aucune instance assignée.</p>';
-        } else {
-          container.innerHTML = '<p class="status"><strong>Instances :</strong></p>' +
-            msg.instances.map(i => `<div class="instance-item">${i.id}</div>`).join('');
-        }
+        renderInstances(msg.instances);
+      } else if (msg.action === 'instances_updated') {
+        ws.send(JSON.stringify({action: 'instances'}));
      }
    };

+    ws.onclose = () => {
+      main.innerHTML = `<p class="error">Déconnecté. Recharge la page.</p>`;
+    };
+
+    ws.onerror = (err) => {
+      main.innerHTML = `<p class="error">Erreur de connexion.</p>`;
+    };
+
    function activate() {
-      const code = document.getElementById('code').value.trim().toUpperCase();
+      const input = document.getElementById('code');
+      const code = input.value.trim().toUpperCase();
      if (code.length !== 6) {
        document.getElementById('status').innerHTML = '<span class="error">Le code doit faire 6 caractères.</span>';
        return;
@@ -72,6 +101,44 @@
      document.getElementById('status').innerHTML = 'Activation en cours...';
      ws.send(JSON.stringify({action: 'activate', code}));
    }
+
+    function renderInstances(instances) {
+      if (!instances || instances.length === 0) {
+        instancesContainer.innerHTML = '<p class="empty">Aucune instance assignée.</p>';
+        return;
+      }
+      instancesContainer.innerHTML = instances.map(i => {
+        const badgeClass = i.status === 'running' ? 'badge-running' :
+                           i.status === 'starting' ? 'badge-starting' :
+                           i.status === 'error' ? 'badge-error' : 'badge-stopped';
+        const link = i.status === 'running' && i.url
+          ? `<a class="instance-link" href="${escapeHtml(i.url)}" target="_blank" rel="noopener">Ouvrir le site →</a>`
+          : '';
+        const name = escapeHtml(i.templateName || i.id);
+        return `
+          <div class="instance-item">
+            <div class="instance-meta">
+              <div class="instance-name">${name}</div>
+              <div class="instance-port">Port ${i.port || '-'}</div>
+            </div>
+            <div style="text-align:right;">
+              <span class="badge ${badgeClass}">${i.status || 'stopped'}</span>
+              ${link ? '<div style="margin-top:0.4rem;">' + link + '</div>' : ''}
+            </div>
+          </div>
+        `;
+      }).join('');
+    }
+
+    function escapeHtml(text) {
+      if (text == null) return '';
+      return String(text)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    }
  </script>
 </body>
 </html>
@@ -172,35 +172,59 @@ func handleMessage(conn *websocket.Conn, msg WSMessage, dataDir, nodeID string)
 		})
 	case "start":
 		log.Printf("Start instance %s on port %d", msg.InstanceID, msg.Port)
+		if err := upsertInstance(dataDir, &InstanceInfo{
+			ID:           msg.InstanceID,
+			TemplateName: msg.Type,
+			Port:         msg.Port,
+			Status:       "starting",
+		}); err != nil {
+			log.Printf("upsertInstance error: %v", err)
+		}
 		if err := writeCompose(dataDir, msg.InstanceID, msg.ComposeConfig); err != nil {
 			log.Printf("writeCompose error: %v", err)
+			_ = upsertInstance(dataDir, &InstanceInfo{ID: msg.InstanceID, TemplateName: msg.Type, Port: msg.Port, Status: "error"})
 			sendMessage(WSMessage{Action: "instance_error", InstanceID: msg.InstanceID, Error: err.Error()})
 			return
 		}
 		if err := dockerComposeUp(dataDir, msg.InstanceID); err != nil {
 			log.Printf("dockerComposeUp error: %v", err)
+			_ = upsertInstance(dataDir, &InstanceInfo{ID: msg.InstanceID, TemplateName: msg.Type, Port: msg.Port, Status: "error"})
 			sendMessage(WSMessage{Action: "instance_error", InstanceID: msg.InstanceID, Error: err.Error()})
 			return
 		}
+		status := getInstanceStatus(dataDir, msg.InstanceID)
+		_ = upsertInstance(dataDir, &InstanceInfo{ID: msg.InstanceID, TemplateName: msg.Type, Port: msg.Port, Status: status})
 		sendMessage(WSMessage{Action: "instance_started", InstanceID: msg.InstanceID, Port: msg.Port})
+		notifyUI(map[string]interface{}{"action": "instances_updated"})
 	case "stop":
 		log.Printf("Stop instance %s", msg.InstanceID)
 		if err := dockerComposeDown(dataDir, msg.InstanceID); err != nil {
 			log.Printf("dockerComposeDown error: %v", err)
 		}
+		if inst, _ := loadInstances(dataDir); inst[msg.InstanceID] != nil {
+			inst[msg.InstanceID].Status = "stopped"
+			_ = saveInstances(dataDir, inst)
+		}
+		notifyUI(map[string]interface{}{"action": "instances_updated"})
 	case "reset":
 		log.Printf("Reset instance %s", msg.InstanceID)
 		dockerComposeRm(dataDir, msg.InstanceID)
 		if err := writeCompose(dataDir, msg.InstanceID, msg.ComposeConfig); err != nil {
 			log.Printf("writeCompose error: %v", err)
+			_ = upsertInstance(dataDir, &InstanceInfo{ID: msg.InstanceID, TemplateName: msg.Type, Port: msg.Port, Status: "error"})
+			sendMessage(WSMessage{Action: "instance_error", InstanceID: msg.InstanceID, Error: err.Error()})
 			return
 		}
 		if err := dockerComposeUp(dataDir, msg.InstanceID); err != nil {
 			log.Printf("dockerComposeUp error: %v", err)
+			_ = upsertInstance(dataDir, &InstanceInfo{ID: msg.InstanceID, TemplateName: msg.Type, Port: msg.Port, Status: "error"})
 			sendMessage(WSMessage{Action: "instance_error", InstanceID: msg.InstanceID, Error: err.Error()})
 			return
 		}
+		status := getInstanceStatus(dataDir, msg.InstanceID)
+		_ = upsertInstance(dataDir, &InstanceInfo{ID: msg.InstanceID, TemplateName: msg.Type, Port: msg.Port, Status: status})
 		sendMessage(WSMessage{Action: "instance_started", InstanceID: msg.InstanceID, Port: msg.Port})
+		notifyUI(map[string]interface{}{"action": "instances_updated"})
 	default:
 		log.Printf("Unknown action: %s", msg.Action)
 	}