Merge branch 'develop' into Eole_Graph
Conflicts: client/index.html client/js/controllers/home/home.js client/partials/home/home.html
This commit is contained in:
Eole
commit
49f416dc50
317 changed files with 5578 additions and 33526 deletions
323
client/js/controllers/home/home.js
Normal file → Executable file
323
client/js/controllers/home/home.js
Normal file → Executable file
|
|
@ -5,129 +5,116 @@
|
|||
*/
|
||||
mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image)
|
||||
{
|
||||
console.log("homeCTRl");
|
||||
console.log("test");
|
||||
// Function to call after pull all data about machines
|
||||
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']
|
||||
]
|
||||
//$scope.machines=Compute.getData().machines;
|
||||
Loading.stop();
|
||||
displayMachine();
|
||||
};
|
||||
|
||||
var tryToRetrieveData = function () {
|
||||
// If no data retrieve about machine and user is logged
|
||||
if (Compute.getData().machines == null && Identity.isAlreadyLogin()) {
|
||||
Loading.start(); // Show loading gif
|
||||
Compute.pullData(callMeAfterPullData); // Retrieve data and call the callback
|
||||
} else {
|
||||
// Else if user is logged and data is already retrieve
|
||||
// simply display data
|
||||
if (Identity.isAlreadyLogin()) {
|
||||
callMeAfterPullData(); // Display data
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//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({
|
||||
// On user login
|
||||
$scope.$on('loginEvent', function () {
|
||||
tryToRetrieveData();
|
||||
});
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'updateBox');
|
||||
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
|
||||
// Function to call from view to display the details of a machine
|
||||
$scope.raiseShowMachineDetailsEvent = function (id) {
|
||||
|
||||
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.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);
|
||||
// Stop loading gif and display overlay
|
||||
var callback = function () {
|
||||
Loading.stop();
|
||||
var data = Compute.getData();
|
||||
|
||||
$rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms);
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
*/
|
||||
};
|
||||
Loading.start(); // Show loading gif
|
||||
Compute.pullMachines(callback); // Retrieve machine info and display overlay
|
||||
};
|
||||
|
||||
// Try to retrieve data for the first time
|
||||
tryToRetrieveData();
|
||||
|
||||
var displayMachine = function(){
|
||||
console.log("test");
|
||||
var machineNames = [];
|
||||
var i = 0;
|
||||
$.each(Compute.getData().machines, function(){
|
||||
machineNames[i] = [this.name, this.id];
|
||||
i++;
|
||||
})
|
||||
var vmList = {
|
||||
'vms': machineNames
|
||||
/*'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)
|
||||
});
|
||||
|
||||
var graph = new joint.dia.Graph;
|
||||
var paper = new joint.dia.Paper({
|
||||
el: $('#graphHolder'),
|
||||
width: $('#graphHolder').width(),
|
||||
//height: test.height,
|
||||
model: graph,
|
||||
gridSize: 1,
|
||||
eractive: false
|
||||
});
|
||||
paper.$el.css('pointer-events', 'none');
|
||||
var cells = buildGraphFromAdjacencyList(vmList);
|
||||
|
||||
graph.addCells(cells);
|
||||
var test = joint.layout.DirectedGraph.layout(graph, {
|
||||
etLinkVertices: false,
|
||||
//Top to bottom generation
|
||||
ankDir: "TB",
|
||||
odeSep: 150,
|
||||
dgeSep: 150,
|
||||
ankSep: 50
|
||||
});
|
||||
|
||||
paper.setDimensions(test.width, test.height);
|
||||
|
||||
$(".Member").bind('click', function() {
|
||||
$scope.raiseShowMachineDetailsEvent($(this).attr('model-id'));
|
||||
});
|
||||
}
|
||||
|
||||
//Read the adjacencyList and build the elements and the links according to it
|
||||
function buildGraphFromAdjacencyList(adjacencyList) {
|
||||
|
||||
|
|
@ -137,11 +124,9 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I
|
|||
_.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.
|
||||
|
|
@ -162,7 +147,8 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I
|
|||
}
|
||||
|
||||
//Return a new element
|
||||
function makeElement(label) {
|
||||
function makeElement(vm) {
|
||||
var label = vm[0];
|
||||
|
||||
var maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length;
|
||||
|
||||
|
|
@ -171,83 +157,30 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I
|
|||
// 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 data = Compute.getData();
|
||||
console.log(data.machines[vm[1]]);
|
||||
if(data.machines[vm[1]].status == "ACTIVE"){
|
||||
return new joint.shapes.org.Member({
|
||||
id: vm[1],
|
||||
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 }
|
||||
}
|
||||
});
|
||||
}else{
|
||||
return new joint.shapes.org.Member({
|
||||
id: vm[1],
|
||||
position: { x: 0, y: 0 },
|
||||
attrs: {
|
||||
'.card': { fill: 'blue', stroke: 'none'},
|
||||
image: { 'xlink:href': './images/OFF.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,
|
||||
interactive: false
|
||||
});
|
||||
paper.$el.css('pointer-events', 'none');
|
||||
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);
|
||||
|
||||
$(".Member").bind('click', function() {
|
||||
console.log("Click");
|
||||
$scope.raiseShowMachineDetailsEvent();
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -3,41 +3,43 @@
|
|||
*
|
||||
* @param {$scope} $scope The $scope service from angular
|
||||
*/
|
||||
mainApp.controller('machineDetailsCtrl', [ '$scope', 'Compute', '$rootScope', '$timeout', function ($scope, Compute, $rootScope, $timeout)
|
||||
{
|
||||
|
||||
// Init scope
|
||||
$scope.machine={};
|
||||
$scope.machineIsStarting=false; // For loading icon
|
||||
mainApp.controller('machineDetailsCtrl', ['$scope', 'Compute', '$rootScope', '$timeout', 'Identity', function ($scope, Compute, $rootScope, $timeout, Identity)
|
||||
{
|
||||
|
||||
|
||||
$scope.$on('showMachineDetailsEvent', function(eventName ,machine, axioms){
|
||||
$scope.machine=machine;
|
||||
$scope.axioms=axioms;
|
||||
$('#machineDetailsModal').modal({backdrop: false, keyboard: true});
|
||||
});
|
||||
// Init scope
|
||||
$scope.machine = {};
|
||||
$scope.machineIsStarting = false; // For loading icon
|
||||
|
||||
// When we need to show details of machine
|
||||
$scope.$on('showMachineDetailsEvent', function (eventName, machine, axioms) {
|
||||
$scope.machine = machine;
|
||||
$scope.axioms = axioms;
|
||||
$('#machineDetailsModal').modal({backdrop: false, keyboard: true});
|
||||
});
|
||||
|
||||
// Try to stop or start a machine
|
||||
$scope.toggleMachineState = function () {
|
||||
// Display gif
|
||||
$scope.machineIsStarting = true;
|
||||
|
||||
// Fake timeout
|
||||
$timeout(function () {
|
||||
$scope.machineIsStarting = false;
|
||||
}, 3000);
|
||||
$timeout(function () {
|
||||
$scope.machine.online = !$scope.machine.online;
|
||||
|
||||
}, 3000);
|
||||
|
||||
|
||||
$scope.toggleMachineState=function(){
|
||||
// Display gif
|
||||
$scope.machineIsStarting=true;
|
||||
};
|
||||
|
||||
// Fake timeout
|
||||
$timeout(function(){
|
||||
$scope.machineIsStarting=false;
|
||||
}, 3000);
|
||||
$timeout(function(){
|
||||
$scope.machine.online=!$scope.machine.online;
|
||||
// Apply modifications
|
||||
$scope.applyModifications = function () {
|
||||
//Todo
|
||||
};
|
||||
|
||||
}, 3000);
|
||||
|
||||
|
||||
};
|
||||
|
||||
$scope.applyModifications=function(){
|
||||
//Todo
|
||||
}
|
||||
|
||||
|
||||
|
||||
}]);
|
||||
}]);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue