377 lines
18 KiB
HTML
377 lines
18 KiB
HTML
{% extends "dashboard/base.html" %}
|
|
|
|
{% block dashboard_header %}
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900">Pending Tools</h1>
|
|
<p class="mt-1 text-gray-600">Review and approve submitted tools</p>
|
|
</div>
|
|
<a href="{{ url_for('web.admin_dashboard') }}" class="text-sm text-indigo-600 hover:text-indigo-700">← Back to Admin</a>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block dashboard_content %}
|
|
<div class="bg-white rounded-lg border border-gray-200">
|
|
{% if tools %}
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tool</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Publisher</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scrutiny</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Submitted</th>
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{% for tool in tools %}
|
|
<tr id="tool-row-{{ tool.id }}" class="hover:bg-gray-50">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div>
|
|
<button onclick="viewTool({{ tool.id }})" class="text-sm font-medium text-indigo-600 hover:text-indigo-800 hover:underline">
|
|
{{ tool.owner }}/{{ tool.name }}
|
|
</button>
|
|
<div class="text-sm text-gray-500">v{{ tool.version }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="text-sm text-gray-900">{{ tool.publisher_name }}</div>
|
|
<div class="text-xs text-gray-500">{{ tool.category or 'Uncategorized' }}</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
{% if tool.scrutiny_status == 'approved' %}
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
|
Passed
|
|
</span>
|
|
{% elif tool.scrutiny_status == 'pending_review' %}
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
|
|
Warnings
|
|
</span>
|
|
{% else %}
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
|
|
{{ tool.scrutiny_status or 'N/A' }}
|
|
</span>
|
|
{% endif %}
|
|
{% if tool.scrutiny_report and tool.scrutiny_report.findings %}
|
|
<button onclick="toggleFindings({{ tool.id }})" class="ml-2 text-xs text-indigo-600 hover:text-indigo-800">
|
|
({{ tool.scrutiny_report.findings | selectattr('result', 'equalto', 'warning') | list | length }} warnings)
|
|
</button>
|
|
<div id="findings-{{ tool.id }}" class="hidden mt-2 text-xs space-y-1 max-w-md">
|
|
{% for finding in tool.scrutiny_report.findings %}
|
|
{% if finding.result == 'warning' %}
|
|
<div class="p-2 rounded bg-yellow-50">
|
|
<span class="font-medium">{{ finding.check }}:</span>
|
|
<span class="text-yellow-700">{{ finding.message }}</span>
|
|
{% if finding.suggestion %}
|
|
<div class="text-gray-500 italic text-xs">{{ finding.suggestion }}</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ tool.published_at[:10] if tool.published_at else 'Unknown' }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<button onclick="approveTool({{ tool.id }})" class="text-green-600 hover:text-green-900 mr-3">Approve</button>
|
|
<button onclick="rejectTool({{ tool.id }})" class="text-red-600 hover:text-red-900">Reject</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if meta.total_pages > 1 %}
|
|
<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
|
|
<div class="text-sm text-gray-700">
|
|
Page {{ meta.page }} of {{ meta.total_pages }} ({{ meta.total }} total)
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<!-- First/Previous -->
|
|
{% if meta.page > 1 %}
|
|
<a href="?page=1" class="px-2 py-1 border rounded text-sm hover:bg-gray-100" title="First page">«</a>
|
|
<a href="?page={{ meta.page - 1 }}" class="px-3 py-1 border rounded text-sm hover:bg-gray-100">Previous</a>
|
|
{% endif %}
|
|
|
|
<!-- Page numbers -->
|
|
{% set start_page = [1, meta.page - 2] | max %}
|
|
{% set end_page = [meta.total_pages, meta.page + 2] | min %}
|
|
|
|
{% if start_page > 1 %}
|
|
<span class="text-gray-400">...</span>
|
|
{% endif %}
|
|
|
|
{% for p in range(start_page, end_page + 1) %}
|
|
{% if p == meta.page %}
|
|
<span class="px-3 py-1 bg-indigo-600 text-white rounded text-sm">{{ p }}</span>
|
|
{% else %}
|
|
<a href="?page={{ p }}" class="px-3 py-1 border rounded text-sm hover:bg-gray-100">{{ p }}</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if end_page < meta.total_pages %}
|
|
<span class="text-gray-400">...</span>
|
|
{% endif %}
|
|
|
|
<!-- Next/Last -->
|
|
{% if meta.page < meta.total_pages %}
|
|
<a href="?page={{ meta.page + 1 }}" class="px-3 py-1 border rounded text-sm hover:bg-gray-100">Next</a>
|
|
<a href="?page={{ meta.total_pages }}" class="px-2 py-1 border rounded text-sm hover:bg-gray-100" title="Last page">»</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="text-center py-12">
|
|
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<h3 class="mt-2 text-sm font-medium text-gray-900">No pending tools</h3>
|
|
<p class="mt-1 text-sm text-gray-500">All submitted tools have been reviewed.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Tool Detail Modal -->
|
|
<div id="detail-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
|
|
<div class="relative top-10 mx-auto p-6 border max-w-4xl shadow-lg rounded-md bg-white mb-10">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 id="detail-title" class="text-lg font-medium text-gray-900">Tool Details</h3>
|
|
<button onclick="closeDetailModal()" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="detail-loading" class="py-8 text-center text-gray-500">Loading...</div>
|
|
<div id="detail-content" class="hidden">
|
|
<!-- Description -->
|
|
<div class="mb-6">
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">Description</h4>
|
|
<p id="detail-description" class="text-sm text-gray-600"></p>
|
|
</div>
|
|
|
|
<!-- Arguments -->
|
|
<div id="detail-args-section" class="mb-6">
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">Arguments</h4>
|
|
<div id="detail-args" class="bg-gray-50 rounded-md p-3 text-sm font-mono overflow-x-auto"></div>
|
|
</div>
|
|
|
|
<!-- Steps -->
|
|
<div id="detail-steps-section" class="mb-6">
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">Steps</h4>
|
|
<div id="detail-steps" class="space-y-3"></div>
|
|
</div>
|
|
|
|
<!-- README -->
|
|
<div id="detail-readme-section" class="mb-6">
|
|
<h4 class="text-sm font-medium text-gray-700 mb-2">README</h4>
|
|
<div id="detail-readme" class="bg-gray-50 rounded-md p-4 text-sm prose prose-sm max-w-none overflow-auto max-h-64"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex justify-end space-x-3 border-t pt-4">
|
|
<button onclick="closeDetailModal()" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">Close</button>
|
|
<button id="detail-approve-btn" class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700">Approve</button>
|
|
<button id="detail-reject-btn" class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700">Reject</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reject Modal -->
|
|
<div id="reject-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
|
|
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
|
|
<div class="mt-3">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">Reject Tool</h3>
|
|
<textarea id="reject-reason" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Reason for rejection (required)"></textarea>
|
|
<div class="mt-4 flex justify-end space-x-3">
|
|
<button onclick="closeRejectModal()" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">Cancel</button>
|
|
<button onclick="confirmReject()" class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700">Reject</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentToolId = null;
|
|
let currentDetailToolId = null;
|
|
|
|
function toggleFindings(toolId) {
|
|
const el = document.getElementById(`findings-${toolId}`);
|
|
el.classList.toggle('hidden');
|
|
}
|
|
|
|
async function viewTool(toolId) {
|
|
currentDetailToolId = toolId;
|
|
document.getElementById('detail-modal').classList.remove('hidden');
|
|
document.getElementById('detail-loading').classList.remove('hidden');
|
|
document.getElementById('detail-content').classList.add('hidden');
|
|
|
|
try {
|
|
const response = await fetch(`/api/v1/admin/tools/${toolId}`, {
|
|
headers: {
|
|
'Authorization': 'Bearer {{ session.get("auth_token") }}'
|
|
}
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load tool details');
|
|
}
|
|
const result = await response.json();
|
|
const tool = result.data;
|
|
|
|
// Update title
|
|
document.getElementById('detail-title').textContent = `${tool.owner}/${tool.name} v${tool.version}`;
|
|
|
|
// Description
|
|
document.getElementById('detail-description').textContent = tool.description || 'No description';
|
|
|
|
// Arguments
|
|
const argsSection = document.getElementById('detail-args-section');
|
|
const argsDiv = document.getElementById('detail-args');
|
|
if (tool.config.arguments && tool.config.arguments.length > 0) {
|
|
argsSection.classList.remove('hidden');
|
|
argsDiv.innerHTML = tool.config.arguments.map(arg => {
|
|
const required = arg.required ? '<span class="text-red-600">*</span>' : '';
|
|
return `<div class="mb-2"><span class="text-indigo-600">${arg.flag || arg.variable}</span>${required} - ${arg.description || 'No description'}</div>`;
|
|
}).join('');
|
|
} else {
|
|
argsSection.classList.add('hidden');
|
|
}
|
|
|
|
// Steps
|
|
const stepsSection = document.getElementById('detail-steps-section');
|
|
const stepsDiv = document.getElementById('detail-steps');
|
|
if (tool.config.steps && tool.config.steps.length > 0) {
|
|
stepsSection.classList.remove('hidden');
|
|
stepsDiv.innerHTML = tool.config.steps.map((step, idx) => {
|
|
let content = '';
|
|
if (step.type === 'prompt') {
|
|
content = `<div class="text-xs text-gray-500 mb-1">Prompt Step</div>
|
|
<pre class="bg-white p-2 rounded border text-xs overflow-x-auto whitespace-pre-wrap">${escapeHtml(step.content || '')}</pre>`;
|
|
} else if (step.type === 'code') {
|
|
content = `<div class="text-xs text-gray-500 mb-1">Code Step${step.output_var ? ` → ${step.output_var}` : ''}</div>
|
|
<pre class="bg-gray-900 text-green-400 p-2 rounded text-xs overflow-x-auto"><code>${escapeHtml(step.code || '')}</code></pre>`;
|
|
} else {
|
|
content = `<div class="text-xs text-gray-500">${step.type} step</div>`;
|
|
}
|
|
return `<div class="bg-gray-50 p-3 rounded-md">
|
|
<div class="text-xs font-medium text-gray-700 mb-2">Step ${idx + 1}</div>
|
|
${content}
|
|
</div>`;
|
|
}).join('');
|
|
} else {
|
|
stepsSection.classList.add('hidden');
|
|
}
|
|
|
|
// README
|
|
const readmeSection = document.getElementById('detail-readme-section');
|
|
const readmeDiv = document.getElementById('detail-readme');
|
|
if (tool.readme) {
|
|
readmeSection.classList.remove('hidden');
|
|
readmeDiv.innerHTML = `<pre class="whitespace-pre-wrap text-xs">${escapeHtml(tool.readme)}</pre>`;
|
|
} else {
|
|
readmeSection.classList.add('hidden');
|
|
}
|
|
|
|
// Wire up approve/reject buttons
|
|
document.getElementById('detail-approve-btn').onclick = () => {
|
|
closeDetailModal();
|
|
approveTool(toolId);
|
|
};
|
|
document.getElementById('detail-reject-btn').onclick = () => {
|
|
closeDetailModal();
|
|
rejectTool(toolId);
|
|
};
|
|
|
|
document.getElementById('detail-loading').classList.add('hidden');
|
|
document.getElementById('detail-content').classList.remove('hidden');
|
|
} catch (error) {
|
|
console.error('Error loading tool:', error);
|
|
document.getElementById('detail-loading').textContent = 'Error loading tool details';
|
|
}
|
|
}
|
|
|
|
function closeDetailModal() {
|
|
document.getElementById('detail-modal').classList.add('hidden');
|
|
currentDetailToolId = null;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
async function approveTool(toolId) {
|
|
if (!confirm('Approve this tool?')) return;
|
|
try {
|
|
const response = await fetch(`/api/v1/admin/tools/${toolId}/approve`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': 'Bearer {{ session.get("auth_token") }}',
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
if (response.ok) {
|
|
const row = document.getElementById(`tool-row-${toolId}`);
|
|
if (row) row.remove();
|
|
location.reload();
|
|
} else {
|
|
const data = await response.json();
|
|
alert(data.error?.message || 'Failed to approve tool');
|
|
}
|
|
} catch (error) {
|
|
console.error('Approve error:', error);
|
|
alert('Error: ' + (error.message || 'Unknown error occurred'));
|
|
}
|
|
}
|
|
|
|
function rejectTool(toolId) {
|
|
currentToolId = toolId;
|
|
document.getElementById('reject-modal').classList.remove('hidden');
|
|
document.getElementById('reject-reason').value = '';
|
|
}
|
|
|
|
function closeRejectModal() {
|
|
document.getElementById('reject-modal').classList.add('hidden');
|
|
currentToolId = null;
|
|
}
|
|
|
|
async function confirmReject() {
|
|
const reason = document.getElementById('reject-reason').value.trim();
|
|
if (!reason) {
|
|
alert('Rejection reason is required');
|
|
return;
|
|
}
|
|
try {
|
|
const response = await fetch(`/api/v1/admin/tools/${currentToolId}/reject`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': 'Bearer {{ session.get("auth_token") }}',
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ reason })
|
|
});
|
|
if (response.ok) {
|
|
closeRejectModal();
|
|
const row = document.getElementById(`tool-row-${currentToolId}`);
|
|
if (row) row.remove();
|
|
location.reload();
|
|
} else {
|
|
const data = await response.json();
|
|
alert(data.error?.message || 'Failed to reject tool');
|
|
}
|
|
} catch (error) {
|
|
console.error('Reject error:', error);
|
|
alert('Error: ' + (error.message || 'Unknown error occurred'));
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|