1 files changed, 330 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts
new file mode 100644
index 00000000..5e003ff3
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts
@@ -0,0 +1,330 @@
+import { Component, OnInit } from '@angular/core';
+import { Network, DataSet, Node, Edge, IdType } from 'vis';
+
+@Component({
+  selector: 'app-monitor-service',
+  templateUrl: './monitor-service.component.html',
+  styleUrls: ['./monitor-service.component.less']
+})
+export class MonitorServiceComponent implements OnInit {
+
+  selectedSubscriptionType:string = "SOTN";
+  serviceSubscriptionList:any = [{
+    serviceType:"SOTN"
+  }];
+  selectedServiceInstance:string = "SiteService-5011";
+  serviceInstanceList:any = [
+    {
+      serviceInstance: "SiteService-5011",
+      serviceInstancename: "SiteService-5011"
+    },
+    {
+      serviceInstance: "ISAAC-IS0333",
+      serviceInstancename: "ISAAC-IS0333"
+    }
+  ];
+  selectedTopology:string = 'Network Topology';
+  serviceTopologyList:any = [
+    {
+      topologyType:"Network Topology"
+    },
+    {
+      topologyType:"Resource Topology"
+    }
+  ];
+
+  title = 'Network';
+    public nodes: Node;
+    public edges: Edge;
+    public network: Network;
+    public serviceList: any;
+    public tempNode: any;
+    public tempEdge: any;
+    public selectedNode: any;
+    public selectedNodeIds: any;
+    public x: any;
+    public abc = [];
+    container: any;
+    networkOptions = {
+      layout: { 
+          randomSeed: 15 
+      },
+      nodes: {
+          borderWidth: 13,
+          size: 30,
+          color: {
+              border: '#54bd55',
+              background: '#666666'
+          },
+          font: { color: '#eeeeee' }
+      },
+      edges: {
+          color: 'lightgray'
+      },
+
+      interaction: {
+          tooltipDelay: 200,
+          hideEdgesOnDrag: true,
+          navigationButtons: false,
+          keyboard: true,
+          hover: true
+      },
+    };
+
+    node1:any = {
+      "nodes": [
+        {
+          "id": "1",
+          "shape": "circularImage",
+          "image": "./assets/images/edge.png",
+          "label": "Node",
+          "color": "Green",
+          "dataNode": {
+            "ethtSvcName": "sotn-021-VS-monitored",
+            "colorAware": "true",
+            "cbs": "100",
+            "couplingFlag": "true",
+            "ebs": "evpl",
+            "cir": "200000",
+            "eir": "0"
+          }
+        },
+        {
+          "id": "2",
+          "shape": "circularImage",
+          "image": "./assets/images/logicallink.png",
+          "label": "Logical Link",
+          "color": "Green",
+          "dataNode": {
+            "ethtSvcName": "sotn-021-VS-monitored",
+            "colorAware": "true",
+            "cbs": "100",
+            "couplingFlag": "true",
+            "ebs": "evpl",
+            "cir": "200000",
+            "eir": "0"
+          }
+        },
+        {
+          "id": "3",
+          "shape": "circularImage",
+          "image": "./assets/images/edge.png",
+          "label": "Node",
+          "color": "Green",
+          "dataNode": {
+            "zipcode": "100095",
+            "siteName": "hubtravel",
+            "description": "desc",
+            "location": "laptop-5",
+            "cvlan": "100"
+          }
+        }
+      ],
+      "edges": [
+        {
+          "from": "1",
+          "to": "2"
+        },
+        {
+          "from": "2",
+          "to": "3"
+        }
+      ]
+    }
+
+  node2:any = {
+    "nodes": [
+      {
+        "id": "1",
+        "shape": "circularImage",
+        "image": "./assets/images/tpoint.png",
+        "label": "Termination Point",
+        "color": "Green",
+        "dataNode": {}
+      },
+      {
+        "id": "2",
+        "shape": "circularImage",
+        "image": "./assets/images/edge.png",
+        "label": "Node",
+        "color": "Green",
+        "dataNode": {
+          "ethtSvcName": "sotn-021-VS-monitored",
+          "colorAware": "true",
+          "cbs": "100",
+          "couplingFlag": "true",
+          "ebs": "evpl",
+          "cir": "200000",
+          "eir": "0"
+        }
+      },
+      {
+        "id": "3",
+        "shape": "circularImage",
+        "image": "./assets/images/logicallink.png",
+        "label": "Logical Link",
+        "color": "Green",
+        "dataNode": {
+          "ethtSvcName": "sotn-021-VS-monitored",
+          "colorAware": "true",
+          "cbs": "100",
+          "couplingFlag": "true",
+          "ebs": "evpl",
+          "cir": "200000",
+          "eir": "0"
+        }
+      },
+      {
+        "id": "4",
+        "shape": "circularImage",
+        "image": "./assets/images/edge.png",
+        "label": "Node",
+        "color": "Green",
+        "dataNode": {
+          "zipcode": "100095",
+          "siteName": "hubtravel",
+          "description": "desc",
+          "location": "laptop-5",
+          "cvlan": "100"
+        }
+      },
+      {
+        "id": "5",
+        "shape": "circularImage",
+        "image": "./assets/images/tpoint.png",
+        "label": "Termination Point",
+        "color": "Green",
+        "dataNode": {
+          "accessltpid": "155",
+          "siteName": "hubtravel",
+          "description": "desc",
+          "accessnodeid": "10.10.10.10",
+          "cvlan": "100"
+        }
+      }
+    ],
+    "edges": [
+      {
+        "from": "1",
+        "to": "2"
+      },
+      {
+        "from": "2",
+        "to": "3"
+      },
+      {
+        "from": "3",
+        "to": "4"
+      },
+      {
+        "from": "4",
+        "to": "5"
+      }
+    ]
+  }
+
+  constructor() { }
+
+  intervalData: any;
+  returnResponse: boolean = true;
+
+  //Get SubscriptionType
+  getSubscribeTypes() {
+      this.getTopologyInfo('Network Topology');
+  }
+
+  getTopologyInfo (topo) {
+    this.selectedTopology = topo;
+    this.getData();
+    this.refreshData();
+  }
+
+  //Get subscription instanceID by calling With Subscription Type
+  getServiceInstanceList(subscriptionType) {
+          this.getSelectedsubscriptionInfo(subscriptionType);
+  }
+  ngOnInit() {
+      this.container = document.getElementById('mynetwork');
+      this.getSubscribeTypes();
+  }
+
+  refreshData() {
+
+      var data1 = {
+          nodes: this.serviceList.nodes,
+          edges: this.serviceList.edges
+      };
+
+      var network = new Network(this.container, data1, this.networkOptions);
+
+
+      network.on('select', function (selection) {
+          this.selectedNodeIds = selection.nodes[0]; // array of selected node's ids
+          var filteredNode = data1.nodes.filter(item => (
+              item.id == this.selectedNodeIds
+          ));
+          var t1 = '<div class="tblDiv">\
+          <nz-form-label class="lblCls">Node Information</nz-form-label>\
+          <table class="table table-striped table-bordered">\
+              <thead>\
+                  <tr>\
+                      <th class="clr-primary padding-2p">Specification</th>\
+                      <th class="clr-primary padding-2p">Value</th>\
+                  </tr>\
+              </thead>\
+              <tbody>\
+          ';
+          Object.entries(filteredNode[0].dataNode).forEach(entry => {                
+              if( entry[1] !== "null")
+              {
+                  t1 += '<tr class="popup-table-row">\
+                      <td class="popup-table-header clr-primary padding-2p">'+ entry[0] + ':</td>\
+                      <td class="popup-table-data  clr-primary padding-2p">'+ entry[1] + '</td>\
+                  </tr>\
+                  ';
+              }    
+          });
+          t1 += '</tbody>\
+          </table>\
+          </div>\
+          ';
+          document.getElementById('nodeDetails').innerHTML = t1;
+      });
+      network.on("afterDrawing", function (this) {
+          network.fit();
+      });
+  }
+
+  getData ()
+  {
+    if (this.selectedTopology == 'Network Topology') {
+      this.serviceList = this.node1;
+    } else {
+      this.serviceList = this.node2;
+    }
+  }
+  // Getting sitedata Based On Type and ID
+  getSelectedsubscriptionInfo(s) {       
+      this.getData();
+      this.refreshData();
+      if (this.intervalData) {
+          clearInterval(this.intervalData);
+      }        
+  }
+
+  ngOnDestroy() {
+      console.log('clear interval');
+      if (this.intervalData) {
+          clearInterval(this.intervalData);
+      }
+
+  }
+
+  ngOnDelete() {
+      console.log('clear interval');
+      if (this.intervalData) {
+          clearInterval(this.intervalData);
+      }
+  }
+
+}