Introduce Nodes and Links DataSources

src/app/app.module.ts

@@ -53,6 +53,9 @@ import { ApplianceListDialogComponent } from './appliance/appliance-list-dialog/
 import { NodeSelectInterfaceComponent } from './shared/node-select-interface/node-select-interface.component';
 import { CartographyModule } from './cartography/cartography.module';
 import { ToasterService } from './shared/services/toaster.service';
+import {ProjectWebServiceHandler} from "./shared/handlers/project-web-service-handler";
+import {LinksDataSource} from "./cartography/shared/datasources/links-datasource";
+import {NodesDataSource} from "./cartography/shared/datasources/nodes-datasource";
 
 
 @NgModule({
@@ -108,7 +111,10 @@ import { ToasterService } from './shared/services/toaster.service';
     HttpServer,
     SnapshotService,
     ProgressDialogService,
-    ToasterService
+    ToasterService,
+    ProjectWebServiceHandler,
+    LinksDataSource,
+    NodesDataSource
   ],
   entryComponents: [
     AddServerDialogComponent,

src/app/cartography/shared/datasources/links-datasource.spec.ts

@@ -1,32 +1,32 @@
-import {NodesDataSource} from "./nodes-datasource";
+import {LinksDataSource} from "./links-datasource";
-import {Node} from "../models/node.model";
+import {Link} from "../models/link.model";
 
 
-describe('NodesDataSource', () => {
+describe('LinksDataSource', () => {
-  let dataSource: NodesDataSource;
+  let dataSource: LinksDataSource;
-  let data: Node[];
+  let data: Link[];
 
   beforeEach(() => {
-    dataSource = new NodesDataSource();
+    dataSource = new LinksDataSource();
-    dataSource.connect().subscribe((nodes: Node[]) => {
+    dataSource.connect().subscribe((links: Link[]) => {
-      data = nodes;
+      data = links;
     });
   });
 
-  describe('Node can be updated', () => {
+  describe('Link can be updated', () => {
     beforeEach(() => {
-      const node = new Node();
+      const link = new Link();
-      node.node_id = "1";
+      link.link_id = "1";
-      node.name = "Node 1";
+      link.project_id = "project-1";
-      dataSource.add(node);
+      dataSource.add(link);
 
-      node.name = "Node 2";
+      link.project_id = "project-2";
-      dataSource.update(node);
+      dataSource.update(link);
     });
 
-    it('name should change', () => {
+    it('project_id should change', () => {
-      expect(data[0].node_id).toEqual("1");
+      expect(data[0].link_id).toEqual("1");
-      expect(data[0].name).toEqual("Node 2");
+      expect(data[0].project_id).toEqual("project-2");
     });
   });
 

src/app/cartography/shared/datasources/links-datasource.ts

@@ -1,11 +1,12 @@
-import {Node} from "../models/node.model";
-import {DataSource} from "./datasource";
 import {Injectable} from "@angular/core";
 
+import {DataSource} from "./datasource";
+import {Link} from "../models/link.model";
+
 
 @Injectable()
-export class NodesDataSource extends DataSource<Node> {
+export class LinksDataSource extends DataSource<Link> {
-  protected findIndex(node: Node) {
+  protected findIndex(link: Link) {
-    return this.data.findIndex((n: Node) => n.node_id === node.node_id);
+    return this.data.findIndex((l: Link) => l.link_id === link.link_id);
   }
 }

src/app/cartography/shared/datasources/nodes-datasource.ts

@@ -1,7 +1,9 @@
 import {Node} from "../models/node.model";
 import {DataSource} from "./datasource";
+import {Injectable} from "@angular/core";
 
 
+@Injectable()
 export class NodesDataSource extends DataSource<Node> {
   protected findIndex(node: Node) {
     return this.data.findIndex((n: Node) => n.node_id === node.node_id);

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

@@ -33,6 +33,9 @@ import { NodeSelectInterfaceComponent } from "../shared/node-select-interface/no
 import { Port } from "../shared/models/port";
 import { LinkService } from "../shared/services/link.service";
 import { ToasterService } from '../shared/services/toaster.service';
+import {NodesDataSource} from "../cartography/shared/datasources/nodes-datasource";
+import {LinksDataSource} from "../cartography/shared/datasources/links-datasource";
+import {ProjectWebServiceHandler} from "../shared/handlers/project-web-service-handler";
 
 
 @Component({
@@ -71,7 +74,11 @@ export class ProjectMapComponent implements OnInit {
               private linkService: LinkService,
               private dialog: MatDialog,
               private progressDialogService: ProgressDialogService,
-              private toaster: ToasterService) {
+              private toaster: ToasterService,
+              private projectWebServiceHandler: ProjectWebServiceHandler,
+              protected nodesDataSource: NodesDataSource,
+              protected linksDataSource: LinksDataSource,
+              ) {
   }
 
   ngOnInit() {
@@ -104,6 +111,19 @@ export class ProjectMapComponent implements OnInit {
       this.symbols = symbols;
     });
 
+    this.nodesDataSource.connect().subscribe((nodes: Node[]) => {
+      this.nodes = nodes;
+      if (this.mapChild) {
+        this.mapChild.reload();
+      }
+    });
+
+    this.linksDataSource.connect().subscribe((links: Link[]) => {
+      this.links = links;
+      if (this.mapChild) {
+        this.mapChild.reload();
+      }
+    });
   }
 
   onProjectLoad(project: Project) {
@@ -117,11 +137,11 @@ export class ProjectMapComponent implements OnInit {
         return this.projectService.links(this.server, project.project_id);
       })
       .flatMap((links: Link[]) => {
-        this.links = links;
+        this.linksDataSource.set(links);
         return this.projectService.nodes(this.server, project.project_id);
       })
       .subscribe((nodes: Node[]) => {
-        this.nodes = nodes;
+        this.nodesDataSource.set(nodes);
 
         this.setUpMapCallbacks(project);
         this.setUpWS(project);
@@ -134,60 +154,9 @@ export class ProjectMapComponent implements OnInit {
   setUpWS(project: Project) {
     this.ws = Observable.webSocket(
       this.projectService.notificationsPath(this.server, project.project_id));
-
+    this.projectWebServiceHandler.connect(this.ws);
-    this.ws.subscribe((o: any) => {
-      if (o.action === 'node.updated') {
-        const node: Node = o.event;
-        const index = this.nodes.findIndex((n: Node) => n.node_id === node.node_id);
-        if (index >= 0) {
-          this.nodes[index] = node;
-          this.mapChild.reload(); // temporary invocation
-        }
-      }
-      if (o.action === 'node.created') {
-        const node: Node = o.event;
-        const index = this.nodes.findIndex((n: Node) => n.node_id === node.node_id);
-        if (index === -1) {
-          this.nodes.push(node);
-          this.mapChild.reload(); // temporary invocation
-        }
-      }
-      if (o.action === 'node.deleted') {
-        const node: Node = o.event;
-        const index = this.nodes.findIndex((n: Node) => n.node_id === node.node_id);
-        if (index >= 0) {
-          this.nodes.splice(index, 1);
-          this.mapChild.reload(); // temporary invocation
-        }
-      }
-      if (o.action === 'link.created') {
-        const link: Link = o.event;
-        const index = this.links.findIndex((l: Link) => l.link_id === link.link_id);
-        if (index === -1) {
-          this.links.push(link);
-          this.mapChild.reload(); // temporary invocation
-        }
-      }
-      if (o.action === 'link.updated') {
-        const link: Link = o.event;
-        const index = this.links.findIndex((l: Link) => l.link_id === link.link_id);
-        if (index >= 0) {
-          this.links[index] = link;
-          this.mapChild.reload(); // temporary invocation
-        }
-      }
-      if (o.action === 'link.deleted') {
-        const link: Link = o.event;
-        const index = this.links.findIndex((l: Link) => l.link_id === link.link_id);
-        if (index >= 0) {
-          this.links.splice(index, 1);
-          this.mapChild.reload(); // temporary invocation
-        }
-      }
-    });
   }
 
-
   setUpMapCallbacks(project: Project) {
     this.mapChild.graphLayout.getNodesWidget().setOnContextMenuCallback((event: any, node: Node) => {
       this.nodeContextMenu.open(node, event.clientY, event.clientX);
@@ -200,18 +169,12 @@ export class ProjectMapComponent implements OnInit {
     });
 
     this.mapChild.graphLayout.getNodesWidget().setOnNodeDraggedCallback((event: any, node: Node) => {
-      const index = this.nodes.findIndex((n: Node) => n.node_id === node.node_id);
+      this.nodesDataSource.update(node);
-      if (index >= 0) {
+      this.nodeService
-        this.nodes[index] = node;
+        .updatePosition(this.server, node, node.x, node.y)
-        this.mapChild.reload(); // temporary invocation
+        .subscribe((n: Node) => {
-
+          this.nodesDataSource.update(n);
-        this.nodeService
+        });
-          .updatePosition(this.server, node, node.x, node.y)
-          .subscribe((n: Node) => {
-            this.nodes[index] = node;
-            this.mapChild.reload(); // temporary invocation
-          });
-      }
     });
   }
 
@@ -222,8 +185,7 @@ export class ProjectMapComponent implements OnInit {
         this.projectService
           .nodes(this.server, this.project.project_id)
           .subscribe((nodes: Node[]) => {
-            this.nodes = nodes;
+            this.nodesDataSource.set(nodes);
-            this.mapChild.reload();
         });
       });
   }
@@ -295,8 +257,7 @@ export class ProjectMapComponent implements OnInit {
       .createLink(this.server, source_node, source_port, target_node, target_port)
       .subscribe(() => {
         this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => {
-          this.links = links;
+          this.linksDataSource.set(links);
-          this.mapChild.reload();
         });
       });
   }