From 27886326020c0dd8ac103cc3232142c2db2fd30e Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Tue, 11 Sep 2018 19:33:00 +0900
Subject: [PATCH] detail

---
 .../component/host-detail.component.html      | 68 +++++++++++++------
 .../component/host-detail.component.ts        |  4 +-
 .../component/nic-dropdown.component.ts       |  1 +
 .../component/node-detail.component.html      |  5 +-
 .../component/service-detail.component.html   | 58 +++++++++-------
 .../component/zone-detail.component.html      | 42 +++++++++++-
 .../component/zone-detail.component.ts        | 20 ++++--
 7 files changed, 146 insertions(+), 52 deletions(-)

diff --git a/src/commons/component/host-detail.component.html b/src/commons/component/host-detail.component.html
index bbb7cfb..f3df8bd 100644
--- a/src/commons/component/host-detail.component.html
+++ b/src/commons/component/host-detail.component.html
@@ -1,22 +1,50 @@
 <div class="ui-g-12">
-  <div class="ui-g-6">
-    <ul class="key-value">
-      <li *ngIf="host.address">
-        IP Address
-        <span class="meta-value">{{host.address}}</span>
-      </li>
-      <li *ngIf="host.name">
-        Name
-        <span class="meta-value">{{host.name}}</span>
-      </li>
-      <li *ngIf="host.mac">
-        Mac Address
-        <span class="meta-value">{{host.mac}}</span>
-      </li>
-      <li *ngIf="host.portList">
-        Opened Ports
-        <span class="meta-value">{{host.portList.length}}</span>
-      </li>
-    </ul>
-  </div>
+
+  <span>{{host.name}}</span>
+  <span>{{host.address}}</span>
+
+  <p-tabView>
+    <p-tabPanel header="General">
+
+      <ul class="key-value">
+
+        <li *ngIf="host.deviceType">
+          Type
+          <span class="meta-value">{{host.deviceType}}</span>
+        </li>
+        <li *ngIf="host.deviceVendor">
+          Vendor
+          <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.discoveredBy">
+          Discovered by
+          <span class="meta-value">{{host.discoveredBy.join(',')}}</span>
+        </li>
+      </ul>
+
+    </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>
\ No newline at end of file
diff --git a/src/commons/component/host-detail.component.ts b/src/commons/component/host-detail.component.ts
index ab56b2a..5b2ad47 100644
--- a/src/commons/component/host-detail.component.ts
+++ b/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(
   ) {
diff --git a/src/commons/component/nic-dropdown.component.ts b/src/commons/component/nic-dropdown.component.ts
index 17f5e66..80e3709 100644
--- a/src/commons/component/nic-dropdown.component.ts
+++ b/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;
diff --git a/src/commons/component/node-detail.component.html b/src/commons/component/node-detail.component.html
index c8ff422..ff946a4 100644
--- a/src/commons/component/node-detail.component.html
+++ b/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'">
diff --git a/src/commons/component/service-detail.component.html b/src/commons/component/service-detail.component.html
index bd2772f..7797809 100644
--- a/src/commons/component/service-detail.component.html
+++ b/src/commons/component/service-detail.component.html
@@ -1,26 +1,36 @@
 <div class="ui-g-12">
-  <div class="ui-g-6">
-    <ul class="key-value">
-      <li *ngIf="service.key">
-        Name
-        <span class="meta-value">{{service.key}}</span>
-      </li>
-      <li *ngIf="service.port">
-        Port
-        <span class="meta-value">{{service.port.metaPortType.name}} {{service.port.portNumber}}</span>
-      </li>
-      <li *ngIf="service.description">
-        Description
-        <span class="meta-value">{{service.description}}</span>
-      </li>
-      <li *ngIf="service.metaCryptoType && service.metaCryptoType.key !== 'NONE'">
-        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>
+
+  <span>
+    {{service.name}} {{service.port.host.address}}
+  </span>
+
+  <p-tabView>
+    <p-tabPanel header="General">
+
+      <ul class="key-value">
+        <li *ngIf="service.key">
+          Name
+          <span class="meta-value">{{service.key}}</span>
+        </li>
+        <li *ngIf="service.port">
+          Port
+          <span class="meta-value">{{service.port.metaPortType.name}} {{service.port.portNumber}}</span>
+        </li>
+        <li *ngIf="service.description">
+          Description
+          <span class="meta-value">{{service.description}}</span>
+        </li>
+        <li *ngIf="service.metaCryptoType && service.metaCryptoType.key !== 'NONE'">
+          Crypto Type
+          <span class="meta-value">{{service.metaCryptoType.name}}</span>
+        </li>
+      </ul>
+
+    </p-tabPanel>
+
+    <p-tabPanel header="Metadata ">
+    </p-tabPanel>
+
+  </p-tabView>
+
 </div>
\ No newline at end of file
diff --git a/src/commons/component/zone-detail.component.html b/src/commons/component/zone-detail.component.html
index 8574915..2207cf3 100644
--- a/src/commons/component/zone-detail.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/commons/component/zone-detail.component.ts b/src/commons/component/zone-detail.component.ts
index 8557855..6c96099 100644
--- a/src/commons/component/zone-detail.component.ts
+++ b/src/commons/component/zone-detail.component.ts
@@ -1,19 +1,31 @@
-import { Component, Input } from '@angular/core';
-import { Zone } from '@overflow/model/discovery';
+import { Component, Input, OnInit } from '@angular/core';
+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();
+
+  }
 }