Add next update counter and rework auto-refresh feature to a dedicate…

src/app/agents/agent-status/agent-status.component.ts

@@ -1,25 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 
 import { ASC } from '@src/app/core/_constants/agentsc.config';
-import { AgentStatusModalComponent } from '@src/app/agents/agent-status/agent-status-modal/agent-status-modal.component';
-import { CookieService } from '@src/app/core/_services/shared/cookies.service';
-import { FilterService } from '@src/app/core/_services/shared/filter.service';
-import { GlobalService } from '@src/app/core/_services/main.service';
-import { JAgent } from '@src/app/core/_models/agent.model';
-import { JAgentStat } from '@src/app/core/_models/agent-stats.model';
-import { JsonAPISerializer } from '@src/app/core/_services/api/serializer-service';
-import { MatDialog } from '@angular/material/dialog';
 import { PageTitle } from '@src/app/core/_decorators/autotitle';
-import { RequestParamBuilder } from '@src/app/core/_services/params/builder-implementation.service';
+import { JAgentStat } from '@src/app/core/_models/agent-stats.model';
+import { JAgent } from '@src/app/core/_models/agent.model';
 import { ResponseWrapper } from '@src/app/core/_models/response.model';
+import { JsonAPISerializer } from '@src/app/core/_services/api/serializer-service';
 import { SERV } from '@src/app/core/_services/main.config';
-import { UIConfigService } from '@src/app/core/_services/shared/storage.service';
+import { GlobalService } from '@src/app/core/_services/main.service';
+import { RequestParamBuilder } from '@src/app/core/_services/params/builder-implementation.service';
+import { CookieService } from '@src/app/core/_services/shared/cookies.service';
 import { environment } from '@src/environments/environment';
 
 @Component({
-    selector: 'app-agent-status',
-    templateUrl: './agent-status.component.html',
-    standalone: false
+  selector: 'app-agent-status',
+  templateUrl: './agent-status.component.html',
+  standalone: false
 })
 @PageTitle(['Agent Status'])
 export class AgentStatusComponent implements OnInit {
@@ -29,7 +25,7 @@ export class AgentStatusComponent implements OnInit {
   pageSize = 20;
 
   // view menu
-  view: any;
+  view: string | number = 0;
 
   // Agents Stats
   statDevice: JAgentStat[] = [];
@@ -39,10 +35,7 @@ export class AgentStatusComponent implements OnInit {
   private maxResults = environment.config.prodApiMaxResults;
 
   constructor(
-    private filterService: FilterService,
     private cookieService: CookieService,
-    private uiService: UIConfigService,
-    private dialog: MatDialog,
     private gs: GlobalService,
     private serializer: JsonAPISerializer
   ) {}
@@ -116,57 +109,4 @@ export class AgentStatusComponent implements OnInit {
       this.statCpu = tempDateFilter.filter((u) => u.statType == ASC.CPU_UTIL); // Temp
     });
   }
-
-  /**
-   * Filter agents on filter changed
-   * @param filterValue Value to filter agents for
-   */
-  filterChanged(filterValue: string) {
-    if (filterValue && this.showagents) {
-      filterValue = filterValue.toUpperCase();
-      const props = ['agentName', 'id'];
-      this._filteresAgents = this.filterService.filter<any>(this.showagents, filterValue, props);
-    } else {
-      this._filteresAgents = this.showagents;
-    }
-  }
-
-  // Modal Agent utilisation and OffCanvas menu
-
-  getTemp1() {
-    // Temperature Config Setting
-    return this.uiService.getUIsettings('agentTempThreshold1').value;
-  }
-
-  getTemp2() {
-    // Temperature 2 Config Setting
-    return this.uiService.getUIsettings('agentTempThreshold2').value;
-  }
-
-  getUtil1() {
-    // CPU Config Setting
-    return this.uiService.getUIsettings('agentUtilThreshold1').value;
-  }
-
-  getUtil2() {
-    // CPU 2 Config Setting
-    return this.uiService.getUIsettings('agentUtilThreshold2').value;
-  }
-
-  /**
-   * Opens modal containing agent stat legend.
-   * @param title Modal title
-   * @param icon Modal icon
-   * @param content Modal content
-   * @param thresholdType
-   * @param result
-   * @param form
-   */
-  openModal(title: string, icon: string, content: string, thresholdType: string, result: any, form: any): void {
-    const dialogRef = this.dialog.open(AgentStatusModalComponent, {
-      data: { title, icon, content, thresholdType, result, form }
-    });
-
-    dialogRef.afterClosed().subscribe();
-  }
 }

src/app/core/_components/core-components.module.ts

@@ -76,6 +76,7 @@ import { VouchersTableComponent } from '@components/tables/vouchers-table/vouche
 
 import { DebounceDirective } from '@src/app/core/_directives/debounce.directive';
 import { PipesModule } from '@src/app/shared/pipes.module';
+import { LastUpdatedComponent } from '@src/app/shared/widgets/last-updated/last-updated.component';
 
 @NgModule({
   declarations: [
@@ -157,7 +158,8 @@ import { PipesModule } from '@src/app/shared/pipes.module';
     FormsModule,
     FontAwesomeModule,
     PipesModule,
-    DebounceDirective
+    DebounceDirective,
+    LastUpdatedComponent
   ],
   exports: [
     BaseTableComponent,

src/app/core/_components/tables/agents-status-table/agents-status-table.component.ts

@@ -44,12 +44,6 @@ export class AgentsStatusTableComponent extends BaseTableComponent implements On
   dataSource: AgentsDataSource;
   selectedFilterColumn: string;
 
-  ngOnDestroy(): void {
-    for (const sub of this.subscriptions) {
-      sub.unsubscribe();
-    }
-  }
-
   ngOnInit(): void {
     this.setColumnLabels(AgentsStatusTableColumnLabel);
     this.tableColumns = this.getColumns();
@@ -58,13 +52,17 @@ export class AgentsStatusTableComponent extends BaseTableComponent implements On
     this.dataSource.setAgentStatsRequired(true);
     this.contextMenuService = new AgentMenuService(this.permissionService).addContextMenu();
     this.dataSource.reload();
-    const refresh = !!this.dataSource.util.getSetting<boolean>('refreshPage');
-    if (refresh) {
-      this.dataSource.setAutoreload(true);
-    } else {
-      this.dataSource.setAutoreload(false);
+    if (this.dataSource.autoRefreshService.refreshPage) {
+      this.dataSource.startAutoRefresh();
     }
   }
+
+  ngOnDestroy(): void {
+    for (const sub of this.subscriptions) {
+      sub.unsubscribe();
+    }
+  }
+
   filter(input: string) {
     const selectedColumn = this.selectedFilterColumn;
     if (input && input.length > 0) {

src/app/core/_components/tables/ht-table/ht-table.component.html

@@ -4,7 +4,7 @@
     <!-- Auto-refresh control -->
     <div class="table-footer-actions"
          style="display: flex; justify-content: space-between; align-items: center; margin-top: 8px;">
-      <button (click)="dataSource.setAutoreload(!dataSource.autoRefreshEnabled)" *ngIf="supportsAutoRefresh" mat-button>
+      <button (click)="dataSource.toggleAutoRefresh(!dataSource.autoRefreshEnabled)" *ngIf="supportsAutoRefresh" mat-button>
         <mat-icon>{{ dataSource.autoRefreshEnabled ? 'pause_circle_outline' : 'autorenew' }}</mat-icon>
         {{ dataSource.autoRefreshEnabled ? 'Pause Auto Reload' : 'Enable Auto Reload' }}
       </button>
@@ -294,18 +294,11 @@
   <ng-container *ngIf="isPageable">
     <hr />
     <div class="paginator-footer">
-      <div class="last-updated" style="display: flex; align-items: center; gap: 4px;">
-      <span *ngIf="dataSource.getLastUpdated()">
-        Last updated: {{ dataSource.getLastUpdated() }}
-      </span>
-        <mat-spinner
-          *ngIf="(dataSource.loading$ | async) && dataSource.getLastUpdated()"
-          diameter="12"
-          strokeWidth="2"
-        ></mat-spinner>
-      </div>
-
-
+      <last-updated
+        [lastUpdated]="dataSource.lastUpdated"
+        [nextRefreshTimestamp]="dataSource.autoRefreshService.nextRefreshTimestamp"
+        [refreshing]="dataSource.loading$ | async">
+      </last-updated>
       <mat-paginator
         (page)="onPageChange($event)"
         [disabled]="dataSource.loading$ | async"

src/app/core/_components/tables/ht-table/ht-table.component.scss

@@ -3,20 +3,5 @@
   justify-content: space-between; // left + right
   align-items: center;
   margin-top: 4px;
-
-  .last-updated {
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.6); // Material secondary text
-    white-space: nowrap;
-  }
-}
-
-@keyframes flash {
-  from { background-color: #fff3cd; } /* pale yellow */
-  to { background-color: transparent; }
-}
-
-tr.flash {
-  animation: flash 1s ease-out;
 }
 

src/app/core/_components/tables/ht-table/ht-table.component.ts

@@ -1,4 +1,4 @@
-import { Subscription, take, timer } from 'rxjs';
+import { Subscription } from 'rxjs';
 
 import {
   AfterViewInit,
@@ -101,7 +101,6 @@ export class HTTableComponent implements OnInit, AfterViewInit, OnDestroy {
 
   /** Flag to indicate if data is being loaded */
   loading = true;
-  loadingTimeoutSubscription: Subscription;
 
   /** Reference to MatPaginator for pagination support. */
   @ViewChild(MatPaginator, { static: false }) matPaginator: MatPaginator;
@@ -215,6 +214,7 @@ export class HTTableComponent implements OnInit, AfterViewInit, OnDestroy {
   @Output() backendSqlFilter: EventEmitter<string> = new EventEmitter();
 
   private uiSettings: UISettingsUtilityClass;
+  private subscriptions: Subscription = new Subscription();
 
   @ViewChild('bulkMenu') bulkMenu: BulkActionMenuComponent;
   filterQueryFormGroup = new FormGroup({
@@ -241,12 +241,6 @@ export class HTTableComponent implements OnInit, AfterViewInit, OnDestroy {
       // Handle the case when the retrieved value is neither an array nor a TableConfig
       console.error(`Unexpected table configuration for key: ${this.name}`);
     }
-    // ToDo. this should be done with the real data, only used as UI friendly
-    this.loadingTimeoutSubscription = timer(5000)
-      .pipe(take(1))
-      .subscribe(() => {
-        this.loading = false;
-      });
     this.initFilterableColumns();
     this.onFilterColumnChange();
   }
@@ -294,7 +288,7 @@ export class HTTableComponent implements OnInit, AfterViewInit, OnDestroy {
       });
     }
     this.dataSource.sort = this.matSort;
-    this.matSort.sortChange.subscribe(() => {
+    const sortSubscription = this.matSort.sortChange.subscribe(() => {
       this.uiSettings.updateTableSettings(this.name, {
         start: undefined,
         before: undefined,
@@ -312,12 +306,13 @@ export class HTTableComponent implements OnInit, AfterViewInit, OnDestroy {
         0
       );
     });
+    this.subscriptions.add(sortSubscription);
   }
 
+  /** Cleanup on component destruction */
   ngOnDestroy(): void {
-    if (this.loadingTimeoutSubscription) {
-      this.loadingTimeoutSubscription.unsubscribe();
-    }
+    // Unsubscribe from all subscriptions
+    this.subscriptions.unsubscribe();
   }
 
   onLinkClicked() {

src/app/core/_components/tables/tasks-table/tasks-table.component.ts

@@ -61,6 +61,7 @@ export class TasksTableComponent extends BaseTableComponent implements OnInit, O
   dataSource: TasksDataSource;
   isArchived = false;
   selectedFilterColumn: string;
+
   ngOnInit(): void {
     this.setColumnLabels(TaskTableColumnLabel);
     this.tableColumns = this.getColumns();
@@ -70,11 +71,8 @@ export class TasksTableComponent extends BaseTableComponent implements OnInit, O
     this.dataSource.setHashlistID(this.hashlistId);
     this.contextMenuService = new TaskContextMenuService(this.permissionService).addContextMenu();
     this.dataSource.loadAll();
-    const refresh = !!this.dataSource.util.getSetting<boolean>('refreshPage');
-    if (refresh) {
-      this.dataSource.setAutoreload(true);
-    } else {
-      this.dataSource.setAutoreload(false);
+    if (this.dataSource.autoRefreshService.refreshPage) {
+      this.dataSource.startAutoRefresh();
     }
   }