mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-04-20 16:20:48 +00:00
Configuration menu for cloud nodes
This commit is contained in:
Piotr Pekala
parent
6f879add81
commit
42821f28b2
@ -4,9 +4,164 @@
|
||||
<h1 class="col">Cloud configuration</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="default-content" *ngIf="ethernetHubTemplate">
|
||||
<form [formGroup]="inputForm">
|
||||
</form>
|
||||
<div class="default-content" *ngIf="cloudNodeTemplate">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
General
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-form-field class="row">
|
||||
<input
|
||||
matInput type="text"
|
||||
[(ngModel)]="cloudNodeTemplate.name"
|
||||
placeholder="Template name">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="row">
|
||||
<input
|
||||
matInput type="text"
|
||||
[(ngModel)]="cloudNodeTemplate.default_name_format"
|
||||
placeholder="Default name format">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="row">
|
||||
<input
|
||||
matInput type="text"
|
||||
[(ngModel)]="cloudNodeTemplate.symbol"
|
||||
placeholder="Symbol">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="row">
|
||||
<mat-select
|
||||
placeholder="Category"
|
||||
[(ngModel)]="cloudNodeTemplate.category">
|
||||
<mat-option *ngFor="let category of categories" [value]="category[1]">
|
||||
{{category[0]}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="select">
|
||||
<mat-select
|
||||
placeholder="Console type"
|
||||
[(ngModel)]="cloudNodeTemplate.console_type">
|
||||
<mat-option *ngFor="let type of consoleTypes" [value]="type">
|
||||
{{type}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="row">
|
||||
<input
|
||||
matInput type="text"
|
||||
[(ngModel)]="cloudNodeTemplate.remote_console_host"
|
||||
placeholder="Console host">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="row">
|
||||
<input
|
||||
matInput type="text"
|
||||
[(ngModel)]="cloudNodeTemplate.remote_console_port"
|
||||
placeholder="Console port">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="row">
|
||||
<input
|
||||
matInput type="text"
|
||||
[(ngModel)]="cloudNodeTemplate.remote_console_http_path"
|
||||
placeholder="Console HTTP path">
|
||||
</mat-form-field>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
Ethernet interfaces
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div class="row" *ngFor="let port of ports_mapping_ethernet">
|
||||
<div class="row">{{port.name}}</div><br/><br/>
|
||||
</div>
|
||||
<mat-form-field class="select">
|
||||
<mat-select
|
||||
placeholder="Ethernet interface"
|
||||
[ngModelOptions]="{standalone: true}"
|
||||
[(ngModel)]="ethernetInterface">
|
||||
<mat-option *ngFor="let type of " [value]="type">
|
||||
{{type}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="row" (click)="onAddEthernetInterface()">Add</button>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
TAP interfaces
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div class="row" *ngFor="let port of ports_mapping_tap">
|
||||
<div class="row">{{port.name}}</div><br/><br/>
|
||||
</div>
|
||||
<mat-form-field class="row">
|
||||
<input
|
||||
matInput type="text"
|
||||
[(ngModel)]="tapInterface"
|
||||
placeholder="TAP interface">
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="row" (click)="onAddTapInterface()">Add</button>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
UDP tunnels
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<table class="table" mat-table [dataSource]="dataSourceUdp">
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Name </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="rport">
|
||||
<th mat-header-cell *matHeaderCellDef> Local port </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.rport}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="rhost">
|
||||
<th mat-header-cell *matHeaderCellDef> Type </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.rhost}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="lport">
|
||||
<th mat-header-cell *matHeaderCellDef> Remote port </th>
|
||||
<td mat-cell *matCellDef="let element"> {{element.lport}} </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="text"
|
||||
[(ngModel)]="newPort.name"
|
||||
placeholder="Name">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="row">
|
||||
<input
|
||||
matInput type="number"
|
||||
[(ngModel)]="newPort.lport"
|
||||
placeholder="Local port">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="row">
|
||||
<input
|
||||
matInput type="text"
|
||||
[(ngModel)]="newPort.rhost"
|
||||
placeholder="Remote host">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="row">
|
||||
<input
|
||||
matInput type="number"
|
||||
[(ngModel)]="newPort.rport"
|
||||
placeholder="Remote port">
|
||||
</mat-form-field>
|
||||
<button mat-raised-button class="row" (click)="onAddUdpInterface()">Add</button>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
<div class="buttons-bar">
|
||||
<button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
|
||||
</div>
|
||||
|
||||
@ -6,3 +6,15 @@
|
||||
.select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
border: 0px!important;
|
||||
}
|
||||
|
||||
th.mat-header-cell {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
td.mat-cell {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
@ -3,9 +3,9 @@ import { ActivatedRoute } from '@angular/router';
|
||||
import { ServerService } from '../../../../../services/server.service';
|
||||
import { Server } from '../../../../../models/server';
|
||||
import { ToasterService } from '../../../../../services/toaster.service';
|
||||
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
|
||||
import { BuiltInTemplatesService } from '../../../../../services/built-in-templates.service';
|
||||
import { CloudTemplate } from '../../../../../models/templates/cloud-template';
|
||||
import { PortsMappingEntity } from '../../../../../models/ethernetHub/ports-mapping-enity';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -16,18 +16,34 @@ import { CloudTemplate } from '../../../../../models/templates/cloud-template';
|
||||
export class CloudNodesTemplateDetailsComponent implements OnInit {
|
||||
server: Server;
|
||||
cloudNodeTemplate: CloudTemplate;
|
||||
inputForm: FormGroup;
|
||||
|
||||
categories = [["Default", "guest"],
|
||||
["Routers", "router"],
|
||||
["Switches", "switch"],
|
||||
["End devices", "end_device"],
|
||||
["Security devices", "security_device"]];
|
||||
consoleTypes: string[] = ['telnet', 'none'];
|
||||
|
||||
tapInterface: string = '';
|
||||
ethernetInterface: string = '';
|
||||
ethernetInterfaces: string[] = ['Ethernet 2', 'Ethernet 3'];
|
||||
ports_mapping_ethernet: PortsMappingEntity[] = [];
|
||||
ports_mapping_tap: PortsMappingEntity[] = [];
|
||||
ports_mapping_udp: PortsMappingEntity[] = [];
|
||||
newPort: PortsMappingEntity;
|
||||
displayedColumns: string[] = ['name', 'lport', 'rhost', 'rport'];
|
||||
dataSourceUdp: PortsMappingEntity[] = [];
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private serverService: ServerService,
|
||||
private builtInTemplatesService: BuiltInTemplatesService,
|
||||
private toasterService: ToasterService,
|
||||
private formBuilder: FormBuilder
|
||||
private toasterService: ToasterService
|
||||
) {
|
||||
this.inputForm = this.formBuilder.group({
|
||||
templateName: new FormControl('', Validators.required)
|
||||
});
|
||||
this.newPort = {
|
||||
name: '',
|
||||
port_number: 0,
|
||||
};
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
@ -38,17 +54,58 @@ export class CloudNodesTemplateDetailsComponent implements OnInit {
|
||||
|
||||
this.builtInTemplatesService.getTemplate(this.server, template_id).subscribe((cloudNodeTemplate: CloudTemplate) => {
|
||||
this.cloudNodeTemplate = cloudNodeTemplate;
|
||||
|
||||
this.ports_mapping_ethernet = this.cloudNodeTemplate.ports_mapping
|
||||
.filter((elem) => elem.type === 'ethernet');
|
||||
|
||||
this.ports_mapping_tap = this.cloudNodeTemplate.ports_mapping
|
||||
.filter((elem) => elem.type === 'tap');
|
||||
|
||||
this.ports_mapping_udp = this.cloudNodeTemplate.ports_mapping
|
||||
.filter((elem) => elem.type === 'udp');
|
||||
|
||||
this.dataSourceUdp = this.ports_mapping_udp;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onSave() {
|
||||
if (this.inputForm.invalid) {
|
||||
this.toasterService.error(`Fill all required fields`);
|
||||
} else {
|
||||
this.builtInTemplatesService.saveTemplate(this.server, this.cloudNodeTemplate).subscribe((cloudNodeTemplate: CloudTemplate) => {
|
||||
this.toasterService.success("Changes saved");
|
||||
onAddEthernetInterface() {
|
||||
if (this.ethernetInterface) {
|
||||
this.ports_mapping_ethernet.push({
|
||||
interface: this.ethernetInterface,
|
||||
name: this.ethernetInterface,
|
||||
port_number: 0,
|
||||
type: "ethernet"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onAddTapInterface() {
|
||||
if (this.tapInterface) {
|
||||
this.ports_mapping_tap.push({
|
||||
interface: this.tapInterface,
|
||||
name: this.tapInterface,
|
||||
port_number: 0,
|
||||
type: "tap"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onAddUdpInterface() {
|
||||
this.ports_mapping_udp.push(this.newPort);
|
||||
this.dataSourceUdp = [...this.ports_mapping_udp];
|
||||
|
||||
this.newPort = {
|
||||
name: '',
|
||||
port_number: 0,
|
||||
};
|
||||
}
|
||||
|
||||
onSave() {
|
||||
this.cloudNodeTemplate.ports_mapping = [...this.ports_mapping_ethernet, ...this.ports_mapping_tap];
|
||||
|
||||
this.builtInTemplatesService.saveTemplate(this.server, this.cloudNodeTemplate).subscribe((cloudNodeTemplate: CloudTemplate) => {
|
||||
this.toasterService.success("Changes saved");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@ export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
|
||||
private builtInTemplatesService: BuiltInTemplatesService,
|
||||
private toasterService: ToasterService,
|
||||
private formBuilder: FormBuilder
|
||||
) {
|
||||
){
|
||||
this.inputForm = this.formBuilder.group({
|
||||
templateName: new FormControl('', Validators.required),
|
||||
defaultName: new FormControl('', Validators.required),
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
export interface PortsMappingEntity {
|
||||
ethertype?: string;
|
||||
interface?: string,
|
||||
name: string;
|
||||
port_number: number;
|
||||
type?: string;
|
||||
vlan?: number;
|
||||
rhost?: string;
|
||||
lport?: number;
|
||||
rport?: number;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user