<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MR File Change Report</title>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
table { border-collapse: collapse; width: 100%; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
button { margin-left: 10px; padding: 6px 12px; }
</style>
</head>
<body>
<h2>Generate Merge Request Report</h2>
<label for="branch">Select or Enter Target Branch:</label>
<select id="branch" style="width: 300px;"></select>
<button onclick="runReport()">Run Report</button>
<h3>Results</h3>
<table id="results">
<thead>
<tr>
<th>Project</th>
<th>Title</th>
<th>Files Changed</th>
<th>Lines Added</th>
<th>Lines Deleted</th>
<th>Assignee</th>
<th>Reviewers</th>
<th>Status</th>
<th>Link</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
async function loadBranches() {
const response = await fetch('/branches');
const branches = await response.json();
$('#branch').select2({
placeholder: "Select or type a branch",
tags: true,
data: branches.map(b => ({ id: b, text: b }))
});
}
async function runReport() {
const branch = $('#branch').val();
if (!branch) return alert("Please select or enter a target branch");
const response = await fetch('/run-report', {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ target_branch: branch })
});
const data = await response.json();
const tbody = document.querySelector("#results tbody");
tbody.innerHTML = "";
data.forEach(row => {
const tr = document.createElement("tr");
tr.innerHTML = `
<td>${row.project}</td>
<td>${row.title}</td>
<td>${row.files}</td>
<td>${row.additions}</td>
<td>${row.deletions}</td>
<td>${row.assignee}</td>
<td>${row.reviewers}</td>
<td>${row.status}</td>
<td><a href="${row.link}" target="_blank">View MR</a></td>
`;
tbody.appendChild(tr);
});
}
window.onload = loadBranches;
</script>
</body>
</html>
