feat(assets-view): refactor asset detail handling and improve status display

Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>

Author: mjabascal10

frontend/src/app/assets-discover/assets-view/assets-view.component.html

@@ -270,16 +270,15 @@ <h5 class="card-title mb-0 text-uppercase label-header">
     <div class="title d-flex justify-content-between  align-items-center border-bottom-1
      border-bottom-grey-100  pl-3 pt-3 pr-3 pb-0">
       <h6 class="card-title text-blue-800 font-weight-light">
-        {{ assetSelected.isAgent }}
-        {{ assetSelected.isAgent ? 'Agent' : 'Source' }} {{ assetName }} details
+        {{ assetSelected.isAgent ? 'Agent' : 'Data Source' }} — {{ assetName }} Details
       </h6>
       <button (click)="closeDetail()" aria-label="Close"
               class="close button-close" type="button">
         <div class="close-icon"></div>
       </button>
     </div>
     <div class="p-3">
-      <div class="w-100" *ngIf="reasonRun">
+      <div class="w-100" *ngIf="reasonRun && assetSelected.isAgent; else assetDetail">
         <app-utm-agent-connect
           [websocketCommand]="reasonRun"
           [asset]="assetSelected"
@@ -289,3 +288,47 @@ <h6 class="card-title text-blue-800 font-weight-light">
     </div>
   </div>
 </div>
+
+<ng-template #assetDetail>
+  <div class="w-100 d-flex justify-content-start mb-2" *ngIf="assetSelected.displayName">
+    <span class="text-blue-800 font-weight-light min-w-70px">Name:</span>&nbsp;
+    {{assetSelected.displayName}}
+  </div>
+  <div class="w-100 mb-2" *ngIf="assetSelected.assetMac && assetSelected.assetMac !== ''">
+    <span class="text-blue-800 font-weight-light min-w-70px">MAC:</span>&nbsp;
+    <div class="d-flex justify-content-start align-items-center flex-wrap">
+     <span *ngFor="let card of assetSelected.assetMac.split(',')" class="badge border-blue-800 border-1 mr-1 mb-1 p-1 text-blue-800">
+       {{card}}
+     </span>
+    </div>
+  </div>
+  <div class="w-100 d-flex justify-content-start mb-2">
+    <span class="text-blue-800 font-weight-light min-w-70px">Status:</span>&nbsp;
+    <span [ngClass]="!assetSelected.status  ? 'text-success-800':'text-warning-800'"
+          class="span-small-icon d-flex justify-content-start align-items-center">
+      <i [ngClass]="'icon-circle2'" class="mr-2"></i>
+      {{ !assetSelected.status ? 'ONLINE' : 'OFFLINE' }}
+    </span>
+  </div>
+  <div class="alert-details w-100 d-flex justify-content-start mb-2 ">
+    <span class="text-blue-800 font-weight-light has-minimum-width">Type:</span>&nbsp;
+    <app-assets-apply-type *ngIf="assetSelected" [assets]="[assetSelected.id]" [typeFormat]="'icon'"
+                           [type]="assetSelected.assetType" class="ml-2">
+    </app-assets-apply-type>
+  </div>
+  <div class="alert-details w-100 d-flex justify-content-start mb-2 ">
+    <span class="text-blue-800 font-weight-light has-minimum-width">Group Source:</span>&nbsp;
+    <app-asset-group-add *ngIf="assetSelected" [assets]="[assetSelected.id]"
+                         [group]="assetSelected.group"
+                         [typeFormat]="'icon'" class="ml-2">
+    </app-asset-group-add>
+  </div>
+  <div class="alert-details w-100 d-flex justify-content-start mb-2 ">
+    <span class="text-blue-800 font-weight-light has-minimum-width">Comment:</span>&nbsp;
+    <app-assets-apply-note *ngIf="assetSelected" [asset]="assetSelected" class="ml-2"></app-assets-apply-note>
+  </div>
+  <div class="agent-details w-100 d-flex justify-content-start mb-2" *ngIf="assetSelected.lastInput">
+    <span class="text-blue-800 font-weight-light min-w-70px">Last seen:</span>&nbsp;
+    {{ assetSelected.lastInput | date }}
+  </div>
+</ng-template>

frontend/src/app/assets-discover/assets-view/assets-view.component.scss

@@ -13,3 +13,7 @@
   height: 100%;
   min-height: 0;
 }
+
+.min-w-70px {
+  min-width: 70px;
+}

frontend/src/app/assets-discover/assets-view/assets-view.component.ts

@@ -19,7 +19,6 @@ import {SortEvent} from '../../shared/directives/sortable/type/sort-event';
 import {ChartValueSeparator} from '../../shared/enums/chart-value-separator';
 import {ElasticOperatorsEnum} from '../../shared/enums/elastic-operators.enum';
 import {IncidentOriginTypeEnum} from '../../shared/enums/incident-response/incident-origin-type.enum';
-import {UtmDatePipe} from '../../shared/pipes/date.pipe';
 import {IncidentCommandType} from '../../shared/types/incident/incident-command.type';
 import {UtmFieldType} from '../../shared/types/table/utm-field.type';
 import {TimeFilterType} from '../../shared/types/time-filter.type';
@@ -44,7 +43,7 @@ import {SourceDataTypeConfigComponent} from '../source-data-type-config/source-d
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AssetsViewComponent implements OnInit, OnDestroy {
-  assets$: Observable<NetScanType[]>;
+
   assets: NetScanType[];
   // defaultTime: ElasticFilterDefaultTime = new ElasticFilterDefaultTime('now-30d', 'now');
   pageWidth = window.innerWidth;

frontend/src/app/shared/components/utm/util/utm-agent-connect/utm-agent-connect.component.ts

@@ -23,7 +23,6 @@ export class UtmAgentConnectComponent implements OnInit, OnChanges {
   }
 
   ngOnInit() {
-    console.log('init');
     this.hasNoReason = this.websocketCommand.reason === '' || !this.websocketCommand.reason;
   }
 

frontend/src/app/shared/components/utm/util/utm-agent-detail/utm-agent-detail.component.ts

@@ -28,8 +28,6 @@ export class UtmAgentDetailComponent implements OnInit {
     this.agentIp = this.agent.ip;
     this.ips = this.agent.addresses !== '' ? this.agent.addresses.split(',') : [];
     this.macs = this.agent.mac !== '' ? this.agent.mac.split(',') : [];
-
-    console.log(this.agent);
   }
 
   public getAgentIcon(): string {