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

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