overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

map contextmenu

Browse Source
This commit is contained in:
insanity 2018-04-25 21:34:51 +09:00
parent 8e6dbe9bc3
commit 57470501c0
2 changed files with 72 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/packages/infra/component/map/map.component.html
View File

@ -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">
<div *ngIf="selectedNodeType === 'probe'">
<of-probe-summary [probe]="selectedNode" [visible]="visibleSidebar"></of-probe-summary>
<p-sidebar [(visible)]="visibleSidebar" position="bottom" [baseZIndex]="10000" *ngIf="selectedNode">
<div *ngIf="selectedNode.type === 'probe'">
<of-probe-summary [probe]="targetNodeForView" [visible]="visibleSidebar"></of-probe-summary>
</div>
<div *ngIf="selectedNodeType === 'host'">
<of-host-summary [host]="selectedNode" [visible]="visibleSidebar"></of-host-summary>
<div *ngIf="selectedNode.type === 'host'">
<of-host-summary [host]="targetNodeForView" [visible]="visibleSidebar"></of-host-summary>
</div>
<div *ngIf="selectedNodeType === 'service'">
<of-service-summary [service]="selectedNode" [visible]="visibleSidebar"></of-service-summary>
<div *ngIf="selectedNode.type === 'service'">
<of-service-summary [service]="targetNodeForView" [visible]="visibleSidebar"></of-service-summary>
</div>
</p-sidebar> -->
</p-sidebar>

92
src/packages/infra/component/map/map.component.ts
View File

@ -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: '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 = [