fix(status): treat higher package counts better

frontend/src/app/app.component.ts

@@ -9,7 +9,7 @@ import {
     OnInit,
     PLATFORM_ID,
     Renderer2,
-    ViewEncapsulation
+    ViewEncapsulation,
 } from "@angular/core"
 import { RouterLink, RouterLinkActive, RouterOutlet } from "@angular/router"
 import { initFlowbite } from "flowbite"

frontend/src/app/app.config.ts

@@ -1,8 +1,8 @@
+import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http"
 import { ApplicationConfig } from "@angular/core"
 import { provideRouter } from "@angular/router"
 import { provideHighlightOptions } from "ngx-highlightjs"
 import { routes } from "./app.routes"
-import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http"
 
 export const appConfig: ApplicationConfig = {
     providers: [

frontend/src/app/chaotic-attractor/chaotic-attractor.component.ts

@@ -1,5 +1,5 @@
 import { CAUR_HOME_URL, checkIfMobile } from "@./shared-lib"
-import { isPlatformBrowser, NgOptimizedImage } from "@angular/common"
+import { NgOptimizedImage, isPlatformBrowser } from "@angular/common"
 import { Component, Inject, PLATFORM_ID } from "@angular/core"
 import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser"
 
@@ -32,7 +32,7 @@ export class ChaoticAttractorComponent {
      * Open the applet in a new tab.
      */
     openApplet(): void {
-        window.location.href = this.url;
+        window.location.href = this.url
     }
 
     /**

frontend/src/app/deploy-log/deploy-log.component.html

@@ -1,37 +1,33 @@
-<div class="chaotic-container-regular">
-    <ol class="relative">
-        <li class="mb-10 md:px-20">
-            @for (deployment of latestDeployments; track deployment) {
-                <li>
-                    <div
-                        class="items-center justify-between rounded-lg border border-mauve bg-surface0 p-4 shadow-sm sm:flex"
+<ol class="relative">
+    <li class="mb-10 md:px-10">
+        @for (deployment of latestDeployments; track deployment) {
+            <li>
+                <div
+                    class="items-center justify-between rounded-lg border border-mauve bg-surface0 p-4 shadow-sm sm:flex"
+                >
+                    <time class="mb-1 text-xs font-normal text-text sm:order-last sm:mb-0">{{ deployment.date }} </time>
+                    <div class="lex text-sm font-normal text-text"
+                        >Deployed <a class="text-maroon">{{ deployment.name }}</a> to
+                        <span class="font-semibold text-red">{{ deployment.repo }}</span></div
                     >
-                        <time class="mb-1 text-xs font-normal text-text sm:order-last sm:mb-0">{{
-                            deployment.date
-                        }}</time>
-                        <div class="lex text-sm font-normal text-text"
-                            >Deployed <a class="text-maroon">{{ deployment.name }}</a> to
-                            <span class="font-semibold text-red">{{ deployment.repo }}</span></div
-                        >
-                    </div>
-                </li>
-            }
-        </li>
-    </ol>
-    <div class="container mx-auto my-5 items-center">
-        <button
-            class="hover:chaotic-grow-l mr-2.5 rounded-lg bg-maroon px-5 py-2.5 text-base text-sm font-medium hover:bg-mauve focus:outline-none"
-            (click)="checkNewDeployments()"
-            type="button"
-        >
-            Refresh
-        </button>
-        <button
-            class="hover:chaotic-grow-l ml-2.5 rounded-lg bg-maroon px-5 py-2.5 text-base text-sm font-medium hover:bg-mauve focus:outline-none"
-            (click)="headToFullDeployments()"
-            type="button"
-        >
-            View more
-        </button>
-    </div>
+                </div>
+            </li>
+        }
+    </li>
+</ol>
+<div class="container mx-auto my-5 items-center">
+    <button
+        (click)="checkNewDeployments()"
+        class="hover:chaotic-grow-l mr-2.5 rounded-lg bg-maroon px-5 py-2.5 text-base text-sm font-medium hover:bg-mauve focus:outline-none"
+        type="button"
+    >
+        Refresh deploy list
+    </button>
+    <button
+        (click)="headToFullDeployments()"
+        class="hover:chaotic-grow-l ml-2.5 rounded-lg bg-maroon px-5 py-2.5 text-base text-sm font-medium hover:bg-mauve focus:outline-none"
+        type="button"
+    >
+        View full deploy log
+    </button>
 </div>

frontend/src/app/status/status.component.html

@@ -4,15 +4,38 @@ <h1 class="text-center text-4xl font-extrabold text-maroon">Build Status</h1>
         <p class="my-4 px-10 text-center text-lg text-text"
             >This page shows the status of the Chaotic-AUR infrastructure.</p
         >
-        <p class="my-4 px-10 text-center text-lg text-text">Last updated: {{ lastUpdated }}</p>
+        <p class="my-4 px-10 text-center text-lg text-text"
+            >Last updated: <a class="text-maroon">{{ lastUpdated }}</a>
+        </p>
+    </div>
+
+    <div class="container mx-auto my-5 items-center">
+        <button
+            (click)="updateAll()"
+            class="hover:chaotic-grow-l mr-2.5 rounded-lg bg-maroon px-5 py-2.5 text-base text-sm font-medium hover:bg-mauve focus:outline-none"
+            type="button"
+        >
+            Refresh status
+        </button>
+        <button
+            (click)="headToFullDeployments()"
+            class="hover:chaotic-grow-l ml-2.5 rounded-lg bg-maroon px-5 py-2.5 text-base text-sm font-medium hover:bg-mauve focus:outline-none"
+            type="button"
+        >
+            Full deploy log
+        </button>
     </div>
 
     @if (currentQueue.length !== 0) {
-        <div class="chaotic-container-regular pt-5">
-            <h3 class="pb-10 pt-5 text-center text-2xl font-bold text-maroon">Current queue stats</h3>
+        <div class="md:px-10 pt-5">
+            <h3 class="py-5 text-center text-xl font-bold text-mauve">Current queue stats</h3>
             @for (queue of currentQueue; track queue) {
-                <div class="my-3 grid grid-cols-1 gap-x-0 md:grid-cols-3">
-                    <div class="place-self-auto rounded-t-xl bg-surface0 p-4 md:rounded-l-2xl md:rounded-r-none">
+                <div
+                    class="my-3 grid grid-cols-1 gap-x-0 md:grid-cols-3 border border-mauve bg-surface0 rounded-lg shadow-sm"
+                >
+                    <div
+                        class="place-self-auto rounded-t-xl border-mauve bg-surface0 p-4 md:rounded-l-2xl md:rounded-r-none"
+                    >
                         <h4 class="text-center text-2xl text-mauve">Status</h4>
                         <p class="my-2 text-center text-text">{{ queue.status }}</p>
                     </div>
@@ -32,37 +55,26 @@ <h4 class="text-center text-xl text-mauve">Packages</h4>
                     </div>
                 </div>
             }
-        </div>
-    }
-    @if (currentPackages.length > 0) {
-        <div class="chaotic-container-regular pt-5">
-            <h3 class="py-5 text-center text-2xl font-bold text-maroon">Current queued package information</h3>
-
-            @for (pkg of currentPackages; track pkg) {
-                <div class="mx-auto my-3 grid grid-cols-1 gap-x-0 md:grid-cols-3">
-                    <div class="place-self-auto rounded-t-2xl bg-surface0 p-4 md:rounded-l-2xl md:rounded-r-none">
-                        <h4 class="text-center text-xl text-mauve">Name</h4>
-                        <p class="my-2 text-center text-text">{{ pkg.name }}</p>
-                    </div>
-                    <div class="bg-surface0 p-4">
-                        <h4 class="text-center text-xl text-mauve">Queued at</h4>
-                        <p class="my-2 text-center text-text">{{ pkg.time }}</p>
-                    </div>
-                    <div class="rounded-b-2xl bg-surface0 p-4 md:rounded-l-none md:rounded-r-2xl">
-                        <h4 class="text-center text-xl text-mauve">Target repo</h4>
-                        <div class="my-2 grid grid-cols-1 gap-5">
-                            <p class="text-s text-center text-text">{{ pkg.srcrepo }}</p>
-                        </div>
-                    </div>
-                </div>
+            @if (fullLength > 50) {
+                <button
+                    (click)="showFullList()"
+                    class="hover:chaotic-grow-l ml-2.5 rounded-lg bg-maroon px-5 py-2.5 text-base text-sm font-medium hover:bg-mauve focus:outline-none"
+                    type="button"
+                >
+                    {{ showFullPackages ? "Hide full list" : "Show full list" }}
+                </button>
             }
         </div>
     }
-    @if (currentQueue.length === 0) {
+
+    @if (currentQueue.length === 0 && lastUpdated !== "loading ... ☕️") {
         <div class="container my-auto px-5">
-            <h3 class="py-10 text-center text-xl font-bold text-mauve">There are currently no ongoing builds 😴</h3>
+            <h3 class="pb-10 text-center text-xl font-bold text-mauve">There are currently no ongoing builds 😴</h3>
         </div>
     }
 
-    <app-deploy-log></app-deploy-log>
+    <div>
+        <h3 class="pb-5 pt-10 text-center text-xl font-bold text-mauve">Latest successful deployments</h3>
+        <app-deploy-log></app-deploy-log>
+    </div>
 </div>

frontend/src/app/status/status.component.ts

@@ -1,4 +1,4 @@
-import { CAUR_API_URL, CurrentPackages, CurrentQueue, PackagesObject, StatsObject } from "@./shared-lib"
+import { CAUR_API_URL, CurrentQueue, StatsObject } from "@./shared-lib"
 import { Component } from "@angular/core"
 import { Axios } from "axios"
 import { DeployLogComponent } from "../deploy-log/deploy-log.component"
@@ -11,30 +11,24 @@ import { DeployLogComponent } from "../deploy-log/deploy-log.component"
     styleUrl: "./status.component.css",
 })
 export class StatusComponent {
-    currentPackages: CurrentPackages = []
-    currentQueue: CurrentQueue = []
-    currentMetrics = {
-        database_queue: {
-            completed: 0,
-            failed: 0,
-        },
-        builder_queue: {
-            completed: 0,
-            failed: 0,
-        },
-    }
-    lastUpdated: string
     axios: Axios
+    currentQueue: CurrentQueue = []
+    fullLength = 0
+    fullQueue: CurrentQueue = []
+    lastUpdated = "loading ... ☕️"
+    showFullPackages = false
 
     constructor() {
         this.axios = new Axios({
             baseURL: CAUR_API_URL,
             timeout: 5000,
         })
-        this.lastUpdated = new Date().toLocaleString("en-GB", { timeZone: "UTC" })
         void this.updateAll()
     }
 
+    /*
+     * Get the current queue stats from the Chaotic backend
+     */
     async getQueueStats(): Promise<void> {
         this.axios
             .get("queue/stats")
@@ -48,59 +42,59 @@ export class StatusComponent {
                                 nameWithoutRepo.push(pkg.split("/")[1])
                             }
                         })
-                        this.currentQueue.push({
+                        this.fullQueue.push({
                             status: Object.keys(currentQueue[index])[0],
                             count: Object.values(currentQueue[index])[0].count,
                             packages: nameWithoutRepo,
                         })
                     }
                 }
             })
-            .catch((error: any) => {
-                console.error(error)
+            .catch((err) => {
+                console.error(err)
             })
     }
 
-    async getPackageStats(): Promise<void> {
-        this.axios
-            .get("queue/packages")
-            .then((response) => {
-                const currentPackages: PackagesObject = JSON.parse(response.data)
-                if (currentPackages.length > 0) {
-                    for (const index in currentPackages) {
-                        const pkgTime = new Date(Object.values(currentPackages[index])[0].timestamp).toLocaleString(
-                            "en-GB",
-                            { timeZone: "UTC" },
-                        )
-                        this.currentPackages.push({
-                            name: Object.keys(currentPackages[index])[0],
-                            arch: Object.values(currentPackages[index])[0].arch,
-                            srcrepo: Object.values(currentPackages[index])[0].srcrepo,
-                            time: pkgTime,
-                        })
-                    }
+    /**
+     * Update all stats while ensuring the list of packages is not too huge.
+     */
+    async updateAll(): Promise<void> {
+        await this.getQueueStats()
+        this.lastUpdated = new Date().toLocaleString("en-GB", { timeZone: "UTC" })
+
+        // Create a non-referenced copy of the full list. This can likely be done better.
+        this.currentQueue = JSON.parse(JSON.stringify(this.fullQueue))
+        this.fullQueue.forEach((item) => (this.fullLength += item.count))
+
+        // If the full list is too long, shorten it.
+        if (this.fullLength !== undefined && this.fullLength >= 50) {
+            this.currentQueue.forEach((queue) => {
+                if (queue.packages.length > 50) {
+                    queue.packages.splice(49)
+                    queue.packages.push("...")
                 }
             })
-            .catch((error: any) => {
-                console.error(error)
-            })
+        }
     }
 
-    async updateAll(): Promise<void> {
-        await this.getMetrics()
-        await this.getQueueStats()
-        await this.getPackageStats()
-        this.lastUpdated = new Date().toLocaleString("en-GB", { timeZone: "UTC" })
+    /**
+     * Redirect to the full deployment log.
+     */
+    headToFullDeployments(): void {
+        window.location.href = "./deploy-log"
     }
 
-    async getMetrics(): Promise<void> {
-        this.axios
-            .get("queue/metrics")
-            .then((response) => {
-                this.currentMetrics = JSON.parse(response.data)
-            })
-            .catch((error: any) => {
-                console.error(error)
-            })
+    /**
+     * Replace currentList with fullList. For people who want to display the full list.
+     */
+    async showFullList(): Promise<void> {
+        // Create a non-referenced copy of the full list. This can likely be done better.
+        if (!this.showFullPackages) {
+            this.currentQueue = JSON.parse(JSON.stringify(this.fullQueue))
+            this.showFullPackages = true
+        } else {
+            await this.updateAll()
+            this.showFullPackages = false
+        }
     }
 }