feat: Add patchset history and diff support with cvsps integration

- Add cvsps package to Docker dependencies
- Implement patchset retrieval and diff endpoints in API
- Add _run_cvsps_command() helper for cvsps integration
- Enhance file history parsing with log message extraction
- Improve UI with enhanced styling and patchset functionality
This commit is contained in:
Juan José Gutiérrez de Quevedo Pérez 2025-11-21 17:18:55 +01:00
parent c263092c10
commit d3b40ae93f
9 changed files with 660 additions and 26 deletions

125
ui/ui.js
View file

@ -11,12 +11,41 @@ class UIManager {
this.initializeTheme();
}
/**
* Convert a date string to relative format (e.g., "2 hours ago")
* @param {string} dateStr - Date string in format "YYYY/MM/DD HH:MM:SS"
* @returns {string} Relative date string
*/
getRelativeDate(dateStr) {
try {
// Parse the date string (format: "YYYY/MM/DD HH:MM:SS")
const parts = dateStr.match(/(\d{4})\/(\d{2})\/(\d{2})\s+(\d{2}):(\d{2}):(\d{2})/);
if (!parts) return dateStr;
const date = new Date(parts[1], parts[2] - 1, parts[3], parts[4], parts[5], parts[6]);
const now = new Date();
const seconds = Math.floor((now - date) / 1000);
if (seconds < 60) return 'just now';
if (seconds < 3600) return `${Math.floor(seconds / 60)} minute${Math.floor(seconds / 60) > 1 ? 's' : ''} ago`;
if (seconds < 86400) return `${Math.floor(seconds / 3600)} hour${Math.floor(seconds / 3600) > 1 ? 's' : ''} ago`;
if (seconds < 604800) return `${Math.floor(seconds / 86400)} day${Math.floor(seconds / 86400) > 1 ? 's' : ''} ago`;
if (seconds < 2592000) return `${Math.floor(seconds / 604800)} week${Math.floor(seconds / 604800) > 1 ? 's' : ''} ago`;
if (seconds < 31536000) return `${Math.floor(seconds / 2592000)} month${Math.floor(seconds / 2592000) > 1 ? 's' : ''} ago`;
return `${Math.floor(seconds / 31536000)} year${Math.floor(seconds / 31536000) > 1 ? 's' : ''} ago`;
} catch (e) {
return dateStr;
}
}
initializeElements() {
// Views
this.welcomeView = document.getElementById('welcomeView');
this.fileView = document.getElementById('fileView');
this.historyView = document.getElementById('historyView');
this.diffView = document.getElementById('diffView');
this.patchsetView = document.getElementById('patchsetView');
this.patchsetDiffView = document.getElementById('patchsetDiffView');
// File view elements
this.fileName = document.getElementById('fileName');
@ -36,6 +65,15 @@ class UIManager {
this.diffContent = document.getElementById('diffContent');
this.backFromDiffBtn = document.getElementById('backFromDiffBtn');
// Patchset view elements
this.patchsetContent = document.getElementById('patchsetContent');
this.backFromPatchsetBtn = document.getElementById('backFromPatchsetBtn');
this.patchsetsBtn = document.getElementById('patchsetsBtn');
// Patchset diff view elements
this.patchsetDiffContent = document.getElementById('patchsetDiffContent');
this.backFromPatchsetDiffBtn = document.getElementById('backFromPatchsetDiffBtn');
// Tree elements
this.treeContainer = document.getElementById('treeContainer');
@ -122,7 +160,7 @@ class UIManager {
* @param {HTMLElement} view - View to show
*/
showView(view) {
[this.welcomeView, this.fileView, this.historyView, this.diffView].forEach(v => {
[this.welcomeView, this.fileView, this.historyView, this.diffView, this.patchsetView, this.patchsetDiffView].forEach(v => {
if (v) v.classList.add('hidden');
});
if (view) view.classList.remove('hidden');
@ -202,13 +240,13 @@ class UIManager {
const historyHTML = history.map(revision => `
<div class="history-item" data-revision="${revision.revision}">
<div class="history-item-header">
<span class="history-revision">${revision.revision}</span>
<span class="history-date">${revision.date || 'N/A'}</span>
<div class="history-revision">${revision.revision}</div>
<div class="history-log-section">
<div class="history-log">${revision.log ? this.escapeHtml(revision.log) : ''}</div>
${revision.state && revision.state !== 'Exp' ? `<span class="history-state">${revision.state}</span>` : ''}
</div>
<div class="history-author">Author: <strong>${revision.author || 'Unknown'}</strong></div>
<span class="history-state">${revision.state || 'Exp'}</span>
<div class="history-lines">${revision.lines_changed || 'N/A'}</div>
<div class="history-author">${revision.author || 'Unknown'}</div>
<div class="history-date" title="${revision.date || 'N/A'}">${this.getRelativeDate(revision.date) || 'N/A'}</div>
</div>
`).join('');
@ -218,6 +256,10 @@ class UIManager {
// Add click handlers to history items
this.historyContent.querySelectorAll('.history-item').forEach(item => {
item.addEventListener('click', () => {
// Remove active class from all items
this.historyContent.querySelectorAll('.history-item').forEach(i => i.classList.remove('active'));
// Add active class to clicked item
item.classList.add('active');
const revision = item.dataset.revision;
window.app.loadFileAtRevision(this.currentFile, revision);
});
@ -450,6 +492,75 @@ class UIManager {
item.classList.remove('active');
});
}
/**
* Display patchsets
* @param {Array} patchsets - Array of patchset objects
*/
displayPatchsets(patchsets) {
if (!patchsets || patchsets.length === 0) {
this.patchsetContent.innerHTML = '<div class="loading">No patchsets available</div>';
this.showView(this.patchsetView);
return;
}
const patchsetHTML = patchsets.map(ps => `
<div class="patchset-item" data-patchset="${ps.patchset}">
<div class="patchset-number">PatchSet #${ps.patchset}</div>
<div class="patchset-log-section">
<div class="patchset-log">${ps.log ? this.escapeHtml(ps.log) : ''}</div>
${ps.tag && ps.tag !== 'N/A' ? `<span class="patchset-tag">${ps.tag}</span>` : ''}
</div>
<div class="patchset-author">${ps.author || 'Unknown'}</div>
<div class="patchset-date" title="${ps.date || 'N/A'}">${this.getRelativeDate(ps.date) || 'N/A'}</div>
</div>
`).join('');
this.patchsetContent.innerHTML = patchsetHTML;
this.showView(this.patchsetView);
// Add click handlers to patchset items
this.patchsetContent.querySelectorAll('.patchset-item').forEach(item => {
item.addEventListener('click', () => {
// Remove active class from all items
this.patchsetContent.querySelectorAll('.patchset-item').forEach(i => i.classList.remove('active'));
// Add active class to clicked item
item.classList.add('active');
const patchset = item.dataset.patchset;
window.app.showPatchsetDiff(patchset);
});
});
}
/**
* Display patchset diff
* @param {string} diffText - Diff content
*/
displayPatchsetDiff(diffText) {
if (!diffText) {
this.patchsetDiffContent.innerHTML = '<div class="loading">No diff available</div>';
this.showView(this.patchsetDiffView);
return;
}
// Create code element with diff language class
const codeElement = document.createElement('code');
codeElement.className = 'language-diff';
codeElement.textContent = diffText;
const preElement = document.createElement('pre');
preElement.appendChild(codeElement);
this.patchsetDiffContent.innerHTML = '';
this.patchsetDiffContent.appendChild(preElement);
// Apply syntax highlighting
if (window.hljs) {
hljs.highlightElement(codeElement);
}
this.showView(this.patchsetDiffView);
}
}
// Create global UI manager instance