From 90bd5cda883f5c2c6998d186689a780b9418c100 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 17 Nov 2023 22:31:00 -0800
Subject: [PATCH] Enhancement: auto-refresh logs

---
 .../components/admin/logs/logs.component.html | 13 ++++++++----
 .../admin/logs/logs.component.spec.ts         | 20 ++++++++++++++++++-
 .../components/admin/logs/logs.component.ts   | 14 +++++++++++++
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/src-ui/src/app/components/admin/logs/logs.component.html b/src-ui/src/app/components/admin/logs/logs.component.html
index 91f7f3bd6..628886c62 100644
--- a/src-ui/src/app/components/admin/logs/logs.component.html
+++ b/src-ui/src/app/components/admin/logs/logs.component.html
@@ -1,14 +1,19 @@
 <pngx-page-header title="Logs" i18n-title>
-
+  <div class="form-check form-switch" (click)="toggleAutoRefresh()">
+    <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" [attr.checked]="autoRefreshInterval">
+    <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
+  </div>
 </pngx-page-header>
 
 <ul ngbNav #nav="ngbNav" [(activeId)]="activeLog" (activeIdChange)="reloadLogs()" class="nav-tabs">
   <li *ngFor="let logFile of logFiles" [ngbNavItem]="logFile">
-    <a ngbNavLink>{{logFile}}.log</a>
+    <a ngbNavLink>
+      {{logFile}}.log
+    </a>
   </li>
-  <div *ngIf="isLoading && !logFiles.length" class="pb-2">
+  <div *ngIf="isLoading || !logFiles.length" class="ps-2 d-flex align-items-center">
     <div class="spinner-border spinner-border-sm me-2" role="status"></div>
-    <ng-container i18n>Loading...</ng-container>
+    <ng-container *ngIf="!logFiles.length" i18n>Loading...</ng-container>
   </div>
 </ul>
 
diff --git a/src-ui/src/app/components/admin/logs/logs.component.spec.ts b/src-ui/src/app/components/admin/logs/logs.component.spec.ts
index a9c4b4613..690bbcdde 100644
--- a/src-ui/src/app/components/admin/logs/logs.component.spec.ts
+++ b/src-ui/src/app/components/admin/logs/logs.component.spec.ts
@@ -1,4 +1,9 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
 import { LogService } from 'src/app/services/rest/log.service'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { LogsComponent } from './logs.component'
@@ -26,6 +31,7 @@ describe('LogsComponent', () => {
   let fixture: ComponentFixture<LogsComponent>
   let logService: LogService
   let logSpy
+  let reloadSpy
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -42,7 +48,9 @@ describe('LogsComponent', () => {
     })
     fixture = TestBed.createComponent(LogsComponent)
     component = fixture.componentInstance
+    reloadSpy = jest.spyOn(component, 'reloadLogs')
     window.HTMLElement.prototype.scroll = function () {} // mock scroll
+    jest.useFakeTimers()
     fixture.detectChanges()
   })
 
@@ -68,4 +76,14 @@ describe('LogsComponent', () => {
     component.reloadLogs()
     expect(component.logs).toHaveLength(0)
   })
+
+  it('should auto refresh, allow toggle', () => {
+    jest.advanceTimersByTime(6000)
+    expect(reloadSpy).toHaveBeenCalledTimes(2)
+
+    component.toggleAutoRefresh()
+    expect(component.autoRefreshInterval).toBeNull()
+    jest.advanceTimersByTime(6000)
+    expect(reloadSpy).toHaveBeenCalledTimes(2)
+  })
 })
diff --git a/src-ui/src/app/components/admin/logs/logs.component.ts b/src-ui/src/app/components/admin/logs/logs.component.ts
index cf88077e7..2ca259218 100644
--- a/src-ui/src/app/components/admin/logs/logs.component.ts
+++ b/src-ui/src/app/components/admin/logs/logs.component.ts
@@ -27,6 +27,8 @@ export class LogsComponent implements OnInit, AfterViewChecked, OnDestroy {
 
   public isLoading: boolean = false
 
+  public autoRefreshInterval: any
+
   @ViewChild('logContainer') logContainer: ElementRef
 
   ngOnInit(): void {
@@ -41,6 +43,7 @@ export class LogsComponent implements OnInit, AfterViewChecked, OnDestroy {
           this.activeLog = this.logFiles[0]
           this.reloadLogs()
         }
+        this.toggleAutoRefresh()
       })
   }
 
@@ -91,4 +94,15 @@ export class LogsComponent implements OnInit, AfterViewChecked, OnDestroy {
       behavior: 'auto',
     })
   }
+
+  toggleAutoRefresh(): void {
+    if (this.autoRefreshInterval) {
+      clearInterval(this.autoRefreshInterval)
+      this.autoRefreshInterval = null
+    } else {
+      this.autoRefreshInterval = setInterval(() => {
+        this.reloadLogs()
+      }, 5000)
+    }
+  }
 }