ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2024-12-19 13:07:52 +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() node: Node;
private conf = {
autoFocus: false
autoFocus: false,
width: '800px'
};
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="default-content">
<mat-card>
<form [formGroup]="inputForm">
<mat-form-field class="form-field">
<input
matInput type="text"
[(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>
<table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
<ng-container matColumnDef="portIn">
<th mat-header-cell *matHeaderCellDef> Port : DLCI</th>
<td mat-cell *matCellDef="let element"> {{element.portIn}} </td>
</ng-container>
<ng-container matColumnDef="Port: DLCI ">
<th mat-header-cell *matHeaderCellDef> VLAN </th>
<td mat-cell *matCellDef="let element"> {{element.vlan}} </td>
<ng-container matColumnDef="portOut">
<th mat-header-cell *matHeaderCellDef> Port : DLCI </th>
<td mat-cell *matCellDef="let element"> {{element.portOut}} </td>
</ng-container>
<ng-container matColumnDef="action">
<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)">
@ -36,39 +27,51 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table><br/>
<!-- <mat-form-field class="form-field">
<input
matInput type="number"
[(ngModel)]="newPort.port_number"
placeholder="Port">
</mat-form-field>
<mat-form-field class="form-field">
<input
matInput type="number"
[(ngModel)]="newPort.vlan"
placeholder="VLAN">
</mat-form-field>
<mat-form-field class="select">
<mat-select
placeholder="Type"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="newPort.type">
<mat-option *ngFor="let type of portTypes" [value]="type">
{{type}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="select">
<mat-select
placeholder="EtherType"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="newPort.ethertype">
<mat-option *ngFor="let type of etherTypes" [value]="type">
{{type}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-button class="form-field" (click)="onAdd()">Add</button> -->
<form [formGroup]="nameForm">
<mat-form-field class="form-field">
<input
matInput type="text"
[(ngModel)]="node.name"
formControlName="name"
placeholder="Name">
</mat-form-field>
</form>
<form [formGroup]="inputForm">
Source
<mat-form-field class="form-field">
<input
matInput type="number"
[(ngModel)]="sourcePort"
formControlName="sourcePort"
placeholder="Port">
</mat-form-field>
<mat-form-field class="form-field">
<input
matInput type="number"
[(ngModel)]="sourceDlci"
formControlName="sourceDlci"
placeholder="DLCI">
</mat-form-field>
Destination
<mat-form-field class="form-field">
<input
matInput type="number"
[(ngModel)]="destinationPort"
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>
</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({
selector: 'app-configurator-switch',
templateUrl: './configurator-switch.component.html',
styleUrls: ['../configurator.component.scss']
styleUrls: ['../configurator.component.scss', '../../../../preferences/preferences.component.scss']
})
export class ConfiguratorDialogSwitchComponent implements OnInit {
server: Server;
node: Node;
name: string;
nameForm: FormGroup;
inputForm: FormGroup;
consoleTypes: string[] = [];
nodeMappings = new Map<string, string>();
nodeMappingsDataSource: NodeMapping[] = [];
dataSource = [];
displayedColumns = ['Port: DLCI', 'Port: DLCI ']
displayedColumns = ['portIn', 'portOut', 'actions']
sourcePort: string = '';
sourceDlci: string = '';
destinationPort: string = '';
destinationDlci: string = '';
constructor(
public dialogRef: MatDialogRef<ConfiguratorDialogSwitchComponent>,
@ -29,8 +36,15 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
private toasterService: ToasterService,
private formBuilder: FormBuilder
) {
this.nameForm = this.formBuilder.group({
name: new FormControl('', Validators.required),
});
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 => {
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) {
@ -59,7 +105,12 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
}
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.nodeService.updateNode(this.server, this.node).subscribe(() => {
@ -75,3 +126,8 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
this.dialogRef.close();
}
}
export interface NodeMapping {
portIn: string,
portOut: string
}