78 lines
2.9 KiB
TypeScript
78 lines
2.9 KiB
TypeScript
import { Layout } from "../components/Layout";
|
|
import type { Deployment } from "../index";
|
|
|
|
interface DeploymentsListProps {
|
|
deployments: Deployment[];
|
|
}
|
|
|
|
function getStatusBadge(status: string): string {
|
|
const statusClass = status === "success" ? "badge-success" :
|
|
status === "failed" ? "badge-failed" :
|
|
status === "pending" ? "badge-pending" :
|
|
"badge-in_progress";
|
|
return `<span class="badge ${statusClass}">${status}</span>`;
|
|
}
|
|
|
|
function formatDate(dateString: string | undefined): string {
|
|
if (!dateString) return "N/A";
|
|
const date = new Date(dateString);
|
|
return date.toLocaleString();
|
|
}
|
|
|
|
function escapeHtml(text: string | undefined): string {
|
|
if (!text) return "";
|
|
return text
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
export function DeploymentsList({ deployments }: DeploymentsListProps): string {
|
|
const content = `
|
|
<div class="card">
|
|
<h2>Deployment History</h2>
|
|
${deployments.length === 0 ?
|
|
"<p>No deployments yet.</p>" :
|
|
`<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Repository</th>
|
|
<th>Branch</th>
|
|
<th>Commit</th>
|
|
<th>Status</th>
|
|
<th>Created At</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${deployments.map((deployment) => `
|
|
<tr>
|
|
<td>${deployment.id}</td>
|
|
<td>${escapeHtml(deployment.repository)}</td>
|
|
<td>${escapeHtml(deployment.branch) || "N/A"}</td>
|
|
<td>
|
|
${deployment.commit_hash ?
|
|
`<code style="font-size: 11px;">${escapeHtml(deployment.commit_hash.substring(0, 7))}</code>` :
|
|
"N/A"}
|
|
</td>
|
|
<td>${getStatusBadge(deployment.status)}</td>
|
|
<td>
|
|
<span class="timestamp">${formatDate(deployment.created_at)}</span>
|
|
</td>
|
|
<td>
|
|
<a href="/deployments/${deployment.id}" class="btn btn-primary" style="font-size: 12px; padding: 6px 12px;">View</a>
|
|
</td>
|
|
</tr>
|
|
`).join("")}
|
|
</tbody>
|
|
</table>`}
|
|
</div>
|
|
`;
|
|
|
|
return Layout({ title: "Deployments", children: content });
|
|
}
|
|
|