92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
|
import Caprover, { Application } from "../services/Caprover";
|
||
|
|
import Layout, { html } from "../ui/Layout";
|
||
|
|
|
||
|
|
const OLD_PERIOD_IN_DAYS = 60;
|
||
|
|
|
||
|
|
const ApplicationOverview = (application: Application) => {
|
||
|
|
const deployedAt = application.lastDeployedAt.toLocaleDateString("fr-FR");
|
||
|
|
return html`<tr>
|
||
|
|
<td>${application.name}</td>
|
||
|
|
<td>
|
||
|
|
<details>
|
||
|
|
<summary>
|
||
|
|
<code>${application.imageName}</code>
|
||
|
|
</summary>
|
||
|
|
<pre style="user-select: all;">${application.toString()}</pre>
|
||
|
|
</details>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
${application.isOlderThan(OLD_PERIOD_IN_DAYS)
|
||
|
|
? `<mark>${deployedAt}</mark>`
|
||
|
|
: deployedAt}
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
${application.dockerImage
|
||
|
|
? `<a href="${application.dockerImage.hubUrl}/tags">
|
||
|
|
<img height="32" width="32" src="https://cdn.simpleicons.org/docker" alt="Docker hub"/>
|
||
|
|
</a>`
|
||
|
|
: ""}
|
||
|
|
</td>
|
||
|
|
</tr> `;
|
||
|
|
};
|
||
|
|
|
||
|
|
type Sort = { field: string; order: "asc" | "desc" };
|
||
|
|
|
||
|
|
const Page = (applications: Application[], currentSort: Sort) => {
|
||
|
|
const sortLink = (field: string, title: string) => {
|
||
|
|
let url = `?sort=${field}`;
|
||
|
|
let className = "";
|
||
|
|
if (currentSort.field === field) {
|
||
|
|
className = "current";
|
||
|
|
title += currentSort.order === "asc" ? " ▲" : " ▼";
|
||
|
|
url += `&order=${currentSort.order === "asc" ? "desc" : "asc"}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
return `<a href="${url}" class="${className}">${title}</a>`;
|
||
|
|
};
|
||
|
|
|
||
|
|
return html`<div>
|
||
|
|
<h1>Applications</h1>
|
||
|
|
|
||
|
|
<a href="/applications/update" class="button">Update applications now!</a>
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>${sortLink("name", "Name")}</th>
|
||
|
|
<th>Deployment</th>
|
||
|
|
<th>${sortLink("deployed", "Last deployed")}</th>
|
||
|
|
<th>Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
${applications.map((app) => ApplicationOverview(app)).join("")}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>`;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default async (req: Request, caprover: Caprover): Promise<Response> => {
|
||
|
|
const applications = await caprover.getApps();
|
||
|
|
|
||
|
|
const sort: Sort = {
|
||
|
|
field: new URL(req.url).searchParams.get("sort") ?? "name",
|
||
|
|
order:
|
||
|
|
new URL(req.url).searchParams.get("order") === "desc" ? "desc" : "asc",
|
||
|
|
};
|
||
|
|
if (sort.field === "name") {
|
||
|
|
applications.sort((a, b) => a.name.localeCompare(b.name));
|
||
|
|
} else if (sort.field === "deployed") {
|
||
|
|
applications.sort(
|
||
|
|
(a, b) => a.lastDeployedAt.getTime() - b.lastDeployedAt.getTime()
|
||
|
|
);
|
||
|
|
}
|
||
|
|
if (sort.order === "desc") {
|
||
|
|
applications.reverse();
|
||
|
|
}
|
||
|
|
|
||
|
|
return new Response(Layout(Page(applications, sort)), {
|
||
|
|
headers: { "Content-Type": "text/html" },
|
||
|
|
});
|
||
|
|
};
|