mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2024-12-23 23:02:22 +00:00
Information dialog added
This commit is contained in:
Piotr Pekala
parent
031291612f
commit
162806b268
@ -191,6 +191,9 @@ import { DuplicateActionComponent } from './components/project-map/context-menu/
|
||||
import { MapSettingService } from './services/mapsettings.service';
|
||||
import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
|
||||
import { HelpComponent } from './components/help/help.component';
|
||||
import { ShowNodeActionComponent } from './components/project-map/context-menu/actions/show-node-action/show-node-action.component';
|
||||
import { InfoDialogComponent } from './components/project-map/info-dialog/info-dialog.component';
|
||||
import { InfoService } from './services/info.service';
|
||||
|
||||
if (environment.production) {
|
||||
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
|
||||
@ -309,10 +312,12 @@ if (environment.production) {
|
||||
NodesMenuComponent,
|
||||
AdbutlerComponent,
|
||||
ConsoleDeviceActionComponent,
|
||||
ShowNodeActionComponent,
|
||||
ConsoleComponent,
|
||||
NodesMenuComponent,
|
||||
ProjectMapMenuComponent,
|
||||
HelpComponent
|
||||
HelpComponent,
|
||||
InfoDialogComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
@ -388,7 +393,8 @@ if (environment.production) {
|
||||
NodeCreatedLabelStylesFixer,
|
||||
NonNegativeValidator,
|
||||
RotationValidator,
|
||||
MapSettingService
|
||||
MapSettingService,
|
||||
InfoService
|
||||
],
|
||||
entryComponents: [
|
||||
AddServerDialogComponent,
|
||||
@ -404,7 +410,8 @@ if (environment.production) {
|
||||
SymbolsComponent,
|
||||
DeleteConfirmationDialogComponent,
|
||||
HelpDialogComponent,
|
||||
StartCaptureDialogComponent
|
||||
StartCaptureDialogComponent,
|
||||
InfoDialogComponent
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
<button mat-menu-item (click)="showNode()">
|
||||
<mat-icon>info</mat-icon>
|
||||
<span>Show node information</span>
|
||||
</button>
|
||||
@ -0,0 +1,26 @@
|
||||
import { Component, Input, OnInit, OnChanges } from '@angular/core';
|
||||
import { Node } from '../../../../../cartography/models/node';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import { InfoDialogComponent } from '../../../info-dialog/info-dialog.component';
|
||||
import { Server } from '../../../../../models/server';
|
||||
|
||||
@Component({
|
||||
selector: 'app-show-node-action',
|
||||
templateUrl: './show-node-action.component.html'
|
||||
})
|
||||
export class ShowNodeActionComponent {
|
||||
@Input() node: Node;
|
||||
@Input() server: Server
|
||||
|
||||
constructor(private dialog: MatDialog) {}
|
||||
|
||||
showNode() {
|
||||
const dialogRef = this.dialog.open(InfoDialogComponent, {
|
||||
width: '600px',
|
||||
autoFocus: false
|
||||
});
|
||||
let instance = dialogRef.componentInstance;
|
||||
instance.node = this.node;
|
||||
instance.server = this.server;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,10 @@
|
||||
<div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition">
|
||||
<span [matMenuTriggerFor]="contextMenu"></span>
|
||||
<mat-menu #contextMenu="matMenu" class="context-menu-items">
|
||||
<app-show-node-action *ngIf="nodes.length===1"
|
||||
[server]="server"
|
||||
[node]="nodes[0]"
|
||||
></app-show-node-action>
|
||||
<app-start-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-start-node-action>
|
||||
<app-stop-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-stop-node-action>
|
||||
<app-console-device-action
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
<h1 mat-dialog-title>{{node.name}}</h1>
|
||||
|
||||
<div class="modal-form-container">
|
||||
<mat-tab-group>
|
||||
<mat-tab label="General information">
|
||||
<div class='textBox'>
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let info of infoList">
|
||||
{{info}}
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<mat-tab label="Command line">
|
||||
<div *ngIf="node.status !== 'started'" class='textBox'>
|
||||
Please start the node in order to get the command line information.
|
||||
</div>
|
||||
<div *ngIf="node.status === 'started'" class="textBox">
|
||||
{{node.command_line}}
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="onCloseClick()" color="accent">Close</button>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
.textBox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { MatDialogRef } from '@angular/material';
|
||||
import { Node } from '../../../cartography/models/node';
|
||||
import { InfoService } from '../../../services/info.service';
|
||||
import { Server } from '../../../models/server';
|
||||
|
||||
@Component({
|
||||
selector: 'app-info-dialog',
|
||||
templateUrl: './info-dialog.component.html',
|
||||
styleUrls: ['./info-dialog.component.scss']
|
||||
})
|
||||
export class InfoDialogComponent implements OnInit {
|
||||
@Input() server: Server;
|
||||
@Input() node: Node;
|
||||
infoList: string[] = [];
|
||||
commandLine: string = '';
|
||||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<InfoDialogComponent>,
|
||||
private infoService: InfoService
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.infoList = this.infoService.getInfoAboutNode(this.node, this.server);
|
||||
this.commandLine = this.infoService.getCommandLine(this.node);
|
||||
}
|
||||
|
||||
onCloseClick() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
67
src/app/services/info.service.ts
Normal file
67
src/app/services/info.service.ts
Normal file
@ -0,0 +1,67 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
import { Node } from '../cartography/models/node';
|
||||
import { Port } from '../models/port';
|
||||
import { Server } from '../models/server';
|
||||
|
||||
@Injectable()
|
||||
export class InfoService {
|
||||
getInfoAboutNode(node: Node, server: Server): string[] {
|
||||
let infoList: string[] = [];
|
||||
if (node.node_type === 'cloud') {
|
||||
infoList.push(`Cloud ${node.name} is always on.`);
|
||||
} else if (node.node_type === 'nat') {
|
||||
infoList.push(`NAT ${node.name} is always on.`);
|
||||
} else if (node.node_type === 'ethernet-hub') {
|
||||
infoList.push(`Ethernet hub ${node.name} is always on.`);
|
||||
} else if (node.node_type === 'ethernet_switch') {
|
||||
infoList.push(`Ethernet switch ${node.name} is always on.`);
|
||||
} else if (node.node_type === 'frame_relay_switch') {
|
||||
infoList.push(`Frame relay switch ${node.name} is always on.`);
|
||||
} else if (node.node_type === 'atm_switch') {
|
||||
infoList.push(`ATM switch ${node.name} is always on.`);
|
||||
} else if (node.node_type === 'docker') {
|
||||
infoList.push(`Docker ${node.name} is ${node.status}.`);
|
||||
} else if (node.node_type === 'dynamips') {
|
||||
infoList.push(`Dynamips ${node.name} is always on.`);
|
||||
} else if (node.node_type === 'traceng') {
|
||||
infoList.push(`TraceNG ${node.name} is always on.`);
|
||||
} else if (node.node_type === 'virtualbox') {
|
||||
infoList.push(`VirtualBox VM ${node.name} is ${node.status}.`);
|
||||
} else if (node.node_type === 'vmware') {
|
||||
infoList.push(`VMware VM ${node.name} is ${node.status}.`);
|
||||
} else if (node.node_type === 'qemu') {
|
||||
infoList.push(`QEMU VM ${node.name} is ${node.status}.`);
|
||||
} else if (node.node_type === 'iou') {
|
||||
infoList.push(`IOU ${node.name} is always on.`);
|
||||
} else if (node.node_type === 'vpcs') {
|
||||
infoList.push(`Node ${node.name} is ${node.status}.`);
|
||||
}
|
||||
infoList.push(`Running on server ${server.name} with port ${server.port}.`);
|
||||
infoList.push(`Server ID is ${server.id}.`);
|
||||
if (node.console_type !== 'none' && node.console_type !== 'null') {
|
||||
infoList.push(`Console is on port ${node.console} and type is ${node.console_type}.`);
|
||||
}
|
||||
infoList = infoList.concat(this.getInfoAboutPorts(node.ports));
|
||||
return infoList;
|
||||
}
|
||||
|
||||
getInfoAboutPorts(ports: Port[]): string {
|
||||
let response: string = `ports: `
|
||||
ports.forEach(port => {
|
||||
response = response + `adapter_number: ${port.adapter_number},
|
||||
link_type: ${port.link_type},
|
||||
name: ${port.name},
|
||||
port_number: ${port.port_number},
|
||||
short_name: ${port.short_name}, `
|
||||
});
|
||||
return response;
|
||||
}
|
||||
|
||||
getCommandLine(node: Node): string {
|
||||
if (node.node_type === 'cloud' || "nat" || "ethernet_hub" || "ethernet_switch" || "frame_relay_switch" || "atm_switch" || "dynamips" || "traceng" || "iou") {
|
||||
return 'Command line information is not supported for this type of node.';
|
||||
} else {
|
||||
return node.command_line;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user