mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2024-12-26 16:11:04 +00:00
Merge pull request #472 from GNS3/Support-for-editing-config-files
Support for editing config files - VPCS
This commit is contained in:
commit
675bb04b6c
src/app
app.module.ts
components/project-map
context-menu
node-editors/config-editor
config-editor.component.htmlconfig-editor.component.scssconfig-editor.component.spec.tsconfig-editor.component.ts
project-map.component.spec.tsservices
@ -191,6 +191,8 @@ import { DuplicateActionComponent } from './components/project-map/context-menu/
|
||||
import { MapSettingsService } from './services/mapsettings.service';
|
||||
import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
|
||||
import { HelpComponent } from './components/help/help.component';
|
||||
import { ConfigEditorDialogComponent } from './components/project-map/node-editors/config-editor/config-editor.component';
|
||||
import { EditConfigActionComponent } from './components/project-map/context-menu/actions/edit-config/edit-config-action.component';
|
||||
import { LogConsoleComponent } from './components/project-map/log-console/log-console.component';
|
||||
import { LogEventsDataSource } from './components/project-map/log-console/log-events-datasource';
|
||||
import { SaveProjectDialogComponent } from './components/projects/save-project-dialog/save-project-dialog.component';
|
||||
@ -199,6 +201,8 @@ import { ShowNodeActionComponent } from './components/project-map/context-menu/a
|
||||
import { InfoDialogComponent } from './components/project-map/info-dialog/info-dialog.component';
|
||||
import { InfoService } from './services/info.service';
|
||||
import { BringToFrontActionComponent } from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component';
|
||||
import { ExportConfigActionComponent } from './components/project-map/context-menu/actions/export-config/export-config-action.component';
|
||||
import { ImportConfigActionComponent } from './components/project-map/context-menu/actions/import-config/import-config-action.component';
|
||||
import { ConsoleDeviceActionBrowserComponent } from './components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component';
|
||||
|
||||
if (environment.production) {
|
||||
@ -323,11 +327,15 @@ if (environment.production) {
|
||||
NodesMenuComponent,
|
||||
ProjectMapMenuComponent,
|
||||
HelpComponent,
|
||||
ConfigEditorDialogComponent,
|
||||
EditConfigActionComponent,
|
||||
LogConsoleComponent,
|
||||
SaveProjectDialogComponent,
|
||||
TopologySummaryComponent,
|
||||
InfoDialogComponent,
|
||||
BringToFrontActionComponent,
|
||||
ExportConfigActionComponent,
|
||||
ImportConfigActionComponent,
|
||||
ConsoleDeviceActionBrowserComponent
|
||||
],
|
||||
imports: [
|
||||
@ -423,6 +431,7 @@ if (environment.production) {
|
||||
DeleteConfirmationDialogComponent,
|
||||
HelpDialogComponent,
|
||||
StartCaptureDialogComponent,
|
||||
ConfigEditorDialogComponent,
|
||||
SaveProjectDialogComponent,
|
||||
InfoDialogComponent
|
||||
],
|
||||
|
@ -0,0 +1,4 @@
|
||||
<button mat-menu-item (click)="editConfig()">
|
||||
<mat-icon>settings</mat-icon>
|
||||
<span>Edit config</span>
|
||||
</button>
|
@ -0,0 +1,30 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Node } from '../../../../../cartography/models/node';
|
||||
import { Project } from '../../../../../models/project';
|
||||
import { Server } from '../../../../../models/server';
|
||||
import { ConfigEditorDialogComponent } from '../../../node-editors/config-editor/config-editor.component';
|
||||
import { MatDialog } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit-config-action',
|
||||
templateUrl: './edit-config-action.component.html'
|
||||
})
|
||||
export class EditConfigActionComponent {
|
||||
@Input() server: Server;
|
||||
@Input() project: Project;
|
||||
@Input() node: Node;
|
||||
|
||||
constructor(private dialog: MatDialog) {}
|
||||
|
||||
editConfig() {
|
||||
const dialogRef = this.dialog.open(ConfigEditorDialogComponent, {
|
||||
width: '600px',
|
||||
height: '500px',
|
||||
autoFocus: false
|
||||
});
|
||||
let instance = dialogRef.componentInstance;
|
||||
instance.server = this.server;
|
||||
instance.project = this.project;
|
||||
instance.node = this.node;
|
||||
}
|
||||
}
|
@ -0,0 +1,4 @@
|
||||
<button mat-menu-item (click)="exportConfig()">
|
||||
<mat-icon>call_made</mat-icon>
|
||||
<span>Export config</span>
|
||||
</button>
|
@ -0,0 +1,33 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Node } from '../../../../../cartography/models/node';
|
||||
import { NodeService } from '../../../../../services/node.service';
|
||||
import { Server } from '../../../../../models/server';
|
||||
|
||||
@Component({
|
||||
selector: 'app-export-config-action',
|
||||
templateUrl: './export-config-action.component.html'
|
||||
})
|
||||
export class ExportConfigActionComponent {
|
||||
@Input() server: Server;
|
||||
@Input() node: Node;
|
||||
|
||||
constructor(
|
||||
private nodeService: NodeService
|
||||
) {}
|
||||
|
||||
exportConfig() {
|
||||
this.nodeService.getConfiguration(this.server, this.node).subscribe((config: any) => {
|
||||
this.downloadByHtmlTag(config);
|
||||
});
|
||||
}
|
||||
|
||||
private downloadByHtmlTag(config: string) {
|
||||
const element = document.createElement('a');
|
||||
const fileType = 'text/plain';
|
||||
element.setAttribute('href', `data:${fileType};charset=utf-8,${encodeURIComponent(config)}`);
|
||||
element.setAttribute('download', `${this.node.name}_startup.vpc`);
|
||||
|
||||
var event = new MouseEvent("click");
|
||||
element.dispatchEvent(event);
|
||||
}
|
||||
}
|
@ -0,0 +1,4 @@
|
||||
<button mat-menu-item (click)="importConfig()">
|
||||
<mat-icon>call_received</mat-icon>
|
||||
<span>Import config</span>
|
||||
</button>
|
@ -0,0 +1,19 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Node } from '../../../../../cartography/models/node';
|
||||
import { NodeService } from '../../../../../services/node.service';
|
||||
import { Server } from '../../../../../models/server';
|
||||
|
||||
@Component({
|
||||
selector: 'app-import-config-action',
|
||||
templateUrl: './import-config-action.component.html'
|
||||
})
|
||||
export class ImportConfigActionComponent {
|
||||
@Input() server: Server;
|
||||
@Input() node: Node;
|
||||
|
||||
constructor() {}
|
||||
|
||||
importConfig() {
|
||||
//needs implementation
|
||||
}
|
||||
}
|
@ -40,6 +40,19 @@
|
||||
[link]="links[0]"
|
||||
[linkNode]="linkNodes[0]"
|
||||
></app-edit-text-action>
|
||||
<app-edit-config-action *ngIf="nodes.length===1 && nodes[0].node_type==='vpcs'"
|
||||
[server]="server"
|
||||
[project]="project"
|
||||
[node]="nodes[0]"
|
||||
></app-edit-config-action>
|
||||
<app-export-config-action *ngIf="nodes.length===1 && nodes[0].node_type==='vpcs'"
|
||||
[server]="server"
|
||||
[node]="nodes[0]"
|
||||
></app-export-config-action>
|
||||
<!-- <app-import-config-action *ngIf="nodes.length===1"
|
||||
[server]="server"
|
||||
[node]="nodes[0]"
|
||||
></app-import-config-action> -->
|
||||
<app-move-layer-up-action
|
||||
*ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length) && labels.length===0"
|
||||
[server]="server"
|
||||
|
@ -0,0 +1,10 @@
|
||||
<h1 mat-dialog-title>Configuration for node {{node.name}}</h1>
|
||||
|
||||
<div class="modal-form-container">
|
||||
<textarea #textArea id="textArea" class="textArea" [(ngModel)]="config"></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>
|
@ -0,0 +1,4 @@
|
||||
.textArea {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
@ -0,0 +1,86 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { Server } from '../../../../models/server';
|
||||
import {
|
||||
MatDialogModule,
|
||||
MatFormFieldModule,
|
||||
MatDialogRef,
|
||||
MAT_DIALOG_DATA,
|
||||
MatSnackBarModule
|
||||
} from '@angular/material';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { ToasterService } from '../../../../services/toaster.service';
|
||||
import { of } from 'rxjs/internal/observable/of';
|
||||
import { ConfigEditorDialogComponent } from './config-editor.component';
|
||||
import { NodeService } from '../../../../services/node.service';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MockedNodeService } from '../../project-map.component.spec';
|
||||
import { Node } from '../../../../cartography/models/node';
|
||||
|
||||
describe('ConfigEditorDialogComponent', () => {
|
||||
let component: ConfigEditorDialogComponent;
|
||||
let fixture: ComponentFixture<ConfigEditorDialogComponent>;
|
||||
let server: Server;
|
||||
let node: Node;
|
||||
let toaster = {
|
||||
success: jasmine.createSpy('success')
|
||||
};
|
||||
let dialogRef = {
|
||||
close: jasmine.createSpy('close')
|
||||
};
|
||||
let mockedNodeService: MockedNodeService = new MockedNodeService();
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
MatDialogModule,
|
||||
MatFormFieldModule,
|
||||
NoopAnimationsModule,
|
||||
MatSnackBarModule,
|
||||
FormsModule
|
||||
],
|
||||
providers: [
|
||||
{ provide: MatDialogRef, useValue: dialogRef },
|
||||
{ provide: MAT_DIALOG_DATA },
|
||||
{ provide: NodeService, useValue: mockedNodeService },
|
||||
{ provide: ToasterService, useValue: toaster }
|
||||
],
|
||||
declarations: [ConfigEditorDialogComponent]
|
||||
}).compileComponents();
|
||||
|
||||
server = new Server();
|
||||
server.host = 'localhost';
|
||||
server.port = 80;
|
||||
|
||||
node = new Node();
|
||||
node.name = 'sample name';
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ConfigEditorDialogComponent);
|
||||
component = fixture.componentInstance;
|
||||
component.server = server;
|
||||
component.node = node;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(fixture).toBeDefined();
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should call node service when save configuration chosen', () => {
|
||||
spyOn(mockedNodeService, 'saveConfiguration').and.returnValue(of('sample config'));
|
||||
|
||||
component.onSaveClick();
|
||||
|
||||
expect(mockedNodeService.saveConfiguration).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not call node service when save configuration chosen', () => {
|
||||
spyOn(mockedNodeService, 'saveConfiguration').and.returnValue(of('sample config'));
|
||||
|
||||
component.onCancelClick();
|
||||
|
||||
expect(mockedNodeService.saveConfiguration).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
@ -0,0 +1,43 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Node } from '../../../../cartography/models/node';
|
||||
import { Project } from '../../../../models/project';
|
||||
import { Server } from '../../../../models/server';
|
||||
import { MatDialogRef } from '@angular/material';
|
||||
import { NodeService } from '../../../../services/node.service';
|
||||
import { ToasterService } from '../../../../services/toaster.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-config-editor',
|
||||
templateUrl: './config-editor.component.html',
|
||||
styleUrls: ['./config-editor.component.scss']
|
||||
})
|
||||
export class ConfigEditorDialogComponent implements OnInit {
|
||||
server: Server;
|
||||
project: Project;
|
||||
node: Node;
|
||||
|
||||
config: any;
|
||||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<ConfigEditorDialogComponent>,
|
||||
public nodeService: NodeService,
|
||||
private toasterService: ToasterService
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.nodeService.getConfiguration(this.server, this.node).subscribe((config: any) => {
|
||||
this.config = config;
|
||||
});
|
||||
}
|
||||
|
||||
onSaveClick() {
|
||||
this.nodeService.saveConfiguration(this.server, this.node, this.config).subscribe((response) => {
|
||||
this.dialogRef.close();
|
||||
this.toasterService.success(`Configuration for node ${this.node.name} saved.`);
|
||||
});
|
||||
}
|
||||
|
||||
onCancelClick() {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
@ -112,6 +112,14 @@ export class MockedNodeService {
|
||||
duplicate(server: Server, node: Node) {
|
||||
return of(node);
|
||||
}
|
||||
|
||||
getConfiguration(server: Server, node: Node) {
|
||||
return of('sample config');
|
||||
}
|
||||
|
||||
saveConfiguration(server: Server, node: Node, configuration: string) {
|
||||
return of(configuration);
|
||||
}
|
||||
|
||||
update(server: Server, node: Node) {
|
||||
return of(node);
|
||||
|
@ -92,4 +92,22 @@ export class NodeService {
|
||||
"z": node.z
|
||||
});
|
||||
}
|
||||
|
||||
getConfiguration(server: Server, node: Node) {
|
||||
let urlPath: string = `/projects/${node.project_id}/nodes/${node.node_id}`
|
||||
|
||||
if (node.node_type === 'vpcs') {
|
||||
urlPath += '/files/startup.vpc';
|
||||
return this.httpServer.get(server, urlPath, { responseType: 'text' as 'json'});
|
||||
}
|
||||
}
|
||||
|
||||
saveConfiguration(server: Server, node: Node, configuration: string) {
|
||||
let urlPath: string = `/projects/${node.project_id}/nodes/${node.node_id}`
|
||||
|
||||
if (node.node_type === 'vpcs') {
|
||||
urlPath += '/files/startup.vpc';
|
||||
return this.httpServer.post(server, urlPath, configuration);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user