Skip to content

Commit 75b8b41

Browse files
author
Your Name
committed
fixed UI bug in admin dashboard
1 parent 5a0e877 commit 75b8b41

2 files changed

Lines changed: 60 additions & 23 deletions

File tree

‎.env‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
JWT_SECRET=123
2-
CLUSTER_SECRET=please_change
3-
ADMIN_PASSWORD=admin123
1+
JWT_SECRET=aiwbdu12-d-=o[;'';dwNKJdwal;,wdwafoihj!
2+
CLUSTER_SECRET=paimwnd09w8hjqoi2dhi)DISWDP)HW(1podjqw0-dw_DSNK
3+
ADMIN_PASSWORD=Cactus160605@

‎src/storage/admin.html‎

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@@ -169,8 +170,15 @@
169170
gap: 1rem;
170171
}
171172

172-
.btn-danger { background-color: var(--danger); color: white; }
173-
.btn-success { background-color: var(--success); color: black; }
173+
.btn-danger {
174+
background-color: var(--danger);
175+
color: white;
176+
}
177+
178+
.btn-success {
179+
background-color: var(--success);
180+
color: black;
181+
}
174182

175183
/* Secondary Sidebar (Keys) */
176184
#keys-sidebar {
@@ -196,10 +204,18 @@
196204
text-overflow: ellipsis;
197205
}
198206

199-
.key-item:hover { background-color: #333; }
200-
.key-item.active { color: var(--accent); font-weight: bold; }
207+
.key-item:hover {
208+
background-color: #333;
209+
}
210+
211+
.key-item.active {
212+
color: var(--accent);
213+
font-weight: bold;
214+
}
201215

202-
.hidden { display: none !important; }
216+
.hidden {
217+
display: none !important;
218+
}
203219

204220
.stats-grid {
205221
display: grid;
@@ -221,14 +237,16 @@
221237
}
222238
</style>
223239
</head>
240+
224241
<body>
225242

226243
<div id="login-screen">
227244
<h1 style="color: var(--accent); margin-bottom: 2rem;">DynaRust Admin</h1>
228245
<div id="login-form">
229246
<input type="password" id="admin-password" placeholder="Master Password">
230247
<button id="login-btn">Login</button>
231-
<p id="login-error" style="color: var(--danger); font-size: 0.8rem; margin-top: 1rem; text-align: center;" class="hidden">Invalid Password</p>
248+
<p id="login-error" style="color: var(--danger); font-size: 0.8rem; margin-top: 1rem; text-align: center;"
249+
class="hidden">Invalid Password</p>
232250
</div>
233251
</div>
234252

@@ -246,33 +264,40 @@ <h1 style="color: var(--accent); margin-bottom: 2rem;">DynaRust Admin</h1>
246264
<header>
247265
<h2 id="current-table-name">Select a Table</h2>
248266
<div class="actions">
249-
<button id="create-record-btn" class="btn-success" style="width: auto; padding: 0.5rem 1rem;">+ New Record</button>
250-
<button id="logout-btn" style="width: auto; padding: 0.5rem 1rem; background: #444; color: white;">Logout</button>
267+
<button id="create-record-btn" class="btn-success" style="width: auto; padding: 0.5rem 1rem;">+ New
268+
Record</button>
269+
<button id="logout-btn"
270+
style="width: auto; padding: 0.5rem 1rem; background: #444; color: white;">Logout</button>
251271
</div>
252272
</header>
253273

254274
<div id="record-view">
255275
<div id="no-record-selected" style="text-align: center; color: var(--text-muted); margin-top: 5rem;">
256276
Select a key from the right sidebar to view or edit its data.
257277
</div>
258-
278+
259279
<div id="editor-container" class="hidden">
260280
<div class="card">
261281
<div style="display: flex; justify-content: space-between; margin-bottom: 1rem;">
262282
<h3 id="current-key-name">Key: <span></span></h3>
263-
<span id="version-badge" style="background: #444; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">Version: 0</span>
283+
<span id="version-badge"
284+
style="background: #444; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem;">Version:
285+
0</span>
264286
</div>
265287
<label style="display: block; margin-bottom: 0.5rem; color: var(--text-muted);">JSON Content</label>
266288
<textarea id="json-editor"></textarea>
267289
<div class="actions" style="margin-top: 1.5rem; justify-content: flex-end;">
268-
<button id="delete-btn" class="btn-danger" style="width: auto; padding: 0.6rem 1.5rem;">Delete</button>
269-
<button id="save-btn" class="btn-success" style="width: auto; padding: 0.6rem 1.5rem;">Save Changes</button>
290+
<button id="delete-btn" class="btn-danger"
291+
style="width: auto; padding: 0.6rem 1.5rem;">Delete</button>
292+
<button id="save-btn" class="btn-success" style="width: auto; padding: 0.6rem 1.5rem;">Save
293+
Changes</button>
270294
</div>
271295
</div>
272296

273297
<div class="card" style="margin-top: 1.5rem;">
274298
<h3>Record Metadata</h3>
275-
<div id="metadata-view" style="font-family: monospace; font-size: 0.9rem; color: var(--text-muted);">
299+
<div id="metadata-view"
300+
style="font-family: monospace; font-size: 0.9rem; color: var(--text-muted);">
276301
<!-- Metadata here -->
277302
</div>
278303
</div>
@@ -290,7 +315,8 @@ <h3 style="margin-top: 0;">Cluster Statistics</h3>
290315
<div id="keys-sidebar" class="hidden">
291316
<div class="sidebar-header">
292317
<span>Keys</span>
293-
<input type="text" id="key-search" placeholder="Filter keys..." style="margin: 0; padding: 0.3rem; font-size: 0.8rem; width: 120px;">
318+
<input type="text" id="key-search" placeholder="Filter keys..."
319+
style="margin: 0; padding: 0.3rem; font-size: 0.8rem; width: 120px;">
294320
</div>
295321
<div id="keys-list">
296322
<!-- Keys will be loaded here -->
@@ -441,7 +467,7 @@ <h3 style="margin-top: 0;">Cluster Statistics</h3>
441467
try {
442468
const keys = await API.getKeys(currentTable);
443469
renderKeys(keys);
444-
470+
445471
keySearch.oninput = (e) => {
446472
const filter = e.target.value.toLowerCase();
447473
const filtered = keys.filter(k => k.toLowerCase().includes(filter));
@@ -467,17 +493,27 @@ <h3 style="margin-top: 0;">Cluster Statistics</h3>
467493
document.querySelectorAll('.key-item').forEach(el => {
468494
el.classList.toggle('active', el.textContent === key);
469495
});
470-
496+
471497
try {
472498
const record = await API.getRecord(currentTable, key);
473499
currentData = record;
474500
jsonEditor.value = JSON.stringify(record.value, null, 4);
475501
currentKeyNameDisp.textContent = key;
476-
versionBadge.textContent = `Version: ${record.version}`;
502+
versionBadge.textContent = `Last Updated: ${new Date(record.timestamp).toLocaleString()}`;
477503
metadataView.innerHTML = `
478504
<div>Owner: ${record.owner}</div>
479-
<div>Timestamp: ${new Date(record.timestamp).toLocaleString()}</div>
480-
<div>Raw Version: ${record.version}</div>
505+
506+
<div class="vector-clock-wrapper">
507+
<span class="vc-label">Vector Clock:</span>
508+
<div class="vc-badges">
509+
${Object.entries(record.vector_clock).map(([nodeId, tick]) => `
510+
<span class="vc-badge">
511+
<span class="vc-node">${nodeId}</span>
512+
<span class="vc-tick">${tick}</span>
513+
</span>
514+
`).join('')}
515+
</div>
516+
</div>
481517
`;
482518
noRecordSelected.classList.add('hidden');
483519
editorContainer.classList.remove('hidden');
@@ -531,4 +567,5 @@ <h3 style="margin-top: 0;">Cluster Statistics</h3>
531567
init();
532568
</script>
533569
</body>
534-
</html>
570+
571+
</html>

0 commit comments

Comments
 (0)