248 lines
7.1 KiB
JavaScript
248 lines
7.1 KiB
JavaScript
/**
|
|
* The home controller
|
|
*
|
|
* @param {$scope} $scope The $scope service from angular
|
|
*/
|
|
mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image)
|
|
{
|
|
console.log("homeCTRl");
|
|
var callMeAfterPullData=function(data){
|
|
$scope.machines=Compute.getData().machines;
|
|
Loading.stop();
|
|
}
|
|
|
|
;
|
|
if(Compute.getData().machines == null && Identity.isAlreadyLogin()){
|
|
Loading.start();
|
|
Compute.pullData(callMeAfterPullData);
|
|
}
|
|
else{
|
|
if(Identity.isAlreadyLogin()){
|
|
callMeAfterPullData();
|
|
}
|
|
}
|
|
|
|
|
|
Image.getImages(function(){});
|
|
|
|
|
|
$scope.raiseShowMachineDetailsEvent=function(id){
|
|
|
|
var callback=function(){
|
|
Loading.stop();
|
|
var data=Compute.getData();
|
|
$rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms);
|
|
|
|
}
|
|
Loading.start();
|
|
Compute.pullMachines(callback);
|
|
}
|
|
|
|
//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', '', ''],
|
|
['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.basic.Rect.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', function(){
|
|
$scope.raiseShowMachineDetailsEvent();
|
|
});
|
|
// 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));
|
|
});
|
|
console.log(elements);
|
|
_.each(adjacencyList['links'], function(link) {
|
|
links.push(makeLink(link[0], link[1] , link[2], link[3]));
|
|
});
|
|
console.log(links);
|
|
// 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'
|
|
}
|
|
}
|
|
});*/
|
|
return new joint.shapes.org.Member({
|
|
id: label,
|
|
position: { x: 0, y: 0 },
|
|
attrs: {
|
|
'.card': { fill: 'blue', stroke: 'none'},
|
|
image: { 'xlink:href': './images/ON.png', opacity: 0.7 },
|
|
//'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
|
|
'.name': { text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0 }
|
|
}
|
|
});
|
|
}
|
|
|
|
var graph = new joint.dia.Graph;
|
|
var paper = new joint.dia.Paper({
|
|
el: $('#graphHolder'),
|
|
width: $('#graphHolder').width(),
|
|
//height: test.height,
|
|
model: graph,
|
|
gridSize: 1
|
|
});
|
|
|
|
var cells = buildGraphFromAdjacencyList(vmList);
|
|
console.log(cells);
|
|
/*graph.resetCells(cells);
|
|
joint.layout.DirectedGraph.layout(graph, {
|
|
setLinkVertices: false,
|
|
//Top to bottom generation
|
|
rankDir: "TB",
|
|
nodeSep: 150,
|
|
edgeSep: 150,
|
|
rankSep: 150
|
|
});*/
|
|
graph.addCells(cells);
|
|
var test = joint.layout.DirectedGraph.layout(graph, {
|
|
setLinkVertices: false,
|
|
//Top to bottom generation
|
|
rankDir: "TB",
|
|
nodeSep: 150,
|
|
edgeSep: 150,
|
|
rankSep: 50
|
|
});
|
|
console.log(test);
|
|
|
|
paper.setDimensions(test.width, test.height);
|
|
|
|
|
|
paper.$el.css('pointer-events', 'none');
|
|
|
|
|
|
}]);
|