feat(deploy-log): allow searching for packages

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

@@ -1,18 +1,9 @@
 <div class="chaotic-container-regular">
     <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.</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"
-            id="input-log-amount"
-            name="logamount"
-            placeholder="Amount of logs to show (default 50)"
-            required
-            type="search"
-        />
+        <p class="my-4 px-10 text-center text-lg text-text"
+            >Shows the last deployed packages and allows searching the entire history.</p
+        >
 
         <div class="py-2.5 mt-2.5">
             <ul
@@ -86,23 +77,41 @@ <h1 class="text-center text-4xl font-extrabold text-maroon">Deployment log</h1>
             </ul>
         </div>
 
-        <button
-            (click)="getNewAmount()"
-            class="hover:chaotic-grow-l ml-2.5 rounded-lg bg-maroon px-5 py-2.5 mt-2.5 text-base text-sm font-medium hover:bg-mauve focus:outline-none"
-            type="button"
-        >
-            Show logs
-        </button>
+        <div class="container md:flex my-5 justify-center">
+            <input
+                (focusout)="getNewAmount()"
+                (keyup.enter)="getNewAmount()"
+                [(ngModel)]="logAmount"
+                class="text-input mx-auto my-1 md:mx-1 block w-full rounded-lg border border-red bg-surface0 py-4 ps-10 text-sm text-maroon focus:border-red focus:bg-surface1 max-w-md"
+                id="input-log-amount"
+                name="logamount"
+                placeholder="Number of logs to show (default 100)"
+                required
+                type="search"
+            />
+            <input
+                (focusout)="showDeployments()"
+                (keyup.enter)="showDeployments()"
+                [(ngModel)]="searchterm"
+                class="text-input mx-auto md:mx-1 my-1 block w-full rounded-lg border border-red bg-surface0 py-4 ps-10 text-sm text-maroon focus:border-red focus:bg-surface1 max-w-md"
+                id="input-search"
+                name="searchterm"
+                placeholder="Search for a package name"
+                required
+                type="search"
+            />
+        </div>
+
         @if (requestedTooMany) {
             <p class="pt-5 text-center text-red"
                 >You requested more logs than we currently have. Showing the max amount of
                 {{ latestDeployments.length }}.</p
             >
         }
 
-        <ol class="relative pt-5">
+        <ol class="relative pt-2.5">
             <li class="mb-10">
-                @for (deployment of latestDeployments; track deployment) {
+                @for (deployment of shownDeployments; track deployment) {
                     <li>
                         <div
                             class="items-center justify-between rounded-lg border border-mauve bg-surface0 p-4 shadow-sm sm:flex"
@@ -123,11 +132,4 @@ <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!</div>
-    </div>
 </div>

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

@@ -3,9 +3,8 @@ import {
     DeploymentList,
     DeploymentType,
     getDeployments,
-    headToFullDeployments,
     parseDeployments,
-    startShortPolling,
+    startShortPolling
 } from "@./shared-lib"
 import { AfterViewInit, Component } from "@angular/core"
 import { FormsModule } from "@angular/forms"
@@ -20,43 +19,34 @@ import { RouterLink } from "@angular/router"
 })
 export class DeployLogFullComponent implements AfterViewInit {
     latestDeployments: DeploymentList = []
+    shownDeployments: DeploymentList = []
     logAmount: number | undefined
     requestedTooMany = false
     currentType: DeploymentType = DeploymentType.ALL
-    firstLoad = true
-    protected readonly headToFullDeployments = headToFullDeployments
+    searchterm: string | undefined
+    isFiltered = false
 
     async ngAfterViewInit(): Promise<void> {
-        void this.updateLogAmount(50)
+        await this.updateLogAmount(50)
+        void this.showDeployments()
 
         // Poll for new deployments every 30 seconds (which is the time the backend caches requests)
         startShortPolling(CACHE_TELEGRAM_TTL, async () => {
-            await this.getNewAmount()
+            await this.updateLogAmount(this.logAmount ?? 100)
+            void this.showDeployments()
         })
     }
 
-    async updateLogAmount(amount: number) {
-        const newDeployments = parseDeployments(await getDeployments(amount, this.currentType), this.currentType)
-
-        if (this.latestDeployments.length === 0 || newDeployments[0].name !== this.latestDeployments[0]?.name) {
-            this.latestDeployments = newDeployments
-
-            // Show if we requested too many deployments
-            this.requestedTooMany = this.latestDeployments.length < amount
-            this.constructStrings()
+    /**
+     * Update the list/number of deployments to show.
+     * @param amount The number of deployments to request from the backend
+     */
+    async updateLogAmount(amount: number): Promise<void> {
+        this.latestDeployments = parseDeployments(await getDeployments(amount, this.currentType), this.currentType)
+        this.requestedTooMany = this.latestDeployments.length < amount
 
-            // Show a notification for a short time
-            const notification = document.getElementById("toast-deployment")
-            if (notification && !this.firstLoad) {
-                notification.classList.remove("invisible")
-                setTimeout((): void => {
-                    notification.classList.add("invisible")
-                }, 20000)
-            }
-            if (this.firstLoad) {
-                this.firstLoad = false
-            }
-        }
+        // Parse the strings for the UI and write them to the list
+        this.constructStrings()
     }
 
     /**
@@ -67,11 +57,13 @@ export class DeployLogFullComponent implements AfterViewInit {
             // @ts-ignore
             if (/^[0-9]*$/.test(this.logAmount)) {
                 await this.updateLogAmount(this.logAmount)
+                void this.showDeployments()
             } else {
                 alert("Please enter a valid number")
             }
         } else {
-            await this.updateLogAmount(50)
+            await this.updateLogAmount(100)
+            void this.showDeployments()
         }
     }
 
@@ -122,4 +114,27 @@ export class DeployLogFullComponent implements AfterViewInit {
         }
         void this.getNewAmount()
     }
+
+    /**
+     * Show deployments based on the current search term (if any). Shows all deployments if no search term is present.
+     */
+    async showDeployments(): Promise<void> {
+        const toFilter: DeploymentList = this.latestDeployments
+
+        if (this.searchterm && this.searchterm !== "" && !this.isFiltered) {
+            this.shownDeployments = toFilter.filter((deployment) => {
+                return deployment.name.toLowerCase().includes(this.searchterm?.toLowerCase() ?? "")
+            })
+            this.isFiltered = true
+        } else if (this.searchterm && this.searchterm !== "" && this.isFiltered) {
+            // We are already filtering, so we need it to filter the full list again
+            this.shownDeployments = toFilter.filter((deployment) => {
+                return deployment.name.toLowerCase().includes(this.searchterm?.toLowerCase() ?? "")
+            })
+            this.isFiltered = false
+        } else {
+            // None of the previous cases applied, we need to show all logs
+            this.shownDeployments = toFilter
+        }
+    }
 }

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

@@ -1,6 +1,6 @@
 <div class="chaotic-container-regular"
     ><ol class="relative">
-        <li class="mb-10 md:px-10">
+        <li class="mb-10">
             @for (deployment of latestDeployments; track deployment) {
                 <li>
                     <div