sort pipe

@overflow/commons/ui/pipe/array-sort.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'sort' })
+export class Sort implements PipeTransform {
+  transform(array: any[], field: string): any[] {
+    array.sort((a: any, b: any) => {
+      if (a[field] < b[field]) {
+        return -1;
+      } else if (a[field] > b[field]) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+    return array;
+  }
+}

@overflow/commons/ui/pipe/index.ts

@@ -1,7 +1,11 @@
-import { ObjectKeys } from "./object-keys";
+import { ObjectKeys } from './object-keys';
-import { stringPrettify } from "./string-prettify";
+import { stringPrettify } from './string-prettify';
+import { IPSort } from './ip-sort';
+import { Sort } from './array-sort';
 
 export const PIPES = [
   ObjectKeys,
-  stringPrettify
+  stringPrettify,
+  IPSort,
+  Sort
 ];

@overflow/commons/ui/pipe/ip-sort.ts

@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'ipSort' })
+export class IPSort implements PipeTransform {
+  transform(array: any[], field: string): any[] {
+    array.sort((a: any, b: any) => {
+      a = this.ip2num(a[field]);
+      b = this.ip2num(b[field]);
+      if (a < b) {
+        return -1;
+      } else if (a > b) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+    return array;
+  }
+
+  ip2num(ip: string): number {
+    return ip.split('.').map((octet, index, array) => {
+      // tslint:disable-next-line:radix
+      return parseInt(octet) * Math.pow(256, (array.length - index - 1));
+    }).reduce((prev, curr) => {
+      return prev + curr;
+    });
+  }
+}

src/commons/component/host-detail.component.html

@@ -68,7 +68,7 @@
 
     <p-tabPanel header="Ports" *ngIf="host.portList">
       <ul class="key-value">
-        <li *ngFor="let port of host.portList">
+        <li *ngFor="let port of host.portList | sort: 'portNumber'">
           <span class="meta-value">{{port.portNumber}} ({{port.metaPortType.key}})</span>
         </li>
       </ul>

src/commons/component/scanner-setting-dropdown.component.ts

@@ -101,7 +101,12 @@ export class ScannerSettingDropdownComponent implements OnInit {
   }
 
   ipToNum(ip: string): number {
-    return ip.split('.').reduce(function (ipInt, octet) { return (ipInt << 8) + parseInt(octet, 10); }, 0) >>> 0;
+    return ip.split('.').map((octet, index, array) => {
+      // tslint:disable-next-line:radix
+      return parseInt(octet) * Math.pow(256, (array.length - index - 1));
+    }).reduce((prev, curr) => {
+      return prev + curr;
+    });
   }
 
   validatePort(value: string, idx: number) {

src/commons/component/zone-detail.component.html

@@ -48,7 +48,7 @@
 
     <p-tabPanel header="Hosts">
       <ul class="key-value">
-        <li *ngFor="let host of zone.hostList">
+        <li *ngFor="let host of zone.hostList | ipSort: 'address'">
           <span class="meta-value">{{host.address}}</span> <span *ngIf="host.name" class="meta-value">
             ({{host.name}})</span>
         </li>