feat(deployments): check for new deployments every 30 seconds

backend/src/metrics/metrics.service.ts

@@ -1,4 +1,4 @@
-import { CACHE_TTL, CAUR_METRICS_URL, parseOutput, SpecificPackageMetrics } from "@./shared-lib"
+import { CACHE_ROUTER_TTL, CAUR_METRICS_URL, parseOutput, SpecificPackageMetrics } from "@./shared-lib"
 import { Cache, CACHE_MANAGER } from "@nestjs/cache-manager"
 import { Inject, Injectable } from "@nestjs/common"
 import { Axios } from "axios"
@@ -31,7 +31,7 @@ export class MetricsService {
                     console.error(err)
                     return []
                 })
-            await this.cacheManager.set(cacheKey, data, CACHE_TTL)
+            await this.cacheManager.set(cacheKey, data, CACHE_ROUTER_TTL)
         }
         return data
     }
@@ -53,7 +53,7 @@ export class MetricsService {
                     console.error(err)
                     return []
                 })
-            await this.cacheManager.set(cacheKey, data, CACHE_TTL)
+            await this.cacheManager.set(cacheKey, data, CACHE_ROUTER_TTL)
         }
         return data
     }
@@ -82,7 +82,7 @@ export class MetricsService {
                     console.error(err)
                     return metrics
                 })
-            await this.cacheManager.set(cacheKey, data, CACHE_TTL)
+            await this.cacheManager.set(cacheKey, data, CACHE_ROUTER_TTL)
         }
         return data
     }
@@ -105,7 +105,7 @@ export class MetricsService {
                     console.error(err)
                     return []
                 })
-            await this.cacheManager.set(cacheKey, data, CACHE_TTL)
+            await this.cacheManager.set(cacheKey, data, CACHE_ROUTER_TTL)
         }
         return data
     }
@@ -129,7 +129,7 @@ export class MetricsService {
                     console.error(err)
                     return []
                 })
-            await this.cacheManager.set(cacheKey, data, CACHE_TTL)
+            await this.cacheManager.set(cacheKey, data, CACHE_ROUTER_TTL)
         }
         return data
     }

backend/src/telegram/telegram.service.ts

@@ -1,4 +1,4 @@
-import { CACHE_TTL, CAUR_DEPLOY_LOG_ID, CAUR_NEWS_ID, TgMessage, TgMessageList } from "@./shared-lib"
+import { CACHE_TELEGRAM_TTL, CAUR_DEPLOY_LOG_ID, CAUR_NEWS_ID, TgMessage, TgMessageList } from "@./shared-lib"
 import { CACHE_MANAGER, Cache } from "@nestjs/cache-manager"
 import { Inject, Injectable, Logger } from "@nestjs/common"
 import { getTdjson } from "prebuilt-tdlib"
@@ -39,7 +39,7 @@ export class TelegramService {
         let data: TgMessage[] | undefined = await this.cacheManager.get(cacheKey)
         if (!data) {
             data = await this.extractMessages(CAUR_NEWS_ID, 30)
-            await this.cacheManager.set(cacheKey, data, CACHE_TTL)
+            await this.cacheManager.set(cacheKey, data, CACHE_TELEGRAM_TTL)
         }
         return data
     }
@@ -54,7 +54,7 @@ export class TelegramService {
         let data: TgMessage[] | undefined = await this.cacheManager.get(cacheKey)
         if (!data) {
             data = await this.extractMessages(CAUR_DEPLOY_LOG_ID, parseInt(amount))
-            await this.cacheManager.set(cacheKey, data, CACHE_TTL)
+            await this.cacheManager.set(cacheKey, data, CACHE_TELEGRAM_TTL)
         }
         return data
     }
@@ -266,7 +266,7 @@ export class TelegramService {
                 }
                 return extractedMessages
             })
-            await this.cacheManager.set(cacheKey, data, CACHE_TTL)
+            await this.cacheManager.set(cacheKey, data, CACHE_TELEGRAM_TTL)
         }
         return data
     }

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

@@ -3,6 +3,7 @@
         <h1 class="text-center text-4xl font-extrabold text-maroon">Deployment log</h1>
         <p class="my-4 px-10 text-center text-lg text-text">Shows the last deployed packages.</p>
         <input
+            (focusout)="getNewAmount()"
             (keyup.enter)="getNewAmount()"
             [(ngModel)]="logAmount"
             class="text-input mx-auto block w-full rounded-lg border border-red bg-surface0 p-4 ps-10 text-sm text-maroon focus:border-red focus:bg-surface1 max-w-md"
@@ -122,4 +123,13 @@ <h1 class="text-center text-4xl font-extrabold text-maroon">Deployment log</h1>
             </li>
         </ol>
     </div>
+    <div
+        class="fixed invisible flex items-center w-full max-w-xs p-4 space-x-4 text-text bg-surface0 divide-x rtl:divide-x-reverse divide-red rounded-lg shadow bottom-5 left-5 space-x"
+        id="toast-deployment"
+        role="alert"
+    >
+        <div class="text-sm font-normal"
+            >New deployment event! <a (click)="headToFullDeployments()" class="text-mauve">Check out.</a></div
+        >
+    </div>
 </div>

frontend/src/app/deploy-log-full/deploy-log-full.component.ts

@@ -1,11 +1,20 @@
-import { DeploymentList, DeploymentType, getDeployments, parseDeployments } from "@./shared-lib"
+import {
+    CACHE_TELEGRAM_TTL,
+    DeploymentList,
+    DeploymentType,
+    getDeployments,
+    headToFullDeployments,
+    parseDeployments,
+    startShortPolling,
+} from "@./shared-lib"
 import { AfterViewInit, Component } from "@angular/core"
 import { FormsModule } from "@angular/forms"
+import { RouterLink } from "@angular/router"
 
 @Component({
     selector: "app-deploy-log-full",
     standalone: true,
-    imports: [FormsModule],
+    imports: [FormsModule, RouterLink],
     templateUrl: "./deploy-log-full.component.html",
     styleUrl: "./deploy-log-full.component.css",
 })
@@ -14,17 +23,36 @@ export class DeployLogFullComponent implements AfterViewInit {
     logAmount: number | undefined
     requestedTooMany = false
     currentType: DeploymentType = DeploymentType.ALL
+    protected readonly headToFullDeployments = headToFullDeployments
 
     async ngAfterViewInit(): Promise<void> {
         void this.updateLogAmount(50)
+
+        // Poll for new deployments every 30 seconds (which is the time the backend caches requests)
+        startShortPolling(CACHE_TELEGRAM_TTL, async () => {
+            await this.getNewAmount()
+        })
     }
 
     async updateLogAmount(amount: number) {
-        this.latestDeployments = parseDeployments(await getDeployments(amount, this.currentType), this.currentType)
+        const newDeployments = parseDeployments(await getDeployments(amount, this.currentType), this.currentType)
+
+        if (newDeployments[0].date !== this.latestDeployments[0].date) {
+            this.latestDeployments = newDeployments
+
+            // Show if we requested too many deployments
+            this.requestedTooMany = this.latestDeployments.length < amount
+            this.constructStrings()
 
-        // Show if we requested too many deployments
-        this.requestedTooMany = this.latestDeployments.length < amount
-        this.constructStrings()
+            // Show a notification for a short time
+            const notification = document.getElementById("toast-deployment")
+            if (notification) {
+                notification.classList.remove("invisible")
+                setTimeout((): void => {
+                    notification.classList.add("invisible")
+                }, 20000)
+            }
+        }
     }
 
     /**

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

@@ -1,4 +1,11 @@
-import { DeploymentList, DeploymentType, getDeployments, parseDeployments } from "@./shared-lib"
+import {
+    CACHE_TELEGRAM_TTL,
+    DeploymentList,
+    DeploymentType,
+    getDeployments,
+    parseDeployments,
+    startShortPolling,
+} from "@./shared-lib"
 import { AfterViewInit, Component } from "@angular/core"
 import { FormsModule } from "@angular/forms"
 import { RouterLink } from "@angular/router"
@@ -18,6 +25,11 @@ export class DeployLogComponent implements AfterViewInit {
             await getDeployments(30, DeploymentType.SUCCESS),
             DeploymentType.SUCCESS,
         )
+
+        // Poll for new deployments every 5 minutes (which is the time the backend caches requests)
+        startShortPolling(CACHE_TELEGRAM_TTL, async () => {
+            await this.checkNewDeployments()
+        })
     }
 
     /**
@@ -28,15 +40,8 @@ export class DeployLogComponent implements AfterViewInit {
             await getDeployments(30, DeploymentType.SUCCESS),
             DeploymentType.SUCCESS,
         )
-        if (newList !== this.latestDeployments) {
+        if (newList[0].date !== this.latestDeployments[0].date) {
             this.latestDeployments = newList
         }
     }
-
-    /**
-     * Redirect to the full deployment log.
-     */
-    headToFullDeployments(): void {
-        window.location.href = "./deploy-log"
-    }
 }

frontend/src/app/news-channel/news-channel.component.ts

@@ -1,4 +1,4 @@
-import { CAUR_TG_API_URL, TgMessageList, checkIfMobile } from "@./shared-lib"
+import { CAUR_TG_API_URL, checkIfMobile, TgMessageList } from "@./shared-lib"
 import { AfterViewInit, Component } from "@angular/core"
 import { Axios } from "axios"
 

frontend/src/app/stats-page/package-search/package-search.component.ts

@@ -25,7 +25,7 @@ export class PackageSearchComponent {
     }
 
     updateDisplay(): void {
-        if (/^[0-9|a-zA-Z]*$/.test(this.searchPackage)) {
+        if (/^[0-9|a-zA-Z-]*$/.test(this.searchPackage)) {
             this.loading = true
             this.getSpecificPackageMetrics().then((result) => {
                 this.packageMetrics = result

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

@@ -1,4 +1,4 @@
-import { CAUR_API_URL, CurrentQueue, StatsObject } from "@./shared-lib"
+import { CAUR_API_URL, CurrentQueue, headToFullDeployments, StatsObject } from "@./shared-lib"
 import { AfterViewInit, Component } from "@angular/core"
 import { Axios } from "axios"
 import { DeployLogComponent } from "../deploy-log/deploy-log.component"
@@ -16,6 +16,7 @@ export class StatusComponent implements AfterViewInit {
     lastUpdated: string | undefined
     loading = true
     showFullPackages = false
+    protected readonly headToFullDeployments = headToFullDeployments
 
     ngAfterViewInit(): void {
         void this.getQueueStats()
@@ -81,13 +82,6 @@ export class StatusComponent implements AfterViewInit {
             })
     }
 
-    /**
-     * Redirect to the full deployment log.
-     */
-    headToFullDeployments(): void {
-        window.location.href = "./deploy-log"
-    }
-
     /**
      * Replace currentList with fullList. For people who want to display the full list.
      */

shared-lib/src/lib/functions.ts

@@ -140,3 +140,21 @@ export async function getDeployments(amount: number, type: DeploymentType): Prom
             console.error(err)
         })
 }
+
+/**
+ * Poll for new deployments.
+ * @param interval
+ * @param func The function to call.
+ */
+export function startShortPolling(interval: any, func: () => void): void {
+    let initialInterval
+    interval = setInterval(func, interval)
+    clearInterval(initialInterval)
+}
+
+/**
+ * Redirect to the full deployment log.
+ */
+export function headToFullDeployments(): void {
+    window.location.href = "./deploy-log"
+}

shared-lib/src/lib/types.ts

@@ -9,10 +9,11 @@ export const CAUR_PRIMARY_KEY = "3056513887B78AEB"
 export const CAUR_TG_API_URL = `${CAUR_BACKEND_URL}/telegram/`
 export const CAUR_DEPLOY_LOG_ID = "-1002151616973"
 export const CAUR_NEWS_ID = "-1001293714071"
-export const CACHE_TTL = 60 * 5 * 1000
+export const CACHE_ROUTER_TTL = 60 * 5 * 1000
 export const CAUR_METRICS_URL = "https://metrics.chaotic.cx/"
 export const CAUR_ALLOWED_CORS = ["https://aur.chaotic.cx", "https://caur-frontend-pages.dev"]
 export const CAUR_BACKEND_PORT = 3000
+export const CACHE_TELEGRAM_TTL = 30 * 1000
 
 export type StatsObject = Record<
     string,