diff --git a/webui/html/assets/css/app.css b/webui/html/assets/css/app.css index 3638306..5bb5718 100644 --- a/webui/html/assets/css/app.css +++ b/webui/html/assets/css/app.css @@ -54,6 +54,8 @@ --badge-green-text: #ffffff; --badge-yellow-bg: #f1c40f; --badge-yellow-text: #111111; + --table-zebra: rgba(96,165,250,.03); + --sticky-head-bg: rgba(17,26,46,.96); --radius: 14px; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; @@ -111,6 +113,8 @@ --badge-green-text: #f8fafc; --badge-yellow-bg: #b45309; --badge-yellow-text: #fffbeb; + --table-zebra: rgba(15,23,42,.03); + --sticky-head-bg: rgba(255,255,255,.97); } *{box-sizing:border-box} body{ @@ -129,6 +133,10 @@ header{ .topbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; } +.headerMeta{ + margin-left: 6px; + white-space: nowrap; +} .brand{ display:flex; gap:12px; align-items:center; font-weight:700; letter-spacing:.2px; @@ -194,6 +202,19 @@ header{ display:flex; gap:10px; align-items:center; } .cardBody{padding:14px} +.dashboardKpiGrid{ + display:grid; + grid-template-columns: repeat(1, 1fr); + gap:10px; +} +@media (min-width: 980px){ + .dashboardKpiGrid{grid-template-columns: repeat(4, 1fr)} +} +.actionBar{ + display:flex; + gap:8px; + flex-wrap:wrap; +} .btn{ border:1px solid var(--card-border); background: var(--btn); @@ -236,6 +257,12 @@ table{ border-collapse: collapse; font-size: 13px; } +thead th{ + position: sticky; + top: 72px; + z-index: 2; + background: var(--sticky-head-bg); +} th,td{ padding:10px 8px; border-bottom:1px solid var(--soft-line); @@ -243,6 +270,7 @@ th,td{ vertical-align: top; } th{color: var(--muted); font-weight:600} +tbody tr:nth-child(even) td{background: var(--table-zebra)} tr:hover td{background: var(--hover-bg)} .badge { display: inline-flex; @@ -264,6 +292,7 @@ pre.code{ .badge.ok{border-color: rgba(45,212,191,.6); color: var(--ok)} .badge.bad{border-color: rgba(251,113,133,.6); color: var(--bad)} .badge.warn{border-color: rgba(251,191,36,.6); color: var(--warn)} +.badge.info{border-color: rgba(96,165,250,.45); color: var(--accent)} .mono{font-family: var(--mono)} .muted{color:var(--muted)} .num{ @@ -603,6 +632,40 @@ pre{ .file-folder-files > div:hover{ background: var(--hover-bg); } +.file-entry{ + display:flex; + align-items:center; + justify-content:space-between; + gap:10px; + padding:4px 0; + border-bottom:1px dashed var(--soft-line); + border-radius: 8px; +} +.file-entry-name{ + cursor:pointer; +} +.file-entry-state{ + min-width: 24px; + text-align:right; + color: var(--muted); + font-size: 11px; +} +.file-entry.active{ + background: var(--hover-bg); +} +.file-entry.active .file-entry-name{ + font-weight: 700; +} +.file-entry.dirty .file-entry-state{ + color: var(--warn); +} +.filesEditorStatus{ + margin-top:8px; + border:1px solid var(--soft-line); + border-radius:10px; + padding:7px 9px; + font-size: 12px; +} .data-table { width: 100%; border-collapse: collapse; diff --git a/webui/html/assets/js/tabs/files.js b/webui/html/assets/js/tabs/files.js index 55dc36f..8e8cec2 100644 --- a/webui/html/assets/js/tabs/files.js +++ b/webui/html/assets/js/tabs/files.js @@ -1,4 +1,7 @@ let cmEditor = null; +let filesDirty = false; +let filesSuppressDirtyEvent = false; +let filesTextareaBound = false; function filesCurrentTheme() { const t = document.documentElement.getAttribute('data-theme'); @@ -34,6 +37,72 @@ const FILES_ROOT = 'systemd'; // API-root binnen WORKLOADS_DIR let filesCurrentUiPath = ''; // zonder "systemd/" let filesCurrentApiPath = ''; // met "systemd/" +function filesModeLabel(uiPath) { + const mode = cmModeForPath(uiPath); + if (mode === 'yaml') return 'YAML'; + if (mode === 'application/json') return 'JSON'; + if (mode === 'javascript') return 'JavaScript'; + return 'Text'; +} + +function filesCursorLabel() { + if (cmEditor) { + const c = cmEditor.getCursor(); + return `Ln ${c.line + 1}, Kol ${c.ch + 1}`; + } + return ''; +} + +function filesUpdateEditorStatus() { + const el = document.getElementById('filesEditorStatus'); + if (!el) return; + + if (!filesCurrentUiPath) { + el.textContent = 'Geen bestand geselecteerd'; + return; + } + + const dirtyTxt = filesDirty ? 'Niet opgeslagen' : 'Opgeslagen'; + const parts = [ + dirtyTxt, + filesModeLabel(filesCurrentUiPath), + filesCurrentUiPath, + ]; + const cursor = filesCursorLabel(); + if (cursor) parts.push(cursor); + el.textContent = parts.join(' | '); +} + +function filesUpdateTreeSelection() { + const treeEl = document.getElementById('filesTree'); + if (!treeEl) return; + + treeEl.querySelectorAll('.file-entry').forEach(row => { + row.classList.remove('active', 'dirty'); + const state = row.querySelector('.file-entry-state'); + if (state) state.textContent = ''; + }); + + if (!filesCurrentUiPath) return; + + const key = encodeURIComponent(filesCurrentUiPath); + const row = treeEl.querySelector(`.file-entry[data-file="${CSS.escape(key)}"]`); + if (!row) return; + + row.classList.add('active'); + if (filesDirty) { + row.classList.add('dirty'); + const state = row.querySelector('.file-entry-state'); + if (state) state.textContent = '●'; + } +} + +function filesSetDirty(v) { + filesDirty = !!v && !!filesCurrentUiPath; + filesUpdateEditorStatus(); + filesUpdateTreeSelection(); +} + function cmModeForPath(uiPath) { const p = (uiPath || '').toLowerCase(); if (p.endsWith('.yaml') || p.endsWith('.yml') || p.endsWith('.kube') || p.endsWith('.container')) return 'yaml'; @@ -58,6 +127,7 @@ function filesSetCurrent(uiPath) { filesCurrentUiPath = (uiPath || '').trim().replace(/^\/+/, ''); filesCurrentApiPath = filesToApiPath(filesCurrentUiPath); document.getElementById('filesCurrent').textContent = filesCurrentUiPath || '-'; + filesSetDirty(false); } async function filesRefresh() { @@ -72,6 +142,17 @@ async function filesRefresh() { theme: filesCodeMirrorTheme() }); cmEditor.setSize('100%', 360); + cmEditor.on('change', () => { + if (filesSuppressDirtyEvent || !filesCurrentUiPath) return; + filesSetDirty(true); + }); + cmEditor.on('cursorActivity', filesUpdateEditorStatus); + } else if (taFiles && !filesTextareaBound) { + filesTextareaBound = true; + taFiles.addEventListener('input', () => { + if (!filesCurrentUiPath) return; + filesSetDirty(true); + }); } } @@ -179,9 +260,11 @@ async function filesRefresh() { for (const f of sortedFiles) { const fullUi = node.uiPath ? `${node.uiPath}/${f}` : f; + const fileKey = encodeURIComponent(fullUi); out.push(` -
- 📄 ${esc(f)} +
+ 📄 ${esc(f)} +
`); } @@ -216,9 +299,11 @@ async function filesRefresh() {
${(rootFolder.files || []).slice().sort((a,b)=>a.localeCompare(b)).map(f => { const fullUi = f; + const fileKey = encodeURIComponent(fullUi); return ` -
- 📄 ${esc(f)} +
+ 📄 ${esc(f)} +
`; }).join('')} @@ -243,6 +328,8 @@ async function filesRefresh() { const filesBlock = treeEl.querySelector(`[data-folder-files="${CSS.escape(folderKey)}"]`); if (filesBlock) filesBlock.style.display = isNowCollapsed ? 'none' : ''; }; + filesUpdateTreeSelection(); + filesUpdateEditorStatus(); } async function filesOpen(uiPath) { @@ -253,11 +340,16 @@ async function filesOpen(uiPath) { const text = res.content || ''; if (cmEditor) { cmEditor.setOption('mode', cmModeForPath(uiPath)); + filesSuppressDirtyEvent = true; cmEditor.setValue(text); + filesSuppressDirtyEvent = false; cmEditor.refresh(); + cmEditor.setCursor({ line: 0, ch: 0 }); } else { document.getElementById('filesEditor').value = text; } + filesSetDirty(false); + filesUpdateEditorStatus(); } async function filesSave() { @@ -275,6 +367,7 @@ async function filesSave() { { content } ); + filesSetDirty(false); showModal('Opgeslagen', JSON.stringify(res, null, 2)); await filesRefresh(); } @@ -290,7 +383,14 @@ async function filesDelete() { // reset current filesSetCurrent(''); - document.getElementById('filesEditor').value = ''; + if (cmEditor) { + filesSuppressDirtyEvent = true; + cmEditor.setValue(''); + filesSuppressDirtyEvent = false; + cmEditor.refresh(); + } else { + document.getElementById('filesEditor').value = ''; + } await filesRefresh(); } diff --git a/webui/html/assets/js/tabs/images.js b/webui/html/assets/js/tabs/images.js index 6ed3cd4..69e633c 100644 --- a/webui/html/assets/js/tabs/images.js +++ b/webui/html/assets/js/tabs/images.js @@ -28,8 +28,8 @@ function renderImages(images) { const fullId = img.Id; const status = containers > 0 - ? `In use` - : `Unused`; + ? `In use` + : `Unused`; const disabled = containers > 0 ? "disabled" : ""; @@ -39,9 +39,9 @@ function renderImages(images) { ${repoTag} ${shortId} - ${sizeMB} MB - ${created} - ${containers} + ${sizeMB} MB + ${created} + ${containers} ${status}
- - - + + + + Laatste refresh: -
@@ -65,18 +66,32 @@
-
+
-
Snel acties
+
Platform overzicht
-
- - pods - - containers +
+
+
-
+
Pods
+
+
+
-
+
Containers
+
+
+
-
+
API status
+
+
+
-
+
Laatste refresh
+
Deze UI gebruikt jouw API endpoints onder /api (same origin). @@ -84,6 +99,20 @@
+
+
+
Snel acties
+
+
+
+ + + + +
+
Gebruik de zijbalk voor detailbeheer; deze acties geven snelle toegang tot de hoofdsecties.
+
+