feat(status): support linking to source folder

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

@@ -2,10 +2,11 @@
     <div class="chaotic-container-regular">
         <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 and allows searching the entire history.</p
+        >Shows the last deployed packages and allows searching the entire history.
+            Click the package name to be redirected to the PKGBUILDs used.</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
         >
@@ -26,7 +27,7 @@ <h1 class="text-center text-4xl font-extrabold text-maroon">Deployment log</h1>
                             value="0"
                         />
                         <label class="w-full py-3 ms-2 text-sm font-medium text-text" for="horizontal-list-radio-all"
-                            >All 🌍</label
+                        >All 🌍</label
                         >
                     </div>
                 </li>
@@ -43,7 +44,7 @@ <h1 class="text-center text-4xl font-extrabold text-maroon">Deployment log</h1>
                         <label
                             class="w-full py-3 ms-2 text-sm font-medium text-text"
                             for="horizontal-list-radio-success"
-                            >Success 📣</label
+                        >Success 📣</label
                         >
                     </div>
                 </li>
@@ -58,7 +59,7 @@ <h1 class="text-center text-4xl font-extrabold text-maroon">Deployment log</h1>
                             value="2"
                         />
                         <label class="w-full py-3 ms-2 text-sm font-medium text-text" for="horizontal-list-radio-failed"
-                            >Failed 🚫</label
+                        >Failed 🚫</label
                         >
                     </div>
                 </li>
@@ -75,7 +76,7 @@ <h1 class="text-center text-4xl font-extrabold text-maroon">Deployment log</h1>
                         <label
                             class="w-full py-3 ms-2 text-sm font-medium text-text"
                             for="horizontal-list-radio-timeout"
-                            >Timed out ⏳</label
+                        >Timed out ⏳</label
                         >
                     </div>
                 </li>
@@ -109,7 +110,7 @@ <h1 class="text-center text-4xl font-extrabold text-maroon">Deployment log</h1>
 
         @if (requestedTooMany) {
             <p class="pt-5 text-center text-red"
-                >You requested more logs than we currently have. Showing the max amount of
+            >You requested more logs than we currently have. Showing the max amount of
                 {{ latestDeployments.length }}.</p
             >
         }
@@ -122,10 +123,11 @@ <h1 class="text-center text-4xl font-extrabold text-maroon">Deployment log</h1>
                             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 }}
+                            >{{ deployment.date }}
                             </time>
                             <div class="lex text-sm font-normal text-text"
-                                >{{ deployment.string }} <a class="text-maroon">{{ deployment.name }}</a> from
+                            >{{ deployment.string }} <a class="text-maroon"
+                                                        href="{{ deployment.sourceUrl }}">{{ deployment.name }}</a> from
                                 <a class="text-rosewater">{{ deployment.node }}</a> to
                                 <span class="font-semibold text-red">{{ deployment.repo }}</span>
                                 @if (deployment.log) {

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

@@ -2,11 +2,12 @@ import {
     CACHE_TELEGRAM_TTL,
     type DeploymentList,
     DeploymentType,
+    generateRepoUrl,
     getDeployments,
     parseDeployments,
-    startShortPolling,
+    startShortPolling
 } from "@./shared-lib"
-import { type AfterViewInit, Component } from "@angular/core"
+import { type AfterViewInit, ChangeDetectorRef, Component } from "@angular/core"
 import { FormsModule } from "@angular/forms"
 import { RouterLink } from "@angular/router"
 
@@ -15,7 +16,7 @@ import { RouterLink } from "@angular/router"
     standalone: true,
     imports: [FormsModule, RouterLink],
     templateUrl: "./deploy-log-full.component.html",
-    styleUrl: "./deploy-log-full.component.css",
+    styleUrl: "./deploy-log-full.component.css"
 })
 export class DeployLogFullComponent implements AfterViewInit {
     latestDeployments: DeploymentList = []
@@ -26,6 +27,9 @@ export class DeployLogFullComponent implements AfterViewInit {
     searchterm: string | undefined
     isFiltered = false
 
+    constructor(private cdr: ChangeDetectorRef) {
+    }
+
     async ngAfterViewInit(): Promise<void> {
         await this.updateLogAmount(50)
         void this.showDeployments()
@@ -44,12 +48,13 @@ export class DeployLogFullComponent implements AfterViewInit {
     async updateLogAmount(amount: number): Promise<void> {
         this.latestDeployments = parseDeployments(
             await getDeployments(amount, this.currentType),
-            this.currentType,
+            this.currentType
         )
         this.requestedTooMany = this.latestDeployments.length < amount
 
         // Parse the strings for the UI and write them to the list
         this.constructStrings()
+        this.cdr.detectChanges()
     }
 
     /**
@@ -93,6 +98,9 @@ export class DeployLogFullComponent implements AfterViewInit {
                     this.latestDeployments[index].string = `Unknown status for`
                     break
             }
+
+            // Add source URL
+            this.latestDeployments[index].sourceUrl = generateRepoUrl(this.latestDeployments[index])
         }
     }
 

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

@@ -1,19 +1,21 @@
 <div class="chaotic-container-regular"
-    ><ol class="relative">
+>
+    <ol class="relative">
         <li class="mb-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 }}
+                        >{{ deployment.date }}
                         </time>
                         <div class="lex text-sm font-normal text-text"
-                            >Deployed <a class="text-maroon">{{ deployment.name }}</a> from
+                        >Deployed <a class="text-maroon"
+                                     href="{{ deployment.sourceUrl }}">{{ deployment.name }}</a> from
                             <a class="text-rosewater">{{ deployment.node }}</a> to
-                            <span class="font-semibold text-red">{{ deployment.repo }}</span></div
-                        >
+                            <span class="font-semibold text-red">{{ deployment.repo }}</span>
+                        </div>
                     </div>
                 </li>
             }

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

@@ -2,9 +2,10 @@ import {
     CACHE_TELEGRAM_TTL,
     type DeploymentList,
     DeploymentType,
+    generateRepoUrl,
     getDeployments,
     parseDeployments,
-    startShortPolling,
+    startShortPolling
 } from "@./shared-lib"
 import { type AfterViewInit, Component } from "@angular/core"
 import { FormsModule } from "@angular/forms"
@@ -41,6 +42,9 @@ export class DeployLogComponent implements AfterViewInit {
             DeploymentType.SUCCESS,
         )
         if (newList[0].date !== this.latestDeployments[0].date) {
+            for (const deployment of newList) {
+                deployment.sourceUrl = generateRepoUrl(deployment)
+            }
             this.latestDeployments = newList
         }
     }

shared-lib/src/lib/functions.ts

@@ -3,12 +3,15 @@ import { type CatppuccinFlavor, flavors } from "@catppuccin/palette"
 import { Axios } from "axios"
 import TimeAgo from "javascript-time-ago"
 import {
+    CAUR_REPO_URL,
+    CAUR_REPO_URL_GARUDA,
     CAUR_TG_API_URL,
     type CountNameObject,
+    Deployment,
     type DeploymentList,
     DeploymentType,
     type TgMessageList,
-    type UserAgentList,
+    type UserAgentList
 } from "./types"
 
 /**
@@ -25,7 +28,7 @@ export function parseOutput(input: string): any[] {
         if (!isNaN(count)) {
             returningArray.push({
                 name: name ?? "Unknown",
-                count,
+                count
             })
         }
     }
@@ -46,7 +49,7 @@ export function getNow(): string {
  */
 export function checkIfMobile() {
     return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-        navigator.userAgent,
+        navigator.userAgent
     )
 }
 
@@ -58,7 +61,7 @@ export function checkIfMobile() {
  */
 export function parseDeployments(
     messages: TgMessageList,
-    type: DeploymentType,
+    type: DeploymentType
 ): DeploymentList {
     const timeAgo = new TimeAgo("en-US")
     const deploymentList: DeploymentList = []
@@ -78,15 +81,15 @@ export function parseDeployments(
 
         const date = timeAgo.format(
             Number.parseInt(message.date) * 1000,
-            "round",
+            "round"
         )
 
         if (
             (type === DeploymentType.SUCCESS || type === DeploymentType.ALL) &&
             String(message.content).includes("deployment to")
         ) {
             const buildRepo = String(
-                String(message.content).split("deployment to ")[1],
+                String(message.content).split("deployment to ")[1]
             )
             node = buildRepo.match(/from\s(.*)/)
                 ? buildRepo.match(/from\s([\w-]*)/)![1]
@@ -106,7 +109,7 @@ export function parseDeployments(
             String(message.content).includes("Failed")
         ) {
             const buildRepo = String(
-                String(message.content).split("Failed deploying to ")[1],
+                String(message.content).split("Failed deploying to ")[1]
             )
             node = buildRepo.match(/on\s(.*)/)
                 ? buildRepo.match(/on\s([\w-]*)/)![1]
@@ -131,7 +134,7 @@ export function parseDeployments(
             repo: repo,
             type: deploymentType,
             log: log ? log.split(":")[1] : undefined,
-            node: node,
+            node: node
         })
     }
     return deploymentList
@@ -143,11 +146,11 @@ export function parseDeployments(
  */
 export async function getDeployments(
     amount: number,
-    type: DeploymentType,
+    type: DeploymentType
 ): Promise<TgMessageList> {
     const axios = new Axios({
         baseURL: CAUR_TG_API_URL,
-        timeout: 1000,
+        timeout: 1000
     })
 
     let requestString
@@ -212,7 +215,21 @@ export function loadTheme(theme: string, renderer: Renderer2, el: ElementRef) {
     renderer.setStyle(
         el.nativeElement.ownerDocument.body,
         "backgroundColor",
-        flavorColor,
+        flavorColor
     )
     return theme
 }
+
+/**
+ * Generate the URL for the repository.
+ * @param deployment The deployment to generate the URL for.
+ * @returns The URL for the repository, in which the PKGBUILD is located.
+ */
+export function generateRepoUrl(deployment: Deployment): string | undefined {
+    if (deployment.repo === "chaotic-aur") {
+        return deployment.sourceUrl = `${CAUR_REPO_URL}${deployment.name}`
+    } else if (deployment.repo === "garuda") {
+        return deployment.sourceUrl = `${CAUR_REPO_URL_GARUDA}${deployment.name}`
+    }
+    return undefined
+}

shared-lib/src/lib/types.ts

@@ -18,6 +18,8 @@ export const CAUR_NEWS_ID = "-1001293714071"
 export const CAUR_PKG_LIST_URL = "https://builds.garudalinux.org/repos/chaotic-aur/pkgs.files.txt"
 export const CAUR_PKG_URL = "https://cdn-mirror.chaotic.cx/chaotic-aur/x86_64/"
 export const CAUR_PRIMARY_KEY = "3056513887B78AEB"
+export const CAUR_REPO_URL = "https://gitlab.com/chaotic-aur/pkgbuilds/-/tree/main/"
+export const CAUR_REPO_URL_GARUDA = "https://gitlab.com/garuda-linux/pkgbuilds/-/tree/main/"
 export const CAUR_TG_API_URL = `${CAUR_BACKEND_URL}/telegram/`
 
 export type PackagesObject = Record<