feat(status): improve appearence; support idle builder display

chaotic-cx · Oct 5, 2024 · d772677 · d772677
1 parent 5f4b257
commit d772677
Show file tree

Hide file tree

Showing 14 changed files with 184 additions and 136 deletions.
diff --git a/backend/src/app.module.ts b/backend/src/app.module.ts
@@ -1,21 +1,21 @@
 import { CacheModule } from "@nestjs/cache-manager"
 import { MiddlewareConsumer, Module } from "@nestjs/common"
 import { ConfigModule } from "@nestjs/config"
+import { HttpLoggerMiddleware } from "./http-logger/httplogger.middleware"
 import { MetricsController } from "./metrics/metrics.controller"
 import { MetricsService } from "./metrics/metrics.service"
 import { MiscController } from "./misc/misc.controller"
 import { MiscService } from "./misc/misc.service"
 import { TelegramController } from "./telegram/telegram.controller"
 import { TelegramService } from "./telegram/telegram.service"
-import { HttpLoggerMiddleware } from "./http-logger/httplogger.middleware"
 
 @Module({
     imports: [
         ConfigModule.forRoot({ envFilePath: ".env" }),
-        CacheModule.register()
+        CacheModule.register(),
     ],
     controllers: [TelegramController, MetricsController, MiscController],
-    providers: [TelegramService, MetricsService, MiscService]
+    providers: [TelegramService, MetricsService, MiscService],
 })
 export class AppModule {
     configure(consumer: MiddlewareConsumer): void {

diff --git a/backend/src/http-logger/httplogger.middleware.spec.ts b/backend/src/http-logger/httplogger.middleware.spec.ts
@@ -1,7 +1,7 @@
 import { HttpLoggerMiddleware } from "./httplogger.middleware"
 
-describe('HttpLoggerMiddleware', () => {
-  it('should be defined', () => {
-    expect(new HttpLoggerMiddleware()).toBeDefined();
-  });
-});
+describe("HttpLoggerMiddleware", () => {
+    it("should be defined", () => {
+        expect(new HttpLoggerMiddleware()).toBeDefined()
+    })
+})
diff --git a/backend/src/http-logger/httplogger.middleware.ts b/backend/src/http-logger/httplogger.middleware.ts
@@ -1,13 +1,13 @@
-import { Injectable, Logger, NestMiddleware } from "@nestjs/common"
-import { NextFunction, Request, Response } from "express"
+import { Injectable, Logger, type NestMiddleware } from "@nestjs/common"
+import type { NextFunction, Request, Response } from "express"
 
 @Injectable()
 export class HttpLoggerMiddleware implements NestMiddleware {
     private logger: Logger = new Logger("HttpLogger")
 
     use(request: Request, response: Response, next: NextFunction): void {
         // Prepare timing request answer
-        const startAt: [number, number] = process.hrtime();
+        const startAt: [number, number] = process.hrtime()
 
         // Prepare logging request
         setImmediate(async () => {
@@ -25,19 +25,19 @@ export class HttpLoggerMiddleware implements NestMiddleware {
         let body = {}
         const chunks = []
         const oldEnd = response.end
-        response.end = ((chunk: any) => {
+        response.end = (chunk: any) => {
             if (chunk) {
                 chunks.push(Buffer.from(chunk))
             }
             body = Buffer.concat(chunks).toString("utf8")
             return oldEnd.call(response, body)
-        })
+        }
 
         // Log response
         response.on("finish", async () => {
-            const contentLength = response.get('content-length');
-            const diff = process.hrtime(startAt);
-            const responseTime = diff[0] * 1e3 + diff[1] * 1e-6;
+            const contentLength = response.get("content-length")
+            const diff = process.hrtime(startAt)
+            const responseTime = diff[0] * 1e3 + diff[1] * 1e-6
 
             return setTimeout(() => {
                 const responseLog = {

diff --git a/backend/src/metrics/metrics.service.ts b/backend/src/metrics/metrics.service.ts
@@ -1,4 +1,4 @@
-import { CACHE_ROUTER_TTL, CAUR_METRICS_URL, parseOutput, type SpecificPackageMetrics } from "@./shared-lib"
+import { CACHE_ROUTER_TTL, CAUR_METRICS_URL, type SpecificPackageMetrics, parseOutput } from "@./shared-lib"
 import { type Cache, CACHE_MANAGER } from "@nestjs/cache-manager"
 import { Inject, Injectable, Logger } from "@nestjs/common"
 import { Axios } from "axios"
@@ -22,7 +22,7 @@ export class MetricsService {
      */
     async thirtyDayUsers() {
         Logger.debug("thirtyDayUsers requested", "MetricsService")
-        
+
         const cacheKey = "thirtyDayUsers"
         let data = await this.cacheManager.get(cacheKey)
         if (!data) {

diff --git a/backend/src/misc/misc.controller.ts b/backend/src/misc/misc.controller.ts
@@ -1,7 +1,7 @@
 import type { PkgListRetObject } from "@./shared-lib"
 import { CacheInterceptor } from "@nestjs/cache-manager"
 import { Controller, Get, UseInterceptors } from "@nestjs/common"
-import { MiscService } from "./misc.service"
+import type { MiscService } from "./misc.service"
 
 @Controller("misc")
 @UseInterceptors(CacheInterceptor)

diff --git a/backend/src/telegram/telegram.service.ts b/backend/src/telegram/telegram.service.ts
@@ -1,5 +1,5 @@
 import { CACHE_TELEGRAM_TTL, CAUR_DEPLOY_LOG_ID, CAUR_NEWS_ID, type TgMessage, type TgMessageList } from "@./shared-lib"
-import { type Cache, CACHE_MANAGER } from "@nestjs/cache-manager"
+import { CACHE_MANAGER, type Cache } from "@nestjs/cache-manager"
 import { Inject, Injectable, Logger } from "@nestjs/common"
 import { getTdjson } from "prebuilt-tdlib"
 import * as tdl from "tdl"
@@ -257,19 +257,23 @@ export class TelegramService {
     }
 
     private async getTgMessages(cacheKeyId: string, amount: string, startsWith: string): Promise<TgMessageList> {
-            const cacheKey = `${cacheKeyId}-${amount}`
+        const cacheKey = `${cacheKeyId}-${amount}`
         let data: TgMessage[] | undefined = await this.cacheManager.get(cacheKey)
         if (!data) {
-            data = await this.extractMessages(CAUR_DEPLOY_LOG_ID, Number.parseInt(amount), (messages: TgMessageList) => {
-                const extractedMessages: TgMessageList = []
-                for (const message of messages) {
-                    if (!String(message.content).startsWith(startsWith)) {
-                        continue
+            data = await this.extractMessages(
+                CAUR_DEPLOY_LOG_ID,
+                Number.parseInt(amount),
+                (messages: TgMessageList) => {
+                    const extractedMessages: TgMessageList = []
+                    for (const message of messages) {
+                        if (!String(message.content).startsWith(startsWith)) {
+                            continue
+                        }
+                        extractedMessages.push(message)
                     }
-                    extractedMessages.push(message)
-                }
-                return extractedMessages
-            })
+                    return extractedMessages
+                },
+            )
             await this.cacheManager.set(cacheKey, data, CACHE_TELEGRAM_TTL)
         }
         return data

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { CAUR_CACHED_METRICS_URL, loadTheme } from "@./shared-lib"
-import { isPlatformBrowser, NgOptimizedImage } from "@angular/common"
+import { NgOptimizedImage, isPlatformBrowser } from "@angular/common"
 import { HttpClient } from "@angular/common/http"
 import {
     AfterViewInit,
@@ -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"

diff --git a/frontend/src/app/chaotic-attractor/chaotic-attractor.component.ts b/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"
 

diff --git a/frontend/src/app/deploy-log-full/deploy-log-full.component.html b/frontend/src/app/deploy-log-full/deploy-log-full.component.html
@@ -125,9 +125,9 @@ <h1 class="text-center text-4xl font-extrabold text-maroon">Deployment log</h1>
                                 >{{ deployment.date }}
                             </time>
                             <div class="lex text-sm font-normal text-text"
-                                >{{ deployment.string }} <a class="text-maroon">{{ deployment.name }}</a>
-                                from <a class="text-rosewater">{{ deployment.node }}</a>
-                                to <span class="font-semibold text-red">{{ deployment.repo }}</span>
+                                >{{ deployment.string }} <a class="text-maroon">{{ deployment.name }}</a> from
+                                <a class="text-rosewater">{{ deployment.node }}</a> to
+                                <span class="font-semibold text-red">{{ deployment.repo }}</span>
                                 @if (deployment.log) {
                                     - <a class="text-yellow" href="{{ deployment.log }}">view log</a>
                                 }

diff --git a/frontend/src/app/deploy-log/deploy-log.component.html b/frontend/src/app/deploy-log/deploy-log.component.html
@@ -10,8 +10,8 @@
                             >{{ deployment.date }}
                         </time>
                         <div class="lex text-sm font-normal text-text"
-                            >Deployed <a class="text-maroon">{{ deployment.name }}</a>
-                            from <a class="text-rosewater">{{ deployment.node }}</a> to
+                            >Deployed <a class="text-maroon">{{ deployment.name }}</a> from
+                            <a class="text-rosewater">{{ deployment.node }}</a> to
                             <span class="font-semibold text-red">{{ deployment.repo }}</span></div
                         >
                     </div>

diff --git a/frontend/src/app/status/status.component.html b/frontend/src/app/status/status.component.html
@@ -2,15 +2,15 @@
     <div>
         <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
+            >This page shows the status of the Chaotic-AUR infrastructure.</p
         >
         <p class="my-4 px-10 text-center text-lg text-red"
-        >Disclaimer: the data shown here corresponds to our in-progress
+            >Disclaimer: the data shown here corresponds to our in-progress
             <a class="text-mauve" href="https://gitlab.com/chaotic-aur/pkgbuilds">infra 4.0</a>, NOT the live
             Chaotic-AUR repo.</p
         >
         <p class="my-4 px-10 text-center text-lg text-text"
-        >Last updated: <a class="text-maroon">{{ lastUpdated ? lastUpdated : "loading ... ☕️" }}</a>
+            >Last updated: <a class="text-maroon">{{ lastUpdated ? lastUpdated : "loading ... ☕️" }}</a>
         </p>
     </div>
 
@@ -56,45 +56,69 @@ <h1 class="text-center text-4xl font-extrabold text-maroon">Build Status</h1>
     </div>
 
     @if (!nothingGoingOn) {
-        <div class="container my-auto px-5 pt-5">
+        <div class="my-auto md:mx-10 mx-5 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 border border-mauve bg-surface0 rounded-lg shadow-sm"
-                >
+            @for (queue of Object.values(currentQueue); track queue) {
+                @if (queue.status !== "idle") {
                     <div
-                        class="place-self-auto rounded-t-xl border-mauve bg-surface0 p-4 md:rounded-l-2xl md:rounded-r-none"
+                        class="my-3 grid grid-cols-1 gap-x-0 md:grid-cols-3 border border-mauve bg-surface0 rounded-lg shadow-sm"
                     >
-                        <h4 class="text-center text-2xl text-mauve">Status</h4>
-                        <p class="my-2 text-center text-text">{{ queue.status }}</p>
-                    </div>
-                    @if (!queue.nodes) {
-                        <div class="bg-surface0 p-4">
-                            <h4 class="text-center text-xl text-mauve">Count</h4>
-                            <p class="my-2 text-center text-text">{{ queue["count"] }}</p>
+                        <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>
-                    }
-                    @if (queue.nodes && queue.nodes.length > 0) {
-                        <div class="bg-surface0 p-4">
-                            <h4 class="text-center text-xl text-mauve">Nodes</h4>
-                            <p class="text-s text-center text-text">
-                                @for (node of queue["nodes"]; track node) {
-                                    {{ node }}<br />
-                                }
-                            </p>
+                        @if (!queue.nodes) {
+                            <div class="bg-surface0 p-4">
+                                <h4 class="text-center text-xl text-mauve">Count</h4>
+                                <p class="my-2 text-center text-text">{{ queue["count"] }}</p>
+                            </div>
+                        }
+                        @if (queue.nodes && queue.nodes.length > 0) {
+                            <div class="bg-surface0 p-4">
+                                <h4 class="text-center text-xl text-mauve">Nodes</h4>
+                                <p class="text-s my-2 text-center text-text">
+                                    @for (node of queue.nodes; track node) {
+                                        {{ node }} ({{ queue.packages ? queue.packages : [$index] }})<br />
+                                    }
+                                </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">Packages</h4>
+                            <div class="my-2 grid grid-cols-1 gap-5">
+                                <p class="text-s text-center text-text">
+                                    @for (pkg of queue.packages; track pkg) {
+                                        {{ pkg }}<br />
+                                    }
+                                </p>
+                            </div>
                         </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">Packages</h4>
-                        <div class="my-2 grid grid-cols-1 gap-5">
-                            <p class="text-s text-center text-text">
-                                @for (pkg of queue["packages"]; track pkg) {
-                                    {{ pkg }}<br />
-                                }
-                            </p>
+                    </div>
+                }
+                @if (queue.status === "idle" && queue.nodes!.length > 0) {
+                    <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>
+                        @if (queue.nodes && queue.nodes.length > 0) {
+                            <div class="bg-surface0 p-4">
+                                <h4 class="text-center text-xl text-mauve">Nodes</h4>
+                                <p class="text-s my-2 text-center text-text">
+                                    @for (node of queue.nodes; track node) {
+                                        {{ node }}<br />
+                                    }
+                                </p>
+                            </div>
+                        }
                     </div>
-                </div>
+                }
             }
             @if (fullLength > 50) {
                 <button
@@ -109,8 +133,9 @@ <h4 class="text-center text-xl text-mauve">Packages</h4>
     }
 
     @if (nothingGoingOn && !loading) {
-        <div class="container my-auto px-5 pt-5">
+        <div class="container my-auto p-5">
             <h3 class="pb-5 text-center text-xl font-bold text-mauve">There are currently no ongoing builds 😴</h3>
+            <p class="text-center text-lg text-text">Idle builders:</p>
         </div>
     }