<div id="vmstopologygraph" style="margin-top:10px;overflow-x:auto;"></div>
<script>
function createGraph(source, container) {
var jqContainer = $("#" + container);
var nodeCount = vmsporperty.length + 1;
//VMSノードの作成
var vmsNode = document.createElement("div");
vmsNode.id = source.vms.name;
if (vmsporperty.length <= 30) {
vmsNode.className = "vmsgraph";
}
else {
vmsNode.className = "vmsgraphMin";
}
var xPos = jqContainer.get(0).scrollWidth / 2;
var yPos = jqContainer.get(0).scrollHeight / 2;
var nodeLoctions = [];
nodeLoctions.push([xPos, yPos]);
vmsNode.style.top = yPos + "px";
vmsNode.style.left = xPos + "px";
vmsNode.textContent = source.vms.name;
vmsNode.innerText = source.vms.name;
vmsNode.style.textAlign = "center";
jqContainer.get(0).appendChild(vmsNode);
//VM&Network&Strorageノードの作成
for (var i = 0; i < vmsporperty.length; i++) {
var node = document.createElement("div");
node.id = vmsporperty[i].Pool + vmsporperty[i].Name;
while (true) {
var pos = getRandomCoordinates(130);
var xPs = parseFloat(pos[0]) + xPos;
var yPs = parseFloat(pos[1]) + yPos;
if (nodeLoctions.length == 0) {
nodeLoctions.push([xPs, yPs]);
break;
}
if (isCover(xPs, yPs, nodeLoctions)) {
continue;
}
else {
nodeLoctions.push([xPs, yPs]);
break;
}
}
createNodeGraph(vmsporperty[i], node);
node.style.top = yPs + "px";
node.style.left = xPs + "px";
node.textContent = vmsporperty[i].Name;
node.innerText = vmsporperty[i].Name;
node.style.textAlign = "center";
jqContainer.get(0).appendChild(node);
}
}
function createNodeGraph(porperty, node) {
if (porperty.type == "vm") {
if (vmsporperty.length <= 30) {
node.className = "vmgraph";
}
else if (vmsporperty.length > 30 && vmsporperty.length <= 60) {
node.className = "vmgraphMid";
}
else {
node.className = "vmgraphMin";
}
}
else if (porperty.type == "network") {
if (vmsporperty.length <= 30) {
node.className = "networkgraph";
}
else if (vmsporperty.length > 30 && vmsporperty.length <= 60) {
node.className = "networkgraphMid";
}
else{
node.className = "networkgraphMin";
}
}
else if (porperty.type == "storage") {
if (vmsporperty.length <= 30) {
node.className = "lungraph";
}
else if (vmsporperty.length > 30 && vmsporperty.length <= 60) {
node.className = "lungraphMid";
}
else {
node.className = "lungraphMin";
}
}
else if (porperty.type == "vms") {
if (vmsporperty.length <= 30) {
node.className = "vmsgraphMid";
}
else if (vmsporperty.length > 30 && vmsporperty.length <= 60) {
node.className = "lungraphMid";
}
else {
node.className = "lungraphMin";
}
}
}
function isCover(xPs, yPs, nodeLoctions) {
for (var i = 0; i < nodeLoctions.length; i++) {
var distance = Math.sqrt((yPs - nodeLoctions[i][1]) * (yPs - nodeLoctions[i][1]) + (xPs - nodeLoctions[i][0]) * (xPs - nodeLoctions[i][0]));
if (distance <= 50) {
return true;
}
}
return false;
}
function getRandomCoordinates(maxRadius) {
var xyPos = [];
//半径がランダムに生成される
var radius = 80 + Math.round(Math.random() * maxRadius);
//角度がランダムに生成される
//var Angle = Math.round(Math.random() * 360);
// var rand = (3.14 * Math.round(Math.random() * 360)) / 180;
var xPoint = 0;
var yPoint = 0;
while (true) {
xPoint = 400 * Math.cos(Math.random() * 360);
yPoint = 150 * Math.sin(Math.random() * 360);
if ((xPoint > -500 || xPiont < 500) && (yPoint > -150 || yPoint < 150)) {
break;
}
else {
continue;
}
}
xyPos.push(xPoint.toFixed(2));
xyPos.push(yPoint.toFixed(2));
return xyPos;
}
var vm = [];
for (var i = 0; i < 21; i++) {
var vmNode = { type: ‘vm‘, Pool: ‘vmpool2‘, Name: ‘vm‘ + i };
vm.push(vmNode);
}
var network = [];
for (var i = 0; i < 5; i++) {
var networkNode = { type: ‘network‘, Pool: ‘netWorkpool1‘, Name: ‘netWork‘ + i };
network.push(networkNode);
}
var storage = [];
for (var i = 0; i < 5; i++) {
var storageNode = { type: ‘storage‘, Pool: ‘storagepool1‘, Name: ‘storage‘ + i };
storage.push(storageNode);
}
var source = {
vms: { type: ‘vms‘, name: "vms1", serverProfile: "001" },
vm: vm,
netWork: network,
Storage: storage
};
var vmsporperty = source.Storage.concat(source.vm.concat(source.netWork));
createGraph(source, "vmstopologygraph");
jsPlumb.ready(function () {
jsPlumb.importDefaults({
DragOptions: { cursor: ‘pointer‘, zIndex: 2000 },
PaintStyle: { strokeStyle: ‘#666‘ },
EndpointStyle: { width: 0.5, height: 0.5, strokeStyle: ‘#666‘ },
Endpoint: "Rectangle",
Anchors: ["Right"]
});
jsPlumbConnect();
var exampleDropOptions = {
hoverClass: "dropHover",
activeClass: "dragActive"
};
var color1 = "#316b31";
var exampleEndpoint1 = {
endpoint: ["Dot", { radius: 11 }],
paintStyle: { fillStyle: color1 },
isSource: true,
anchor: "Left",
scope: "green dot",
connectorStyle: { strokeStyle: color1, lineWidth: 6 },
connector: ["Straight", { curviness: 63 }],
maxConnections: 10,
isTarget: true,
dropOptions: exampleDropOptions
};
var color2 = "rgba(229,219,61,0.5)";
var exampleEndpoint2 = {
endpoint: "Rectangle",
anchor: "Right",
paintStyle: { fillStyle: color2, opacity: 0.5 },
isSource: true,
scope: ‘yellow dot‘,
connectorStyle: { strokeStyle: color2, lineWidth: 4 },
connector: "Straight",
isTarget: true,
dropOptions: exampleDropOptions,
beforeDetach: function (conn) {
return confirm("Detach connection?");
},
onMaxConnections: function (info) {
alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
}
};
});
function jsPlumbConnect() {
for (var i = 0; i < vmsporperty.length; i++) {
var paintStyleClo;
if (vmsporperty[i].type == "vm") {
paintStyleClo = { lineWidth: 0.5, strokeStyle: ‘rgb(0,0,0)‘ };
}
else if (vmsporperty[i].type == "network") {
paintStyleClo = { lineWidth: 0.5, strokeStyle: ‘rgb(0,250,154)‘ };
}
else if (vmsporperty[i].type == "storage") {
paintStyleClo = { lineWidth: 0.5, strokeStyle: ‘rgb(184,134,11)‘ };
}
jsPlumb.connect({
source: vmsporperty[i].Pool + vmsporperty[i].Name,
target: source.vms.name,
paintStyle: paintStyleClo,
endpoint: ["Dot", { radius: 2 }],
connector: ["Straight", { curviness: 20 }],
endpointStyle: { fillStyle: ‘rgb(243,229,0)‘ },
// anchors: ["RightMiddle", [0, (0.2 + i) / 10, 0, 0]],
anchors: ["AutoDefault", "Center"],
//overlays: [
// ["Label", { label: "VM" + i, location: 0.25 }, "VM" + i]]
});
}
}
</script>