feat(UtmAgentConnect): refactor agent handling and improve data binding

mjabascal10 · mjabascal10 · commit b66010644f3f · 2025-08-06T13:28:06.000-05:00
diff --git a/frontend/src/app/assets-discover/assets-view/assets-view.component.html b/frontend/src/app/assets-discover/assets-view/assets-view.component.html
@@ -120,7 +120,7 @@ <h5 class="card-title mb-0 text-uppercase label-header">
             </thead>
             <tbody *ngIf="assets$ | async as assets">
             <ng-container *ngFor="let asset of assets; trackBy: trackByFn">
-              <tr (click)="viwAgentDetail($event, asset)" class="cursor-pointer">
+              <tr>
                 <td class="text-center">
                   <div class="d-flex justify-content-between align-items-center h-100 w-100 small-md-icon">
                     <div class="list-icons span-small-icon">
diff --git a/frontend/src/app/assets-discover/assets-view/assets-view.component.ts b/frontend/src/app/assets-discover/assets-view/assets-view.component.ts
@@ -1,5 +1,5 @@
 import {HttpResponse} from '@angular/common/http';
-import {AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {ResizeEvent} from 'angular-resizable-element';
@@ -42,7 +42,7 @@ import {SourceDataTypeConfigComponent} from '../source-data-type-config/source-d
   styleUrls: ['./assets-view.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AssetsViewComponent implements OnInit, AfterViewInit, OnDestroy {
+export class AssetsViewComponent implements OnInit, OnDestroy {
   assets$: Observable<NetScanType[]>;
   assets: NetScanType[];
   // defaultTime: ElasticFilterDefaultTime = new ElasticFilterDefaultTime('now-30d', 'now');
@@ -98,7 +98,7 @@ export class AssetsViewComponent implements OnInit, AfterViewInit, OnDestroy {
 
   ngOnInit() {
     this.setInitialWidth();
-    this.starInterval();
+
     this.accountService.identity().then(account => {
       this.reasonRun = {
         command: '',
@@ -130,10 +130,9 @@ export class AssetsViewComponent implements OnInit, AfterViewInit, OnDestroy {
           });
         })
       );
-  }
 
-  ngAfterViewInit() {
-    this.getAssets();
+    this.utmNetScanService.notifyRefresh(true);
+    this.starInterval();
   }
 
   setInitialWidth() {
@@ -145,10 +144,6 @@ export class AssetsViewComponent implements OnInit, AfterViewInit, OnDestroy {
   loadPage(page: number) {
     this.page = page - 1;
     this.requestParam.page = page;
-    this.getAssets();
-  }
-
-  getAssets() {
     this.utmNetScanService.notifyRefresh(true);
   }
 
@@ -163,13 +158,13 @@ export class AssetsViewComponent implements OnInit, AfterViewInit, OnDestroy {
   onItemsPerPageChange($event: number) {
     this.itemsPerPage = $event;
     this.requestParam.size = $event;
-    this.getAssets();
+    this.utmNetScanService.notifyRefresh(true);
   }
 
   onTimeFilterChange($event: TimeFilterType) {
     this.requestParam.discoveredInitDate = $event.timeFrom;
     this.requestParam.discoveredEndDate = $event.timeTo;
-    this.getAssets();
+    this.utmNetScanService.notifyRefresh(true);
   }
 
   onResize($event: ResizeEvent) {
@@ -186,7 +181,7 @@ export class AssetsViewComponent implements OnInit, AfterViewInit, OnDestroy {
 
   onSortBy($event: SortEvent) {
     this.requestParam.sort = $event.column + ',' + $event.direction;
-    this.getAssets();
+    this.utmNetScanService.notifyRefresh(true);
   }
 
   toggleCheck() {
@@ -230,7 +225,7 @@ export class AssetsViewComponent implements OnInit, AfterViewInit, OnDestroy {
       }
     }
     this.assetFiltersBehavior.$assetFilter.next(this.requestParam);
-    this.getAssets();
+    this.utmNetScanService.notifyRefresh(true);
   }
 
   onFilterChange($event: { prop: AssetFieldFilterEnum, values: any }) {
@@ -268,13 +263,13 @@ export class AssetsViewComponent implements OnInit, AfterViewInit, OnDestroy {
     }
     this.assetFiltersBehavior.$assetAppliedFilter.next(this.requestParam);
     this.assetFiltersBehavior.$assetFilter.next(this.requestParam);
-    this.getAssets();
+    this.utmNetScanService.notifyRefresh(true);
   }
 
   onSearch($event: string) {
     this.requestParam.assetIpMacName = $event;
     this.requestParam.page = 0;
-    this.getAssets();
+    this.utmNetScanService.notifyRefresh(true);
   }
 
   deleteAsset(event: Event, asset: NetScanType) {
@@ -293,7 +288,7 @@ export class AssetsViewComponent implements OnInit, AfterViewInit, OnDestroy {
   delete(asset: NetScanType) {
     this.utmNetScanService.deleteCustomAsset(asset.id).subscribe(() => {
       this.utmToastService.showSuccessBottom('Asset deleted successfully');
-      this.getAssets();
+      this.utmNetScanService.notifyRefresh(true);
     }, () => {
       this.utmToastService.showError('Error deleting asset',
         'Error while trying to delete asset, please try again');
@@ -305,7 +300,7 @@ export class AssetsViewComponent implements OnInit, AfterViewInit, OnDestroy {
     event.stopPropagation();
     this.deleting.push(dat.id);
     this.dataSourceInputService.delete(dat.id).subscribe(() => {
-      this.getAssets();
+      this.utmNetScanService.notifyRefresh(true);
       const indexDelete = this.deleting.indexOf(dat.id);
       if (indexDelete !== -1) {
         this.deleting.splice(indexDelete, 1);
@@ -382,7 +377,7 @@ export class AssetsViewComponent implements OnInit, AfterViewInit, OnDestroy {
   showDataTypeModal() {
     const modalSource = this.modalService.open(SourceDataTypeConfigComponent, {centered: true, size: 'lg'});
     modalSource.componentInstance.refreshDataInput.subscribe(() => {
-      this.getAssets();
+      this.utmNetScanService.notifyRefresh(true);
     });
   }
 
@@ -407,8 +402,8 @@ export class AssetsViewComponent implements OnInit, AfterViewInit, OnDestroy {
   starInterval() {
     if (!this.interval) {
       this.interval = setInterval(() => {
-        this.getAssets();
-      }, 10000);
+        this.utmNetScanService.notifyRefresh(true);
+      }, 30000);
     }
   }
 
diff --git a/frontend/src/app/shared/components/utm/util/utm-agent-connect/utm-agent-connect.component.html b/frontend/src/app/shared/components/utm/util/utm-agent-connect/utm-agent-connect.component.html
@@ -6,34 +6,36 @@
     </div>
   </div>
 </div>
+<ng-container *ngIf="agent$ | async as agent">
+  <div class="w-100" [ngClass]="{'mt-3': !hostname}">
+    <app-utm-agent-detail
+      [agent]="agent"
+      [asset]="asset">
+    </app-utm-agent-detail>
+    <div class="form-group mt-3" *ngIf="hasNoReason && agent.status === 'ONLINE'">
+      <label for="reportDesc">Provide the reason to run a command in the agent</label>
+      <textarea class="form-control" [(ngModel)]="websocketCommand.reason" id="reportDesc"
+                rows="3"></textarea>
+    </div>
 
-<div class="w-100" [ngClass]="{'mt-3': !hostname}" *ngIf="agent">
-  <app-utm-agent-detail
-          [agent]="agent"
-          [asset]="asset">
-  </app-utm-agent-detail>
-  <div class="form-group mt-3" *ngIf="hasNoReason && agent.status === 'ONLINE'">
-    <label for="reportDesc">Provide the reason to run a command in the agent</label>
-    <textarea class="form-control" [(ngModel)]="websocketCommand.reason" id="reportDesc"
-              rows="3"></textarea>
+    <div *ngIf="agent && agent.status === 'ONLINE'" class="d-flex justify-content-end">
+      <button class="btn utm-button utm-button-primary" (click)="connectToAgent = true"
+              [disabled]="!websocketCommand.reason && websocketCommand.reason === ''">
+        <i class="icon-terminal mr-1"></i>
+        Connect to console
+      </button>
+    </div>
   </div>
-
-  <div *ngIf="agent && agent.status === 'ONLINE'" class="d-flex justify-content-end">
-    <button class="btn utm-button utm-button-primary" (click)="connectToAgent = true"
-            [disabled]="!websocketCommand.reason && websocketCommand.reason === ''">
-      <i class="icon-terminal mr-1"></i>
-      Connect to console
-    </button>
+  <div *ngIf="agent && agent.status === 'ONLINE'" class="alert alert-warning alert-styled-right mt-3 alert-dismissible">
+    <span class="font-weight-semibold">Warning! </span>
+    <span>You can cause damage to the infrastructure and services of your organization</span>
   </div>
-</div>
-<div *ngIf="agent && agent.status === 'ONLINE'" class="alert alert-warning alert-styled-right mt-3 alert-dismissible">
-  <span class="font-weight-semibold">Warning! </span>
-  <span>You can cause damage to the infrastructure and services of your organization</span>
-</div>
-<div *ngIf="agent && agent.status === 'OFFLINE'" class="alert alert-info alert-styled-right mt-3 info-dismissible">
-  <span class="font-weight-semibold">Info! </span>
-  <span>The agent is offline. Data shown is from the last successful sync.</span>
-</div>
-<app-utm-agent-console *ngIf="agent && connectToAgent" [websocketCommand]="websocketCommand"
-                       (close)="connectToAgent = false"
-                       [hostname]="agent.hostname"></app-utm-agent-console>
+  <div *ngIf="agent && agent.status === 'OFFLINE'" class="alert alert-info alert-styled-right mt-3 info-dismissible">
+    <span class="font-weight-semibold">Info! </span>
+    <span>The agent is offline. Data shown is from the last successful sync.</span>
+  </div>
+  <app-utm-agent-console *ngIf="agent && connectToAgent" [websocketCommand]="websocketCommand"
+                         (close)="connectToAgent = false"
+                         [hostname]="agent.hostname"></app-utm-agent-console>
+</ng-container>
+
diff --git a/frontend/src/app/shared/components/utm/util/utm-agent-connect/utm-agent-connect.component.ts b/frontend/src/app/shared/components/utm/util/utm-agent-connect/utm-agent-connect.component.ts
@@ -1,19 +1,21 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
 import {NetScanType} from '../../../../../assets-discover/shared/types/net-scan.type';
 import {UtmAgentManagerService} from '../../../../services/agent/utm-agent-manager.service';
 import {AgentStatusEnum, AgentType} from '../../../../types/agent/agent.type';
 import {IncidentCommandType} from '../../../../types/incident/incident-command.type';
+import {Observable, of} from "rxjs";
+import {catchError, map} from "rxjs/operators";
 
 @Component({
   selector: 'app-utm-agent-connect',
   templateUrl: './utm-agent-connect.component.html',
   styleUrls: ['./utm-agent-connect.component.css']
 })
-export class UtmAgentConnectComponent implements OnInit {
+export class UtmAgentConnectComponent implements OnInit, OnChanges {
   @Input() hostname: string;
   @Input() asset: NetScanType;
   @Input() websocketCommand: IncidentCommandType;
-  agent: AgentType;
+  agent$: Observable<AgentType>;
   connectToAgent = false;
   hasNoReason = false;
 
@@ -22,22 +24,26 @@ export class UtmAgentConnectComponent implements OnInit {
 
   ngOnInit() {
     this.hasNoReason = this.websocketCommand.reason === '' || !this.websocketCommand.reason;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
     if (this.hostname) {
-      this.agentManagerService.getAgent(this.hostname).subscribe(response => {
-        this.agent = response.body;
-      },
-      error => this.assetTypeToAgentType());
+    this.agent$ =  this.agentManagerService.getAgent(this.hostname)
+      .pipe(
+        map(response => response.body),
+        catchError(() => this.assetTypeToAgentType() )
+      );
     }
   }
 
   onAgentSelect($event: AgentType) {
     this.websocketCommand.reason = '';
     this.hasNoReason = true;
-    this.agent = $event;
+    this.agent$ = of($event);
   }
 
   assetTypeToAgentType() {
-    this.agent = {
+    return of({
       ip: this.asset.assetIp,
       hostname: this.asset.assetName,
       os: this.asset.assetOs,
@@ -52,6 +58,6 @@ export class UtmAgentConnectComponent implements OnInit {
       osMinorVersion: this.asset.assetOs,
       aliases: '',
       addresses: ''
-    };
+    });
   }
 }
diff --git a/frontend/src/app/shared/components/utm/util/utm-agent-detail/utm-agent-detail.component.ts b/frontend/src/app/shared/components/utm/util/utm-agent-detail/utm-agent-detail.component.ts
@@ -25,6 +25,7 @@ export class UtmAgentDetailComponent implements OnInit {
   }
 
   ngOnInit() {
+    console.log(this.agent);
     this.agentIp = this.agent.ip;
     this.ips = this.agent.addresses !== '' ? this.agent.addresses.split(',') : [];
     this.macs = this.agent.mac !== '' ? this.agent.mac.split(',') : [];

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@ export class UtmAgentDetailComponent implements OnInit {`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`ngOnInit() {`
	`28`	`+ console.log(this.agent);`
`28`	`29`	`this.agentIp = this.agent.ip;`
`29`	`30`	`this.ips = this.agent.addresses !== '' ? this.agent.addresses.split(',') : [];`
`30`	`31`	`this.macs = this.agent.mac !== '' ? this.agent.mac.split(',') : [];`