ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-18 14:58:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into Node-information-dialog-improvements

Browse Source
This commit is contained in:
piotrpekala7
2020-02-27 08:29:12 +01:00
parent 62e0d64bf7 6ac9c94922
commit ca3045d236
37 changed files with 183 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.ts
View File

@ -20,7 +20,8 @@ export class ChangeSymbolActionComponent implements OnInit {
const dialogRef = this.dialog.open(ChangeSymbolDialogComponent, {
width: '1000px',
height: '500px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts
View File

@ -27,7 +27,8 @@ export class ConfigActionComponent {
@Input() node: Node;
private conf = {
autoFocus: false,
width: '800px'
width: '800px',
disableClose: true
};
dialogRef;

3
src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.ts
View File

@ -20,7 +20,8 @@ export class EditConfigActionComponent {
const dialogRef = this.dialog.open(ConfigEditorDialogComponent, {
width: '600px',
height: '500px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
View File

@ -25,7 +25,8 @@ export class EditStyleActionComponent implements OnChanges {
editStyle() {
const dialogRef = this.dialog.open(StyleEditorDialogComponent, {
width: '800px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
View File

@ -29,7 +29,8 @@ export class EditTextActionComponent implements OnInit {
editText() {
const dialogRef = this.dialog.open(TextEditorDialogComponent, {
width: '300px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts
View File

@ -26,7 +26,8 @@ export class ExportConfigActionComponent {
} else {
const dialogRef = this.dialog.open(ConfigDialogComponent, {
width: '500px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
dialogRef.afterClosed().subscribe((configType: string) => {

3
src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts
View File

@ -27,7 +27,8 @@ export class ImportConfigActionComponent {
if (this.node.node_type !== 'vpcs') {
const dialogRef = this.dialog.open(ConfigDialogComponent, {
width: '500px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
dialogRef.afterClosed().subscribe((configType: string) => {

3
src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.ts
View File

@ -20,7 +20,8 @@ export class PacketFiltersActionComponent {
const dialogRef = this.dialog.open(PacketFiltersDialogComponent, {
width: '900px',
height: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.ts
View File

@ -18,7 +18,8 @@ export class ShowNodeActionComponent {
const dialogRef = this.dialog.open(InfoDialogComponent, {
width: '600px',
maxHeight: '600px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.node = this.node;

3
src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.ts
View File

@ -19,7 +19,8 @@ export class StartCaptureActionComponent {
startCapture() {
const dialogRef = this.dialog.open(StartCaptureDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;

3
src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts
View File

@ -35,7 +35,8 @@ export class ConfiguratorDialogQemuComponent implements OnInit {
private conf = {
autoFocus: false,
width: '800px'
width: '800px',
disableClose: true
};
dialogRefQemuImageCreator;

5
src/app/components/project-map/nodes-menu/nodes-menu.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Input } from "@angular/core";
import { Component, Input, ChangeDetectionStrategy } from "@angular/core";
import { Project } from '../../../models/project';
import { Server } from '../../../models/server';
import { NodeService } from '../../../services/node.service';
@ -11,7 +11,8 @@ import { ServerService } from '../../../services/server.service';
@Component({
selector: 'app-nodes-menu',
templateUrl: './nodes-menu.component.html',
styleUrls: ['./nodes-menu.component.scss']
styleUrls: ['./nodes-menu.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class NodesMenuComponent {
@Input('project') project: Project;

3
src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.ts
View File

@ -80,7 +80,8 @@ export class PacketFiltersDialogComponent implements OnInit{
onHelpClick() {
const dialogRef = this.dialog.open(HelpDialogComponent, {
width: '500px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.title = 'Help for filters';

6
src/app/components/project-map/project-map-menu/project-map-menu.component.html
View File

@ -3,7 +3,7 @@
mat-icon-button
class="menu-button"
(click)="addDrawing('text')">
<mat-icon [ngClass]="{unmarkedLight: !drawTools.isTextChosen && isLightThemeEnabled, marked: drawTools.isTextChosen}">create</mat-icon>
<mat-icon [ngClass]="getCssClassForIcon('text')">create</mat-icon>
</button>
<input
type="file"
@ -23,14 +23,14 @@
mat-icon-button
class="menu-button"
(click)="addDrawing('rectangle')">
<mat-icon [ngClass]="{unmarkedLight: !drawTools.isRectangleChosen && isLightThemeEnabled, marked: drawTools.isRectangleChosen}">crop_3_2</mat-icon>
<mat-icon [ngClass]="getCssClassForIcon('rectangle')">crop_3_2</mat-icon>
</button>
<button
matTooltip="Draw an ellipse"
mat-icon-button
class="menu-button"
(click)="addDrawing('ellipse')">
<mat-icon [ngClass]="{unmarkedLight: !drawTools.isEllipseChosen && isLightThemeEnabled, marked: drawTools.isEllipseChosen}">panorama_fish_eye</mat-icon>
<mat-icon [ngClass]="getCssClassForIcon('ellipse')">panorama_fish_eye</mat-icon>
</button>
<button *ngIf="!isLightThemeEnabled"
matTooltip="Draw a line"

27
src/app/components/project-map/project-map-menu/project-map-menu.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { Component, OnInit, OnDestroy, Input, ChangeDetectionStrategy } from '@angular/core';
import { Project } from '../../../models/project';
import { Server } from '../../../models/server';
import { ToolsService } from '../../../services/tools.service';
@ -14,11 +14,11 @@ import { ScreenshotDialogComponent, Screenshot } from '../screenshot-dialog/scre
import { saveAsPng, saveAsJpeg } from 'save-html-as-image';
import { ThemeService } from '../../../services/theme.service';
@Component({
selector: 'app-project-map-menu',
templateUrl: './project-map-menu.component.html',
styleUrls: ['./project-map-menu.component.scss']
styleUrls: ['./project-map-menu.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectMapMenuComponent implements OnInit, OnDestroy {
@Input() project: Project;
@ -47,10 +47,29 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
}
getCssClassForIcon(type: string) {
if (type === 'text') {
return {
'unmarkedLight': !this.drawTools.isTextChosen && this.isLightThemeEnabled,
'marked': this.drawTools.isTextChosen
};
} else if (type === 'rectangle') {
return {
'unmarkedLight': !this.drawTools.isRectangleChosen && this.isLightThemeEnabled,
'marked': this.drawTools.isRectangleChosen
};
}
return {
'unmarkedLight': !this.drawTools.isEllipseChosen && this.isLightThemeEnabled,
'marked': this.drawTools.isEllipseChosen
};
}
public takeScreenshot() {
const dialogRef = this.dialog.open(ScreenshotDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
dialogRef.afterClosed().subscribe((result: Screenshot) => {
if (result) this.saveImage(result);

62
src/app/components/project-map/project-map.component.ts
View File

@ -66,6 +66,7 @@ import { ConfirmationBottomSheetComponent } from '../projects/confirmation-botto
import { NodeAddedEvent } from '../template/template-list-dialog/template-list-dialog.component';
import { NotificationService } from '../../services/notification.service';
import { ThemeService } from '../../services/theme.service';
import { Title } from '@angular/platform-browser';
@Component({
@ -109,7 +110,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
@ViewChild(D3MapComponent, {static: false}) mapChild: D3MapComponent;
@ViewChild(ProjectMapMenuComponent, {static: false}) projectMapMenuComponent: ProjectMapMenuComponent;
private subscriptions: Subscription[] = [];
private projectMapSubscription: Subscription = new Subscription();
constructor(
private route: ActivatedRoute,
@ -153,7 +154,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
private serialLinkWidget: SerialLinkWidget,
private bottomSheet: MatBottomSheet,
private notificationService: NotificationService,
private themeService: ThemeService
private themeService: ThemeService,
private title: Title
) {}
ngOnInit() {
@ -178,6 +180,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}),
mergeMap((project: Project) => {
this.project = project;
this.title.setTitle(this.project.name);
if (this.mapSettingsService.interfaceLabels.has(project.project_id)) {
this.isInterfaceLabelVisible = this.mapSettingsService.interfaceLabels.get(project.project_id);
@ -210,22 +213,22 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
);
});
this.subscriptions.push(routeSub);
this.projectMapSubscription.add(routeSub);
this.subscriptions.push(
this.projectMapSubscription.add(
this.mapSettingsService.mapRenderedEmitter.subscribe((value: boolean) => {
if (this.scrollEnabled) this.centerCanvas();
})
);
this.subscriptions.push(
this.projectMapSubscription.add(
this.drawingsDataSource.changes.subscribe((drawings: Drawing[]) => {
this.drawings = drawings;
this.mapChangeDetectorRef.detectChanges();
})
);
this.subscriptions.push(
this.projectMapSubscription.add(
this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
if (!this.server) return;
nodes.forEach((node: Node) => {
@ -237,21 +240,21 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
})
);
this.subscriptions.push(
this.projectMapSubscription.add(
this.linksDataSource.changes.subscribe((links: Link[]) => {
this.links = links;
this.mapChangeDetectorRef.detectChanges();
})
);
this.subscriptions.push(this.projectWebServiceHandler.errorNotificationEmitter.subscribe((message) => {
this.projectMapSubscription.add(this.projectWebServiceHandler.errorNotificationEmitter.subscribe((message) => {
this.showMessage({
type: 'error',
message: message
});
}));
this.subscriptions.push(this.projectWebServiceHandler.warningNotificationEmitter.subscribe((message) => {
this.projectMapSubscription.add(this.projectWebServiceHandler.warningNotificationEmitter.subscribe((message) => {
this.showMessage({
type: 'warning',
message: message
@ -323,7 +326,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.progressService.deactivate();
});
this.subscriptions.push(subscription);
this.projectMapSubscription.add(subscription);
}
setUpProjectWS(project: Project) {
@ -408,14 +411,14 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.contextMenu.openMenuForListOfElements(drawings, nodes, labels, links, event.pageY, event.pageX);
});
this.subscriptions.push(onLinkContextMenu);
this.subscriptions.push(onEthernetLinkContextMenu);
this.subscriptions.push(onSerialLinkContextMenu);
this.subscriptions.push(onNodeContextMenu);
this.subscriptions.push(onDrawingContextMenu);
this.subscriptions.push(onContextMenu);
this.subscriptions.push(onLabelContextMenu);
this.subscriptions.push(onInterfaceLabelContextMenu);
this.projectMapSubscription.add(onLinkContextMenu);
this.projectMapSubscription.add(onEthernetLinkContextMenu);
this.projectMapSubscription.add(onSerialLinkContextMenu);
this.projectMapSubscription.add(onNodeContextMenu);
this.projectMapSubscription.add(onDrawingContextMenu);
this.projectMapSubscription.add(onContextMenu);
this.projectMapSubscription.add(onLabelContextMenu);
this.projectMapSubscription.add(onInterfaceLabelContextMenu);
this.mapChangeDetectorRef.detectChanges();
}
@ -424,10 +427,10 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
return;
}
this.nodeService.createFromTemplate(this.server, this.project, nodeAddedEvent.template, nodeAddedEvent.x, nodeAddedEvent.y, nodeAddedEvent.server).subscribe((node: Node) => {
if (nodeAddedEvent.name !== nodeAddedEvent.template.name) {
node.name = nodeAddedEvent.name;
this.nodeService.updateNode(this.server, node).subscribe(()=>{});
}
// if (nodeAddedEvent.name !== nodeAddedEvent.template.name) {
// node.name = nodeAddedEvent.name;
// this.nodeService.updateNode(this.server, node).subscribe(()=>{});
// }
this.projectService.nodes(this.server, this.project.project_id).subscribe((nodes: Node[]) => {
nodes.filter((node) => node.label.style === null).forEach((node) => {
@ -702,7 +705,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
addNewProject() {
const dialogRef = this.dialog.open(AddBlankProjectDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
@ -711,7 +715,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
saveProject() {
const dialogRef = this.dialog.open(SaveProjectDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
@ -721,7 +726,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
editProject() {
const dialogRef = this.dialog.open(EditProjectDialogComponent, {
width: '600px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
@ -732,7 +738,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
let uuid: string = '';
const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
width: '400px',
autoFocus: false
autoFocus: false,
disableClose: true
});
let instance = dialogRef.componentInstance;
instance.server = this.server;
@ -819,6 +826,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}
public ngOnDestroy() {
this.title.setTitle('GNS3 Web UI');
this.drawingsDataSource.clear();
this.nodesDataSource.clear();
this.linksDataSource.clear();
@ -829,7 +837,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
if (this.ws) {
if (this.ws.OPEN) this.ws.close();
}
this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
this.projectMapSubscription.unsubscribe();
}
}