From c43d270846e7f272240f22742e0ddd5824c3815e Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Wed, 25 Apr 2018 20:23:30 +0900
Subject: [PATCH] noti badge bug fix & map context menu is adding

---
 .../app.notification.component.html           |  6 +-
 .../host-summary/host-summary.component.html  |  5 ++
 .../host-summary/host-summary.component.ts    | 30 ++++++++
 src/packages/infra/component/index.ts         |  6 +-
 .../infra/component/map/map.component.html    | 28 +++++--
 .../infra/component/map/map.component.ts      | 73 +++++++++++++++----
 .../service-summary.component.html            |  5 ++
 .../service-summary.component.ts              | 32 ++++++++
 8 files changed, 160 insertions(+), 25 deletions(-)
 create mode 100644 src/packages/infra/component/host-summary/host-summary.component.html
 create mode 100644 src/packages/infra/component/host-summary/host-summary.component.ts
 create mode 100644 src/packages/infra/component/service-summary/service-summary.component.html
 create mode 100644 src/packages/infra/component/service-summary/service-summary.component.ts

diff --git a/src/app/commons/component/layout/notification/app.notification.component.html b/src/app/commons/component/layout/notification/app.notification.component.html
index 9d6b575..2b1b18c 100644
--- a/src/app/commons/component/layout/notification/app.notification.component.html
+++ b/src/app/commons/component/layout/notification/app.notification.component.html
@@ -1,8 +1,8 @@
 <div class="ui-g-12 ui-bottom-border-1">
-    No tifications
+    Notifications
 </div>
-<li role="menuitem" *ngFor="let noti of notifications; let i = index" class="ui-bottom-border-1 ui-app-noti">
-    <a *ngIf="i < 5" href="javascript:void(0)" class="topbar-message" (click)="onNotiClick(noti)" [ngStyle]="noti.confirmDate ? '' : {'background-color': 'lightblue'}">
+<li role="menuitem" *ngFor="let noti of notifications | slice:0:5; let i = index" class="ui-bottom-border-1 ui-app-noti">
+    <a href="javascript:void(0)" class="topbar-message" (click)="onNotiClick(noti)" [ngStyle]="noti.confirmDate ? '' : {'background-color': 'lightblue'}">
         <div class="ui-app-noti-title">{{noti.title}}</div>
         <div class="ui-app-noti-content">{{noti.message}}</div>
         <div class="ui-app-noti-date">{{noti.createDate | date: 'short'}}</div>
diff --git a/src/packages/infra/component/host-summary/host-summary.component.html b/src/packages/infra/component/host-summary/host-summary.component.html
new file mode 100644
index 0000000..7944a1e
--- /dev/null
+++ b/src/packages/infra/component/host-summary/host-summary.component.html
@@ -0,0 +1,5 @@
+<div *ngIf="host">
+  <b>{{ host.ip }}</b>
+  <b>{{ host.mac }}</b>
+  <b>{{ host.os.vendor.name }}</b>
+</div>
\ No newline at end of file
diff --git a/src/packages/infra/component/host-summary/host-summary.component.ts b/src/packages/infra/component/host-summary/host-summary.component.ts
new file mode 100644
index 0000000..186350c
--- /dev/null
+++ b/src/packages/infra/component/host-summary/host-summary.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit, AfterContentInit, Input, OnChanges } from '@angular/core';
+import { InfraHost } from '../../model';
+
+
+@Component({
+  selector: 'of-host-summary',
+  templateUrl: './host-summary.component.html',
+})
+export class HostSummaryComponent implements OnInit, AfterContentInit, OnChanges {
+
+  @Input() host: InfraHost;
+  @Input() visible: boolean;
+
+  constructor(
+  ) { }
+
+  ngOnInit() {
+  }
+
+  ngAfterContentInit() {
+  }
+
+  ngOnChanges() {
+    if (!this.visible) {
+      this.host = null;
+    }
+  }
+
+}
+
diff --git a/src/packages/infra/component/index.ts b/src/packages/infra/component/index.ts
index c303bdc..9894e82 100644
--- a/src/packages/infra/component/index.ts
+++ b/src/packages/infra/component/index.ts
@@ -1,7 +1,11 @@
 import { MapComponent } from './map/map.component';
 import { ProbeSummaryComponent } from './probe-summary/probe-summary.component';
+import { HostSummaryComponent } from './host-summary/host-summary.component';
+import { ServiceSummaryComponent } from './service-summary/service-summary.component';
 
 export const COMPONENTS = [
   MapComponent,
-  ProbeSummaryComponent
+  ProbeSummaryComponent,
+  HostSummaryComponent,
+  ServiceSummaryComponent
 ];
diff --git a/src/packages/infra/component/map/map.component.html b/src/packages/infra/component/map/map.component.html
index b27c179..50215d5 100644
--- a/src/packages/infra/component/map/map.component.html
+++ b/src/packages/infra/component/map/map.component.html
@@ -25,42 +25,54 @@
     </div>
   </div>
   <div class="ui-g-12 ui-g-nopad">
-    <p-tree [value]="infraTree" selectionMode="single" [(selection)]="selectedTree" (onNodeSelect)="onNodeSelect($event)">
+    <p-tree [value]="infraTree" selectionMode="single" [(selection)]="selectedTree" (onNodeSelect)="onNodeSelect($event)" [contextMenu]="cm">
 
       <ng-template let-node pTemplate="default">
         <div>{{node.label}}</div>
       </ng-template>
 
       <ng-template let-node pTemplate="infra">
-        <div>{{node.label}}</div>
+        <div (contextmenu)="nodeMenu($event, node)">{{node.label}}</div>
       </ng-template>
 
       <ng-template let-node pTemplate="probe">
-        <div>{{node.label}}</div>
+        <div (contextmenu)="nodeMenu($event, node)">{{node.label}}</div>
       </ng-template>
 
       <ng-template let-node pTemplate="host">
-        <div>{{node.label}}</div>
+        <div (contextmenu)="nodeMenu($event, node)">{{node.label}}</div>
       </ng-template>
 
       <ng-template let-node pTemplate="service">
-        <div>{{node.label}}</div>
+        <div (contextmenu)="nodeMenu($event, node)">{{node.label}}</div>
       </ng-template>
 
       <ng-template let-node pTemplate="sensor">
-        <div><i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>{{node.label}}</div>
+        <div (contextmenu)="nodeMenu($event, node)">
+          <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>{{node.label}}</div>
       </ng-template>
 
     </p-tree>
   </div>
 </div>
 
+<p-contextMenu #cmProbe [model]="contextMenuProbe"></p-contextMenu>
+<p-contextMenu #cmHost [model]="contextMenuHost"></p-contextMenu>
 
-<p-sidebar [(visible)]="visibleSidebar" position="bottom" [baseZIndex]="10000">
+
+<!-- <p-sidebar [(visible)]="visibleSidebar" position="bottom" [baseZIndex]="10000">
   <div *ngIf="selectedNodeType === 'probe'">
     <of-probe-summary [probe]="selectedNode" [visible]="visibleSidebar"></of-probe-summary>
   </div>
-</p-sidebar>
+  <div *ngIf="selectedNodeType === 'host'">
+    <of-host-summary [host]="selectedNode" [visible]="visibleSidebar"></of-host-summary>
+  </div>
+  <div *ngIf="selectedNodeType === 'service'">
+    <of-service-summary [service]="selectedNode" [visible]="visibleSidebar"></of-service-summary>
+  </div>
+</p-sidebar> -->
+
+
 
 
 
diff --git a/src/packages/infra/component/map/map.component.ts b/src/packages/infra/component/map/map.component.ts
index 24ee678..01513e1 100644
--- a/src/packages/infra/component/map/map.component.ts
+++ b/src/packages/infra/component/map/map.component.ts
@@ -6,7 +6,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { Router } from '@angular/router';
-import { TreeNode } from 'primeng/primeng';
+import { TreeNode, MenuItem, ContextMenu } from 'primeng/primeng';
 import { Store, select } from '@ngrx/store';
 import * as ListStore from '../../store/list';
 import { ListSelector } from '../../store';
@@ -53,9 +53,16 @@ export class MapComponent implements OnInit, AfterContentInit {
   targetTreeMap: Map<number, TreeNode> = new Map();
 
   DEFAULT_EXPANDED: Boolean = true;
-  visibleSidebar = false;
-  selectedNodeType: string;
-  selectedNode: Object = null;
+
+  // visibleSidebar = false;
+  // selectedNodeType: string;
+  // selectedNode: Object = null;
+
+  contextMenuProbe: MenuItem[];
+  contextMenuHost: MenuItem[];
+
+  @ViewChild('cmProbe') cmProbe: ContextMenu;
+  @ViewChild('cmHost') cmHost: ContextMenu;
 
   constructor(private router: Router,
     private listStore: Store<ListStore.State>,
@@ -109,7 +116,20 @@ export class MapComponent implements OnInit, AfterContentInit {
     );
   }
 
-  ngOnInit() { }
+  ngOnInit() {
+    this.initContextMenu();
+  }
+
+  initContextMenu() {
+    this.contextMenuProbe = [
+      // { label: 'Delete file', icon: 'fa-delete', command: (event) => this.deleteFile(this.selectedMenuItem) }
+      { label: 'ProbeMenu', icon: 'fa-check' }
+    ];
+    this.contextMenuHost = [
+      { label: 'HostMenu1', icon: 'fa-check' },
+      { label: 'HostMenu2', icon: 'fa-check' },
+    ];
+  }
 
   searchObj(treeList: any[], target: Target, searchList: any[]) {
 
@@ -377,15 +397,41 @@ export class MapComponent implements OnInit, AfterContentInit {
   }
 
   onNodeSelect(event) {
-    if (event.node.type !== 'probe') {
-      return;
+    const nodeType = event.node.type;
+    // this.selectedNodeType = nodeType;
+    if (nodeType === 'probe') {
+      this.router.navigate(['probe', event.node.obj, 'info']);
+    } else if (nodeType === 'host') {
     }
-    this.selectedNodeType = event.node.type;
-    const probe  = {
-      id : event.node.obj
-    };
-    this.selectedNode = probe;
-    this.visibleSidebar = true;
+
+    // const nodeType = event.node.type;
+    // if (nodeType !== 'probe' && nodeType !== 'host' && nodeType !== 'service') {
+    //   return;
+    // }
+    // this.selectedNodeType = nodeType;
+    // if (nodeType === 'probe') {
+    //   const probe = {
+    //     id: event.node.obj
+    //   };
+    //   this.selectedNode = probe;
+    // } else {
+    //   this.selectedNode = event.node.obj;
+    // }
+
+    // this.visibleSidebar = true;
+  }
+
+  public nodeMenu(event: MouseEvent, node: any) {
+    this.cmProbe.hide();
+    this.cmHost.hide();
+    if (node.type === 'probe') {
+      this.cmProbe.show(event);
+    }
+    if (node.type === 'host') {
+      this.cmHost.show(event);
+    }
+
+    return false;
   }
 
 }
@@ -559,3 +605,4 @@ const testInfraList = [
     ]
   }
 ];
+
diff --git a/src/packages/infra/component/service-summary/service-summary.component.html b/src/packages/infra/component/service-summary/service-summary.component.html
new file mode 100644
index 0000000..451c6db
--- /dev/null
+++ b/src/packages/infra/component/service-summary/service-summary.component.html
@@ -0,0 +1,5 @@
+<div *ngIf="service">
+  <b>{{ service.vendor.name }}</b>
+  <b>{{ service.port }}</b>
+  <b>{{ service.portType }}</b>
+</div>
\ No newline at end of file
diff --git a/src/packages/infra/component/service-summary/service-summary.component.ts b/src/packages/infra/component/service-summary/service-summary.component.ts
new file mode 100644
index 0000000..44ecdfe
--- /dev/null
+++ b/src/packages/infra/component/service-summary/service-summary.component.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit, AfterContentInit, Input, OnChanges } from '@angular/core';
+import { InfraHost } from '../../model';
+import { InfraService } from '../../service/infra.service';
+
+
+@Component({
+  selector: 'of-service-summary',
+  templateUrl: './service-summary.component.html',
+})
+export class ServiceSummaryComponent implements OnInit, AfterContentInit, OnChanges {
+
+  @Input() service: InfraService;
+  @Input() visible: boolean;
+
+  constructor(
+  ) { }
+
+  ngOnInit() {
+  }
+
+  ngAfterContentInit() {
+    console.log(this.service);
+  }
+
+  ngOnChanges() {
+    if (!this.visible) {
+      this.service = null;
+    }
+  }
+
+}
+