feat: improve asset source sorting and display in assets view

Signed-off-by: Manuel Abascal <[email protected]>

Author: mjabascal10

CHANGELOG.md

@@ -1,4 +1,5 @@
 # UTMStack 10.9.2 Release Notes
 
 -- Added new Pacific time zones (New Zealand and Fiji) to the Date Settings section.
--- Added TLS connection options and setup steps for secure Syslog integration
+-- Added TLS connection options and setup steps for secure Syslog integration
+-- Improved sorting of asset sources in tables, ensuring consistent and predictable order for names, IPs, and combined entries.

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

@@ -98,7 +98,7 @@ <h5 class="card-title mb-0 text-uppercase label-header">
               <th (sort)="onSortBy($event)"
                   [isSortable]="true"
                   [sortEvent]="sortEvent"
-                  [sortable]="'assetIp'"
+                  [sortable]="'displayName'"
                   appColumnSortable
                   class="font-weight-semibold cursor-pointer">
                 Source
@@ -143,7 +143,7 @@ <h5 class="card-title mb-0 text-uppercase label-header">
                   <app-asset-status [asset]="asset"></app-asset-status>
                 </td>
                 <td>
-                  {{getAssetSource(asset)}}
+                  {{ asset.displayName }}
                 </td>
                 <td>
                   <div class="d-flex justify-content-start align-items-start flex-wrap w-100 h-100"

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

@@ -30,6 +30,7 @@ import {AssetFilterType} from '../shared/types/asset-filter.type';
 import {UtmDataInputStatus} from '../shared/types/data-source-input.type';
 import {NetScanType} from '../shared/types/net-scan.type';
 import {SourceDataTypeConfigComponent} from '../source-data-type-config/source-data-type-config.component';
+import {SortDirection} from "../../shared/directives/sortable/type/sort-direction.type";
 
 @Component({
   selector: 'app-assets-view',
@@ -105,11 +106,6 @@ export class AssetsViewComponent implements OnInit, OnDestroy {
 
   }
 
-  ngOnDestroy(): void {
-    this.stopInterval(true);
-    this.assetFiltersBehavior.$assetFilter.next(null);
-  }
-
   setInitialWidth() {
     const dimensions = calcTableDimension(this.pageWidth);
     this.tableWidth = dimensions.tableWidth;
@@ -122,9 +118,28 @@ export class AssetsViewComponent implements OnInit, OnDestroy {
   }
 
   getAssets() {
-    this.utmNetScanService.query(this.requestParam).subscribe(response => {
+    this.utmNetScanService.query(this.requestParam)
+      .subscribe(response => {
       this.totalItems = Number(response.headers.get('X-Total-Count'));
-      this.assets = response.body;
+      const assets = response.body || [];
+
+      this.assets = assets.map(asset => {
+        const displayName =
+          asset.assetName && asset.assetIp
+            ? `${asset.assetName} (${asset.assetIp})`
+            : asset.assetName
+              ? asset.assetName
+              : asset.assetIp
+                ? asset.assetIp
+                : 'Unknown source';
+
+        const sortKey = (asset.assetName || '') + (asset.assetIp || '');
+
+        return { ...asset, displayName, sortKey };
+      });
+
+      console.log(this.assets);
+
       this.loading = false;
     });
   }
@@ -154,8 +169,42 @@ export class AssetsViewComponent implements OnInit, OnDestroy {
   }
 
   onSortBy($event: SortEvent) {
-    this.requestParam.sort = $event.column + ',' + $event.direction;
-    this.getAssets();
+    if ($event.column === 'displayName') {
+      this.sortAssets($event.direction);
+    } else {
+      this.requestParam.sort = $event.column + ',' + $event.direction;
+      this.getAssets();
+    }
+  }
+
+  sortAssets(direction: SortDirection) {
+    this.assets.sort((a, b) => {
+
+      if (a.displayName === 'Unknown source') { return 1; }
+      if (b.displayName === 'Unknown source') { return -1; }
+
+      const aVal = a.sortKey!;
+      const bVal = b.sortKey!;
+
+      const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
+      const aIsIP = ipRegex.test(aVal);
+      const bIsIP = ipRegex.test(bVal);
+
+      if (aIsIP && bIsIP) {
+        const aOctets = aVal.split('.').map(Number);
+        const bOctets = bVal.split('.').map(Number);
+        for (let i = 0; i < 4; i++) {
+          if (aOctets[i] !== bOctets[i]) { return direction === 'asc' ? aOctets[i] - bOctets[i] : bOctets[i] - aOctets[i]; }
+        }
+        return 0;
+      }
+
+      if (aIsIP) { return direction === 'asc' ? -1 : 1; }
+      if (bIsIP) { return direction === 'asc' ? 1 : -1; }
+
+      const cmp = aVal.localeCompare(bVal, undefined, { numeric: true, sensitivity: 'base' });
+      return direction === 'asc' ? cmp : -cmp;
+    });
   }
 
   toggleCheck() {
@@ -279,19 +328,6 @@ export class AssetsViewComponent implements OnInit, OnDestroy {
     });
   }
 
-
-  getAssetSource(asset: NetScanType) {
-    if (asset.assetName && asset.assetIp) {
-      return asset.assetName + ' (' + asset.assetIp + ')';
-    } else if (asset.assetName) {
-      return asset.assetName;
-    } else if (asset.assetIp) {
-      return asset.assetIp;
-    } else {
-      return 'Unknown source';
-    }
-  }
-
   navigateToDataManagement(ip: string) {
     const queryParams = {alertType: 'ALERT'};
     queryParams[ALERT_SENSOR_FIELD] = ElasticOperatorsEnum.IS + ChartValueSeparator.BUCKET_SEPARATOR + ip;
@@ -374,7 +410,12 @@ export class AssetsViewComponent implements OnInit, OnDestroy {
     if (!this.interval) {
       this.interval = setInterval(() => {
         this.getAssets();
-      }, 10000);
+      }, 60000);
     }
   }
+
+  ngOnDestroy(): void {
+    this.stopInterval(true);
+    this.assetFiltersBehavior.$assetFilter.next(null);
+  }
 }

frontend/src/app/assets-discover/shared/types/net-scan.type.ts

@@ -35,4 +35,6 @@ export class NetScanType {
   assetOsPlatform?: string;
   assetOsMinorVersion?: string;
   assetOsMajorVersion?: string;
+  displayName?: string;
+  sortKey?: string;
 }