Add nemo ui
[nemo.git] / nemo-ui / src / main / resources / nemo / js / Nemo_Annouce_vis.js
diff --git a/nemo-ui/src/main/resources/nemo/js/Nemo_Annouce_vis.js b/nemo-ui/src/main/resources/nemo/js/Nemo_Annouce_vis.js
new file mode 100644 (file)
index 0000000..dffa4d3
--- /dev/null
@@ -0,0 +1,447 @@
+//////////////////////////////////////////zm//////////////////////////////////////////////////
+       
+    var ne_flag=0;
+       // Node_List = a[Node_Id][x](x = 0,label;x = 1,title;x = 2,P2mpGroupId)
+    var Node_List = new Array();
+       // Edge_List = b[Edge_Id][y](y = 0,connection name;y = 1,from;y = 2,to)
+    var Edge_List = new Array();
+       
+       var node_count=0;
+       var node_X=[];
+
+    var conn_Item=[];
+       
+       var vlandata1;
+
+
+/////////////Main Data//////////////
+       var nodes, edges, graph;
+    var Node_Id = 0;
+    var Edge_Id = 0;   
+       var Edge_Count=0;
+
+       
+       var Node_Sp=[];
+       var Node_Sp_Id=[];
+       var Node_Sc=[];
+       var Node_Sc_Id=[];
+       var policy_count=[];
+       var policy_set=[];
+    var chain_count=[];
+       var chain_set=[];
+       var conn_set=[];
+       
+
+       //flow
+       var flow_count = [];
+       var ext_ip = [];                        
+       
+    // create an array with nodes
+    nodes = new vis.DataSet();
+       
+       
+
+       
+    // create an array with edges
+    edges = new vis.DataSet();
+
+/////////////P2mp Group Data//////////////
+       var Group_Id = 0;
+       var Group_List= new Array();
+       
+    var options = {
+               stabilize: true,
+               //Manipulation:true,
+               //hierarchicalLayout: true,
+               nodes: {
+          // default for all nodes
+                       shape: 'dot', 
+                       fontSize:16     ,
+                       radius:16,
+                       fixed:true
+               },
+               edges: {
+               smooth: false
+                       //length:1
+               },
+        groups: {
+                null: {
+            color: {
+              border: 'white',
+              background: 'white',
+              highlight: {
+                border: 'white',
+                background: '#white'
+              }
+            },
+            fontSize: 0,
+                       radius:0,
+            //fontFace: 'arial',
+            shape: 'dot'
+          },
+          host: {
+            color: {
+              border: 'black',
+              background: '#B0E2FF',
+              highlight: {
+                border: 'black',
+                background: '#4F94CD'
+              }
+            },
+            fontSize: 15,
+                       radius:15,
+            fontFace: 'arial',
+            shape: 'dot'
+          },
+          firewall: {  
+            color: {
+              border: 'black',
+              background: '#FF0000',
+              highlight: {
+                border: 'black',
+                background: '#FF7256'
+              }
+            },
+            fontSize: 15,
+                       radius:15,
+            fontFace: 'arial',
+            shape: 'dot'
+          },
+                 internet: {
+            color: {
+              border: 'black',
+              background: '#7FFF00',
+              highlight: {
+                border: 'black',
+                background: '#6B8E23'
+              }
+            },
+            fontSize: 15,
+                       radius:15,
+            fontFace: 'arial',
+            shape: 'dot'
+          },
+          forwarding: {
+            color: {
+              border: 'black',
+              background: '#878787',
+              highlight: {
+                border: 'black',
+                background: '#4A4A4A'
+              }
+            },
+            fontSize: 15,
+                       radius:15,
+            fontFace: 'arial',
+            shape: 'dot'
+          },
+                  loadbalance: {
+            color: {
+              border: '#black',
+              background: '#FF9933',
+              highlight: {
+                border: 'black',
+                background: '#FDCEBF'
+              }
+            },
+            fontSize: 15,
+                       radius:15,
+            fontFace: 'arial',
+            shape: 'dot'
+          },
+                  group: {
+            color: {
+              border: 'black',
+              background: 'yellow',
+              highlight: {
+                border: 'black',
+                background: '#ECE5D0'
+              }
+            },
+            fontSize: 15,
+                       radius:15,
+            fontFace: 'arial',
+            shape: 'dot'
+          }
+        }
+               
+       };
+       
+       
+
+       // used in Service_Policy
+var options2 = {
+               stabilize: false,
+               //Manipulation:true,
+               //hierarchicalLayout: true,
+               nodes: {
+          // default for all nodes
+                       shape: 'dot', 
+                       fontSize:16     ,
+                       radius:16,
+                       fixed:true
+               },
+               edges: {
+               smooth: false
+                       //length:1
+               },
+        groups: {
+                       null: {
+            color: {
+              border: 'white',
+              background: 'white',
+              highlight: {
+                border: 'white',
+                background: '#white'
+              }
+            },
+            fontSize: 0,
+                       radius:0,
+            //fontFace: 'arial',
+            shape: 'dot'
+          },
+          host: {
+            color: {
+              border: 'black',
+              background: '#B0E2FF',
+              highlight: {
+                border: 'black',
+                background: '#4F94CD'
+              }
+            },
+            fontSize: 15,
+                       radius:15,
+            fontFace: 'arial',
+            shape: 'dot'
+          },
+          firewall: {  
+            color: {
+              border: 'black',
+              background: '#FF0000',
+              highlight: {
+                border: 'black',
+                background: '#FF7256'
+              }
+            },
+            fontSize: 15,
+                       radius:15,
+            fontFace: 'arial',
+            shape: 'dot'
+          },
+                 internet: {
+            color: {
+              border: 'black',
+              background: '#7FFF00',
+              highlight: {
+                border: 'black',
+                background: '#6B8E23'
+              }
+            },
+            fontSize: 15,
+                       radius:15,
+            fontFace: 'arial',
+            shape: 'dot'
+          },
+          forwarding: {
+            color: {
+              border: 'black',
+              background: '#878787',
+              highlight: {
+                border: 'black',
+                background: '#4A4A4A'
+              }
+            },
+            fontSize: 15,
+                       radius:15,
+            fontFace: 'arial',
+            shape: 'dot'
+          },
+                  loadbalance: {
+            color: {
+              border: '#black',
+              background: '#FF9933',
+              highlight: {
+                border: 'black',
+                background: '#FDCEBF'
+              }
+            },
+            fontSize: 15,
+                       radius:15,
+            fontFace: 'arial',
+            shape: 'dot'
+          },
+                  group: {
+            color: {
+              border: 'black',
+              background: 'yellow',
+              highlight: {
+                border: 'black',
+                background: '#ECE5D0'
+              }
+            },
+                       fontSize: 15,
+                       radius:15,
+                 
+        }
+               },
+       physics: {
+      repulsion: {
+        centralGravity: 0,
+        springLength: 100,//弹簧长度
+        springConstant: 0,//弹簧常数
+        nodeDistance: 0,
+        damping: 0 //阻尼,减幅,衰减
+      }}
+               
+       };
+       
+
+    var DOMURL = window.URL || window.webkitURL || window;     
+       var nemoModule = [
+                        /* no host in mode */
+                        '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" opacity="1">' +
+                        '<circle cx="100" cy="100" r="95" stroke-width="2" stroke="#000000" fill="#FFFFFF" opacity="1"/>'+
+                        '</svg>',
+                        /* 1 host in mode */
+                                               '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="235" opacity="1">' +
+                                               '<circle cx="130" cy="140" r="80" stroke-width="5" stroke="#000000" fill="#FFFFFF" opacity="1"/>\
+                                               <circle cx="130" cy="140" r="40"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
+                                               <foreignObject x="20" y="100" width="40%" height="20%">\
+                                               <div xmlns="http://www.w3.org/1999/xhtml">\
+                                               <span style="padding-left:65px; padding-top:100px; color:black; font-size:25px;">\
+                                               {{host1}}</span>\
+                                               </div>\
+                                               </foreignObject>\
+                                               </svg>',
+                        /* 2 hosts in mode */
+                        '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="235" opacity="1">' +
+                                               '<circle cx="150" cy="150" r="80" stroke-width="5" stroke="#000000" fill="#FFFFFF" opacity="1"/>\
+                                               <circle cx="115.5" cy="150" r="35"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
+                                               <foreignObject x="20" y="100" width="50%" height="20%">\
+                                               <div xmlns="http://www.w3.org/1999/xhtml">\
+                                               <span style="padding-left:65px; padding-top:100px; color:black; font-size:25px;">\
+                                               {{host1}}</span>\
+                                               </div>\
+                                               </foreignObject>\
+                                               <circle cx="155" cy="150" r="35"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
+                                               <foreignObject x="140" y="140" width="40%" height="20%">\
+                                               <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">\
+                                               <span style="padding-left:15px; color:black; font-size:25px;">\
+                                               {{host2}}</span>\
+                                               </div>\
+                                               </foreignObject>\
+                                               </svg>',
+                        /* 3 hosts in mode */
+                        '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="235" opacity="1">\
+                                               <circle cx="150" cy="150" r="80" stroke-width="5" stroke="#153345" fill="#FFFFFF" opacity="1"/>\
+                                               <circle cx="150" cy="110" r="32"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
+                                               <foreignObject x="85" y="90" width="40%" height="20%">\
+                                               <div xmlns="http://www.w3.org/1999/xhtml" >\
+                                               <span style="padding-left:50px; color:black; font-size:25px;">\
+                                               {{host1}}</span>\
+                                               </div>\
+                                               </foreignObject>\
+                                               <circle cx="110" cy="170" r="32"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
+                                               <foreignObject x="45" y="160" width="40%" height="20%">\
+                                               <div xmlns="http://www.w3.org/1999/xhtml">\
+                                               <span style="padding-left:50px; color:black; font-size:25px;">\
+                                               {{host2}}</span>\
+                                               </div>\
+                                               </foreignObject>\
+                                               <circle cx="190" cy="170" r="32"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
+                                               <foreignObject x="130" y="150" width="40%" height="20%">\
+                                               <div xmlns="http://www.w3.org/1999/xhtml">\
+                                               <span style="padding-left:50px; color:black; font-size:25px;">\            {{host3}}</span>\
+                                               </div>\
+                                               </foreignObject>\
+                                               </svg>' ,
+                        /* 4 hosts in mode */
+                        '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="235" opacity="1">' +
+                                               '<circle cx="130" cy="140" r="80" stroke-width="5" stroke="#000000" fill="#FFFFFF" opacity="1"/>\
+                                               <circle cx="100" cy="110" r="30"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
+                                               <foreignObject x="20" y="100" width="40%" height="20%">\
+                                               <div xmlns="http://www.w3.org/1999/xhtml">\
+                                               <span style="padding-left:65px; padding-top:100px; color:black; font-size:25px;">\
+                                               {{host1}}</span>\
+                                               </div>\
+                                               </foreignObject>\
+                                               <circle cx="100" cy="170" r="30"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
+                                               <foreignObject x="20" y="140" width="40%" height="20%">\
+                                               <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">\
+                                               <span style="padding-left:15px; color:black; font-size:25px;">\
+                                               {{host3}}</span>\
+                                               </div>\
+                                               </foreignObject>\
+                                               <circle cx="160" cy="110" r="30"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
+                                               <foreignObject x="150" y="80" width="40%" height="20%">\
+                                               <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">\
+                                               <span style="padding-left:15px; color:black; font-size:25px;">\
+                                               {{host2}}</span>\
+                                               </div>\
+                                               </foreignObject>\
+                                               <circle cx="160" cy="170" r="30"  stroke-width="2" stroke="red" fill="#FFFFFF"></circle>\
+                                               <foreignObject x="150" y="140" width="40%" height="20%">\
+                                               <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">\
+                                               <span style="padding-left:15px; color:black; font-size:25px;">\
+                                               {{host4}}</span>\
+                                               </div>\
+                                               </foreignObject>\
+                                               </svg>',
+                        /* more than 4 hosts in mode */
+                        '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="235" opacity="1">' +
+                        '<circle cx="100" cy="100" r="95" stroke-width="2" stroke="#000000" fill="#FFFFFF" opacity="1"/>'+
+                        '<rect x="40" y="38" width="30%" height="30%" stroke-width="2" stroke="#000000" fill="#FFFFFF"></rect>' +
+                        '<foreignObject x="15" y="55" width="40%" height="20%">' +
+                        '<div xmlns="http://www.w3.org/1999/xhtml" >' +
+                        '<span style="padding-left:40px;color:black; font-size:20px;">' +
+                        '{{host1}}</span>' +
+                        '</div>' +
+                        '</foreignObject>' +
+                        '<rect x="40" y="108" width="30%" height="30%" stroke-width="2" stroke="#000000" fill="#FFFFFF"></rect>' +
+                        '<foreignObject x="15" y="155" width="40%" height="20%">' +
+                        '<div xmlns="http://www.w3.org/1999/xhtml">' +
+                        '<span style="padding-left:40px;color:black; font-size:20px;">' +
+                        '{{host2}}</span>' +
+                        '</div>' +
+                        '</foreignObject>' +
+                        '<rect x="108" y="38" width="30%" height="30%" stroke-width="2" stroke="#000000" fill="#FFFFFF"></rect>' +
+                        '<foreignObject x="105" y="55" width="40%" height="20%">' +
+                        '<div xmlns="http://www.w3.org/1999/xhtml">' +
+                        '<span style="padding-left:20px; color:black; font-size:20px;">' +
+                        '{{host3}}</span>' +
+                        '</div>' +
+                        '</foreignObject>' +
+                        '<rect x="108" y="108" width="30%" height="30%" stroke-width="0" stroke="#000000" fill="#FFFFFF"></rect>' +
+                        '<foreignObject x="105" y="155" width="40%" height="20%">' +
+                        '<div xmlns="http://www.w3.org/1999/xhtml">' +
+                        '<span style="padding-left:20px; color:black; font-size:20px;">' +
+                        '...</span>' +
+                        '</div>' +
+                        '</foreignObject>' +
+                        '</svg>'];
+//function
+function draw(node_count,node_mash_list) {
+
+}
+       function calculatePos(n){
+                       var res = new Array();
+                       if(n <= 0)return res;
+                       var start;
+                       var offset = 2 * Math.PI / n;
+                       if(n % 2 == 1){
+                               start = Math.PI / 2;
+                       }else{
+                               start = Math.PI / 2 + Math.PI / n;
+                       }
+                       res.push(start);
+                       for(var i = 1; i < n; i++){
+                               start += offset;
+                               res.push(start);
+                       }
+                       return res;
+               }
+
+                                               
+                                               
+                                               
+//////////////////////////////////////////zm//////////////////////////////////////////////////