portal-lifecyclemgr/src/main/webapp/lifecyclemgr/js/topo/OverlayTopology.js

   1 /* Copyright 2016-2017, Huawei Technologies Co., Ltd.\r
   2  *\r
   3  * Licensed under the Apache License, Version 2.0 (the "License");\r
   4  * you may not use this file except in compliance with the License.\r
   5  * You may obtain a copy of the License at\r
   6  *\r
   7  *    http://www.apache.org/licenses/LICENSE-2.0\r
   8  *\r
   9  * Unless required by applicable law or agreed to in writing, software\r
  10  * distributed under the License is distributed on an "AS IS" BASIS,\r
  11  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  12  * See the License for the specific language governing permissions and\r
  13  * limitations under the License.\r
  14  */\r
  15 \r
  16 /* overlay micro-service API URL. We might use Maven filter feature to replace with the real address when generating the war package. */  \r
  17 const REQUEST_URL_PER_OVERLAY_VPN = "http://localhost:8080/org.openo.sdno.overlayvpnservice/openoapi/sdnooverlayvpn/v1/site2dc-vpn/";\r
  18  \r
  19 /* extract Overlay VPN ID from query string of request URL. */\r
  20 function extractOverlayVPNId()\r
  21 {\r
  22   var parameters = location.search.substring(1).split("&");\r
  23   var temp = parameters[0].split("=");\r
  24   var id = unescape(temp[1]);\r
  25   \r
  26   return id;\r
  27 }\r
  28 \r
  29 /* load overlay vpn instance data from overlay micro-service and display its topology. */\r
  30 function loadOverlayData(vpn_id) {\r
  31   var requestUrl = REQUEST_URL_PER_OVERLAY_VPN.concat(vpn_id);\r
  32   $\r
  33     .ajax({\r
  34       type: "GET",\r
  35       url: requestUrl,\r
  36       contentType: "application/json",\r
  37       success: function (jsonobj) {\r
  38         init_topo(jsonobj);\r
  39       },\r
  40       error: function (xhr, ajaxOptions, thrownError) {\r
  41         alert("Error on getting Overlayvpn data : " + xhr.responseText);\r
  42         \r
  43         //the following lines are used to test w/o overlay micro-service.\r
  44         //var vpn_info = createMockVpnInfo();\r
  45         //init_topo(vpn_info);\r
  46       }\r
  47     });\r
  48 }\r
  49 /* a function that mock overlay micro-service response based on API for testing purpose only.*/\r
  50 function createMockVpnInfo(vpn_id) {\r
  51   var vpnObj = '{"name":"Overlay VPN 1","description":"One VPN connect site to DC.","site":{"cidr":"10.10.0.0/16","thinCpeId":"thincpe-1234-5678","portAndVlan":"port12vlan13","vCPEId":"vcpe-2222-5555"},"vpc":{"name":"VPC 1","site":{"name":"subnet 1","cidr":"172.18.0.0/16","vni":"vni-1234-9999"}},"sfp":{"scfNeId":"scfneid-1234-5678","servicePathHop":[{"hopNumber":"hopNumber-111111","sfiId":"sfiId-333333","sfgId":"sfgId-444444"}]}}';   \r
  52   return JSON.parse(vpnObj);\r
  53 }\r
  54 \r
  55 \r
  56 /* definition of Topology */\r
  57 function Topology(containerId) {\r
  58         /**\r
  59          * IMPORTANT: This only works with the canvas renderer. TBD in the future\r
  60          * will also support the WebGL renderer.\r
  61          */\r
  62         sigma.utils.pkg('sigma.canvas.nodes');\r
  63 \r
  64         this.s = new sigma({\r
  65                 graph : {\r
  66                         nodes : [],\r
  67                         edges : []\r
  68                 },\r
  69                 renderer : {\r
  70                         // IMPORTANT:\r
  71                         // This works only with the canvas renderer, so the\r
  72                         // renderer type set as "canvas" is necessary here.\r
  73                         container : document.getElementById(containerId),\r
  74                         type : 'canvas'\r
  75                 },\r
  76                 settings : {\r
  77                         minNodeSize : 8,\r
  78                         maxNodeSize : 64,\r
  79                         edgeLabelSize : 'proportional'\r
  80                 }\r
  81         });\r
  82   \r
  83         this.addNode = addNode;\r
  84         this.addEdge = addEdge;\r
  85 }\r
  86 function addNode(node) {\r
  87         this.s.graph.addNode(node);\r
  88 }\r
  89 function addEdge(edge) {\r
  90         this.s.graph.addEdge(edge);\r
  91 }\r
  92 \r
  93 \r
  94 /* get details to be displayed when site or vpc node is clicked. Note that more details may be added if it is appropriate. */\r
  95 function getSiteDetails(vpn_info) {\r
  96   var siteCidr = vpn_info.site.cidr;\r
  97   return "Site CIDR: ".concat(siteCidr);\r
  98 }\r
  99 function getVPCDetails(vpn_info) {\r
 100   var vpcCidr = vpn_info.vpc.site.cidr;\r
 101   return "VPC CIDR: ".concat(vpcCidr);;\r
 102 }\r
 103 \r
 104 /** create topology of overlay vpn with instance data. \r
 105  * Note that the layout/topology is hard-coded. In the future, this function may be moved to BRS/MSS \r
 106  * that can understand NSD, calculate layout, fill with instance information, and return the final JSON string expected by sigma for rendering.\r
 107  */\r
 108 function createNodesAndEdgesForOverlayVPN(topology, vpn_info) {\r
 109   var siteNode = new Node("site", "Site", getSiteDetails(vpn_info), 48, "site_icon", 0.1, 0.65);\r
 110         var thinCPENode = new Node("thinCPE", "ThinCPE", "ThinCPE ID: ".concat(vpn_info.site.thinCpeId), 16, "device_icon", 0.1, 0.5);\r
 111   var vCPENode = new Node("vCPE", "vCPE", "vCPE ID: ".concat(vpn_info.site.vCPEId), 16, "device_icon", 0.4, 0.5);\r
 112         var gwNode = new Node("gw", "GW", "GW", 16, "device_icon", 0.8, 0.5);\r
 113 \r
 114   var fwNode = new Node("fw", "FW", "FW", 8, "sfc_device_icon", 0.8, 0.4);\r
 115   var lbNode = new Node("lb", "LB", "LB", 8, "sfc_device_icon", 0.8, 0.3);\r
 116   var vpcNode = new Node("vpc", "VPC", getVPCDetails(vpn_info), 48, "network_icon", 1.0, 0.3);\r
 117   \r
 118   var vfwNode = new Node("vfw", "vFW", "vFW", 8, "sfc_device_icon", 0.32, 0.35);\r
 119   var vlbNode = new Node("vlb", "vLB", "vLB", 8, "sfc_device_icon", 0.48, 0.35);\r
 120   \r
 121   var edge0 = new Edge("e0", "", "site", "thinCPE", 0.5, "black");\r
 122         var edge1 = new Edge("e1", "VxLAN", "thinCPE", "vCPE", 0.5, "blue");\r
 123         var edge2 = new Edge("e2", "IPSec", "vCPE", "gw", 0.5, "green");\r
 124   \r
 125   var edge3 = new Edge("e3", "", "vCPE", "vfw", 0.5, "grey");\r
 126   var edge4 = new Edge("e4", "", "vfw", "vlb", 0.5, "grey");\r
 127   var edge5 = new Edge("e5", "", "vlb", "vCPE", 0.5, "grey");\r
 128   \r
 129   var edge6 = new Edge("e6", "", "gw", "fw", 0.5, "grey");\r
 130   var edge7 = new Edge("e7", "", "fw", "lb", 0.5, "grey");\r
 131   var edge8 = new Edge("e8", "", "lb", "vpc", 0.5, "grey");  \r
 132   \r
 133   topology.addNode(siteNode);\r
 134         topology.addNode(thinCPENode);\r
 135         topology.addNode(vCPENode);\r
 136         topology.addNode(gwNode);\r
 137   topology.addNode(fwNode);\r
 138         topology.addNode(lbNode);\r
 139   topology.addNode(vpcNode);\r
 140   topology.addNode(vfwNode);\r
 141         topology.addNode(vlbNode);\r
 142   \r
 143   topology.addEdge(edge0);\r
 144         topology.addEdge(edge1);\r
 145         topology.addEdge(edge2);\r
 146   topology.addEdge(edge3);\r
 147   topology.addEdge(edge4);\r
 148         topology.addEdge(edge5);\r
 149   topology.addEdge(edge6);\r
 150   topology.addEdge(edge7);\r
 151         topology.addEdge(edge8);\r
 152 }\r
 153 \r
 154 \r
 155 /* create and show the topology based on overlay vpn instance data. */\r
 156 function init_topo(vpn_info) {\r
 157         var topology = new Topology("container");\r
 158   createNodesAndEdgesForOverlayVPN(topology, vpn_info);\r
 159         CustomShapes.init(topology.s);\r
 160         topology.s.refresh();\r
 161   \r
 162   //show details when a node is clicked\r
 163   topology.s.bind('clickNode', function(e) {\r
 164     console.log(e.type, e.data.node.label, e.data.captor); \r
 165     var nodeId = e.data.node.id;\r
 166     topology.s.graph.nodes().forEach(function(n) {\r
 167       if (n.id == nodeId)\r
 168         n.label = n.details;\r
 169     });\r
 170     topology.s.refresh();\r
 171   }); \r
 172   topology.s.bind('clickStage', function(e) {\r
 173     console.log(e.type, e.data.edge, e.data.captor); \r
 174     topology.s.graph.nodes().forEach(function(n) {\r
 175       n.label = n.brief;\r
 176     });\r
 177     topology.s.refresh();    \r
 178   }); \r
 179 }\r
 180 \r
 181 /* code to be run when loading the page */\r
 182 $(document).ready(function() {\r
 183   var vpn_id = extractOverlayVPNId();\r
 184   \r
 185   //load overlay vpn instance data and show its topology.\r
 186   loadOverlayData(vpn_id);\r
 187   \r
 188   //insert overlay VPN id into the title.\r
 189   var titleStr = "Topology of Overlay VPN : ".concat("<b>", vpn_id, "</b>");\r
 190   document.getElementById("title").innerHTML = titleStr;\r
 191 });