detail

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

@@ -1,22 +1,50 @@
 <div class="ui-g-12">
-  <div class="ui-g-6">
+
+  <span>{{host.name}}</span>
+  <span>{{host.address}}</span>
+
+  <p-tabView>
+    <p-tabPanel header="General">
+
       <ul class="key-value">
-      <li *ngIf="host.address">
+
-        IP Address
+        <li *ngIf="host.deviceType">
-        <span class="meta-value">{{host.address}}</span>
+          Type
+          <span class="meta-value">{{host.deviceType}}</span>
         </li>
-      <li *ngIf="host.name">
+        <li *ngIf="host.deviceVendor">
-        Name
+          Vendor
-        <span class="meta-value">{{host.name}}</span>
+          <span class="meta-value">{{host.deviceVendor}}</span>
         </li>
+        <li *ngIf="host.model">
+          Model
+          <span class="meta-value">{{host.model}}</span>
+        </li>
+
+        <li *ngIf="host.osType">
+          OS
+          <span class="meta-value">{{host.osType}}</span>
+        </li>
+
         <li *ngIf="host.mac">
           Mac Address
           <span class="meta-value">{{host.mac}}</span>
         </li>
-      <li *ngIf="host.portList">
+
-        Opened Ports
+        <li *ngIf="host.discoveredBy">
-        <span class="meta-value">{{host.portList.length}}</span>
+          Discovered by
+          <span class="meta-value">{{host.discoveredBy.join(',')}}</span>
         </li>
       </ul>
-  </div>
+
+    </p-tabPanel>
+
+    <p-tabPanel header="Metadata" *ngIf="host.meta && host.meta.length > 0">
+
+    </p-tabPanel>
+
+    <p-tabPanel header="Ports" *ngIf="host.portList">
+      <p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
+    </p-tabPanel>
+  </p-tabView>
 </div>

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

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Host } from '@overflow/model/discovery';
+import { Host, Port } from '@overflow/model/discovery';
 
 
 @Component({
@@ -10,6 +10,8 @@ import { Host } from '@overflow/model/discovery';
 export class HostDetailComponent {
 
   @Input() host: Host;
+  ports: Port[];
+  selectedPort: Port;
 
   constructor(
   ) {

src/commons/component/nic-dropdown.component.ts

@@ -35,6 +35,7 @@ export class NicDropdownComponent implements OnInit {
     this.probeService.call<Interface>('MachineService.Interfaces').pipe(
       map((ifaces: Interface[]) => {
         ifaces.forEach(iface => {
+          console.log(iface);
           iface.addresses.forEach(address => {
             if (address.metaIPType.key != toMetaIPType(MetaIPTypeEnum.V4).key) {
               return;

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

@@ -1,7 +1,8 @@
 <div class="ui-g">
   <div class="detail-img">
     <svg width="200" height="200" viewBox="20 40 140 100">
-      <image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg" />
+      <image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg"
+      />
     </svg>
   </div>
   <div class="detail-content">
@@ -9,7 +10,7 @@
     <ng-container [ngSwitch]="node.group">
 
       <ng-container *ngSwitchCase="'zone'">
-        <app-zone-detail [zone]=""></app-zone-detail>
+        <app-zone-detail [zone]="node.target"></app-zone-detail>
       </ng-container>
 
       <ng-container *ngSwitchCase="'host'">

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

@@ -1,5 +1,12 @@
 <div class="ui-g-12">
-  <div class="ui-g-6">
+
+  <span>
+    {{service.name}} {{service.port.host.address}}
+  </span>
+
+  <p-tabView>
+    <p-tabPanel header="General">
+
       <ul class="key-value">
         <li *ngIf="service.key">
           Name
@@ -17,10 +24,13 @@
           Crypto Type
           <span class="meta-value">{{service.metaCryptoType.name}}</span>
         </li>
-      <!-- <li *ngFor="let item of service.meta.entries()">
-        {{item[0]}}
-        <span class="meta-value">{{item[1]}}</span>
-      </li> -->
       </ul>
-  </div>
+
+    </p-tabPanel>
+
+    <p-tabPanel header="Metadata ">
+    </p-tabPanel>
+
+  </p-tabView>
+
 </div>

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

@@ -1,3 +1,43 @@
 <div class="ui-g-12">
-  zone component
+  <span>
+    {{zone.network}}
+  </span>
+
+  <p-tabView>
+    <p-tabPanel header="General">
+
+      <ul class="key-value">
+        <li *ngIf="zone.iface">
+          Interface
+          <span class="meta-value">{{zone.iface}}</span>
+        </li>
+
+        <li *ngIf="zone.mac">
+          Mac Address
+          <span class="meta-value">{{zone.mac}}</span>
+        </li>
+
+        <li *ngIf="zone.metaIPType">
+          IP Version
+          <span class="meta-value">{{zone.metaIPType.key}}</span>
+        </li>
+
+        <li *ngIf="zone.network">
+          Network
+          <span class="meta-value">{{zone.network}}</span>
+        </li>
+
+        <li *ngIf="zone.network">
+          IP Range
+          <span class="meta-value">{{ipRange}}</span>
+        </li>
+
+      </ul>
+
+    </p-tabPanel>
+    <p-tabPanel header="Host">
+      <p-listbox [options]="hosts" [(ngModel)]="selectedHost" optionLabel="name"></p-listbox>
+    </p-tabPanel>
+  </p-tabView>
+
 </div>

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

@@ -1,19 +1,31 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
-import { Zone } from '@overflow/model/discovery';
+import { Zone, Host } from '@overflow/model/discovery';
 
+const IPCIDR = require('ip-cidr');
 
 @Component({
   selector: 'app-zone-detail',
   templateUrl: './zone-detail.component.html',
   styleUrls: ['./zone-detail.component.scss'],
 })
-export class ZoneDetailComponent {
+export class ZoneDetailComponent implements OnInit {
 
   @Input() zone: Zone;
+  ipRange: string;
+  hosts: Host[];
+  selectedHost: Host;
 
   constructor(
   ) {
-
   }
 
+  ngOnInit(): void {
+    if (!this.zone) {
+      return;
+    }
+
+    const cidr = new IPCIDR(this.zone.network);
+    this.ipRange = cidr.start() + ' - ' + cidr.end();
+
+  }
 }