diff --git a/src/packages/infra/component/map/map.component.html b/src/packages/infra/component/map/map.component.html index 50215d5..429b218 100644 --- a/src/packages/infra/component/map/map.component.html +++ b/src/packages/infra/component/map/map.component.html @@ -58,19 +58,20 @@ + + - - + diff --git a/src/packages/infra/component/map/map.component.ts b/src/packages/infra/component/map/map.component.ts index 01513e1..7538215 100644 --- a/src/packages/infra/component/map/map.component.ts +++ b/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, @@ -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: 'ProbeMenu', icon: 'fa-check' } + { label: 'Probe Menu', command: (event) => this.closeContextMenu() }, + { label: 'View info', icon: 'fa-plus', command: (event) => this.viewInfo() } ]; this.contextMenuHost = [ - { label: 'HostMenu1', icon: 'fa-check' }, - { label: 'HostMenu2', icon: 'fa-check' }, + { label: 'Host Menu', command: (event) => this.closeContextMenu() }, + { 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); - } - if (node.type === 'host') { + } else 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 = [