feat(caprover): allow to trigger an application update

+ added test coverage

routes/applications.ts

@@ -1,3 +1,5 @@
+import AppQueries from "../domain/AppQueries";
+import { UpdateDefinition } from "../domain/projections/ApplicationUpdates";
 import Caprover, { Application } from "../services/Caprover";
 import Layout, { html } from "../ui/Layout";
 
@@ -26,13 +28,44 @@ const ApplicationOverview = (application: Application) => {
           <img height="32" width="32" src="https://cdn.simpleicons.org/docker" alt="Docker hub"/>
         </a>`
         : ""}
+      <a href="/applications/update?name=${application.name}">
+        <img
+          src="https://s2.svgbox.net/materialui.svg?ic=update&color=000"
+          width="32"
+          height="32"
+          title="Update"
+      /></a>
     </td>
   </tr> `;
 };
 
+const Pending = (pendingUpdates: UpdateDefinition[]) => {
+  if (pendingUpdates.length === 0) {
+    return "";
+  }
+
+  return html`<div>
+    <h2>Pending updates (${pendingUpdates.length})</h2>
+    <ul>
+      ${pendingUpdates
+        .map((update) => {
+          return html`<li>
+            <a href="/applications/update?name=${update.id}">${update.id}</a> ->
+            ${update.newVersion}
+          </li>`;
+        })
+        .join("")}
+    </ul>
+  </div>`;
+};
+
 type Sort = { field: string; order: "asc" | "desc" };
 
-const Page = (applications: Application[], currentSort: Sort) => {
+const Page = (
+  applications: Application[],
+  currentSort: Sort,
+  pendingUpdates: UpdateDefinition[]
+) => {
   const sortLink = (field: string, title: string) => {
     let url = `?sort=${field}`;
     let className = "";
@@ -50,6 +83,9 @@ const Page = (applications: Application[], currentSort: Sort) => {
 
     <a href="/applications/update" class="button">Update applications now!</a>
 
+    ${Pending(pendingUpdates)}
+
+    <h2>All applications (${applications.length})</h2>
     <table>
       <thead>
         <tr>
@@ -66,7 +102,11 @@ const Page = (applications: Application[], currentSort: Sort) => {
   </div>`;
 };
 
-export default async (req: Request, caprover: Caprover): Promise<Response> => {
+export default async (
+  req: Request,
+  caprover: Caprover,
+  queries: AppQueries
+): Promise<Response> => {
   const applications = await caprover.getApps();
 
   const sort: Sort = {
@@ -85,7 +125,9 @@ export default async (req: Request, caprover: Caprover): Promise<Response> => {
     applications.reverse();
   }
 
-  return new Response(Layout(Page(applications, sort)), {
+  const pendingUpdates = queries.pendingApplicationUpdates();
+
+  return new Response(Layout(Page(applications, sort, pendingUpdates)), {
     headers: { "Content-Type": "text/html" },
   });
 };

routes/applications.update.ts

@@ -79,7 +79,7 @@ export default async (
 ): Promise<Response> => {
   if (req.method === "POST") {
     const body = await req.formData();
-    caprover.updateApplication(
+    await caprover.updateApplication(
       body.get("appName") as string,
       body.get("version") as string
     );
@@ -87,12 +87,15 @@ export default async (
 
   const applications = await caprover.getApps();
 
+  const nameFilter = new URL(req.url).searchParams.get("name");
   const appToUpdate = applications
     .filter((app) => {
       // can we help to update this app?
       return app.dockerImage;
     })
-    .find((app) => app.isOlderThan(30));
+    .find((app) => {
+      return nameFilter ? app.name === nameFilter : app.isOlderThan(30);
+    });
 
   if (!appToUpdate) {
     return new Response(Layout(html`<h1>No application to update 🎉</h1>`), {