ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-19 21:17:51 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Support for frame-relay-switch added

Browse Source
This commit is contained in:
Piotr Pekala 2019-09-16 02:35:10 -07:00
parent a50209455c
commit 83558d0d4e
3 changed files with 117 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,8 @@ export class ConfigActionComponent {
@Input() server: Server; @Input() server: Server;
@Input() node: Node; @Input() node: Node;
private conf = { private conf = {
autoFocus: false autoFocus: false,
width: '800px'
}; };
dialogRef; dialogRef;

103
src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html
View File

@ -4,27 +4,18 @@
<div class="content"> <div class="content">
<div class="default-content"> <div class="default-content">
<mat-card> <mat-card>
<form [formGroup]="inputForm"> <table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
<mat-form-field class="form-field"> <ng-container matColumnDef="portIn">
<input <th mat-header-cell *matHeaderCellDef> Port : DLCI</th>
matInput type="text" <td mat-cell *matCellDef="let element"> {{element.portIn}} </td>
[(ngModel)]="node.name"
formControlName="name"
placeholder="Name">
</mat-form-field>
</form>
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="Port: DLCI">
<th mat-header-cell *matHeaderCellDef> Port number </th>
<td mat-cell *matCellDef="let element"> {{element.port_number}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="Port: DLCI "> <ng-container matColumnDef="portOut">
<th mat-header-cell *matHeaderCellDef> VLAN </th> <th mat-header-cell *matHeaderCellDef> Port : DLCI </th>
<td mat-cell *matCellDef="let element"> {{element.vlan}} </td> <td mat-cell *matCellDef="let element"> {{element.portOut}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="action"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th> <th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<button mat-icon-button matTooltip="Delete port" (click)="delete(element)"> <button mat-icon-button matTooltip="Delete port" (click)="delete(element)">
@ -36,39 +27,51 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table><br/> </table><br/>
<!-- <mat-form-field class="form-field">
<input <form [formGroup]="nameForm">
matInput type="number" <mat-form-field class="form-field">
[(ngModel)]="newPort.port_number" <input
placeholder="Port"> matInput type="text"
</mat-form-field> [(ngModel)]="node.name"
<mat-form-field class="form-field"> formControlName="name"
<input placeholder="Name">
matInput type="number" </mat-form-field>
[(ngModel)]="newPort.vlan" </form>
placeholder="VLAN">
</mat-form-field> <form [formGroup]="inputForm">
<mat-form-field class="select"> Source
<mat-select <mat-form-field class="form-field">
placeholder="Type" <input
[ngModelOptions]="{standalone: true}" matInput type="number"
[(ngModel)]="newPort.type"> [(ngModel)]="sourcePort"
<mat-option *ngFor="let type of portTypes" [value]="type"> formControlName="sourcePort"
{{type}} placeholder="Port">
</mat-option> </mat-form-field>
</mat-select> <mat-form-field class="form-field">
</mat-form-field> <input
<mat-form-field class="select"> matInput type="number"
<mat-select [(ngModel)]="sourceDlci"
placeholder="EtherType" formControlName="sourceDlci"
[ngModelOptions]="{standalone: true}" placeholder="DLCI">
[(ngModel)]="newPort.ethertype"> </mat-form-field>
<mat-option *ngFor="let type of etherTypes" [value]="type"> Destination
{{type}} <mat-form-field class="form-field">
</mat-option> <input
</mat-select> matInput type="number"
</mat-form-field> [(ngModel)]="destinationPort"
<button mat-button class="form-field" (click)="onAdd()">Add</button> --> formControlName="destinationPort"
placeholder="Port">
</mat-form-field>
<mat-form-field class="form-field">
<input
matInput type="number"
[(ngModel)]="destinationDlci"
formControlName="destinationDlci"
placeholder="DLCI">
</mat-form-field>
</form>
<button mat-button class="form-field" (click)="add()">Add</button>
</mat-card> </mat-card>
</div> </div>
</div> </div>

68
src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts
View File

@ -10,18 +10,25 @@ import { MatDialogRef } from '@angular/material';
@Component({ @Component({
selector: 'app-configurator-switch', selector: 'app-configurator-switch',
templateUrl: './configurator-switch.component.html', templateUrl: './configurator-switch.component.html',
styleUrls: ['../configurator.component.scss'] styleUrls: ['../configurator.component.scss', '../../../../preferences/preferences.component.scss']
}) })
export class ConfiguratorDialogSwitchComponent implements OnInit { export class ConfiguratorDialogSwitchComponent implements OnInit {
server: Server; server: Server;
node: Node; node: Node;
name: string; name: string;
nameForm: FormGroup;
inputForm: FormGroup; inputForm: FormGroup;
consoleTypes: string[] = []; consoleTypes: string[] = [];
nodeMappings = new Map<string, string>(); nodeMappings = new Map<string, string>();
nodeMappingsDataSource: NodeMapping[] = [];
dataSource = []; dataSource = [];
displayedColumns = ['Port: DLCI', 'Port: DLCI '] displayedColumns = ['portIn', 'portOut', 'actions']
sourcePort: string = '';
sourceDlci: string = '';
destinationPort: string = '';
destinationDlci: string = '';
constructor( constructor(
public dialogRef: MatDialogRef<ConfiguratorDialogSwitchComponent>, public dialogRef: MatDialogRef<ConfiguratorDialogSwitchComponent>,
@ -29,8 +36,15 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
private toasterService: ToasterService, private toasterService: ToasterService,
private formBuilder: FormBuilder private formBuilder: FormBuilder
) { ) {
this.nameForm = this.formBuilder.group({
name: new FormControl('', Validators.required),
});
this.inputForm = this.formBuilder.group({ this.inputForm = this.formBuilder.group({
name: new FormControl('', Validators.required) sourcePort: new FormControl('', Validators.required),
sourceDlci: new FormControl('', Validators.required),
destinationPort: new FormControl('', Validators.required),
destinationDlci: new FormControl('', Validators.required),
}); });
} }
@ -43,11 +57,43 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
Object.keys(mappings).forEach(key => { Object.keys(mappings).forEach(key => {
this.nodeMappings.set(key, mappings[key]); this.nodeMappings.set(key, mappings[key]);
}); });
this.nodeMappings.forEach((value: string, key: string) => {
this.nodeMappingsDataSource.push({
portIn: key,
portOut: value
});
});
}); });
} }
delete(elem) { delete(elem: NodeMapping) {
this.nodeMappingsDataSource = this.nodeMappingsDataSource.filter(n => n !== elem);
}
add() {
if (this.inputForm.valid) {
let nodeMapping: NodeMapping = {
portIn: `${this.sourcePort}:${this.sourceDlci}`,
portOut: `${this.destinationPort}:${this.destinationDlci}`
};
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 = '';
this.sourceDlci = '';
this.destinationPort = '';
this.destinationDlci = '';
} }
strMapToObj(strMap) { strMapToObj(strMap) {
@ -59,7 +105,12 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
} }
onSaveClick() { onSaveClick() {
if (this.inputForm.valid) { 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.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.nodeService.updateNode(this.server, this.node).subscribe(() => {
@ -75,3 +126,8 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
this.dialogRef.close(); this.dialogRef.close();
} }
} }
export interface NodeMapping {
portIn: string,
portOut: string
}