UI: Add git commit hash and age to status bar

This commit is contained in:
2025-12-24 00:03:24 +11:00
parent e4848a6e56
commit 9f3a914d0f
4 changed files with 92 additions and 1 deletions

View File

@@ -13,7 +13,12 @@ class DatabaseStatusMonitor {
detailsPanel: document.getElementById('dbStatusDetails'),
errorBanner: document.getElementById('sqlErrorBanner'),
errorMessage: document.getElementById('sqlErrorMessage'),
errorDetails: document.getElementById('sqlErrorDetails')
errorDetails: document.getElementById('sqlErrorDetails'),
version: {
container: document.getElementById('gitVersion'),
hash: document.getElementById('commitHash'),
age: document.getElementById('commitAge')
}
};
this.logs = [];
this.maxLogs = 50;
@@ -289,10 +294,37 @@ class DatabaseStatusMonitor {
}
}
async fetchVersion() {
try {
const response = await fetch('/api/version');
const data = await response.json();
if (data.hash && this.elements.version.container) {
this.elements.version.container.style.display = 'flex';
this.elements.version.hash.textContent = data.hash;
// Calculate age
const now = Math.floor(Date.now() / 1000);
const diff = now - data.timestamp;
let ageText = '';
if (diff < 60) ageText = 'just now';
else if (diff < 3600) ageText = `${Math.floor(diff / 60)}m ago`;
else if (diff < 86400) ageText = `${Math.floor(diff / 3600)}h ago`;
else ageText = `${Math.floor(diff / 86400)}d ago`;
this.elements.version.age.textContent = ageText;
}
} catch (e) {
console.warn('Failed to fetch version:', e);
}
}
start() {
// Initial check
this.addLog('Database status monitor started', 'success');
this.checkStatus();
this.fetchVersion();
// Set up periodic checks
this.intervalId = setInterval(() => {

View File

@@ -297,6 +297,13 @@
Retry
</button>
</div>
<div class="db-status-item version-container">
<div class="version-pill" id="gitVersion" title="Git Commit Version" style="display: none;">
<span class="commit-hash" id="commitHash"></span>
<span class="version-separator"></span>
<span class="commit-age" id="commitAge"></span>
</div>
</div>
</div>
<!-- Database Status Details (for testing phase) -->

View File

@@ -6,6 +6,19 @@ const path = require('path');
const { initializeDatabase, db, pool } = require('./database');
const GameManager = require('./gameManager');
const { execSync } = require('child_process');
// Capture Git Version Info at Startup
let gitVersion = { hash: 'dev', timestamp: Date.now() / 1000 };
try {
const hash = execSync('git log -1 --format=%h').toString().trim();
const timestamp = parseInt(execSync('git log -1 --format=%ct').toString().trim());
gitVersion = { hash, timestamp };
console.log(`📦 Version: ${hash} (${new Date(timestamp * 1000).toISOString()})`);
} catch (e) {
console.warn('⚠️ Failed to get git version:', e.message);
}
const app = express();
const server = http.createServer(app);
const io = socketIO(server, {
@@ -27,6 +40,11 @@ app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
});
// Version Endpoint
app.get('/api/version', (req, res) => {
res.json(gitVersion);
});
// Database health check endpoint with detailed diagnostics
app.get('/api/db-status', async (req, res) => {
const startTime = Date.now();

View File

@@ -1350,3 +1350,37 @@ body {
color: white;
border-color: rgba(255, 255, 255, 0.2);
}
/* Version Pill in Status Bar */
.version-container {
margin-left: auto;
padding-left: 1rem;
border-left: 1px solid var(--border-light);
}
.version-pill {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.05);
padding: 0.25rem 0.75rem;
border-radius: 12px;
border: 1px solid var(--border-light);
font-family: monospace;
font-size: 0.8rem;
color: var(--text-secondary);
}
.commit-hash {
color: #8b5cf6; /* Violet */
font-weight: 600;
}
.version-separator {
color: var(--text-muted);
font-size: 0.6rem;
}
.commit-age {
color: var(--text-muted);
}