mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-02-08 04:10:16 +00:00
Configuration ethernet switches
This commit is contained in:
parent
0bfff9c79e
commit
6f879add81
@ -5,6 +5,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="default-content" *ngIf="ethernetSwitchTemplate">
|
<div class="default-content" *ngIf="ethernetSwitchTemplate">
|
||||||
|
<mat-accordion>
|
||||||
|
<mat-expansion-panel>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<mat-panel-title>
|
||||||
|
General settings
|
||||||
|
</mat-panel-title>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
<form [formGroup]="inputForm">
|
<form [formGroup]="inputForm">
|
||||||
<mat-form-field class="row">
|
<mat-form-field class="row">
|
||||||
<input
|
<input
|
||||||
@ -48,6 +55,72 @@
|
|||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</form>
|
</form>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
<mat-expansion-panel *ngIf="newPort">
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<mat-panel-title>
|
||||||
|
Port settings
|
||||||
|
</mat-panel-title>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
<table class="table" mat-table [dataSource]="dataSource">
|
||||||
|
<ng-container matColumnDef="port_number">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Port number </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.port_number}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="vlan">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> VLAN </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.vlan}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="type">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Type </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.type}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="ethertype">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> EtherType </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.ethertype}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
|
</table><br/>
|
||||||
|
<mat-form-field class="row">
|
||||||
|
<input
|
||||||
|
matInput type="number"
|
||||||
|
[(ngModel)]="newPort.port_number"
|
||||||
|
placeholder="Port">
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field class="row">
|
||||||
|
<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-raised-button class="row" (click)="onAdd()">Add</button>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
</mat-accordion>
|
||||||
<div class="buttons-bar">
|
<div class="buttons-bar">
|
||||||
<button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
|
<button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -6,3 +6,15 @@
|
|||||||
.select {
|
.select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
border: 0px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.mat-header-cell {
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.mat-cell {
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
@ -6,6 +6,7 @@ import { ToasterService } from '../../../../../services/toaster.service';
|
|||||||
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
|
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
|
||||||
import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
|
import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
|
||||||
import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
|
import { EthernetSwitchTemplate } from '../../../../../models/templates/ethernet-switch-template';
|
||||||
|
import { PortsMappingEntity } from '../../../../../models/ethernetHub/ports-mapping-enity';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -17,6 +18,9 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
|
|||||||
server: Server;
|
server: Server;
|
||||||
ethernetSwitchTemplate: EthernetSwitchTemplate;
|
ethernetSwitchTemplate: EthernetSwitchTemplate;
|
||||||
inputForm: FormGroup;
|
inputForm: FormGroup;
|
||||||
|
ethernetPorts: PortsMappingEntity[] = [];
|
||||||
|
dataSource: PortsMappingEntity[] = [];
|
||||||
|
newPort: PortsMappingEntity;
|
||||||
|
|
||||||
categories = [["Default", "guest"],
|
categories = [["Default", "guest"],
|
||||||
["Routers", "router"],
|
["Routers", "router"],
|
||||||
@ -24,6 +28,9 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
|
|||||||
["End devices", "end_device"],
|
["End devices", "end_device"],
|
||||||
["Security devices", "security_device"]];
|
["Security devices", "security_device"]];
|
||||||
consoleTypes: string[] = ['telnet', 'none'];
|
consoleTypes: string[] = ['telnet', 'none'];
|
||||||
|
portTypes: string[] = ['access', 'dot1q', 'qinq'];
|
||||||
|
etherTypes: string[] = ['0x8100', '0x88A8', '0x9100', '0x9200'];
|
||||||
|
displayedColumns: string[] = ['port_number', 'vlan', 'type', 'ethertype'];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
@ -37,6 +44,11 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
|
|||||||
defaultName: new FormControl('', Validators.required),
|
defaultName: new FormControl('', Validators.required),
|
||||||
symbol: new FormControl('', Validators.required)
|
symbol: new FormControl('', Validators.required)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.newPort = {
|
||||||
|
name: '',
|
||||||
|
port_number: 0,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
@ -47,10 +59,22 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
|
|||||||
|
|
||||||
this.builtInTemplatesService.getTemplate(this.server, template_id).subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => {
|
this.builtInTemplatesService.getTemplate(this.server, template_id).subscribe((ethernetSwitchTemplate: EthernetSwitchTemplate) => {
|
||||||
this.ethernetSwitchTemplate = ethernetSwitchTemplate;
|
this.ethernetSwitchTemplate = ethernetSwitchTemplate;
|
||||||
|
this.ethernetPorts = this.ethernetSwitchTemplate.ports_mapping;
|
||||||
|
this.dataSource = this.ethernetSwitchTemplate.ports_mapping;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onAdd() {
|
||||||
|
this.ethernetPorts.push(this.newPort);
|
||||||
|
this.dataSource = [...this.ethernetPorts];
|
||||||
|
|
||||||
|
this.newPort = {
|
||||||
|
name: '',
|
||||||
|
port_number: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
onSave() {
|
onSave() {
|
||||||
if (this.inputForm.invalid) {
|
if (this.inputForm.invalid) {
|
||||||
this.toasterService.error(`Fill all required fields`);
|
this.toasterService.error(`Fill all required fields`);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user