Merge pull request #519 from GNS3/WebUI-Cannot-read-property-'forEach'-of-undefined

Web ui cannot read property 'for each' of undefined

src/app/cartography/converters/map/node-to-map-node-converter.ts

@@ -28,14 +28,14 @@ export class NodeToMapNodeConverter implements Converter<Node, MapNode> {
     mapNode.consoleHost = node.console_host;
     mapNode.firstPortName = node.first_port_name;
     mapNode.height = node.height;
-    mapNode.label = this.labelToMapLabel.convert(node.label, { node_id: node.node_id });
+    mapNode.label = this.labelToMapLabel ? this.labelToMapLabel.convert(node.label, { node_id: node.node_id }) : undefined;
     mapNode.locked = node.locked;
     mapNode.name = node.name;
     mapNode.nodeDirectory = node.node_directory;
     mapNode.nodeType = node.node_type;
     mapNode.portNameFormat = node.port_name_format;
     mapNode.portSegmentSize = node.port_segment_size;
-    mapNode.ports = node.ports.map(port => this.portToMapPort.convert(port));
+    mapNode.ports = node.ports ? node.ports.map(port => this.portToMapPort.convert(port)) : [];
     mapNode.projectId = node.project_id;
     mapNode.status = node.status;
     mapNode.symbol = node.symbol;

src/app/cartography/managers/graph-data-manager.ts

@@ -34,32 +34,40 @@ export class GraphDataManager {
   ) {}
 
   public setNodes(nodes: Node[]) {
+    if (nodes) {
       const mapNodes = nodes.map(n => this.nodeToMapNode.convert(n));
       this.mapNodesDataSource.set(mapNodes);
 
       this.assignDataToLinks();
       this.onDataUpdate();
     }
+  }
 
   public setLinks(links: Link[]) {
+    if (links) {
       const mapLinks = links.map(l => this.linkToMapLink.convert(l));
       this.mapLinksDataSource.set(mapLinks);
 
       this.assignDataToLinks();
       this.onDataUpdate();
     }
+  }
 
   public setDrawings(drawings: Drawing[]) {
+    if (drawings) {
       const mapDrawings = drawings.map(d => this.drawingToMapDrawing.convert(d));
       this.mapDrawingsDataSource.set(mapDrawings);
   
       this.onDataUpdate();
     }
+  }
 
   public setSymbols(symbols: Symbol[]) {
+    if (symbols) {
       const mapSymbols = symbols.map(s => this.symbolToMapSymbol.convert(s));
       this.mapSymbolsDataSource.set(mapSymbols);
     }
+  }
 
   public getNodes() {
     return this.mapNodesDataSource.getItems();

src/app/cartography/widgets/interface-status.ts

@@ -16,17 +16,18 @@ export class InterfaceStatusWidget implements Widget {
       const link_group = select<SVGGElement, MapLink>(this);
       const link_path = link_group.select<SVGPathElement>('path');
 
+      let statuses = [];
+      if (link_path.node()) {
         const start_point: SVGPoint = link_path.node().getPointAtLength(45);
         const end_point: SVGPoint = link_path.node().getPointAtLength(link_path.node().getTotalLength() - 45);
 
-      let statuses = [];
-
         if (link_path.node().getTotalLength() > 2 * 45 + 10) {
           statuses = [
             new LinkStatus(start_point.x, start_point.y, l.source.status),
             new LinkStatus(end_point.x, end_point.y, l.target.status)
           ];
         }
+      }
 
       const status_started = link_group
         .selectAll<SVGCircleElement, LinkStatus>('circle.status_started')