signals for logs and workflow components

src-ui/src/app/components/admin/logs/logs.component.ts

@@ -7,6 +7,7 @@ import {
   OnInit,
   ViewChild,
   inject,
+  signal,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
@@ -34,22 +35,70 @@ export class LogsComponent
   private logService = inject(LogService)
   private changedetectorRef = inject(ChangeDetectorRef)
 
-  public logs: Array<{ message: string; level: number }> = []
+  private logsSignal = signal<Array<{ message: string; level: number }>>([])
 
-  public logFiles: string[] = []
+  private logFilesSignal = signal<string[]>([])
 
-  public activeLog: string
+  private activeLogSignal = signal<string>(undefined)
 
-  public autoRefreshEnabled: boolean = true
+  private autoRefreshEnabledSignal = signal(true)
 
-  public limit: number = 5000
+  private limitSignal = signal(5000)
 
-  public showJumpToBottom = false
+  private showJumpToBottomSignal = signal(false)
 
   private readonly limitChange$ = new Subject<number>()
 
   @ViewChild('logContainer') logContainer: ElementRef<HTMLElement>
 
+  public get logs(): Array<{ message: string; level: number }> {
+    return this.logsSignal()
+  }
+
+  public set logs(logs: Array<{ message: string; level: number }>) {
+    this.logsSignal.set(logs)
+  }
+
+  public get logFiles(): string[] {
+    return this.logFilesSignal()
+  }
+
+  public set logFiles(logFiles: string[]) {
+    this.logFilesSignal.set(logFiles)
+  }
+
+  public get activeLog(): string {
+    return this.activeLogSignal()
+  }
+
+  public set activeLog(activeLog: string) {
+    this.activeLogSignal.set(activeLog)
+  }
+
+  public get autoRefreshEnabled(): boolean {
+    return this.autoRefreshEnabledSignal()
+  }
+
+  public set autoRefreshEnabled(autoRefreshEnabled: boolean) {
+    this.autoRefreshEnabledSignal.set(autoRefreshEnabled)
+  }
+
+  public get limit(): number {
+    return this.limitSignal()
+  }
+
+  public set limit(limit: number) {
+    this.limitSignal.set(limit)
+  }
+
+  public get showJumpToBottom(): boolean {
+    return this.showJumpToBottomSignal()
+  }
+
+  public set showJumpToBottom(showJumpToBottom: boolean) {
+    this.showJumpToBottomSignal.set(showJumpToBottom)
+  }
+
   ngOnInit(): void {
     this.limitChange$
       .pipe(debounceTime(300), takeUntil(this.unsubscribeNotifier))

src-ui/src/app/components/manage/workflows/workflows.component.ts

@@ -1,8 +1,8 @@
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { delay, takeUntil, tap } from 'rxjs'
+import { takeUntil, tap } from 'rxjs'
 import { Workflow } from 'src/app/data/workflow'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsService } from 'src/app/services/permissions.service'
@@ -39,7 +39,15 @@ export class WorkflowsComponent
   private modalService = inject(NgbModal)
   private toastService = inject(ToastService)
 
-  public workflows: Workflow[] = []
+  private workflowsSignal = signal<Workflow[]>([])
+
+  public get workflows(): Workflow[] {
+    return this.workflowsSignal()
+  }
+
+  public set workflows(workflows: Workflow[]) {
+    this.workflowsSignal.set(workflows)
+  }
 
   ngOnInit() {
     this.reload()
@@ -51,8 +59,7 @@ export class WorkflowsComponent
       .listAll()
       .pipe(
         takeUntil(this.unsubscribeNotifier),
-        tap((r) => (this.workflows = r.results)),
-        delay(100)
+        tap((r) => (this.workflows = r.results))
       )
       .subscribe(() => {
         this.show = true