feat(containers-dashboard): Pod start/restart/stop knoppen en favico toegevoegd

webui/html/index.html

@@ -9,6 +9,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/yaml/yaml.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/javascript/javascript.min.js"></script>
   <title>MVP Control UI</title>
+  <link rel="icon" type="image/x-icon" href="podman.io-favicon.ico">
   <style>
     :root{
       --bg: #0b1220;
@@ -709,21 +710,66 @@
       );
 
       const collapsed = _isCollapsed(pod);
+      const isRealPod = (pod !== '(geen pod)');
+      const total = items.length;
+
+      const running = items.filter(x => {
+        const s = (x.Status || x.State || '').toLowerCase();
+        return s === 'running';
+      }).length;
+
+      let cls = 'warn';                 // default
+      let label = `${running}/${total}`;
+
+      if (total === 0) {                // edge case
+        cls = 'muted';
+      } else if (running === total) {
+        cls = 'ok';                     // groen
+      } else if (running === 0) {
+        cls = 'bad';                    // rood
+      } else {
+        cls = 'warn';                   // oranje
+      }
 
       html += `
         <tr class="pod-group-row">
-          <td colspan="${colCount}">
+          <td>
             <span class="pod-toggle" data-pod="${pod}" style="cursor:pointer; user-select:none;">
-              ${collapsed ? '▶' : '▼'} <b>${esc(pod)}</b> <span style="opacity:.7;">(${items.length})</span>
+              ${collapsed ? '▶' : '▼'} <b>${esc(pod)}</b>
             </span>
           </td>
+
+          <td>
+            <span class="btn small ${cls}">
+              ${label}
+            </span>
+          </td>
+
+          <td class="muted">-</td>
+          <td class="muted">-</td>
+          <td>${isRealPod ? '<span class="btn small muted">pod</span>' : '<span class="muted">-</span>'}</td>
+          <td class="muted num">-</td>
+          <td class="muted num">-</td>
+          <td class="muted">-</td>
+          <td>
+            ${isRealPod ? `
+              <div class="flex">
+                <button class="btn small" disabled style="visibility:hidden;">Inspect</button>
+                <button class="btn small" disabled style="visibility:hidden;">Logs</button>
+
+                <button class="btn small ok" onclick="podAction('start','${esc(pod)}')">Start</button>
+                <button class="btn small warn" onclick="podAction('restart','${esc(pod)}')">Restart</button>
+                <button class="btn small bad" onclick="podAction('stop','${esc(pod)}')">Stop</button>
+              </div>
+            ` : '<span class="muted">-</span>'}
+          </td>
         </tr>
       `;
 
       for (const c of items) {
         const row = renderContainerRow(c).replace(
           '<tr',
-          `<tr class="pod-item-row" data-pod="${esc(pod)}"${collapsed ? ' style="display:none;"' : ''}`
+          `<tr class="pod-item-row" data-pod="${pod}"${collapsed ? ' style="display:none;"' : ''}`
         );
         html += row;
       }