Merge pull request #1172 from GNS3/Loading-symbols-after-migrating-to-v3

Loading symbols after migrating to v3

src/app/cartography/widgets/node.ts

@@ -1,11 +1,9 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { SymbolService } from '../../services/symbol.service';
 import { event, select } from 'd3-selection';
 import { MapSettingsService } from '../../services/mapsettings.service';
 import { ClickedDataEvent } from '../events/event-source';
 import { NodeClicked, NodeContextMenu } from '../events/nodes';
 import { NodesEventSource } from '../events/nodes-event-source';
-import { GraphDataManager } from '../managers/graph-data-manager';
 import { SelectionManager } from '../managers/selection-manager';
 import { MapNode } from '../models/map/map-node';
 import { SVGSelection } from '../models/types';
@@ -19,12 +17,10 @@ export class NodeWidget implements Widget {
   public onNodeClicked = new EventEmitter<NodeClicked>();
 
   constructor(
-    private graphDataManager: GraphDataManager,
     private selectionManager: SelectionManager,
     private labelWidget: LabelWidget,
     private nodesEventSource: NodesEventSource,
-    private mapSettingsService: MapSettingsService,
-    private symbolService: SymbolService
+    private mapSettingsService: MapSettingsService
   ) {}
 
   public draw(view: SVGSelection) {
@@ -90,13 +86,7 @@ export class NodeWidget implements Widget {
         event.preventDefault();
         self.onContextConsoleMenu.emit(new NodeContextMenu(event, n));
       })
-      .attr('xnode:href', (n: MapNode) => {
-        let symbol = this.symbolService.get(n.symbol.split('/')[2]);
-        if (symbol) {
-          return 'data:image/svg+xml;base64,' + btoa(symbol.raw);
-        }
-        return '';
-      })
+      .attr('xnode:href', (n: MapNode) => n.symbolUrl)
       .attr('width', (n: MapNode) => {
         if (!n.width) return 60;
         return n.width;

src/app/components/preferences/common/symbols/symbols.component.html

@@ -32,7 +32,7 @@
         lazyimg
         [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }"
         class="image"
-        [src]="getImageSourceForTemplate(symbol.symbol_id)| authImage: server | async"
+        [src]="getImageSourceForTemplate(symbol.symbol_id)"
       />
     </button>
   </div>

src/app/components/preferences/common/symbols/symbols.component.scss

@@ -20,7 +20,6 @@
 }
 
 .buttonSelected {
-  border-width: 3px;
   background: #0097a7 !important;
 }
 

src/app/components/preferences/common/symbols/symbols.component.ts

@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
 import { Server } from '../../../../models/server';
 import { Symbol } from '../../../../models/symbol';
 import { SymbolService } from '../../../../services/symbol.service';
@@ -19,7 +18,7 @@ export class SymbolsComponent implements OnInit {
   isSelected: string = '';
   searchText: string = '';
 
-  constructor(private symbolService: SymbolService, private domSanitizer: DomSanitizer) {}
+  constructor(private symbolService: SymbolService) {}
 
   ngOnInit() {
     this.isSelected = this.symbol;
@@ -77,11 +76,6 @@ export class SymbolsComponent implements OnInit {
                 width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" xlink:href=\"${image}\"/>\n</svg>`;
   }
 
-  getImage(symbolFilename: string) {
-    let symbol = this.symbolService.get(symbolFilename);
-    return this.domSanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;base64,${btoa(symbol.raw)}`);
-  }
-
   getImageSourceForTemplate(symbol: string) {
     return `${this.server.protocol}//${this.server.host}:${this.server.port}/v3/symbols/${symbol}/raw`;
   }

src/app/components/project-map/project-map.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="project" [ngClass]="{ lightTheme: isLightThemeEnabled }" class="project-map">
   <app-d3-map
-    *ngIf="!settings.angular_map && symbolsLoaded"
+    *ngIf="!settings.angular_map"
     [server]="server"
     [project]="project"
     [symbols]="symbols"

src/app/components/project-map/project-map.component.ts

@@ -105,7 +105,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public gridVisibility: boolean = false;
   public toolbarVisibility: boolean = true;
   public symbolScaling: boolean = true;
-  public symbolsLoaded: boolean = false;
   private instance: ComponentRef<TopologySummaryComponent>;
 
   tools = {
@@ -183,9 +182,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.getSettings();
     this.progressService.activate();
-    this.symbolService.symbolsLoaded.subscribe(loaded => {
-      this.symbolsLoaded = true;
-    });
 
     if (this.serverService.isServiceInitialized) {
       this.getData();
@@ -321,10 +317,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
           mergeMap((server: Server) => {
             if (!server) this.router.navigate(['/servers']);
             this.server = server;
-
-            // load symbols
-            this.symbolService.load(this.server);
-
             return this.projectService.get(server, paramMap.get('project_id')).pipe(
               map((project) => {
                 return project;

src/app/components/template/template.component.html

@@ -43,25 +43,25 @@
         <span *ngIf="i % 4 === 0" class="templateRow">
           <span class="templateIcon">
             <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i])">
-              <img class="image" alt="Image" [src]="getImageSourceForTemplate(filteredTemplates[i])" />
+              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i])" />
             </div>
             <div class="templateText">{{ filteredTemplates[i].name }}</div>
           </span>
           <span *ngIf="filteredTemplates[i + 1]" class="templateIcon">
             <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 1])">
-              <img class="image" alt="Image" [src]="getImageSourceForTemplate(filteredTemplates[i + 1])" />
+              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 1])" />
             </div>
             <div class="templateText">{{ filteredTemplates[i + 1].name }}</div>
           </span>
           <span *ngIf="filteredTemplates[i + 2]" class="templateIcon">
             <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 2])">
-              <img class="image" alt="Image" [src]="getImageSourceForTemplate(filteredTemplates[i + 2])" />
+              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 2])" />
             </div>
             <div class="templateText">{{ filteredTemplates[i + 2].name }}</div>
           </span>
           <span *ngIf="filteredTemplates[i + 3]" class="templateIcon">
             <div mwlDraggable (dragStart)="dragStart($event)" (dragEnd)="dragEnd($event, filteredTemplates[i + 3])">
-              <img class="image" alt="Image" [src]="getImageSourceForTemplate(filteredTemplates[i + 3])" />
+              <img class="image" [src]="getImageSourceForTemplate(filteredTemplates[i + 3])" />
             </div>
             <div class="templateText">{{ filteredTemplates[i + 3].name }}</div>
           </span>

src/app/components/template/template.component.ts

@@ -129,9 +129,10 @@ export class TemplateComponent implements OnInit, OnDestroy {
   }
 
   getImageSourceForTemplate(template: Template) {
-    let symbol = this.symbolService.getSymbolFromTemplate(template);
-    if (symbol) return this.domSanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;base64,${btoa(symbol.raw)}`);
-    return this.domSanitizer.bypassSecurityTrustUrl('data:image/svg+xml;base64,');
+    return this.symbolService.getSymbolFromTemplate(this.server, template);
+    // let symbol = this.symbolService.getSymbolFromTemplate(template);
+    // if (symbol) return this.domSanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;base64,${btoa(symbol.raw)}`);
+    // return this.domSanitizer.bypassSecurityTrustUrl('data:image/svg+xml;base64,');
   }
 
   ngOnDestroy() {

src/app/services/symbol.service.spec.ts

@@ -48,12 +48,4 @@ describe('SymbolService', () => {
     const req = httpTestingController.expectOne('http://127.0.0.1:3080/v3/symbols/:my/tested.png/raw');
     expect(req.request.method).toEqual('GET');
   }));
-
-  it('should call load symbols while adding symbol', inject([SymbolService], (service: SymbolService) => {
-    spyOn(service, 'load');
-
-    service.add(server, 'symbolName', 'symbol');
-
-    expect(service.load).toHaveBeenCalled();
-  }));
 });

src/app/services/symbol.service.ts

@@ -1,35 +1,28 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { Template } from '../models/template';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { shareReplay } from 'rxjs/operators';
 import { Node } from '../cartography/models/node';
 import { Server } from '../models/server';
 import { Symbol } from '../models/symbol';
 import { HttpServer } from './http-server.service';
-import { Template } from '../models/template';
+
+const CACHE_SIZE = 1;
 
 @Injectable()
 export class SymbolService {
-  private symbols: Symbol[] = [];
+  public symbols: BehaviorSubject<Symbol[]> = new BehaviorSubject<Symbol[]>([]);
+  private cache: Observable<Symbol[]>;
   private maximumSymbolSize: number = 80;
-  public symbolsLoaded: Subject<boolean> = new Subject<boolean>();
 
   constructor(private httpServer: HttpServer) {}
 
-  async load(server: Server) {
-    let symbols  = await this.httpServer.get<Symbol[]>(server, '/symbols').toPromise();
-    await symbols.forEach(async symbol => {
-      symbol.raw = await this.raw(server, symbol.symbol_id).toPromise();
-      this.symbols.push(symbol);
-    });
-    this.symbolsLoaded.next(true);
-  }
-
   getMaximumSymbolSize() {
     return this.maximumSymbolSize;
   }
 
   get(symbol_id: string): Symbol {
-    return this.symbols.find((symbol: Symbol) => symbol.filename === symbol_id);
+    return this.symbols.getValue().find((symbol: Symbol) => symbol.symbol_id === symbol_id);
   }
 
   getDimensions(server: Server, symbol_id: string): Observable<SymbolDimension> {
@@ -45,22 +38,34 @@ export class SymbolService {
     };
   }
 
+  getByFilename(symbol_filename: string) {
+    return this.symbols.getValue().find((symbol: Symbol) => symbol.filename === symbol_filename);
+  }
+
   add(server: Server, symbolName: string, symbol: string) {
-    this.load(server);
+    this.cache = null;
     return this.httpServer.post(server, `/symbols/${symbolName}/raw`, symbol);
   }
 
-  list(server: Server) {
+  load(server: Server): Observable<Symbol[]> {
     return this.httpServer.get<Symbol[]>(server, '/symbols');
   }
 
+  list(server: Server) {
+    if (!this.cache) {
+      this.cache = this.load(server).pipe(shareReplay(CACHE_SIZE));
+    }
+
+    return this.cache;
+  }
+
   raw(server: Server, symbol_id: string) {
     const encoded_uri = encodeURI(symbol_id);
     return this.httpServer.getText(server, `/symbols/${encoded_uri}/raw`);
   }
 
-  getSymbolFromTemplate(template: Template) {
-    return this.symbols.find((symbol: Symbol) => symbol.filename === template.symbol.split('/')[2]);
+  getSymbolFromTemplate(server: Server, template: Template) {
+    return `${server.protocol}//${server.host}:${server.port}/v3/symbols/${template.symbol}/raw`;
   }
 }