feat(caprover): display application logs for apps with pending updates

routes/applications.update.ts

@@ -21,12 +21,23 @@ const UpdateForm = (application: Application, latestVersions: string[]) => {
   </form>`;
 };
 
-const PendingUpdates = (pendingUpdates: UpdateDefinition[]) => {
+const FreeUpdateForm = (application: Application) => {
+  return html`<form method="POST">
+    <input type="hidden" name="appName" value="${application.name}" />
+    <label for="version">
+      Manual version
+      <input name="version" placeholder="hello-world:latest" type="text" />
+    </label>
+    <button type="submit">Update</button>
+  </form>`;
+};
+
+const PendingUpdates = (pendingUpdates: UpdateDefinition[], logs: string) => {
   if (pendingUpdates.length === 0) {
     return "";
   }
 
-  return html`<div>
+  return html`<section>
     <h2>Pending updates</h2>
     <ul>
       ${pendingUpdates
@@ -35,39 +46,52 @@ const PendingUpdates = (pendingUpdates: UpdateDefinition[]) => {
         })
         .join("")}
     </ul>
-  </div>`;
+
+    <pre>${logs}</pre>
+    <button
+      id="refresh"
+      onclick="window.location.replace('#refresh'); window.location.reload();"
+    >
+      Refresh
+    </button>
+  </section>`;
 };
 
 const Page = (
   application: Application,
   latestVersions: string[],
-  pendingUpdates: UpdateDefinition[]
+  pendingUpdates: UpdateDefinition[],
+  logs: string
 ) => {
   return html`<div>
     <h1>Updating ${application.name}</h1>
 
-    ${PendingUpdates(pendingUpdates)}
+    ${PendingUpdates(pendingUpdates, logs)}
 
-    <dl>
-      <dt>Last deployment</dt>
-      <dd>${application.lastDeployedAt.toLocaleString("fr-FR")}</dd>
+    <section>
+      <dl>
+        <dt>Last deployment</dt>
+        <dd>${application.lastDeployedAt.toLocaleString("fr-FR")}</dd>
 
-      <dt>Current version</dt>
-      <dd>
-        ${application.dockerImage
-          ? `<img height="32" width="32" src="https://cdn.simpleicons.org/docker" alt="Docker hub"/> <a href="${application.dockerImage.hubUrl}/tags">
+        <dt>Current version</dt>
+        <dd>
+          ${application.dockerImage
+            ? `<img height="32" width="32" src="https://cdn.simpleicons.org/docker" alt="Docker hub"/> <a href="${application.dockerImage.hubUrl}/tags">
             ${application.dockerImage.name}:${application.dockerImage.tag}
           </a>`
-          : `<code>${application.imageName}</code>… check yourself!`}
-      </dd>
-
-      <dt>Latest versions</dt>
-      <dd>
-        ${latestVersions.length === 0
-          ? "No version found"
-          : UpdateForm(application, latestVersions)}
-      </dd>
-    </dl>
+            : `<code>${application.imageName}</code>… check yourself!`}
+        </dd>
+
+        <dt>Latest versions</dt>
+        <dd>
+          ${latestVersions.length === 0
+            ? "No version found"
+            : UpdateForm(application, latestVersions)}
+        </dd>
+        <dt>Manual update</dt>
+        <dd>${FreeUpdateForm(application)}</dd>
+      </dl>
+    </section>
   </div>`;
 };
 
@@ -108,9 +132,13 @@ export default async (
   );
 
   const pendingUpdates = queries.pendingApplicationUpdates(appToUpdate.name);
+  let logs = "";
+  if (pendingUpdates.length > 0) {
+    logs = await caprover.getLogs(appToUpdate.name);
+  }
 
   return new Response(
-    Layout(Page(appToUpdate, latestVersions, pendingUpdates)),
+    Layout(Page(appToUpdate, latestVersions, pendingUpdates, logs)),
     {
       headers: { "Content-Type": "text/html" },
     }

services/Caprover.test.ts

@@ -134,5 +134,19 @@ describe("Caprover", () => {
         expect(events).toBeArrayOfSize(0);
       });
     });
+
+    describe("getLogs", () => {
+      it("should return the logs of the application when it exists", async () => {
+        const logs = await caprover.getLogs("mysql");
+        expect(logs).toBe("mysql logs");
+      });
+
+      it("should throw an error when the application does not exist", async () => {
+        await expect(
+          caprover.getLogs("unknown")
+          // @ts-ignore toThrowError exists¯\_(ツ)_/¯
+        ).rejects.toThrowError(/Failed to fetch logs for application unknown/);
+      });
+    });
   });
 });

services/Caprover.ts

@@ -79,21 +79,23 @@ class Caprover {
 
   async updateApplication(appName: string, version: string): Promise<void> {
     console.debug("Caprover: Updating application", appName, "to", version);
-    const response = await this.fetch(`/user/apps/appData/${appName}`, {
-      method: "POST",
-      body: JSON.stringify({
-        captainDefinitionContent: JSON.stringify({
-          schemaVersion: 2,
-          imageName: version,
+    try {
+      const response = await this.fetch(`/user/apps/appData/${appName}`, {
+        method: "POST",
+        body: JSON.stringify({
+          captainDefinitionContent: JSON.stringify({
+            schemaVersion: 2,
+            imageName: version,
+          }),
+          gitHash: "",
         }),
-        gitHash: "",
-      }),
-    });
-
-    console.debug("update application response", response);
-    if (response.status !== 100) {
+      });
+      if (response.status !== 100) {
+        throw new Error(response.description);
+      }
+    } catch (error) {
       throw new Error(
-        `Failed to update application ${appName} to ${version}: ${response.description}.`
+        `Failed to update application ${appName} to ${version}: ${error ?? ""}.`
       );
     }
 
@@ -105,6 +107,18 @@ class Caprover {
     );
   }
 
+  async getLogs(appName: string): Promise<string> {
+    console.debug("Caprover: Fetching logs for", appName);
+    const response = await this.fetch(`/user/apps/appData/${appName}/logs`);
+    if (response.status !== 100) {
+      throw new Error(
+        `Failed to fetch logs for application ${appName}: ${response.description}`
+      );
+    }
+
+    return response.data.logs;
+  }
+
   private async authenticate() {
     if (this.authToken) {
       return;

services/mocks/caproverServer.ts

@@ -1,9 +1,4 @@
-import {
-  http,
-  HttpResponse,
-  HttpResponseResolver,
-  PathParams
-} from "msw";
+import { http, HttpResponse, HttpResponseResolver, PathParams } from "msw";
 import { setupServer } from "msw/node";
 import appsFixtures from "./apps.fixtures.json";
 
@@ -97,6 +92,27 @@ const handlers = [
       data: {},
     });
   }),
+  http.get(
+    `${BASE_URI}/user/apps/appData/:name/logs`,
+    withAuth(({ params }) => {
+      const app = appsFixtures.find((app) => app.appName === params.name);
+      if (!app) {
+        return HttpResponse.json({
+          status: 1000,
+          description: `App (${params.name}) could not be found. Make sure that you have created the app.`,
+          data: {},
+        });
+      }
+
+      return HttpResponse.json({
+        status: 100,
+        description: "App runtime logs are retrieved",
+        data: {
+          logs: `${params.name} logs`,
+        },
+      });
+    })
+  ),
 ];
 
 const server = setupServer(...handlers);