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/marketplace/src/pages/list/search/search.component.html

@@ -1,9 +1,8 @@
 <ion-grid>
   <ion-row>
-    <ion-col sizeSm="8" offset-sm="2">
+    <ion-col sizeSm="8" offset-sm="2" sizeLg="6" offset-lg="3">
-      <ion-toolbar color="transparent">
+      <ion-toolbar color="transparent" class="ion-text-left">
         <ion-searchbar
-          enterkeyhint="search"
           color="dark"
           debounce="250"
           [ngModel]="query"

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

@@ -15,7 +15,7 @@
 >
   <ion-infinite-scroll
     id="scroller"
-    *ngIf="!loading && needInfinite"
+    [disabled]="!needInfinite"
     position="top"
     threshold="1000"
     (ionInfinite)="doInfinite($event)"

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
 

frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html

@@ -21,11 +21,11 @@
 
   <ng-template #loaded>
     <!-- not running -->
-    <ion-item *ngIf="notRunning$ | async" class="ion-margin-bottom">
+    <ion-item *ngIf="stopped$ | async" class="ion-margin-bottom">
       <ion-label>
         <p>
           <ion-text color="warning"
-            >Service not running. Information on this page could be
+            >Service is stopped. Information on this page could be
             inaccurate.</ion-text
           >
         </p>

frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts

@@ -40,9 +40,9 @@ export class AppPropertiesPage {
   properties: PackageProperties = {}
   unmasked: { [key: string]: boolean } = {}
 
-  notRunning$ = this.patch
+  stopped$ = this.patch
     .watch$('package-data', this.pkgId, 'installed', 'status', 'main', 'status')
-    .pipe(map(status => status !== PackageMainStatus.Running))
+    .pipe(map(status => status === PackageMainStatus.Stopped))
 
   @ViewChild(IonBackButtonDelegate, { static: false })
   backButton?: IonBackButtonDelegate

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html

@@ -23,7 +23,6 @@
     <ion-row>
       <ion-col size="12">
         <h1 class="heading montserrat ion-text-center">{{ details.name }}</h1>
-        <p style="margin-top: 0">{{ details.url }}</p>
         <marketplace-search [(query)]="query"></marketplace-search>
       </ion-col>
     </ion-row>

frontend/projects/ui/src/app/pages/server-routes/preferences/preferences.page.html

@@ -17,12 +17,14 @@
 
     <ion-item-divider>Marketplace</ion-item-divider>
     <ion-item
-      *ngIf="autoCheck$ | async as auto"
+      *ngIf="ui$ | async as ui"
       button
-      (click)="serverConfig.presentAlert('auto-check-updates', auto)"
+      (click)="serverConfig.presentAlert('auto-check-updates', ui['auto-check-updates'])"
     >
       <ion-label>Auto Check for Updates</ion-label>
-      <ion-note slot="end"> {{ auto ? 'Enabled' : 'Disabled' }} </ion-note>
+      <ion-note slot="end">
+        {{ ui['auto-check-updates'] ? 'Enabled' : 'Disabled' }}
+      </ion-note>
     </ion-item>
   </ion-item-group>
 </ion-content>

frontend/projects/ui/src/app/pages/server-routes/preferences/preferences.page.ts

@@ -27,7 +27,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
 export class PreferencesPage {
   clicks = 0
 
-  readonly autoCheck$ = this.patch.watch$('ui', 'auto-check-updates')
+  readonly ui$ = this.patch.watch$('ui')
   readonly server$ = this.patch.watch$('server-info')
   readonly name$ = this.serverNameService.name$
 

frontend/projects/ui/src/app/services/api/embassy-mock-api.service.ts

@@ -120,7 +120,7 @@ export class MockApiService extends ApiService {
   }
 
   openLogsWebsocket$(config: WebSocketSubjectConfig<Log>): Observable<Log> {
-    return interval(100).pipe(
+    return interval(50).pipe(
       map((_, index) => {
         // mock fire open observer
         if (index === 0) config.openObserver?.next(new Event(''))