ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-13 21:32:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Dialog for VPCS added

Browse Source
This commit is contained in:
Piotr Pekala 2019-09-09 06:57:42 -07:00
parent 5e76feca5c
commit ecce86aaf7
10 changed files with 189 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/app.module.ts
View File

@ -211,6 +211,8 @@ import { ProjectsFilter } from './filters/projectsFilter.pipe';
import { ComputeService } from './services/compute.service';
import { ReloadNodeActionComponent } from './components/project-map/context-menu/actions/reload-node-action/reload-node-action.component';
import { SuspendNodeActionComponent } from './components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component';
import { ConfigActionComponent } from './components/project-map/context-menu/actions/config-action/config-action.component';
import { ConfiguratorDialogVpcsComponent } from './components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component';
if (environment.production) {
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@ -349,7 +351,9 @@ if (environment.production) {
ChangeSymbolActionComponent,
EditProjectDialogComponent,
ReloadNodeActionComponent,
SuspendNodeActionComponent
SuspendNodeActionComponent,
ConfigActionComponent,
ConfiguratorDialogVpcsComponent
],
imports: [
BrowserModule,
@ -449,7 +453,8 @@ if (environment.production) {
SaveProjectDialogComponent,
InfoDialogComponent,
ChangeSymbolDialogComponent,
EditProjectDialogComponent
EditProjectDialogComponent,
ConfiguratorDialogVpcsComponent
],
bootstrap: [AppComponent]
})

1
src/app/cartography/models/node.ts
View File

@ -5,6 +5,7 @@ export class Node {
command_line: string;
compute_id: string;
console: number;
console_auto_start: boolean;
console_host: string;
console_type: string;
first_port_name: string;

4
src/app/components/project-map/context-menu/actions/config-action/config-action.component.html Normal file
View File

@ -0,0 +1,4 @@
<button mat-menu-item (click)="configureNode()">
<mat-icon>settings_applications</mat-icon>
<span>Configure</span>
</button>

0
src/app/components/project-map/context-menu/actions/config-action/config-action.component.spec.ts Normal file
View File

58
src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts Normal file
View File

@ -0,0 +1,58 @@
import { Component, Input, OnInit, OnChanges } from '@angular/core';
import { Server } from '../../../../../models/server';
import { Node } from '../../../../../cartography/models/node';
import { MatDialog, MatDialogRef } from '@angular/material';
import { ConfiguratorDialogVpcsComponent } from '../../../node-editors/configurator/vpcs/configurator-vpcs.component';
@Component({
selector: 'app-config-node-action',
templateUrl: './config-action.component.html'
})
export class ConfigActionComponent {
@Input() server: Server;
@Input() node: Node;
private conf = {
width: '600px',
autoFocus: false
};
dialogRef;
constructor(private dialog: MatDialog) {}
configureNode() {
if (this.node.node_type === 'vpcs') {
this.dialogRef = this.dialog.open(ConfiguratorDialogVpcsComponent, this.conf);
} else if (this.node.node_type === 'ethernet_hub') {
} else if (this.node.node_type === 'ethernet_switch') {
} else if (this.node.node_type === 'cloud') {
} else if (this.node.node_type === 'dynamips') {
} else if (this.node.node_type === 'iou') {
} else if (this.node.node_type === 'qemu') {
} else if (this.node.node_type === 'virtualbox') {
} else if (this.node.node_type === 'vmware') {
} else if (this.node.node_type === 'docker') {
} else if (this.node.node_type === 'nat') {
} else if (this.node.node_type === 'frame_relay_switch') {
} else if (this.node.node_type === 'atm_switch') {
} else if (this.node.node_type === 'traceng') {
}
let instance = this.dialogRef.componentInstance;
instance.server = this.server;
instance.node = this.node;
}
}

4
src/app/components/project-map/context-menu/context-menu.component.html
View File

@ -5,6 +5,10 @@
[server]="server"
[node]="nodes[0]"
></app-show-node-action>
<app-config-node-action *ngIf="nodes.length===1"
[server]="server"
[node]="nodes[0]"
></app-config-node-action>
<app-start-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-start-node-action>
<app-suspend-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-suspend-node-action>
<app-stop-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-stop-node-action>

7
src/app/components/project-map/node-editors/configurator/configurator.component.scss Normal file
View File

@ -0,0 +1,7 @@
.form-field {
width: 100%;
}
.select {
width: 100%;
}

39
src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.html Normal file
View File

@ -0,0 +1,39 @@
<h1 mat-dialog-title>Configurator for node {{node.name}}</h1>
<div class="modal-form-container">
<div class="content">
<div class="default-content">
<mat-card class="matCard">
<form [formGroup]="inputForm">
<mat-form-field class="form-field">
<input
matInput type="text"
[(ngModel)]="node.name"
formControlName="name"
placeholder="Name">
</mat-form-field>
<mat-form-field class="select">
<mat-select
placeholder="Console type"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="node.console_type">
<mat-option *ngFor="let type of consoleTypes" [value]="type">
{{type}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox
[ngModelOptions]="{standalone: true}"
[(ngModel)]="node.console_auto_start">
Auto start console
</mat-checkbox>
</form>
</mat-card>
</div>
</div>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
<button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
</div>

58
src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts Normal file
View File

@ -0,0 +1,58 @@
import { Component, OnInit, Input } from "@angular/core";
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { VpcsConfigurationService } from '../../../../../services/vpcs-configuration.service';
import { Node } from '../../../../../cartography/models/node';
import { Server } from '../../../../../models/server';
import { NodeService } from '../../../../../services/node.service';
import { ToasterService } from '../../../../../services/toaster.service';
import { MatDialogRef } from '@angular/material';
@Component({
selector: 'app-configurator-vpcs',
templateUrl: './configurator-vpcs.component.html',
styleUrls: ['../configurator.component.scss']
})
export class ConfiguratorDialogVpcsComponent implements OnInit {
server: Server;
node: Node;
inputForm: FormGroup;
consoleTypes: string[] = [];
categories = [];
constructor(
public dialogRef: MatDialogRef<ConfiguratorDialogVpcsComponent>,
public nodeService: NodeService,
private toasterService: ToasterService,
private formBuilder: FormBuilder,
private vpcsConfigurationService: VpcsConfigurationService
) {
this.inputForm = this.formBuilder.group({
name: new FormControl('', Validators.required)
});
}
ngOnInit() {
this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
this.node = node;
this.getConfiguration();
})
}
getConfiguration() {
this.consoleTypes = this.vpcsConfigurationService.getConsoleTypes();
this.categories = this.vpcsConfigurationService.getCategories();
}
onSaveClick() {
this.nodeService.updateNode(this.server, this.node).subscribe(() => {
this.toasterService.success(`Node ${this.node.name} updated.`);
this.onCancelClick();
});
}
onCancelClick() {
this.dialogRef.close();
}
}

11
src/app/services/node.service.ts
View File

@ -86,6 +86,13 @@ export class NodeService {
});
}
updateNode(server: Server, node: Node): Observable<Node> {
return this.httpServer.put<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`, {
console_type: node.console_type,
name: node.name
});
}
delete(server: Server, node: Node) {
return this.httpServer.delete<Node>(server, `/projects/${node.project_id}/nodes/${node.node_id}`);
}
@ -99,6 +106,10 @@ export class NodeService {
});
}
getNode(server: Server, node: Node) {
return this.httpServer.get(server, `/projects/${node.project_id}/nodes/${node.node_id}`)
}
getConfiguration(server: Server, node: Node) {
let urlPath: string = `/projects/${node.project_id}/nodes/${node.node_id}`