f8e9650de3
- Go server with Gin framework - PostgreSQL for metadata storage - MinIO/S3 for artifact storage with SHA256 content addressing - REST API for grove/tree/fruit operations - Web UI for managing artifacts - Docker Compose setup for local development
574 lines
18 KiB
JavaScript
574 lines
18 KiB
JavaScript
// Orchard Web UI
|
|
|
|
const API_BASE = '/api/v1';
|
|
|
|
// State
|
|
let currentGrove = null;
|
|
let currentTree = null;
|
|
|
|
// Initialize
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
setupNavigation();
|
|
loadGroves();
|
|
});
|
|
|
|
// Navigation
|
|
function setupNavigation() {
|
|
document.querySelectorAll('.nav-link').forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const view = link.dataset.view;
|
|
showView(view);
|
|
|
|
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
|
|
link.classList.add('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
function showView(viewName) {
|
|
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
|
document.getElementById(`${viewName}-view`).classList.add('active');
|
|
|
|
// Load data for view
|
|
if (viewName === 'groves') {
|
|
loadGroves();
|
|
} else if (viewName === 'upload') {
|
|
loadGrovesForUpload();
|
|
}
|
|
}
|
|
|
|
// Groves
|
|
async function loadGroves() {
|
|
const container = document.getElementById('groves-list');
|
|
container.innerHTML = '<div class="loading">Loading groves...</div>';
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/groves`);
|
|
const groves = await response.json();
|
|
|
|
if (!groves || groves.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<h3>No groves yet</h3>
|
|
<p>Create your first grove to get started</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = groves.map(grove => `
|
|
<div class="grove-card" onclick="viewGrove('${grove.name}')">
|
|
<h3>
|
|
<span>🌳</span>
|
|
${escapeHtml(grove.name)}
|
|
<span class="badge ${grove.is_public ? 'badge-public' : 'badge-private'}">
|
|
${grove.is_public ? 'Public' : 'Private'}
|
|
</span>
|
|
</h3>
|
|
<p>${escapeHtml(grove.description || 'No description')}</p>
|
|
<div class="meta">
|
|
Created ${formatDate(grove.created_at)}
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
} catch (error) {
|
|
container.innerHTML = `<div class="empty-state"><p>Error loading groves: ${error.message}</p></div>`;
|
|
}
|
|
}
|
|
|
|
async function viewGrove(groveName) {
|
|
currentGrove = groveName;
|
|
document.getElementById('grove-detail-title').textContent = groveName;
|
|
|
|
// Load grove info
|
|
try {
|
|
const response = await fetch(`${API_BASE}/groves/${groveName}`);
|
|
const grove = await response.json();
|
|
|
|
document.getElementById('grove-info').innerHTML = `
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<label>Name</label>
|
|
<span>${escapeHtml(grove.name)}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Visibility</label>
|
|
<span class="badge ${grove.is_public ? 'badge-public' : 'badge-private'}">
|
|
${grove.is_public ? 'Public' : 'Private'}
|
|
</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Created</label>
|
|
<span>${formatDate(grove.created_at)}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Description</label>
|
|
<span>${escapeHtml(grove.description || 'No description')}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} catch (error) {
|
|
console.error('Error loading grove:', error);
|
|
}
|
|
|
|
// Load trees
|
|
await loadTrees(groveName);
|
|
|
|
// Show view
|
|
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
|
document.getElementById('grove-detail-view').classList.add('active');
|
|
}
|
|
|
|
async function loadTrees(groveName) {
|
|
const container = document.getElementById('trees-list');
|
|
container.innerHTML = '<div class="loading">Loading trees...</div>';
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/grove/${groveName}/trees`);
|
|
const trees = await response.json();
|
|
|
|
if (!trees || trees.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<h3>No trees yet</h3>
|
|
<p>Create a tree to store artifacts</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = trees.map(tree => `
|
|
<div class="tree-card" onclick="viewTree('${groveName}', '${tree.name}')">
|
|
<h3>
|
|
<span>🌲</span>
|
|
${escapeHtml(tree.name)}
|
|
</h3>
|
|
<p>${escapeHtml(tree.description || 'No description')}</p>
|
|
<div class="meta">
|
|
Created ${formatDate(tree.created_at)}
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
} catch (error) {
|
|
container.innerHTML = `<div class="empty-state"><p>Error loading trees: ${error.message}</p></div>`;
|
|
}
|
|
}
|
|
|
|
async function viewTree(groveName, treeName) {
|
|
currentGrove = groveName;
|
|
currentTree = treeName;
|
|
|
|
document.getElementById('tree-detail-title').textContent = `${groveName} / ${treeName}`;
|
|
|
|
document.getElementById('tree-info').innerHTML = `
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<label>Grove</label>
|
|
<span>${escapeHtml(groveName)}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<label>Tree</label>
|
|
<span>${escapeHtml(treeName)}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Load grafts
|
|
await loadGrafts(groveName, treeName);
|
|
|
|
// Show view
|
|
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
|
document.getElementById('tree-detail-view').classList.add('active');
|
|
}
|
|
|
|
async function loadGrafts(groveName, treeName) {
|
|
const container = document.getElementById('grafts-list');
|
|
container.innerHTML = '<div class="loading">Loading versions...</div>';
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/grove/${groveName}/${treeName}/grafts`);
|
|
const grafts = await response.json();
|
|
|
|
if (!grafts || grafts.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<h3>No versions yet</h3>
|
|
<p>Upload an artifact to create the first version</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = `
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Tag</th>
|
|
<th>Fruit ID</th>
|
|
<th>Created</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${grafts.map(graft => `
|
|
<tr>
|
|
<td><strong>${escapeHtml(graft.name)}</strong></td>
|
|
<td>
|
|
<span class="hash hash-short" onclick="copyToClipboard('${graft.fruit_id}')" title="Click to copy">
|
|
${graft.fruit_id.substring(0, 16)}...
|
|
</span>
|
|
</td>
|
|
<td>${formatDate(graft.created_at)}</td>
|
|
<td>
|
|
<a href="/api/v1/grove/${groveName}/${treeName}/+/${graft.name}"
|
|
class="btn btn-secondary" download>
|
|
Download
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
} catch (error) {
|
|
container.innerHTML = `<div class="empty-state"><p>Error loading versions: ${error.message}</p></div>`;
|
|
}
|
|
}
|
|
|
|
function backToGrove() {
|
|
if (currentGrove) {
|
|
viewGrove(currentGrove);
|
|
} else {
|
|
showView('groves');
|
|
}
|
|
}
|
|
|
|
// Create Grove
|
|
function showCreateGroveModal() {
|
|
document.getElementById('create-grove-modal').classList.remove('hidden');
|
|
document.getElementById('grove-name').focus();
|
|
}
|
|
|
|
async function createGrove(e) {
|
|
e.preventDefault();
|
|
|
|
const name = document.getElementById('grove-name').value;
|
|
const description = document.getElementById('grove-description').value;
|
|
const isPublic = document.getElementById('grove-public').checked;
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/groves`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name, description, is_public: isPublic })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to create grove');
|
|
}
|
|
|
|
showToast('Grove created successfully!', 'success');
|
|
closeModals();
|
|
loadGroves();
|
|
|
|
// Reset form
|
|
document.getElementById('grove-name').value = '';
|
|
document.getElementById('grove-description').value = '';
|
|
document.getElementById('grove-public').checked = true;
|
|
} catch (error) {
|
|
showToast(error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// Create Tree
|
|
function showCreateTreeModal() {
|
|
document.getElementById('create-tree-modal').classList.remove('hidden');
|
|
document.getElementById('tree-name').focus();
|
|
}
|
|
|
|
async function createTree(e) {
|
|
e.preventDefault();
|
|
|
|
const name = document.getElementById('tree-name').value;
|
|
const description = document.getElementById('tree-description').value;
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/grove/${currentGrove}/trees`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name, description })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to create tree');
|
|
}
|
|
|
|
showToast('Tree created successfully!', 'success');
|
|
closeModals();
|
|
loadTrees(currentGrove);
|
|
|
|
// Reset form
|
|
document.getElementById('tree-name').value = '';
|
|
document.getElementById('tree-description').value = '';
|
|
} catch (error) {
|
|
showToast(error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// Upload
|
|
async function loadGrovesForUpload() {
|
|
const select = document.getElementById('upload-grove');
|
|
select.innerHTML = '<option value="">Loading...</option>';
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/groves`);
|
|
const groves = await response.json();
|
|
|
|
select.innerHTML = '<option value="">Select grove...</option>' +
|
|
(groves || []).map(g => `<option value="${g.name}">${g.name}</option>`).join('');
|
|
} catch (error) {
|
|
select.innerHTML = '<option value="">Error loading groves</option>';
|
|
}
|
|
}
|
|
|
|
async function loadTreesForUpload() {
|
|
const groveName = document.getElementById('upload-grove').value;
|
|
const select = document.getElementById('upload-tree');
|
|
|
|
if (!groveName) {
|
|
select.innerHTML = '<option value="">Select tree...</option>';
|
|
return;
|
|
}
|
|
|
|
select.innerHTML = '<option value="">Loading...</option>';
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/grove/${groveName}/trees`);
|
|
const trees = await response.json();
|
|
|
|
select.innerHTML = '<option value="">Select tree...</option>' +
|
|
(trees || []).map(t => `<option value="${t.name}">${t.name}</option>`).join('');
|
|
} catch (error) {
|
|
select.innerHTML = '<option value="">Error loading trees</option>';
|
|
}
|
|
}
|
|
|
|
function updateFileName() {
|
|
const input = document.getElementById('upload-file');
|
|
const display = document.getElementById('file-name');
|
|
display.textContent = input.files[0]?.name || '';
|
|
}
|
|
|
|
async function uploadArtifact(e) {
|
|
e.preventDefault();
|
|
|
|
const grove = document.getElementById('upload-grove').value;
|
|
const tree = document.getElementById('upload-tree').value;
|
|
const file = document.getElementById('upload-file').files[0];
|
|
const tag = document.getElementById('upload-tag').value;
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
if (tag) formData.append('tag', tag);
|
|
|
|
const resultDiv = document.getElementById('upload-result');
|
|
resultDiv.innerHTML = '<div class="loading">Uploading...</div>';
|
|
resultDiv.classList.remove('hidden', 'success', 'error');
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/grove/${grove}/${tree}/cultivate`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(result.error || 'Upload failed');
|
|
}
|
|
|
|
resultDiv.classList.add('success');
|
|
resultDiv.innerHTML = `
|
|
<h3>Upload Successful!</h3>
|
|
<dl>
|
|
<dt>Fruit ID</dt>
|
|
<dd class="hash">${result.fruit_id}</dd>
|
|
<dt>Size</dt>
|
|
<dd>${formatBytes(result.size)}</dd>
|
|
<dt>Grove</dt>
|
|
<dd>${escapeHtml(result.grove)}</dd>
|
|
<dt>Tree</dt>
|
|
<dd>${escapeHtml(result.tree)}</dd>
|
|
${result.tag ? `<dt>Tag</dt><dd>${escapeHtml(result.tag)}</dd>` : ''}
|
|
</dl>
|
|
<div class="actions">
|
|
<a href="/api/v1/grove/${grove}/${tree}/+/${result.tag || 'fruit:' + result.fruit_id}"
|
|
class="btn btn-primary" download>
|
|
Download Artifact
|
|
</a>
|
|
</div>
|
|
`;
|
|
|
|
showToast('Artifact uploaded successfully!', 'success');
|
|
} catch (error) {
|
|
resultDiv.classList.add('error');
|
|
resultDiv.innerHTML = `<h3>Upload Failed</h3><p>${escapeHtml(error.message)}</p>`;
|
|
showToast(error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function uploadToTree(e) {
|
|
e.preventDefault();
|
|
|
|
const file = document.getElementById('tree-upload-file').files[0];
|
|
const tag = document.getElementById('tree-upload-tag').value;
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
if (tag) formData.append('tag', tag);
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/grove/${currentGrove}/${currentTree}/cultivate`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(result.error || 'Upload failed');
|
|
}
|
|
|
|
showToast('Artifact uploaded successfully!', 'success');
|
|
|
|
// Reload grafts
|
|
loadGrafts(currentGrove, currentTree);
|
|
|
|
// Reset form
|
|
document.getElementById('tree-upload-file').value = '';
|
|
document.getElementById('tree-upload-tag').value = '';
|
|
} catch (error) {
|
|
showToast(error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// Search
|
|
function handleSearchKeyup(e) {
|
|
if (e.key === 'Enter') {
|
|
searchFruit();
|
|
}
|
|
}
|
|
|
|
async function searchFruit() {
|
|
const fruitId = document.getElementById('search-input').value.trim();
|
|
const resultDiv = document.getElementById('search-result');
|
|
|
|
if (!fruitId) {
|
|
showToast('Please enter a fruit ID', 'error');
|
|
return;
|
|
}
|
|
|
|
resultDiv.innerHTML = '<div class="loading">Searching...</div>';
|
|
resultDiv.classList.remove('hidden', 'success', 'error');
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/fruit/${fruitId}`);
|
|
const result = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(result.error || 'Fruit not found');
|
|
}
|
|
|
|
resultDiv.classList.add('success');
|
|
resultDiv.innerHTML = `
|
|
<h3>Fruit Found</h3>
|
|
<dl>
|
|
<dt>Fruit ID</dt>
|
|
<dd class="hash">${result.id}</dd>
|
|
<dt>Original Name</dt>
|
|
<dd>${escapeHtml(result.original_name || 'Unknown')}</dd>
|
|
<dt>Size</dt>
|
|
<dd>${formatBytes(result.size)}</dd>
|
|
<dt>Content Type</dt>
|
|
<dd>${escapeHtml(result.content_type || 'Unknown')}</dd>
|
|
<dt>Created</dt>
|
|
<dd>${formatDate(result.created_at)}</dd>
|
|
<dt>Reference Count</dt>
|
|
<dd>${result.ref_count}</dd>
|
|
</dl>
|
|
`;
|
|
} catch (error) {
|
|
resultDiv.classList.add('error');
|
|
resultDiv.innerHTML = `<h3>Not Found</h3><p>${escapeHtml(error.message)}</p>`;
|
|
}
|
|
}
|
|
|
|
// Modals
|
|
function closeModals() {
|
|
document.querySelectorAll('.modal').forEach(m => m.classList.add('hidden'));
|
|
}
|
|
|
|
// Close modal on outside click
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.classList.contains('modal')) {
|
|
closeModals();
|
|
}
|
|
});
|
|
|
|
// Close modal on Escape
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
closeModals();
|
|
}
|
|
});
|
|
|
|
// Toast notifications
|
|
function showToast(message, type = 'info') {
|
|
const container = document.getElementById('toast-container');
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast ${type}`;
|
|
toast.textContent = message;
|
|
container.appendChild(toast);
|
|
|
|
setTimeout(() => {
|
|
toast.remove();
|
|
}, 3000);
|
|
}
|
|
|
|
// Utilities
|
|
function escapeHtml(str) {
|
|
if (!str) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function formatDate(dateStr) {
|
|
if (!dateStr) return 'Unknown';
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
}
|
|
|
|
function formatBytes(bytes) {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
}
|
|
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
showToast('Copied to clipboard!', 'success');
|
|
});
|
|
}
|