map contextmenu

src/packages/infra/component/map/map.component.html

@@ -58,19 +58,20 @@
 
 <p-contextMenu #cmProbe [model]="contextMenuProbe"></p-contextMenu>
 <p-contextMenu #cmHost [model]="contextMenuHost"></p-contextMenu>
+<p-contextMenu #cmService [model]="contextMenuService"></p-contextMenu>
+<p-contextMenu #cmSensor [model]="contextMenuSensor"></p-contextMenu>
 
-
+<p-sidebar [(visible)]="visibleSidebar" position="bottom" [baseZIndex]="10000" *ngIf="selectedNode">
-<!-- <p-sidebar [(visible)]="visibleSidebar" position="bottom" [baseZIndex]="10000">
+  <div *ngIf="selectedNode.type === 'probe'">
-  <div *ngIf="selectedNodeType === 'probe'">
+    <of-probe-summary [probe]="targetNodeForView" [visible]="visibleSidebar"></of-probe-summary>
-    <of-probe-summary [probe]="selectedNode" [visible]="visibleSidebar"></of-probe-summary>
   </div>
-  <div *ngIf="selectedNodeType === 'host'">
+  <div *ngIf="selectedNode.type === 'host'">
-    <of-host-summary [host]="selectedNode" [visible]="visibleSidebar"></of-host-summary>
+    <of-host-summary [host]="targetNodeForView" [visible]="visibleSidebar"></of-host-summary>
   </div>
-  <div *ngIf="selectedNodeType === 'service'">
+  <div *ngIf="selectedNode.type === 'service'">
-    <of-service-summary [service]="selectedNode" [visible]="visibleSidebar"></of-service-summary>
+    <of-service-summary [service]="targetNodeForView" [visible]="visibleSidebar"></of-service-summary>
   </div>
-</p-sidebar> -->
+</p-sidebar>
 
 
 

src/packages/infra/component/map/map.component.ts

@@ -54,15 +54,19 @@ export class MapComponent implements OnInit, AfterContentInit {
 
   DEFAULT_EXPANDED: Boolean = true;
 
-  // visibleSidebar = false;
-  // selectedNodeType: string;
-  // selectedNode: Object = null;
-
   contextMenuProbe: MenuItem[];
   contextMenuHost: MenuItem[];
+  contextMenuService: MenuItem[];
+  contextMenuSensor: MenuItem[];
 
   @ViewChild('cmProbe') cmProbe: ContextMenu;
   @ViewChild('cmHost') cmHost: ContextMenu;
+  @ViewChild('cmService') cmService: ContextMenu;
+  @ViewChild('cmSensor') cmSensor: ContextMenu;
+
+  visibleSidebar = false;
+  selectedNode: TreeNode = null;
+  targetNodeForView: Object = null;
 
   constructor(private router: Router,
     private listStore: Store<ListStore.State>,
@@ -122,13 +126,35 @@ export class MapComponent implements OnInit, AfterContentInit {
 
   initContextMenu() {
     this.contextMenuProbe = [
-      // { label: 'Delete file', icon: 'fa-delete', command: (event) => this.deleteFile(this.selectedMenuItem) }
+      { label: 'Probe Menu', command: (event) => this.closeContextMenu() },
-      { label: 'ProbeMenu', icon: 'fa-check' }
+      { label: 'View info', icon: 'fa-plus', command: (event) => this.viewInfo() }
     ];
     this.contextMenuHost = [
-      { label: 'HostMenu1', icon: 'fa-check' },
+      { label: 'Host Menu', command: (event) => this.closeContextMenu() },
-      { label: 'HostMenu2', icon: 'fa-check' },
+      { label: 'View this Host', icon: 'fa-plus', command: (event) => this.viewInfo() },
+      { label: 'Add sensor', icon: 'fa-plus', command: (event) => this.addSensor() },
+      { label: 'Traceroute', icon: 'fa-plus' },
+      { label: 'ARP Test', icon: 'fa-plus' },
+      { label: 'Ping Test', icon: 'fa-plus' },
     ];
+    this.contextMenuService = [
+      { label: 'Service Menu', command: (event) => this.closeContextMenu() },
+      { label: 'View this Service', icon: 'fa-plus', command: (event) => this.viewInfo() },
+      { label: 'Add sensor', icon: 'fa-plus', command: (event) => this.addSensor() },
+    ];
+    this.contextMenuSensor = [
+      { label: 'Sensor Menu', command: (event) => this.closeContextMenu() },
+      { label: 'Edit', icon: 'fa-plus', command: (event) => this.viewInfo() },
+      { label: 'Remove', icon: 'fa-plus', command: (event) => this.addSensor() },
+    ];
+  }
+
+  closeContextMenu() {
+    this.cmProbe.hide();
+    this.cmHost.hide();
+    this.cmService.hide();
+    this.cmSensor.hide();
+
   }
 
   searchObj(treeList: any[], target: Target, searchList: any[]) {
@@ -241,7 +267,9 @@ export class MapComponent implements OnInit, AfterContentInit {
         expandedIcon: 'fa-folder-open',
         collapsedIcon: 'fa-folder',
         expanded: this.DEFAULT_EXPANDED.valueOf(),
-        obj: key,
+        obj: {
+          id: key
+        },
         children: [],
       };
 
@@ -398,42 +426,46 @@ export class MapComponent implements OnInit, AfterContentInit {
 
   onNodeSelect(event) {
     const nodeType = event.node.type;
-    // this.selectedNodeType = nodeType;
+    this.selectedNode = event.node;
     if (nodeType === 'probe') {
-      this.router.navigate(['probe', event.node.obj, 'info']);
+      this.router.navigate(['probe', event.node.obj.id, 'info']);
     } else if (nodeType === 'host') {
     }
-
-    // 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) {
+  viewInfo() {
+    const nodeType = this.selectedNode.type;
+    if (nodeType !== 'probe' && nodeType !== 'host' && nodeType !== 'service') {
+      return;
+    }
+    this.targetNodeForView = this.selectedNode['obj'];
+    this.visibleSidebar = true;
+  }
+
+  nodeMenu(event: MouseEvent, node: any) {
+    this.selectedNode = node;
+
     this.cmProbe.hide();
     this.cmHost.hide();
+    this.cmService.hide();
+    this.cmSensor.hide();
+
     if (node.type === 'probe') {
       this.cmProbe.show(event);
-    }
+    } else if (node.type === 'host') {
-    if (node.type === 'host') {
       this.cmHost.show(event);
+    } else if (node.type === 'service') {
+      this.cmService.show(event);
+    } else if (node.type === 'sensor') {
+      this.cmSensor.show(event);
     }
 
     return false;
   }
 
+  addSensor() {
+    alert('으악 내일 할래');
+  }
 }
 
 const testInfraList = [