Multiple (#1823)

* display preference for suto check and better messaging on properties page

* improve logs by a lot

* clean up

* fix searchbar and url in marketplace

frontend/projects/ui/src/app/components/logs/logs.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, ViewChild } from '@angular/core'
 import { IonContent, LoadingController } from '@ionic/angular'
-import { map, takeUntil, timer } from 'rxjs'
+import { bufferTime, takeUntil, tap } from 'rxjs'
 import { WebSocketSubjectConfig } from 'rxjs/webSocket'
 import {
   LogsRes,
@@ -42,13 +42,12 @@ export class LogsComponent {
   @Input() title!: string
 
   loading = true
-  needInfinite = true
+  needInfinite = false
   startCursor?: string
   isOnBottom = true
   autoScroll = true
   websocketFail = false
   limit = 400
-  toProcess: Log[] = []
 
   constructor(
     private readonly errToast: ErrorToastService,
@@ -71,18 +70,27 @@ export class LogsComponent {
         openObserver: {
           next: () => {
             this.websocketFail = false
-            this.processJob()
           },
         },
       }
 
+      let totalLogs = 0
+
       this.api
         .openLogsWebsocket$(config)
-        .pipe(takeUntil(this.destroy$))
+        .pipe(
+          tap(_ => {
+            totalLogs++
+            if (totalLogs === this.limit) this.needInfinite = true
+          }),
+          bufferTime(500),
+          tap(msgs => {
+            this.loading = false
+            this.processRes({ entries: msgs })
+          }),
+          takeUntil(this.destroy$),
+        )
         .subscribe({
-          next: msg => {
-            this.toProcess.push(msg)
-          },
           error: () => {
             this.websocketFail = true
             if (this.isOnBottom) this.scrollToBottom()
@@ -151,19 +159,6 @@ export class LogsComponent {
     }
   }
 
-  private processJob() {
-    timer(100, 500)
-      .pipe(
-        map((_, index) => index),
-        takeUntil(this.destroy$),
-      )
-      .subscribe(index => {
-        this.processRes({ entries: this.toProcess })
-        this.toProcess = []
-        if (index === 0) this.loading = false
-      })
-  }
-
   private processRes(res: LogsRes) {
     const { entries, 'start-cursor': startCursor } = res
 
@@ -176,7 +171,7 @@ export class LogsComponent {
 
     newLogs.innerHTML = this.convertToAnsi(entries)
 
-    // if respone contains startCursor, it means we are scrolling backwards
+    // if response contains a startCursor, it means we are scrolling backwards
     if (startCursor) {
       this.startCursor = startCursor