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

Lazy loading topology summary component

Browse Source
This commit is contained in:
piotrpekala7 2021-05-25 17:06:01 +02:00
parent 9bf2980b6b
commit 3b07b4a2db
2 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -254,12 +254,6 @@
(closeConsole)="toggleShowConsole($event)"
></app-console-wrapper>
</div>
<div [ngClass]="{ visible: !isTopologySummaryVisible }">
<app-topology-summary
*ngIf="project"
[server]="server"
[project]="project"
(closeTopologySummary)="toggleShowTopologySummary($event)"
></app-topology-summary>
</div>
</div>
<ng-template #topologySummaryContainer></ng-template>

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

@ -1,11 +1,11 @@
import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { ChangeDetectorRef, Component, ComponentFactoryResolver, ComponentRef, Injector, OnDestroy, OnInit, SimpleChange, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { MatDialog } from '@angular/material/dialog';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import * as Mousetrap from 'mousetrap';
import { from, Observable, Subscription } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';
import { map, mergeMap, takeUntil } from 'rxjs/operators';
import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component';
import { MapDrawingToDrawingConverter } from '../../cartography/converters/map/map-drawing-to-drawing-converter';
import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-label-to-label-converter';
@ -74,6 +74,7 @@ import { ImportProjectDialogComponent } from '../projects/import-project-dialog/
import { NavigationDialogComponent } from '../projects/navigation-dialog/navigation-dialog.component';
import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component';
import { NodeAddedEvent } from '../template/template-list-dialog/template-list-dialog.component';
import { TopologySummaryComponent } from '../topology-summary/topology-summary.component';
import { ContextMenuComponent } from './context-menu/context-menu.component';
import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer';
import { NewTemplateDialogComponent } from './new-template-dialog/new-template-dialog.component';
@ -103,6 +104,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
public gridVisibility: boolean = false;
public toolbarVisibility: boolean = true;
public symbolScaling: boolean = true;
private instance: ComponentRef<TopologySummaryComponent>;
tools = {
selection: true,
@ -121,6 +123,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
@ViewChild(ContextMenuComponent) contextMenu: ContextMenuComponent;
@ViewChild(D3MapComponent) mapChild: D3MapComponent;
@ViewChild(ProjectMapMenuComponent) projectMapMenuComponent: ProjectMapMenuComponent;
@ViewChild('topologySummaryContainer', {read: ViewContainerRef}) topologySummaryContainer: ViewContainerRef;
private projectMapSubscription: Subscription = new Subscription();
@ -170,7 +173,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
private title: Title,
private nodeConsoleService: NodeConsoleService,
private symbolService: SymbolService,
private cd: ChangeDetectorRef
private cd: ChangeDetectorRef,
private cfr: ComponentFactoryResolver,
private injector: Injector
) {}
ngOnInit() {
@ -205,7 +210,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.settings = this.settingsService.getAll();
this.symbolScaling = this.mapSettingsService.getSymbolScaling();
this.isTopologySummaryVisible = this.mapSettingsService.isTopologySummaryVisible;
this.isConsoleVisible = this.mapSettingsService.isLogConsoleVisible;
this.mapSettingsService.logConsoleSubject.subscribe((value) => (this.isConsoleVisible = value));
this.notificationsVisibility = localStorage.getItem('notificationsVisibility') === 'true' ? true : false;
@ -213,6 +217,21 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.gridVisibility = localStorage.getItem('gridVisibility') === 'true' ? true : false;
}
async lazyLoadTopologySummary() {
if (this.isTopologySummaryVisible) {
const {TopologySummaryComponent} = await import('../topology-summary/topology-summary.component');
const componentFactory = this.cfr.resolveComponentFactory(TopologySummaryComponent);
this.instance = this.topologySummaryContainer.createComponent(componentFactory, null, this.injector);
this.instance.instance.server = this.server;
this.instance.instance.project = this.project;
} else if (this.instance) {
if (this.instance.instance) {
this.instance.instance.ngOnDestroy();
this.instance.destroy();
}
}
}
addSubscriptions() {
this.projectMapSubscription.add(
this.mapSettingsService.mapRenderedEmitter.subscribe((value: boolean) => {
@ -312,6 +331,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.title.setTitle(this.project.name);
this.isInterfaceLabelVisible = this.mapSettingsService.showInterfaceLabels;
this.toggleShowTopologySummary(this.mapSettingsService.isTopologySummaryVisible);
this.recentlyOpenedProjectService.setServerId(this.server.id.toString());
this.recentlyOpenedProjectService.setProjectId(this.project.project_id);
@ -801,6 +821,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
public toggleShowTopologySummary(visible: boolean) {
this.isTopologySummaryVisible = visible;
this.mapSettingsService.toggleTopologySummary(this.isTopologySummaryVisible);
this.lazyLoadTopologySummary();
}
public toggleNotifications(visible: boolean) {