fix(status): empty fullQueue on refresh

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

@@ -26,7 +26,7 @@ <h1 class="text-center text-4xl font-extrabold text-maroon">Build Status</h1>
         </button>
     </div>
 
-    @if (currentQueue.length !== 0) {
+    @if (currentQueue.length > 0) {
         <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) {
@@ -68,13 +68,13 @@ <h4 class="text-center text-xl text-mauve">Packages</h4>
     }
 
     @if (currentQueue.length === 0 && lastUpdated !== "loading ... ☕️") {
-        <div class="container my-auto px-5">
-            <h3 class="pb-10 text-center text-xl font-bold text-mauve">There are currently no ongoing builds 😴</h3>
+        <div class="container my-auto px-5 pt-5">
+            <h3 class="pb-5 text-center text-xl font-bold text-mauve">There are currently no ongoing builds 😴</h3>
         </div>
     }
 
     <div>
-        <h3 class="pb-5 pt-10 text-center text-xl font-bold text-mauve">Latest successful deployments</h3>
+        <h3 class="pb-5 pt-5 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,5 +1,5 @@
 import { CAUR_API_URL, CurrentQueue, StatsObject } from "@./shared-lib"
-import { Component } from "@angular/core"
+import { AfterViewInit, Component } from "@angular/core"
 import { Axios } from "axios"
 import { DeployLogComponent } from "../deploy-log/deploy-log.component"
 
@@ -8,30 +8,29 @@ import { DeployLogComponent } from "../deploy-log/deploy-log.component"
     standalone: true,
     imports: [DeployLogComponent],
     templateUrl: "./status.component.html",
-    styleUrl: "./status.component.css",
+    styleUrl: "./status.component.css"
 })
-export class StatusComponent {
-    axios: Axios
+export class StatusComponent implements AfterViewInit {
     currentQueue: CurrentQueue = []
     fullLength = 0
     fullQueue: CurrentQueue = []
     lastUpdated = "loading ... ☕️"
     showFullPackages = false
 
-    constructor() {
-        this.axios = new Axios({
-            baseURL: CAUR_API_URL,
-            timeout: 5000,
-        })
-        void this.updateAll()
+    ngAfterViewInit(): void {
+        this.updateAll()
     }
 
     /*
      * Get the current queue stats from the Chaotic backend
      */
-    async getQueueStats(): Promise<void> {
-        this.axios
-            .get("queue/stats")
+    async getQueueStats(): Promise<CurrentQueue> {
+        const axios = new Axios({
+            baseURL: CAUR_API_URL,
+            timeout: 10000
+        })
+        const fullQueue: CurrentQueue = []
+        axios.get("queue/stats")
             .then((response) => {
                 const currentQueue: StatsObject = JSON.parse(response.data)
                 if (currentQueue.length > 0) {
@@ -42,39 +41,54 @@ export class StatusComponent {
                                 nameWithoutRepo.push(pkg.split("/")[1])
                             }
                         })
-                        this.fullQueue.push({
+                        fullQueue.push({
                             status: Object.keys(currentQueue[index])[0],
                             count: Object.values(currentQueue[index])[0].count,
-                            packages: nameWithoutRepo,
+                            packages: nameWithoutRepo
                         })
                     }
                 }
+
             })
             .catch((err) => {
                 console.error(err)
             })
+        return fullQueue
     }
 
     /**
      * 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("...")
-                }
+    updateAll(): void {
+        this.getQueueStats().then((currentQueue) => {
+            this.fullQueue = currentQueue
+            console.log("full queue", this.fullQueue)
+            let length = 0
+            currentQueue.forEach((queue) => {
+                console.log("individual queue", queue.count)
+                length += queue.count
             })
-        }
+            console.log("full length", length)
+            this.fullLength = length
+
+            // Create a non-referenced copy of the full list. This can likely be done better.
+            console.log("Current queue as passed", currentQueue)
+            const stringified = JSON.stringify(currentQueue)
+            console.log(stringified)
+            this.currentQueue = JSON.parse(stringified)
+            console.log("currentQueue1", this.currentQueue)
+            // If the full list is too long, shorten it.
+            if (this.fullLength >= 50) {
+                this.currentQueue.forEach((queue) => {
+                    if (queue.packages.length > 50) {
+                        queue.packages.splice(49)
+                        queue.packages.push("...")
+                    }
+                })
+            }
+            this.lastUpdated = new Date().toLocaleString("en-GB", { timeZone: "UTC" })
+            console.log("currentQueue2", this.currentQueue)
+        })
     }
 
     /**
@@ -87,13 +101,13 @@ export class StatusComponent {
     /**
      * Replace currentList with fullList. For people who want to display the full list.
      */
-    async showFullList(): Promise<void> {
+    showFullList(): 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.updateAll()
             this.showFullPackages = false
         }
     }

package.json

@@ -69,7 +69,7 @@
         "prettier-plugin-organize-imports": "^3.2.4",
         "prettier-plugin-tailwindcss": "^0.6.4",
         "tailwindcss": "^3.4.4",
-        "ts-jest": "^29.1.4",
+        "ts-jest": "^29.1.5",
         "ts-node": "10.9.1",
         "typescript": "~5.4.5",
         "webpack-cli": "^5.1.4"