noti badge bug fix & map context menu is adding

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">
+<li role="menuitem" *ngFor="let noti of notifications | slice:0:5; 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'}">
+    <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>

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>

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;
+    }
+  }
+
+}
+

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
 ];

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> -->
+
+
 
 
 

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;
+  // visibleSidebar = false;
-  selectedNode: Object = null;
+  // 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') {
+    const nodeType = event.node.type;
-      return;
+    // 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  = {
+    // const nodeType = event.node.type;
-      id : event.node.obj
+    // if (nodeType !== 'probe' && nodeType !== 'host' && nodeType !== 'service') {
-    };
+    //   return;
-    this.selectedNode = probe;
+    // }
-    this.visibleSidebar = true;
+    // 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 = [
     ]
   }
 ];
+

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>

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;
+    }
+  }
+
+}
+