mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2024-12-19 21:17:51 +00:00
Merge branch 'master' into Topology-summary---prototype
This commit is contained in:
commit
73bbc12d84
@ -192,6 +192,7 @@ import { MapSettingService } 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 { TopologySummaryComponent } from './components/topology-summary/topology-summary.component';
|
||||
import { BringToFrontActionComponent } from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component';
|
||||
|
||||
if (environment.production) {
|
||||
Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
|
||||
@ -314,7 +315,8 @@ if (environment.production) {
|
||||
NodesMenuComponent,
|
||||
ProjectMapMenuComponent,
|
||||
HelpComponent,
|
||||
TopologySummaryComponent
|
||||
TopologySummaryComponent,
|
||||
BringToFrontActionComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
@ -7,7 +7,7 @@ import { RouterTestingModule } from '@angular/router/testing';
|
||||
import { Router } from '@angular/router';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
|
||||
class MockedRouter {
|
||||
export class MockedRouter {
|
||||
events: BehaviorSubject<boolean>;
|
||||
|
||||
constructor() {
|
||||
|
@ -3,6 +3,19 @@
|
||||
<div class="default-content">
|
||||
<div class="container mat-elevation-z8">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title> Useful shortcuts </mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-list>
|
||||
<mat-list-item> ctrl + + to zoom in </mat-list-item>
|
||||
<mat-list-item> ctrl + - to zoom out </mat-list-item>
|
||||
<mat-list-item> ctrl + 0 to reset zoom </mat-list-item>
|
||||
<mat-list-item> ctrl + a to select all items on map </mat-list-item>
|
||||
<mat-list-item> ctrl + shift + a to deselect all items on map </mat-list-item>
|
||||
<mat-list-item> ctrl + shift + s to go to preferences </mat-list-item>
|
||||
</mat-list>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title> Third party components </mat-panel-title>
|
||||
|
@ -0,0 +1,4 @@
|
||||
<button mat-menu-item (click)="bringToFront()">
|
||||
<mat-icon>vertical_align_top</mat-icon>
|
||||
<span>Bring to front</span>
|
||||
</button>
|
@ -0,0 +1,66 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { BringToFrontActionComponent } from './bring-to-front-action.component';
|
||||
import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { MockedDrawingService, MockedDrawingsDataSource, MockedNodesDataSource, MockedNodeService } from '../../../project-map.component.spec';
|
||||
import { DrawingService } from '../../../../../services/drawing.service';
|
||||
import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
|
||||
import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
|
||||
import { NodeService } from '../../../../../services/node.service';
|
||||
import { Node } from '../../../../../cartography/models/node';
|
||||
import { of } from 'rxjs';
|
||||
import { ComponentFactoryResolver } from '@angular/core';
|
||||
import { Drawing } from '../../../../../cartography/models/drawing';
|
||||
|
||||
describe('BringToFrontActionComponent', () => {
|
||||
let component: BringToFrontActionComponent;
|
||||
let fixture: ComponentFixture<BringToFrontActionComponent>;
|
||||
let drawingService = new MockedDrawingService();
|
||||
let drawingsDataSource = new MockedDrawingsDataSource();
|
||||
let nodeService = new MockedNodeService();
|
||||
let nodesDataSource = new MockedNodesDataSource();
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule, CommonModule, NoopAnimationsModule],
|
||||
providers: [
|
||||
{ provide: DrawingService, useValue: drawingService },
|
||||
{ provide: DrawingsDataSource, useValue: drawingsDataSource },
|
||||
{ provide: NodeService, useValue: nodeService },
|
||||
{ provide: NodesDataSource, useValue: nodesDataSource },
|
||||
],
|
||||
declarations: [BringToFrontActionComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BringToFrontActionComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should call node service when bring to front action called', () => {
|
||||
spyOn(nodeService, 'update').and.returnValue(of());
|
||||
component.nodes = [{z: 0} as Node];
|
||||
component.drawings = [];
|
||||
|
||||
component.bringToFront();
|
||||
|
||||
expect(nodeService.update).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should call drawing service when bring to front action called', () => {
|
||||
spyOn(drawingService, 'update').and.returnValue(of());
|
||||
component.nodes = [];
|
||||
component.drawings = [{z: 0} as Drawing];
|
||||
|
||||
component.bringToFront();
|
||||
|
||||
expect(drawingService.update).toHaveBeenCalled();
|
||||
});
|
||||
});
|
@ -0,0 +1,43 @@
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { Server } from '../../../../../models/server';
|
||||
import { Node } from '../../../../../cartography/models/node';
|
||||
import { NodesDataSource } from '../../../../../cartography/datasources/nodes-datasource';
|
||||
import { NodeService } from '../../../../../services/node.service';
|
||||
import { Drawing } from '../../../../../cartography/models/drawing';
|
||||
import { DrawingsDataSource } from '../../../../../cartography/datasources/drawings-datasource';
|
||||
import { DrawingService } from '../../../../../services/drawing.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-bring-to-front-action',
|
||||
templateUrl: './bring-to-front-action.component.html'
|
||||
})
|
||||
export class BringToFrontActionComponent implements OnInit {
|
||||
@Input() server: Server;
|
||||
@Input() nodes: Node[];
|
||||
@Input() drawings: Drawing[];
|
||||
|
||||
constructor(
|
||||
private nodesDataSource: NodesDataSource,
|
||||
private drawingsDataSource: DrawingsDataSource,
|
||||
private nodeService: NodeService,
|
||||
private drawingService: DrawingService
|
||||
) {}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
bringToFront() {
|
||||
this.nodes.forEach((node) => {
|
||||
node.z = 100;
|
||||
this.nodesDataSource.update(node);
|
||||
|
||||
this.nodeService.update(this.server, node).subscribe((node: Node) => {});
|
||||
});
|
||||
|
||||
this.drawings.forEach((drawing) => {
|
||||
drawing.z = 100;
|
||||
this.drawingsDataSource.update(drawing);
|
||||
|
||||
this.drawingService.update(this.server, drawing).subscribe((drawing: Drawing) => {});
|
||||
});
|
||||
}
|
||||
}
|
@ -44,6 +44,12 @@
|
||||
[nodes]="nodes"
|
||||
[drawings]="drawings"
|
||||
></app-move-layer-down-action>
|
||||
<app-bring-to-front-action
|
||||
*ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length) && labels.length===0"
|
||||
[server]="server"
|
||||
[nodes]="nodes"
|
||||
[drawings]="drawings"
|
||||
></app-bring-to-front-action>
|
||||
<app-start-capture-action
|
||||
*ngIf="!projectService.isReadOnly(project) && isBundledServer
|
||||
&& drawings.length===0 && nodes.length===0 && links.length===1"
|
||||
|
@ -46,6 +46,10 @@
|
||||
<mat-icon>developer_board</mat-icon>
|
||||
<span>Servers</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="deleteProject()">
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span>Delete project</span>
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-toolbar-row>
|
||||
|
@ -20,7 +20,7 @@ import { DrawingsDataSource } from '../../cartography/datasources/drawings-datas
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ANGULAR_MAP_DECLARATIONS } from '../../cartography/angular-map.imports';
|
||||
import { NO_ERRORS_SCHEMA } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { MockedSettingsService } from '../../services/settings.service.spec';
|
||||
import { MockedServerService } from '../../services/server.service.spec';
|
||||
import { MockedProjectService } from '../../services/project.service.spec';
|
||||
@ -52,6 +52,8 @@ import { MapSettingService } from '../../services/mapsettings.service';
|
||||
import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
|
||||
import { MockedToasterService } from '../../services/toaster.service.spec';
|
||||
import { ToasterService } from '../../services/toaster.service';
|
||||
import { MockedActivatedRoute } from '../snapshots/list-of-snapshots/list-of-snaphshots.component.spec';
|
||||
import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource } from '../../cartography/datasources/map-datasource';
|
||||
|
||||
export class MockedProgressService {
|
||||
public activate() {}
|
||||
@ -94,6 +96,10 @@ export class MockedNodeService {
|
||||
duplicate(server: Server, node: Node) {
|
||||
return of(node);
|
||||
}
|
||||
|
||||
update(server: Server, node: Node) {
|
||||
return of(node);
|
||||
}
|
||||
}
|
||||
|
||||
export class MockedDrawingService {
|
||||
@ -202,6 +208,7 @@ describe('ProjectMapComponent', () => {
|
||||
let linksDataSource = new MockedLinksDataSource();
|
||||
let mockedToasterService = new MockedToasterService();
|
||||
let nodeCreatedLabelStylesFixer;
|
||||
let mockedRouter = new MockedActivatedRoute;
|
||||
|
||||
beforeEach(async(() => {
|
||||
nodeCreatedLabelStylesFixer = {
|
||||
@ -245,7 +252,12 @@ describe('ProjectMapComponent', () => {
|
||||
{ provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
|
||||
{ provide: MapScaleService },
|
||||
{ provide: NodeCreatedLabelStylesFixer, useValue: nodeCreatedLabelStylesFixer},
|
||||
{ provide: ToasterService, useValue: mockedToasterService }
|
||||
{ provide: ToasterService, useValue: mockedToasterService },
|
||||
{ provide: Router, useValue: mockedRouter },
|
||||
{ provide: MapNodesDataSource, useClass: MapNodesDataSource },
|
||||
{ provide: MapLinksDataSource, useClass: LinksDataSource },
|
||||
{ provide: MapDrawingsDataSource, useClass: MapDrawingsDataSource },
|
||||
{ provide: MapSymbolsDataSource, useClass: MapSymbolsDataSource }
|
||||
],
|
||||
declarations: [ProjectMapComponent, ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
|
||||
schemas: [NO_ERRORS_SCHEMA]
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, ParamMap } from '@angular/router';
|
||||
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
|
||||
|
||||
import { Observable, Subject, Subscription, from } from 'rxjs';
|
||||
import { webSocket } from 'rxjs/webSocket';
|
||||
@ -51,6 +51,7 @@ import { LabelWidget } from '../../cartography/widgets/label';
|
||||
import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter';
|
||||
import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
|
||||
import { ToasterService } from '../../services/toaster.service';
|
||||
import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -116,7 +117,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
private movingEventSource: MovingEventSource,
|
||||
private mapScaleService: MapScaleService,
|
||||
private nodeCreatedLabelStylesFixer: NodeCreatedLabelStylesFixer,
|
||||
private toasterService: ToasterService
|
||||
private toasterService: ToasterService,
|
||||
private router: Router,
|
||||
private mapNodesDataSource: MapNodesDataSource,
|
||||
private mapLinksDataSource: MapLinksDataSource,
|
||||
private mapDrawingsDataSource: MapDrawingsDataSource,
|
||||
private mapSymbolsDataSource: MapSymbolsDataSource
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
@ -197,11 +203,37 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
addKeyboardListeners() {
|
||||
Mousetrap.bind('ctrl++', (event: Event) => {
|
||||
event.preventDefault();
|
||||
this.zoomIn();
|
||||
});
|
||||
|
||||
Mousetrap.bind('ctrl+-', (event: Event) => {
|
||||
event.preventDefault();
|
||||
});;
|
||||
this.zoomOut();
|
||||
});
|
||||
|
||||
Mousetrap.bind('ctrl+0', (event: Event) => {
|
||||
event.preventDefault();
|
||||
this.resetZoom();
|
||||
});
|
||||
|
||||
Mousetrap.bind('ctrl+a', (event: Event) => {
|
||||
event.preventDefault();
|
||||
let allNodes: Indexed[] = this.mapNodesDataSource.getItems();
|
||||
let allDrawings: Indexed[] = this.mapDrawingsDataSource.getItems();
|
||||
let allLinks: Indexed[] = this.mapLinksDataSource.getItems();
|
||||
let allSymbols: Indexed[] = this.mapSymbolsDataSource.getItems();
|
||||
this.selectionManager.setSelected(allNodes.concat(allDrawings).concat(allLinks).concat(allSymbols));
|
||||
});
|
||||
|
||||
Mousetrap.bind('ctrl+shift+a', (event: Event) => {
|
||||
event.preventDefault();
|
||||
this.selectionManager.setSelected([]);
|
||||
});
|
||||
|
||||
Mousetrap.bind('ctrl+shift+s', (event: Event) => {
|
||||
event.preventDefault();
|
||||
this.router.navigate(['/server', this.server.id, 'preferences']);
|
||||
});
|
||||
}
|
||||
|
||||
onProjectLoad(project: Project) {
|
||||
@ -413,6 +445,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
|
||||
imageToUpload.src = window.URL.createObjectURL(file);
|
||||
}
|
||||
|
||||
public deleteProject() {
|
||||
this.projectService.delete(this.server, this.project.project_id).subscribe(() => {
|
||||
this.router.navigate(['/server', this.server.id, 'projects']);
|
||||
});
|
||||
}
|
||||
|
||||
public ngOnDestroy() {
|
||||
this.drawingsDataSource.clear();
|
||||
this.nodesDataSource.clear();
|
||||
|
Loading…
Reference in New Issue
Block a user