203 lines
No EOL
6.1 KiB
HTML
203 lines
No EOL
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="../vendors/jointjs/css/joint.min.css" />
|
|
<script src="../vendors/jointjs/dependencies/jquery.min.js"></script>
|
|
<script src="../vendors/jointjs/dependencies//lodash.min.js"></script>
|
|
<script src="../vendors/jointjs/dependencies/backbone-min.js"></script>
|
|
<script src="../vendors/jointjs/js/joint.min.js"></script>
|
|
<script src="../vendors/jointjs/lib/dagre.min.js"></script>
|
|
<script src="../vendors/jointjs/lib/graphlib.min.js"></script>
|
|
<script src="../vendors/jointjs/plugins/joint.layout.DirectedGraph.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="../css/graph.css" />
|
|
</head>
|
|
<body>
|
|
<div id="graphHolder"></div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
//adjacencyList, hard-encoded now but will be the result of a request to the server, format may change
|
|
var vmList = {
|
|
'vms': [
|
|
'VM 1',
|
|
'VM 2',
|
|
'VM 3',
|
|
'VM 4',
|
|
'VM 5',
|
|
'VM 6',
|
|
'VM 7',
|
|
'VM 8',
|
|
'VM 9',
|
|
'VM 10'
|
|
],
|
|
'links': [
|
|
['VM 1', 'VM 2', 'I1', 'I2'],
|
|
['VM 2', 'VM 3', 'I3', 'I4'],
|
|
['VM 1', 'VM 3', 'I5', 'I6'],
|
|
['VM 2', 'VM 4', 'I5', 'I6'],
|
|
['VM 4', 'VM 5', 'I5', 'I6'],
|
|
['VM 4', 'VM 6', 'I5', 'I6'],
|
|
['VM 4', 'VM 1', 'I5', 'I6'],
|
|
['VM 7', 'VM 4', 'I5', 'I6'],
|
|
['VM 7', 'VM 3', 'I5', 'I6'],
|
|
['VM 6', 'VM 8', 'I5', 'I6'],
|
|
['VM 3', 'VM 9', 'I5', 'I6'],
|
|
['VM 3', 'VM 10', 'I5', 'I6']
|
|
]
|
|
};
|
|
|
|
|
|
//Custom element for inserting html
|
|
joint.shapes.html = {};
|
|
joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
|
|
defaults: joint.util.deepSupplement({
|
|
type: 'html.Element',
|
|
attrs: {
|
|
rect: { stroke: 'none', 'fill-opacity': 0 }
|
|
}
|
|
}, joint.shapes.basic.Rect.prototype.defaults)
|
|
});
|
|
|
|
//Custom view for this element
|
|
joint.shapes.html.ElementView = joint.dia.ElementView.extend({
|
|
|
|
initialize: function() {
|
|
_.bindAll(this, 'updateBox');
|
|
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
|
|
|
|
this.$box = $(_.template(this.model.get('html'))());
|
|
// Prevent paper from handling pointerdown.
|
|
this.$box.find('input,select').on('mousedown click', function(evt) { evt.stopPropagation(); });
|
|
// This is an example of reacting on the input change and storing the input data in the cell model.
|
|
this.$box.find('input').on('change', _.bind(function(evt) {
|
|
this.model.set('input', $(evt.target).val());
|
|
}, this));
|
|
this.$box.find('select').on('change', _.bind(function(evt) {
|
|
this.model.set('select', $(evt.target).val());
|
|
}, this));
|
|
this.$box.find('select').val(this.model.get('select'));
|
|
//this.$box.find('.config').on('click', CALL OVERLAY HERE);
|
|
// Update the box position whenever the underlying model changes.
|
|
this.model.on('change', this.updateBox, this);
|
|
// Remove the box when the model gets removed from the graph.
|
|
this.model.on('remove', this.removeBox, this);
|
|
|
|
this.updateBox();
|
|
},
|
|
render: function() {
|
|
joint.dia.ElementView.prototype.render.apply(this, arguments);
|
|
this.paper.$el.prepend(this.$box);
|
|
this.updateBox();
|
|
return this;
|
|
},
|
|
updateBox: function() {
|
|
// Set the position and dimension of the box so that it covers the JointJS element.
|
|
var bbox = this.model.getBBox();
|
|
// Example of updating the HTML with a data stored in the cell model.
|
|
this.$box.find('label').text(this.model.get('name'));
|
|
this.$box.find('span').text(this.model.get('select'));
|
|
this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
|
|
},
|
|
removeBox: function(evt) {
|
|
this.$box.remove();
|
|
}
|
|
});
|
|
|
|
|
|
//Read the adjacencyList and build the elements and the links according to it
|
|
function buildGraphFromAdjacencyList(adjacencyList) {
|
|
|
|
var elements = [];
|
|
var links = [];
|
|
|
|
_.each(adjacencyList['vms'], function(vm) {
|
|
elements.push(makeElement(vm));
|
|
});
|
|
|
|
_.each(adjacencyList['links'], function(link) {
|
|
links.push(makeLink(link[0], link[1] , link[2], link[3]));
|
|
});
|
|
|
|
// Links must be added after all the elements. This is because when the links
|
|
// are added to the graph, link source/target
|
|
// elements must be in the graph already.
|
|
return elements.concat(links);
|
|
}
|
|
|
|
//Return a new link linking the parent and child elements with the interfaces names given in parameters
|
|
function makeLink(parentElementLabel, childElementLabel, Iparent, Ichild) {
|
|
|
|
return new joint.dia.Link({
|
|
source: { id: parentElementLabel },
|
|
target: { id: childElementLabel },
|
|
labels: [
|
|
{ position: 20, attrs: { text: { text: Iparent } }},
|
|
{ position: -20, attrs: { text: { text: Ichild } }}
|
|
]
|
|
});
|
|
}
|
|
|
|
//Return a new element
|
|
function makeElement(label) {
|
|
|
|
var maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length;
|
|
|
|
// Compute width/height of the rectangle based on the number
|
|
// of lines in the label and the letter size. 0.6 * letterSize is
|
|
// an approximation of the monospace font letter width.
|
|
var width = 130;
|
|
var height = 80;
|
|
|
|
return new joint.shapes.html.Element({
|
|
id: label,
|
|
name: label,
|
|
size: { width: width, height: height },
|
|
|
|
html: [
|
|
'<div class="html-element">',
|
|
'<img src="../images/ON.png">',
|
|
'<label></label>',
|
|
'<input type="image" src="../images/gear.png" class="config"></button>',
|
|
'</div>'
|
|
].join(''),
|
|
|
|
attrs: {
|
|
rect: {
|
|
fill: '#FE854F',
|
|
width: width,
|
|
height: height,
|
|
rx: 5,
|
|
ry: 5,
|
|
stroke: 'none'
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
var graph = new joint.dia.Graph;
|
|
|
|
var paper = new joint.dia.Paper({
|
|
el: $('#graphHolder'),
|
|
width: 2000,
|
|
height: 2000,
|
|
model: graph,
|
|
gridSize: 1
|
|
});
|
|
|
|
paper.$el.css('pointer-events', 'none');
|
|
|
|
var cells = buildGraphFromAdjacencyList(vmList);
|
|
graph.resetCells(cells);
|
|
joint.layout.DirectedGraph.layout(graph, {
|
|
setLinkVertices: false,
|
|
//Top to bottom generation
|
|
rankDir: "TB",
|
|
nodeSep: 150,
|
|
edgeSep: 150,
|
|
rankSep: 150
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |