nemo-ui/src/main/resources/nemo/js/Nemo_Annouce_vis.js

   1    var ne_flag=0;
   2         // Node_List = a[Node_Id][x](x = 0,label;x = 1,title;x = 2,P2mpGroupId)
   3     var Node_List = new Array();
   4         // Edge_List = b[Edge_Id][y](y = 0,connection name;y = 1,from;y = 2,to)
   5     var Edge_List = new Array();
   6
   7         var node_count=0;
   8         var node_X=[];
   9
  10     var conn_Item=[];
  11
  12         var vlandata1;
  13
  14
  15 /////////////Main Data//////////////
  16         var nodes, edges, graph;
  17   var Node_Id = 0;
  18   var Edge_Id = 0;
  19         var Edge_Count=0;
  20
  21
  22         var Node_Sp=[];
  23         var Node_Sp_Id=[];
  24         var Node_Sc=[];
  25         var Node_Sc_Id=[];
  26         var policy_count=[];
  27         var policy_set=[];
  28     var chain_count=[];
  29         var chain_set=[];
  30         var conn_set=[];
  31
  32
  33         //flow
  34         var flow_count = [];
  35         var ext_ip = [];
  36
  37     // create an array with nodes
  38     nodes = new vis.DataSet();
  39
  40     // create an array with edges
  41     edges = new vis.DataSet();
  42
  43 /////////////P2mp Group Data//////////////
  44         var Group_Id = 0;
  45         var Group_List= new Array();
  46
  47     var options = {
  48                 stabilize: true,
  49                 //Manipulation:true,
  50                 //hierarchicalLayout: true,
  51                 nodes: {
  52           // default for all nodes
  53                         shape: 'dot',
  54                         fontSize:16     ,
  55                         radius:16,
  56                         fixed:true
  57                 },
  58                 edges: {
  59                 smooth: false
  60                         //length:1
  61                 },
  62         groups: {
  63                     null: {
  64             color: {
  65               border: 'white',
  66               background: 'white',
  67               highlight: {
  68                 border: 'white',
  69                 background: '#white'
  70               }
  71             },
  72             fontSize: 0,
  73                         radius:0,
  74             //fontFace: 'arial',
  75             shape: 'dot'
  76           },
  77           host: {
  78             color: {
  79               border: 'black',
  80               background: '#B0E2FF',
  81               highlight: {
  82                 border: 'black',
  83                 background: '#4F94CD'
  84               }
  85             },
  86             fontSize: 15,
  87                         radius:15,
  88             fontFace: 'arial',
  89             shape: 'dot'
  90           },
  91           firewall: {
  92             color: {
  93               border: 'black',
  94               background: '#FF0000',
  95               highlight: {
  96                 border: 'black',
  97                 background: '#FF7256'
  98               }
  99             },
 100             fontSize: 15,
 101                         radius:15,
 102             fontFace: 'arial',
 103             shape: 'dot'
 104           },
 105                   internet: {
 106             color: {
 107               border: 'black',
 108               background: '#7FFF00',
 109               highlight: {
 110                 border: 'black',
 111                 background: '#6B8E23'
 112               }
 113             },
 114             fontSize: 15,
 115                         radius:15,
 116             fontFace: 'arial',
 117             shape: 'dot'
 118           },
 119           forwarding: {
 120             color: {
 121               border: 'black',
 122               background: '#878787',
 123               highlight: {
 124                 border: 'black',
 125                 background: '#4A4A4A'
 126               }
 127             },
 128             fontSize: 15,
 129                         radius:15,
 130             fontFace: 'arial',
 131             shape: 'dot'
 132           },
 133                    loadbalance: {
 134             color: {
 135               border: '#black',
 136               background: '#FF9933',
 137               highlight: {
 138                 border: 'black',
 139                 background: '#FDCEBF'
 140               }
 141             },
 142             fontSize: 15,
 143                         radius:15,
 144             fontFace: 'arial',
 145             shape: 'dot'
 146           },
 147                    group: {
 148             color: {
 149               border: 'black',
 150               background: 'yellow',
 151               highlight: {
 152                 border: 'black',
 153                 background: '#ECE5D0'
 154               }
 155             },
 156             fontSize: 15,
 157                         radius:15,
 158             fontFace: 'arial',
 159             shape: 'dot'
 160           }
 161         }
 162
 163         };
 164
 165
 166
 167         // used in Service_Policy
 168 var options2 = {
 169                 stabilize: false,
 170                 //Manipulation:true,
 171                 //hierarchicalLayout: true,
 172                 nodes: {
 173           // default for all nodes
 174                         shape: 'dot',
 175                         fontSize:16     ,
 176                         radius:16,
 177                         fixed:true
 178                 },
 179                 edges: {
 180                 smooth: false
 181                         //length:1
 182                 },
 183         groups: {
 184                         null: {
 185             color: {
 186               border: 'white',
 187               background: 'white',
 188               highlight: {
 189                 border: 'white',
 190                 background: '#white'
 191               }
 192             },
 193             fontSize: 0,
 194                         radius:0,
 195             //fontFace: 'arial',
 196             shape: 'dot'
 197           },
 198           host: {
 199             color: {
 200               border: 'black',
 201               background: '#B0E2FF',
 202               highlight: {
 203                 border: 'black',
 204                 background: '#4F94CD'
 205               }
 206             },
 207             fontSize: 15,
 208                         radius:15,
 209             fontFace: 'arial',
 210             shape: 'dot'
 211           },
 212           firewall: {
 213             color: {
 214               border: 'black',
 215               background: '#FF0000',
 216               highlight: {
 217                 border: 'black',
 218                 background: '#FF7256'
 219               }
 220             },
 221             fontSize: 15,
 222                         radius:15,
 223             fontFace: 'arial',
 224             shape: 'dot'
 225           },
 226                   internet: {
 227             color: {
 228               border: 'black',
 229               background: '#7FFF00',
 230               highlight: {
 231                 border: 'black',
 232                 background: '#6B8E23'
 233               }
 234             },
 235             fontSize: 15,
 236                         radius:15,
 237             fontFace: 'arial',
 238             shape: 'dot'
 239           },
 240           forwarding: {
 241             color: {
 242               border: 'black',
 243               background: '#878787',
 244               highlight: {
 245                 border: 'black',
 246                 background: '#4A4A4A'
 247               }
 248             },
 249             fontSize: 15,
 250                         radius:15,
 251             fontFace: 'arial',
 252             shape: 'dot'
 253           },
 254                    loadbalance: {
 255             color: {
 256               border: '#black',
 257               background: '#FF9933',
 258               highlight: {
 259                 border: 'black',
 260                 background: '#FDCEBF'
 261               }
 262             },
 263             fontSize: 15,
 264                         radius:15,
 265             fontFace: 'arial',
 266             shape: 'dot'
 267           },
 268                    group: {
 269             color: {
 270               border: 'black',
 271               background: 'yellow',
 272               highlight: {
 273                 border: 'black',
 274                 background: '#ECE5D0'
 275               }
 276             },
 277                         fontSize: 15,
 278                         radius:15,
 279
 280         }
 281                 },
 282         physics: {
 283       repulsion: {
 284         centralGravity: 0,
 285         springLength: 100,//弹簧长度
 286         springConstant: 0,//弹簧常数
 287         nodeDistance: 0,
 288         damping: 0 //阻尼，减幅，衰减
 289       }}
 290
 291         };
 292
 293
 294     var DOMURL = window.URL || window.webkitURL || window;
 295         var nemoModule = [
 296                         /* no host in mode */
 297                         '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" opacity="1">' +
 298                         '<circle cx="100" cy="100" r="95" stroke-width="2" stroke="#000000" fill="#FFFFFF" opacity="1"/>'+
 299                         '</svg>',
 300                         /* 1 host in mode */
 301                                                 '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="235" opacity="1">' +
 302                                                 '<circle cx="130" cy="140" r="80" stroke-width="5" stroke="#000000" fill="#FFFFFF" opacity="1"/>\
 303                                                 <circle cx="130" cy="140" r="40"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
 304                                                 <foreignObject x="20" y="100" width="40%" height="20%">\
 305                                                 <div xmlns="http://www.w3.org/1999/xhtml">\
 306                                                 <span style="padding-left:65px; padding-top:100px; color:black; font-size:25px;">\
 307                                                 {{host1}}</span>\
 308                                                 </div>\
 309                                                 </foreignObject>\
 310                                                 </svg>',
 311                         /* 2 hosts in mode */
 312                         '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="235" opacity="1">' +
 313                                                 '<circle cx="150" cy="150" r="80" stroke-width="5" stroke="#000000" fill="#FFFFFF" opacity="1"/>\
 314                                                 <circle cx="115.5" cy="150" r="35"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
 315                                                 <foreignObject x="20" y="100" width="50%" height="20%">\
 316                                                 <div xmlns="http://www.w3.org/1999/xhtml">\
 317                                                 <span style="padding-left:65px; padding-top:100px; color:black; font-size:25px;">\
 318                                                 {{host1}}</span>\
 319                                                 </div>\
 320                                                 </foreignObject>\
 321                                                 <circle cx="155" cy="150" r="35"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
 322                                                 <foreignObject x="140" y="140" width="40%" height="20%">\
 323                                                 <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">\
 324                                                 <span style="padding-left:15px; color:black; font-size:25px;">\
 325                                                 {{host2}}</span>\
 326                                                 </div>\
 327                                                 </foreignObject>\
 328                                                 </svg>',
 329                         /* 3 hosts in mode */
 330                         '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="235" opacity="1">\
 331                                                 <circle cx="150" cy="150" r="80" stroke-width="5" stroke="#153345" fill="#FFFFFF" opacity="1"/>\
 332                                                 <circle cx="150" cy="110" r="32"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
 333                                                 <foreignObject x="85" y="90" width="40%" height="20%">\
 334                                                 <div xmlns="http://www.w3.org/1999/xhtml" >\
 335                                                 <span style="padding-left:50px; color:black; font-size:25px;">\
 336                                                 {{host1}}</span>\
 337                                                 </div>\
 338                                                 </foreignObject>\
 339                                                 <circle cx="110" cy="170" r="32"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
 340                                                 <foreignObject x="45" y="160" width="40%" height="20%">\
 341                                                 <div xmlns="http://www.w3.org/1999/xhtml">\
 342                                                 <span style="padding-left:50px; color:black; font-size:25px;">\
 343                                                 {{host2}}</span>\
 344                                                 </div>\
 345                                                 </foreignObject>\
 346                                                 <circle cx="190" cy="170" r="32"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
 347                                                 <foreignObject x="130" y="150" width="40%" height="20%">\
 348                                                 <div xmlns="http://www.w3.org/1999/xhtml">\
 349                                                 <span style="padding-left:50px; color:black; font-size:25px;">\            {{host3}}</span>\
 350                                                 </div>\
 351                                                 </foreignObject>\
 352                                                 </svg>' ,
 353                         /* 4 hosts in mode */
 354                         '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="235" opacity="1">' +
 355                                                 '<circle cx="130" cy="140" r="80" stroke-width="5" stroke="#000000" fill="#FFFFFF" opacity="1"/>\
 356                                                 <circle cx="100" cy="110" r="30"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
 357                                                 <foreignObject x="20" y="100" width="40%" height="20%">\
 358                                                 <div xmlns="http://www.w3.org/1999/xhtml">\
 359                                                 <span style="padding-left:65px; padding-top:100px; color:black; font-size:25px;">\
 360                                                 {{host1}}</span>\
 361                                                 </div>\
 362                                                 </foreignObject>\
 363                                                 <circle cx="100" cy="170" r="30"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
 364                                                 <foreignObject x="20" y="140" width="40%" height="20%">\
 365                                                 <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">\
 366                                                 <span style="padding-left:15px; color:black; font-size:25px;">\
 367                                                 {{host3}}</span>\
 368                                                 </div>\
 369                                                 </foreignObject>\
 370                                                 <circle cx="160" cy="110" r="30"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
 371                                                 <foreignObject x="150" y="80" width="40%" height="20%">\
 372                                                 <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">\
 373                                                 <span style="padding-left:15px; color:black; font-size:25px;">\
 374                                                 {{host2}}</span>\
 375                                                 </div>\
 376                                                 </foreignObject>\
 377                                                 <circle cx="160" cy="170" r="30"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
 378                                                 <foreignObject x="150" y="140" width="40%" height="20%">\
 379                                                 <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">\
 380                                                 <span style="padding-left:15px; color:black; font-size:25px;">\
 381                                                 {{host4}}</span>\
 382                                                 </div>\
 383                                                 </foreignObject>\
 384                                                 </svg>',
 385                         /* more than 4 hosts in mode */
 386                         '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="235" opacity="1">' +
 387                         '<circle cx="100" cy="100" r="95" stroke-width="2" stroke="#000000" fill="#FFFFFF" opacity="1"/>'+
 388                         '<rect x="40" y="38" width="30%" height="30%" stroke-width="2" stroke="#000000" fill="#FFFFFF"></rect>' +
 389                         '<foreignObject x="15" y="55" width="40%" height="20%">' +
 390                         '<div xmlns="http://www.w3.org/1999/xhtml" >' +
 391                         '<span style="padding-left:40px;color:black; font-size:20px;">' +
 392                         '{{host1}}</span>' +
 393                         '</div>' +
 394                         '</foreignObject>' +
 395                         '<rect x="40" y="108" width="30%" height="30%" stroke-width="2" stroke="#000000" fill="#FFFFFF"></rect>' +
 396                         '<foreignObject x="15" y="155" width="40%" height="20%">' +
 397                         '<div xmlns="http://www.w3.org/1999/xhtml">' +
 398                         '<span style="padding-left:40px;color:black; font-size:20px;">' +
 399                         '{{host2}}</span>' +
 400                         '</div>' +
 401                         '</foreignObject>' +
 402                         '<rect x="108" y="38" width="30%" height="30%" stroke-width="2" stroke="#000000" fill="#FFFFFF"></rect>' +
 403                         '<foreignObject x="105" y="55" width="40%" height="20%">' +
 404                         '<div xmlns="http://www.w3.org/1999/xhtml">' +
 405                         '<span style="padding-left:20px; color:black; font-size:20px;">' +
 406                         '{{host3}}</span>' +
 407                         '</div>' +
 408                         '</foreignObject>' +
 409                         '<rect x="108" y="108" width="30%" height="30%" stroke-width="0" stroke="#000000" fill="#FFFFFF"></rect>' +
 410                         '<foreignObject x="105" y="155" width="40%" height="20%">' +
 411                         '<div xmlns="http://www.w3.org/1999/xhtml">' +
 412                         '<span style="padding-left:20px; color:black; font-size:20px;">' +
 413                         '...</span>' +
 414                         '</div>' +
 415                         '</foreignObject>' +
 416                         '</svg>'];
 417 //function
 418         function calculatePos(n){
 419                         var res = new Array();
 420                         if(n <= 0)return res;
 421                         var start;
 422                         var offset = 2 * Math.PI / n;
 423                         if(n % 2 == 1){
 424                                 start = Math.PI / 2;
 425                         }else{
 426                                 start = Math.PI / 2 + Math.PI / n;
 427                         }
 428                         res.push(start);
 429                         for(var i = 1; i < n; i++){
 430                                 start += offset;
 431                                 res.push(start);
 432                         }
 433                         return res;
 434                 }
 435
 436
 437
 438