loic/istic-openstack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add status to image

Browse source
This commit is contained in:
Loic GUEGAN 2016-05-06 14:06:56 +02:00
parent 43e76785f0
commit 664cddd4fa
6 changed files with 279 additions and 236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

392
client/js/controllers/home/home.js
View file

@ -4,199 +4,199 @@
* @param {$scope} $scope The $scope service from angular * @param {$scope} $scope The $scope service from angular
*/ */
mainApp.controller('homeCtrl', ['$scope', 'Compute', '$rootScope', 'Loading', 'Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image) mainApp.controller('homeCtrl', ['$scope', 'Compute', '$rootScope', 'Loading', 'Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image)
{ {
graph = new joint.dia.Graph; graph = new joint.dia.Graph;
paper = new joint.dia.Paper({ paper = new joint.dia.Paper({
el: $('#graphHolder'), el: $('#graphHolder'),
width: $('#graphHolder').width(), width: $('#graphHolder').width(),
//height: test.height, //height: test.height,
model: graph, model: graph,
gridSize: 1, gridSize: 1,
eractive: false eractive: false
}); });
$scope.raiseShowMachineCreationEvent = function () { $scope.raiseShowMachineCreationEvent = function () {
$rootScope.$broadcast("showMachineCreationEvent", Compute.getData().axioms); $rootScope.$broadcast("showMachineCreationEvent", Compute.getData().axioms);
}; };
var displayMachine = function () { var displayMachine = function () {
var machineNames = []; var machineNames = [];
var i = 0; var i = 0;
$.each(Compute.getData().machines, function () { $.each(Compute.getData().machines, function () {
machineNames[i] = [this.name, this.id]; machineNames[i] = [this.name, this.id];
i++; i++;
}) })
var vmList = { var vmList = {
'vms': machineNames 'vms': machineNames
/*'links': [ /*'links': [
['VM 1', 'VM 2', '', ''], ['VM 1', 'VM 2', '', ''],
['VM 2', 'VM 3', 'I3', 'I4'], ['VM 2', 'VM 3', 'I3', 'I4'],
['VM 1', 'VM 3', 'I5', 'I6'], ['VM 1', 'VM 3', 'I5', 'I6'],
['VM 2', 'VM 4', 'I5', 'I6'], ['VM 2', 'VM 4', 'I5', 'I6'],
['VM 4', 'VM 5', 'I5', 'I6'], ['VM 4', 'VM 5', 'I5', 'I6'],
['VM 4', 'VM 6', 'I5', 'I6'], ['VM 4', 'VM 6', 'I5', 'I6'],
['VM 4', 'VM 1', 'I5', 'I6'], ['VM 4', 'VM 1', 'I5', 'I6'],
['VM 7', 'VM 4', 'I5', 'I6'], ['VM 7', 'VM 4', 'I5', 'I6'],
['VM 7', 'VM 3', 'I5', 'I6'], ['VM 7', 'VM 3', 'I5', 'I6'],
['VM 6', 'VM 8', 'I5', 'I6'], ['VM 6', 'VM 8', 'I5', 'I6'],
['VM 3', 'VM 9', 'I5', 'I6'], ['VM 3', 'VM 9', 'I5', 'I6'],
['VM 3', 'VM 10', 'I5', 'I6'] ['VM 3', 'VM 10', 'I5', 'I6']
]*/ ]*/
}; };
//Custom element for inserting html //Custom element for inserting html
joint.shapes.html = {}; joint.shapes.html = {};
joint.shapes.html.Element = joint.shapes.basic.Rect.extend({ joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
defaults: joint.util.deepSupplement({ defaults: joint.util.deepSupplement({
type: 'html.Element', type: 'html.Element',
attrs: { attrs: {
rect: {stroke: 'none', 'fill-opacity': 0} rect: {stroke: 'none', 'fill-opacity': 0}
} }
}, joint.shapes.basic.Rect.prototype.defaults) }, joint.shapes.basic.Rect.prototype.defaults)
}); });
this.paper.$el.css('pointer-events', 'none'); this.paper.$el.css('pointer-events', 'none');
var cells = buildGraphFromAdjacencyList(vmList); var cells = buildGraphFromAdjacencyList(vmList);
this.graph.addCells(cells); this.graph.addCells(cells);
console.log(this.graph); //console.log(this.graph);
var test = joint.layout.DirectedGraph.layout(this.graph, { var test = joint.layout.DirectedGraph.layout(this.graph, {
etLinkVertices: false, etLinkVertices: false,
//Top to bottom generation //Top to bottom generation
ankDir: "TB", ankDir: "TB",
odeSep: 150, odeSep: 150,
dgeSep: 150, dgeSep: 150,
ankSep: 50 ankSep: 50
}); });
this.paper.setDimensions(test.width, test.height); this.paper.setDimensions(test.width, test.height);
$(".Member").bind('click', function () { $(".Member").bind('click', function () {
$scope.raiseShowMachineDetailsEvent($(this).attr('model-id')); $scope.raiseShowMachineDetailsEvent($(this).attr('model-id'));
}); });
} }
// Function to call after pull all data about machines // Function to call after pull all data about machines
var callMeAfterPullData = function (data) { var callMeAfterPullData = function (data) {
//$scope.machines=Compute.getData().machines; //$scope.machines=Compute.getData().machines;
Loading.stop(); Loading.stop();
displayMachine(); displayMachine();
}; };
var tryToRetrieveData = function () { var tryToRetrieveData = function () {
// If no data retrieve about machine and user is logged // If no data retrieve about machine and user is logged
if (Compute.getData().machines == null && Identity.isAlreadyLogin()) { if (Compute.getData().machines == null && Identity.isAlreadyLogin()) {
Loading.start(); // Show loading gif Loading.start(); // Show loading gif
Compute.pullData(callMeAfterPullData); // Retrieve data and call the callback Compute.pullData(callMeAfterPullData); // Retrieve data and call the callback
} else { } else {
// Else if user is logged and data is already retrieve // Else if user is logged and data is already retrieve
// simply display data // simply display data
if (Identity.isAlreadyLogin()) { if (Identity.isAlreadyLogin()) {
callMeAfterPullData(); // Display data callMeAfterPullData(); // Display data
} }
} }
}; };
// On user login // On user login
$scope.$on('loginEvent', function () { $scope.$on('loginEvent', function () {
tryToRetrieveData(); tryToRetrieveData();
}); });
// Function to call from view to display the details of a machine // Function to call from view to display the details of a machine
$scope.raiseShowMachineDetailsEvent = function (id) { $scope.raiseShowMachineDetailsEvent = function (id) {
// Stop loading gif and display overlay // Stop loading gif and display overlay
var callback = function () { var callback = function () {
Loading.stop(); Loading.stop();
var data = Compute.getData(); var data = Compute.getData();
$rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms); $rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms);
}; };
Loading.start(); // Show loading gif Loading.start(); // Show loading gif
Compute.pullMachines(callback); // Retrieve machine info and display overlay Compute.pullMachines(callback); // Retrieve machine info and display overlay
}; };
// Try to retrieve data for the first time // Try to retrieve data for the first time
tryToRetrieveData(); tryToRetrieveData();
//Read the adjacencyList and build the elements and the links according to it //Read the adjacencyList and build the elements and the links according to it
function buildGraphFromAdjacencyList(adjacencyList) { function buildGraphFromAdjacencyList(adjacencyList) {
var elements = []; var elements = [];
var links = []; var links = [];
_.each(adjacencyList['vms'], function (vm) { _.each(adjacencyList['vms'], function (vm) {
elements.push(makeElement(vm)); elements.push(makeElement(vm));
}); });
_.each(adjacencyList['links'], function (link) { _.each(adjacencyList['links'], function (link) {
links.push(makeLink(link[0], link[1], link[2], link[3])); 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 // Links must be added after all the elements. This is because when the links
// are added to the graph, link source/target // are added to the graph, link source/target
// elements must be in the graph already. // elements must be in the graph already.
return elements.concat(links); return elements.concat(links);
} }
// On user login // On user login
$scope.$on('updateGraphEvent', function () { $scope.$on('updateGraphEvent', function () {
displayMachine(); displayMachine();
}); });
//Return a new link linking the parent and child elements with the interfaces names given in parameters //Return a new link linking the parent and child elements with the interfaces names given in parameters
function makeLink(parentElementLabel, childElementLabel, Iparent, Ichild) { function makeLink(parentElementLabel, childElementLabel, Iparent, Ichild) {
return new joint.dia.Link({ return new joint.dia.Link({
source: {id: parentElementLabel}, source: {id: parentElementLabel},
target: {id: childElementLabel}, target: {id: childElementLabel},
labels: [ labels: [
{position: 20, attrs: {text: {text: Iparent}}}, {position: 20, attrs: {text: {text: Iparent}}},
{position: -20, attrs: {text: {text: Ichild}}} {position: -20, attrs: {text: {text: Ichild}}}
] ]
}); });
} }
//Return a new element //Return a new element
function makeElement(vm) { function makeElement(vm) {
var label = vm[0]; var label = vm[0];
var maxLineLength = _.max(label.split('\n'), function (l) { var maxLineLength = _.max(label.split('\n'), function (l) {
return l.length; return l.length;
}).length; }).length;
// Compute width/height of the rectangle based on the number // Compute width/height of the rectangle based on the number
// of lines in the label and the letter size. 0.6 * letterSize is // of lines in the label and the letter size. 0.6 * letterSize is
// an approximation of the monospace font letter width. // an approximation of the monospace font letter width.
var width = 130; var width = 130;
var height = 80; var height = 80;
var data = Compute.getData(); var data = Compute.getData();
if (data.machines[vm[1]].status == "ACTIVE") { if (data.machines[vm[1]].status == "ACTIVE") {
return new joint.shapes.org.Member({ return new joint.shapes.org.Member({
id: vm[1], id: vm[1],
position: {x: 0, y: 0}, position: {x: 0, y: 0},
attrs: { attrs: {
'.card': {fill: 'blue', stroke: 'none'}, '.card': {fill: 'blue', stroke: 'none'},
image: {'xlink:href': './images/ON.png', opacity: 0.7}, image: {'xlink:href': './images/ON.png', opacity: 0.7},
//'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0}, //'.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} '.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0}
} }
}); });
} else { } else {
return new joint.shapes.org.Member({ return new joint.shapes.org.Member({
id: vm[1], id: vm[1],
position: {x: 0, y: 0}, position: {x: 0, y: 0},
attrs: { attrs: {
'.card': {fill: 'blue', stroke: 'none'}, '.card': {fill: 'blue', stroke: 'none'},
image: {'xlink:href': './images/OFF.png', opacity: 0.7}, image: {'xlink:href': './images/OFF.png', opacity: 0.7},
//'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0}, //'.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} '.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0}
} }
}); });
} }
} }
}]); }]);

13
client/js/controllers/image/image.js
View file

@ -3,7 +3,7 @@
* *
* @param {$scope} $scope The $scope service from angular * @param {$scope} $scope The $scope service from angular
*/ */
mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', 'Identity','$rootScope', function ($scope, Image, Loading, Identity, $rootScope) mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', 'Identity', '$rootScope', function ($scope, Image, Loading, Identity, $rootScope)
{ {
// Update view // Update view
@ -21,9 +21,14 @@ mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', 'Identity','$root
callMeAfterGetImage(); callMeAfterGetImage();
} }
} }
$scope.edit=function(image){ $scope.edit = function (image) {
$rootScope.$broadcast("editImageEvent", image, Image.getData().axioms); $rootScope.$broadcast("editImageEvent", image, Image.getData().axioms);
} }
$scope.showUploadImageModal = function () {
$rootScope.$broadcast("showUploadImageModalEvent");
};
}]); }]);

14
client/js/controllers/image/upload.js
View file

@ -22,10 +22,11 @@ mainApp.controller('uploadImageCtrl', ['$scope', 'Image', 'Loading', 'Identity',
*/ */
$scope.doUpload = function () { $scope.doUpload = function () {
console.log($('#imageToUpload').prop('files')[0]); /* console.log($('#imageToUpload').prop('files')[0]);
Image.uploadImage($('#imageToUpload').prop('files')[0], function () { Image.uploadImage($('#imageToUpload').prop('files')[0], function () {
alert("done") alert("done");
}) });*/
Image.uploadImage("loic",function(){})
/*$("#drop-area-div").dmUploader({ /*$("#drop-area-div").dmUploader({
extraData: { extraData: {
"token" : Identity.getToken(), "token" : Identity.getToken(),
@ -57,6 +58,11 @@ mainApp.controller('uploadImageCtrl', ['$scope', 'Image', 'Loading', 'Identity',
}; };
// Manager logout event
$scope.$on('showUploadImageModalEvent', function () {
$scope.token = Identity.getToken();
$('#uploadImageModal').modal("show");
});
$scope.token = Identity.getToken();
}]); }]);

89
client/js/services/Image.js
View file

@ -84,44 +84,72 @@ mainApp.factory('Image', ['$http', 'Identity', function ($http, Identity) {
* @returns {undefined} * @returns {undefined}
*/ */
var uploadImage = function (fileToUpload, callback) { var uploadImage = function (fileToUpload, callback) {
var form_data = new FormData(); /*var form_data = new FormData();
form_data.append('file', fileToUpload); form_data.append('file', fileToUpload);
console.log(fileToUpload); console.log(fileToUpload);
form_data.append("task", "image"); form_data.append("task", "image");
form_data.append("token", Identity.getToken()); form_data.append("token", Identity.getToken());
form_data.append('action', "uploadImage"); form_data.append('action', "uploadImage");
form_data.append('id', '6564'); form_data.append('id', '6564');
form_data.append('file_name', fileToUpload); form_data.append('file_name', fileToUpload);
$.ajax({
url: "../server/index.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
file_name: fileToUpload,
token: Identity.getToken(),
task: "image",
action: 'uploadImage',
id: '6564',
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData: false, // To send DOMDocument or non processed data file it is set to false
success: function (data) // A function to be called if request succeeds
{
alert("success");
}
});*/
$.ajax({ alert("send")
url: "../server/index.php", // Url to which the request is send var result = $http.post('../server/index.php',
type: "POST", // Type of request to be send, called as method $.param({"token": Identity.getToken(), "task": "image", 'action': 'createImage', "opt": {"name": "loic"}}));
data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
file_name: fileToUpload,
token: Identity.getToken(),
task: "image",
action: 'uploadImage',
id: '6564',
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData: false, // To send DOMDocument or non processed data file it is set to false
success: function (data) // A function to be called if request succeeds
{
alert("success");
}
});
//var result=$http.post('../server/index.php', //var result=$http.post('../server/index.php',
// $.param({"token" : Identity.getToken(), "task" : "image", 'action':'uploadImage', 'file_name':form_data, 'id':'6564'})); // $.param({"token" : Identity.getToken(), "task" : "image", 'action':'uploadImage', 'file_name':form_data, 'id':'6564'}));
// Wait and handle the response // Wait and handle the response
/* result.then(function (response){ result.then(function (response) {
callback(parseUploadImageAnswer(response, false)); //callback(parseUploadImageAnswer(response, false));
},function(response){ alert(response.data)
callback(parseUploadImageAnswer(response, true)); console.log(response.data)
});*/ callback()
}, function (response) {
alert(response.data)
callback()
//callback(parseUploadImageAnswer(response, true));
});
}; };
var createImage = function (name,callback) {
var result = $http.post('../server/index.php',
$.param({"token": Identity.getToken(), "task": "image", 'action': 'createImage', "opt": {"name": name}}));
//var result=$http.post('../server/index.php',
// $.param({"token" : Identity.getToken(), "task" : "image", 'action':'uploadImage', 'file_name':form_data, 'id':'6564'}));
// Wait and handle the response
result.then(function (response) {
callback()
}, function (response) {
alert(response.data)
callback()
});
};
var getData = function (response) { var getData = function (response) {
return data; return data;
@ -132,6 +160,7 @@ mainApp.factory('Image', ['$http', 'Identity', function ($http, Identity) {
getImages: getImages, getImages: getImages,
updateImage: updateImage, updateImage: updateImage,
getData: getData, getData: getData,
createImage: createImage,
uploadImage: uploadImage uploadImage: uploadImage
}; };

6
client/partials/image/image.html
View file

@ -8,7 +8,7 @@
<div class="btn-group btn-group-md" role="group" aria-label="..."> <div class="btn-group btn-group-md" role="group" aria-label="...">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#uploadImageModal">Upload</button> <button type="button" class="btn btn-default" ng-click="showUploadImageModal()">Upload</button>
<button type="button" class="btn btn-default">Download</button> <button type="button" class="btn btn-default">Download</button>
</div> </div>
<p></p> <p></p>
@ -16,6 +16,7 @@
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Status</th>
<th>Size</th> <th>Size</th>
<th>Action</th> <th>Action</th>
</tr> </tr>
@ -23,6 +24,9 @@
<tbody> <tbody>
<tr ng-repeat="image in images"> <tr ng-repeat="image in images">
<td>{{ image.name}}</td> <td>{{ image.name}}</td>
<td ng-if="image.status == 'queued'"><font color="red">{{ image.status}}</font></td>
<td ng-if="image.status != 'queued'"><font color="green">{{ image.status}}</font></td>
<td>{{ (image.size / 1048576).toFixed(2)}} MB</td> <td>{{ (image.size / 1048576).toFixed(2)}} MB</td>
<td> <td>
<button type="button" class="btn btn-primary" ng-click="edit(image)">Edit</button> <button type="button" class="btn btn-primary" ng-click="edit(image)">Edit</button>

1
client/partials/image/upload.html
View file

@ -11,7 +11,6 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form action="../server/index.php" method="post"> <form action="../server/index.php" method="post">
<input type="hidden" name="task" value="image" /> <input type="hidden" name="task" value="image" />
<input type="hidden" name="token" value="{{ token }}" /> <input type="hidden" name="token" value="{{ token }}" />