ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-01-31 08:25:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Edit network configuration for docker nodes

Browse Source
This commit is contained in:
piotrpekala7 2020-09-14 15:00:41 +02:00
parent 5d6bda7e31
commit 19b1e4b230
9 changed files with 164 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/app.module.ts
View File

@ -226,6 +226,8 @@ import { ConfiguratorDialogVmwareComponent } from './components/project-map/node
import { ConfiguratorDialogIouComponent } from './components/project-map/node-editors/configurator/iou/configurator-iou.component';
import { ConfiguratorDialogIosComponent } from './components/project-map/node-editors/configurator/ios/configurator-ios.component';
import { ConfiguratorDialogDockerComponent } from './components/project-map/node-editors/configurator/docker/configurator-docker.component';
import { EditNetworkConfigurationDialogComponent } from './components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component';
import { ConfigureCustomAdaptersDialogComponent } from './components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component';
import { ConfiguratorDialogNatComponent } from './components/project-map/node-editors/configurator/nat/configurator-nat.component';
import { ConfiguratorDialogTracengComponent } from './components/project-map/node-editors/configurator/traceng/configurator-traceng.component';
import { AddTracengTemplateComponent } from './components/preferences/traceng/add-traceng/add-traceng-template.component';
@ -281,6 +283,7 @@ import { ApplianceInfoDialogComponent } from './components/project-map/new-templ
import { InformationDialogComponent } from './components/dialogs/information-dialog.component';
import { TemplateNameDialogComponent } from './components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component';
@NgModule({
declarations: [
AppComponent,
@ -464,7 +467,9 @@ import { TemplateNameDialogComponent } from './components/project-map/new-templa
ChangeHostnameDialogComponent,
ApplianceInfoDialogComponent,
InformationDialogComponent,
TemplateNameDialogComponent
TemplateNameDialogComponent,
ConfigureCustomAdaptersDialogComponent,
EditNetworkConfigurationDialogComponent
],
imports: [
BrowserModule,
@ -606,7 +611,9 @@ import { TemplateNameDialogComponent } from './components/project-map/new-templa
AdbutlerComponent,
NewTemplateDialogComponent,
ChangeHostnameDialogComponent,
ApplianceInfoDialogComponent
ApplianceInfoDialogComponent,
ConfigureCustomAdaptersDialogComponent,
EditNetworkConfigurationDialogComponent
],
bootstrap: [AppComponent]
})

7
src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.html
View File

@ -19,7 +19,9 @@
<input formControlName="adapter" matInput type="number" [(ngModel)]="node.properties.adapters" placeholder="Adapters">
</mat-form-field>
<!-- custom adapters -->
<button mat-button class="form-field" (click)="configureCustomAdapters()">
Configure custom adapters
</button>
<mat-form-field class="select">
<mat-select [ngModelOptions]="{standalone: true}" placeholder="Console type" [(ngModel)]="node.console_type">
@ -48,6 +50,9 @@
<input matInput formControlName="consoleHttpPath" type="text" [(ngModel)]="node.properties.console_http_path" placeholder="HTTP path">
</mat-form-field>
<button mat-button class="form-field" (click)="editNetworkConfiguration()">
Edit network configuration
</button>
</form>
<h6>Environment</h6>
<mat-form-field class="form-field">

31
src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.ts
View File

@ -4,8 +4,10 @@ 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/dialog';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { DockerConfigurationService } from '../../../../../services/docker-configuration.service';
import { EditNetworkConfigurationDialogComponent } from './edit-network-configuration/edit-network-configuration.component';
import { ConfigureCustomAdaptersDialogComponent } from './configure-custom-adapters/configure-custom-adapters.component';
@Component({
@ -28,13 +30,20 @@ export class ConfiguratorDialogDockerComponent implements OnInit {
'1366x768',
'1920x1080'
];
private conf = {
autoFocus: false,
width: '800px',
disableClose: true
};
dialogRef;
constructor(
public dialogRef: MatDialogRef<ConfiguratorDialogDockerComponent>,
public dialogReference: MatDialogRef<ConfiguratorDialogDockerComponent>,
public nodeService: NodeService,
private toasterService: ToasterService,
private formBuilder: FormBuilder,
private dockerConfigurationService: DockerConfigurationService
private dockerConfigurationService: DockerConfigurationService,
private dialog: MatDialog
) {
this.generalSettingsForm = this.formBuilder.group({
name: new FormControl('', Validators.required),
@ -57,6 +66,20 @@ export class ConfiguratorDialogDockerComponent implements OnInit {
this.consoleTypes = this.dockerConfigurationService.getConsoleTypes();
}
configureCustomAdapters() {
this.dialogRef = this.dialog.open(ConfigureCustomAdaptersDialogComponent, this.conf);
let instance = this.dialogRef.componentInstance;
instance.server = this.server;
instance.node = this.node;
}
editNetworkConfiguration() {
this.dialogRef = this.dialog.open(EditNetworkConfigurationDialogComponent, this.conf);
let instance = this.dialogRef.componentInstance;
instance.server = this.server;
instance.node = this.node;
}
onSaveClick() {
if (this.generalSettingsForm.valid) {
this.nodeService.updateNode(this.server, this.node).subscribe(() => {
@ -69,6 +92,6 @@ export class ConfiguratorDialogDockerComponent implements OnInit {
}
onCancelClick() {
this.dialogRef.close();
this.dialogReference.close();
}
}

16
src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.html Normal file
View File

@ -0,0 +1,16 @@
<h1 mat-dialog-title>Configure custom adapters for node {{node.name}}</h1>
<div class="modal-form-container">
<div class="content">
<div class="default-content">
<mat-card class="matCard">
</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>

41
src/app/components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component.ts Normal file
View File

@ -0,0 +1,41 @@
import { Component, OnInit, Input, ViewChild } 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/dialog';
import { DockerConfigurationService } from '../../../../../../services/docker-configuration.service';
@Component({
selector: 'app-configure-custom-adapters',
templateUrl: './configure-custom-adapters.component.html',
styleUrls: ['../../configurator.component.scss']
})
export class ConfigureCustomAdaptersDialogComponent implements OnInit {
server: Server;
node: Node;
constructor(
public dialogRef: MatDialogRef<ConfigureCustomAdaptersDialogComponent>,
public nodeService: NodeService,
private toasterService: ToasterService,
private formBuilder: FormBuilder,
private dockerConfigurationService: DockerConfigurationService
) {}
ngOnInit() {
}
getConfiguration() {}
onSaveClick() {
}
onCancelClick() {
this.dialogRef.close();
}
}

10
src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.html Normal file
View File

@ -0,0 +1,10 @@
<h1 mat-dialog-title>Edit network configuration for node {{node.name}}</h1>
<div *ngIf="node" class="modal-form-container">
<textarea matInput [(ngModel)]="configuration" class="textArea" type="text"></textarea>
</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>

4
src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.scss Normal file
View File

@ -0,0 +1,4 @@
.textArea {
width: 100%;
height: 350px;
}

43
src/app/components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component.ts Normal file
View File

@ -0,0 +1,43 @@
import { Component, OnInit, Input, ViewChild } 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/dialog';
import { DockerConfigurationService } from '../../../../../../services/docker-configuration.service';
@Component({
selector: 'app-edit-network-configuration',
templateUrl: './edit-network-configuration.component.html',
styleUrls: ['./edit-network-configuration.component.scss']
})
export class EditNetworkConfigurationDialogComponent implements OnInit {
server: Server;
node: Node;
configuration: string;
constructor(
public dialogRef: MatDialogRef<EditNetworkConfigurationDialogComponent>,
public nodeService: NodeService,
private toasterService: ToasterService
) {}
ngOnInit() {
this.nodeService.getNetworkConfiguration(this.server, this.node).subscribe((response: string) => {
this.configuration = response;
});
}
onSaveClick() {
this.nodeService.saveNetworkConfiguration(this.server, this.node, this.configuration).subscribe((response: string) => {
this.onCancelClick();
this.toasterService.success(`Configuration for node ${this.node.name} saved.`);
});
}
onCancelClick() {
this.dialogRef.close();
}
}

8
src/app/services/node.service.ts
View File

@ -149,6 +149,14 @@ export class NodeService {
return `putty.exe -telnet \%h \%p -wt \"\%d\" -gns3 5 -skin 4`;
}
getNetworkConfiguration(server: Server, node: Node) {
return this.httpServer.get(server, `/projects/${node.project_id}/nodes/${node.node_id}/files/etc/network/interfaces`, { responseType: 'text' as 'json'});
}
saveNetworkConfiguration(server: Server, node: Node, configuration: string) {
return this.httpServer.post(server, `/projects/${node.project_id}/nodes/${node.node_id}/files/etc/network/interfaces`, configuration);
}
getStartupConfiguration(server: Server, node: Node) {
let urlPath: string = `/projects/${node.project_id}/nodes/${node.node_id}`;