mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-02-21 02:01:19 +00:00
Support for ATM switch added
This commit is contained in:
Piotr Pekala
parent
83558d0d4e
commit
75bf2ef3de
@ -222,6 +222,7 @@ import { CustomAdaptersTableComponent } from './components/preferences/common/cu
|
||||
import { ConfiguratorDialogQemuComponent } from './components/project-map/node-editors/configurator/qemu/configurator-qemu.component';
|
||||
import { ConfiguratorDialogCloudComponent } from './components/project-map/node-editors/configurator/cloud/configurator-cloud.component';
|
||||
import { UdpTunnelsComponent } from './components/preferences/common/udp-tunnels/udp-tunnels.component';
|
||||
import { ConfiguratorDialogAtmSwitchComponent } from './components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component';
|
||||
|
||||
if (environment.production) {
|
||||
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
|
||||
@ -371,7 +372,8 @@ if (environment.production) {
|
||||
CustomAdaptersTableComponent,
|
||||
ConfiguratorDialogQemuComponent,
|
||||
ConfiguratorDialogCloudComponent,
|
||||
UdpTunnelsComponent
|
||||
UdpTunnelsComponent,
|
||||
ConfiguratorDialogAtmSwitchComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
@ -478,7 +480,8 @@ if (environment.production) {
|
||||
ConfiguratorDialogSwitchComponent,
|
||||
ConfiguratorDialogVirtualBoxComponent,
|
||||
ConfiguratorDialogQemuComponent,
|
||||
ConfiguratorDialogCloudComponent
|
||||
ConfiguratorDialogCloudComponent,
|
||||
ConfiguratorDialogAtmSwitchComponent
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
|
||||
@ -9,6 +9,7 @@ import { ConfiguratorDialogSwitchComponent } from '../../../node-editors/configu
|
||||
import { ConfiguratorDialogVirtualBoxComponent } from '../../../node-editors/configurator/virtualbox/configurator-virtualbox.component';
|
||||
import { ConfiguratorDialogQemuComponent } from '../../../node-editors/configurator/qemu/configurator-qemu.component';
|
||||
import { ConfiguratorDialogCloudComponent } from '../../../node-editors/configurator/cloud/configurator-cloud.component';
|
||||
import { ConfiguratorDialogAtmSwitchComponent } from '../../../node-editors/configurator/atm_switch/configurator-atm-switch.component';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -50,9 +51,9 @@ export class ConfigActionComponent {
|
||||
} else if (this.node.node_type === 'nat') {
|
||||
|
||||
} else if (this.node.node_type === 'frame_relay_switch') {
|
||||
this.dialogRef = this.dialog.open(ConfiguratorDialogSwitchComponent, this.conf); // to do
|
||||
this.dialogRef = this.dialog.open(ConfiguratorDialogSwitchComponent, this.conf);
|
||||
} else if (this.node.node_type === 'atm_switch') {
|
||||
this.dialogRef = this.dialog.open(ConfiguratorDialogSwitchComponent, this.conf); // to do
|
||||
this.dialogRef = this.dialog.open(ConfiguratorDialogAtmSwitchComponent, this.conf);
|
||||
} else if (this.node.node_type === 'traceng') {
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,109 @@
|
||||
<h1 mat-dialog-title>Configurator for node {{name}}</h1>
|
||||
|
||||
<div class="modal-form-container">
|
||||
<div class="content">
|
||||
<div class="default-content">
|
||||
<mat-card>
|
||||
<table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
|
||||
<ng-container matColumnDef="portIn">
|
||||
<th mat-header-cell *matHeaderCellDef> Port : VPI : VCI </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.portIn}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="portOut">
|
||||
<th mat-header-cell *matHeaderCellDef> Port : VPI : VCI </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.portOut}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef> Actions </th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<button mat-icon-button matTooltip="Delete port" (click)="delete(element)">
|
||||
<mat-icon aria-label="Delete port">delete</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table><br/>
|
||||
|
||||
<form [formGroup]="nameForm">
|
||||
<mat-form-field class="form-field">
|
||||
<input
|
||||
matInput type="text"
|
||||
[(ngModel)]="node.name"
|
||||
formControlName="name"
|
||||
placeholder="Name">
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
||||
<mat-checkbox [(ngModel)]="useVpiOnly">
|
||||
Use VPI only (VP tunnel)
|
||||
</mat-checkbox>
|
||||
|
||||
<form [formGroup]="inputForm">
|
||||
Source
|
||||
<mat-form-field class="form-field">
|
||||
<input
|
||||
matInput type="number"
|
||||
[(ngModel)]="sourcePort"
|
||||
formControlName="sourcePort"
|
||||
placeholder="Port">
|
||||
</mat-form-field>
|
||||
</form>
|
||||
<form [formGroup]="abstractForm">
|
||||
<mat-form-field class="form-field">
|
||||
<input
|
||||
matInput type="number"
|
||||
[(ngModel)]="sourceVpi"
|
||||
formControlName="sourceVpi"
|
||||
placeholder="VPI">
|
||||
</mat-form-field>
|
||||
</form>
|
||||
<form [formGroup]="inputForm">
|
||||
<mat-form-field class="form-field">
|
||||
<input
|
||||
matInput type="number"
|
||||
[(ngModel)]="sourceVci"
|
||||
formControlName="sourceVci"
|
||||
placeholder="VCI">
|
||||
</mat-form-field>
|
||||
Destination
|
||||
<mat-form-field class="form-field">
|
||||
<input
|
||||
matInput type="number"
|
||||
[(ngModel)]="destinationPort"
|
||||
formControlName="destinationPort"
|
||||
placeholder="Port">
|
||||
</mat-form-field>
|
||||
</form>
|
||||
<form [formGroup]="abstractForm">
|
||||
<mat-form-field class="form-field">
|
||||
<input
|
||||
matInput type="number"
|
||||
[(ngModel)]="destinationVpi"
|
||||
formControlName="destinationVpi"
|
||||
placeholder="VPI">
|
||||
</mat-form-field>
|
||||
</form>
|
||||
<form [formGroup]="inputForm">
|
||||
<mat-form-field class="form-field">
|
||||
<input
|
||||
matInput type="number"
|
||||
[(ngModel)]="destinationVci"
|
||||
formControlName="destinationVci"
|
||||
placeholder="VCI">
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
||||
<button mat-button class="form-field" (click)="add()">Add</button>
|
||||
</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>
|
||||
@ -0,0 +1,164 @@
|
||||
import { Component, OnInit, Input } from "@angular/core";
|
||||
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
|
||||
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-atm-switch',
|
||||
templateUrl: './configurator-atm-switch.component.html',
|
||||
styleUrls: ['../configurator.component.scss', '../../../../preferences/preferences.component.scss']
|
||||
})
|
||||
export class ConfiguratorDialogAtmSwitchComponent implements OnInit {
|
||||
server: Server;
|
||||
node: Node;
|
||||
name: string;
|
||||
nameForm: FormGroup;
|
||||
inputForm: FormGroup;
|
||||
abstractForm: FormGroup;
|
||||
consoleTypes: string[] = [];
|
||||
|
||||
nodeMappings = new Map<string, string>();
|
||||
nodeMappingsDataSource: NodeMapping[] = [];
|
||||
dataSource = [];
|
||||
displayedColumns = ['portIn', 'portOut', 'actions']
|
||||
|
||||
sourcePort: string = '';
|
||||
sourceVpi: string = '';
|
||||
sourceVci: string = '';
|
||||
destinationPort: string = '';
|
||||
destinationVpi: string = '';
|
||||
destinationVci: string = '';
|
||||
|
||||
useVpiOnly: boolean = false;
|
||||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<ConfiguratorDialogAtmSwitchComponent>,
|
||||
public nodeService: NodeService,
|
||||
private toasterService: ToasterService,
|
||||
private formBuilder: FormBuilder
|
||||
) {
|
||||
this.nameForm = this.formBuilder.group({
|
||||
name: new FormControl('', Validators.required),
|
||||
});
|
||||
|
||||
this.inputForm = this.formBuilder.group({
|
||||
sourcePort: new FormControl('', Validators.required),
|
||||
sourceVci: new FormControl('', Validators.required),
|
||||
destinationPort: new FormControl('', Validators.required),
|
||||
destinationVci: new FormControl('', Validators.required),
|
||||
});
|
||||
|
||||
this.abstractForm = this.formBuilder.group({
|
||||
sourceVpi: new FormControl('', Validators.required),
|
||||
destinationVpi: new FormControl('', Validators.required)
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
|
||||
this.node = node;
|
||||
this.name = node.name;
|
||||
|
||||
let mappings = node.properties.mappings;
|
||||
Object.keys(mappings).forEach(key => {
|
||||
this.nodeMappings.set(key, mappings[key]);
|
||||
});
|
||||
|
||||
this.nodeMappings.forEach((value: string, key: string) => {
|
||||
this.nodeMappingsDataSource.push({
|
||||
portIn: key,
|
||||
portOut: value
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
delete(elem: NodeMapping) {
|
||||
this.nodeMappingsDataSource = this.nodeMappingsDataSource.filter(n => n !== elem);
|
||||
}
|
||||
|
||||
add() {
|
||||
if (this.inputForm.valid) {
|
||||
let nodeMapping: NodeMapping;
|
||||
if (!this.useVpiOnly) {
|
||||
if (this.abstractForm.valid) {
|
||||
nodeMapping = {
|
||||
portIn: `${this.sourcePort}:${this.sourceVpi}:${this.sourceVci}`,
|
||||
portOut: `${this.destinationPort}:${this.destinationVpi}:${this.destinationVci}`
|
||||
};
|
||||
|
||||
if (this.nodeMappingsDataSource.filter(n => n.portIn === nodeMapping.portIn).length > 0) {
|
||||
this.toasterService.error('Mapping already defined.');
|
||||
} else {
|
||||
this.nodeMappingsDataSource = this.nodeMappingsDataSource.concat([nodeMapping]);
|
||||
this.clearUserInput();
|
||||
}
|
||||
} else {
|
||||
this.toasterService.error('Fill all required fields.');
|
||||
}
|
||||
} else {
|
||||
nodeMapping = {
|
||||
portIn: `${this.sourcePort}:${this.sourceVci}`,
|
||||
portOut: `${this.destinationPort}:${this.destinationVci}`
|
||||
};
|
||||
|
||||
if (this.nodeMappingsDataSource.filter(n => n.portIn === nodeMapping.portIn).length > 0) {
|
||||
this.toasterService.error('Mapping already defined.');
|
||||
} else {
|
||||
this.nodeMappingsDataSource = this.nodeMappingsDataSource.concat([nodeMapping]);
|
||||
this.clearUserInput();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.toasterService.error('Fill all required fields.');
|
||||
}
|
||||
}
|
||||
|
||||
clearUserInput() {
|
||||
this.sourcePort = '0';
|
||||
this.sourceVpi = '0';
|
||||
this.sourceVci = '0';
|
||||
this.destinationPort = '0';
|
||||
this.destinationVpi = '0';
|
||||
this.sourceVci = '0';
|
||||
}
|
||||
|
||||
strMapToObj(strMap) {
|
||||
let obj = Object.create(null);
|
||||
for (let [k,v] of strMap) {
|
||||
obj[k] = v;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
onSaveClick() {
|
||||
if (this.nameForm.valid) {
|
||||
this.nodeMappings.clear();
|
||||
this.nodeMappingsDataSource.forEach(elem => {
|
||||
this.nodeMappings.set(elem.portIn, elem.portOut);
|
||||
});
|
||||
|
||||
this.node.properties.mappings = Array.from(this.nodeMappings).reduce((obj, [key, value]) => (Object.assign(obj, { [key]: value })), {});
|
||||
|
||||
this.nodeService.updateNode(this.server, this.node).subscribe(() => {
|
||||
this.toasterService.success(`Node ${this.node.name} updated.`);
|
||||
this.onCancelClick();
|
||||
});
|
||||
} else {
|
||||
this.toasterService.error(`Fill all required fields.`);
|
||||
}
|
||||
}
|
||||
|
||||
onCancelClick() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
|
||||
export interface NodeMapping {
|
||||
portIn: string,
|
||||
portOut: string
|
||||
}
|
||||
@ -90,10 +90,10 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
|
||||
}
|
||||
|
||||
clearUserInput() {
|
||||
this.sourcePort = '';
|
||||
this.sourceDlci = '';
|
||||
this.destinationPort = '';
|
||||
this.destinationDlci = '';
|
||||
this.sourcePort = '0';
|
||||
this.sourceDlci = '0';
|
||||
this.destinationPort = '0';
|
||||
this.destinationDlci = '0';
|
||||
}
|
||||
|
||||
strMapToObj(strMap) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user