summaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/index.html31
-rw-r--r--client/js/controllers/home/home.js36
-rw-r--r--client/js/controllers/home/machineDetails.js12
-rw-r--r--client/js/controllers/home/main.js22
-rw-r--r--client/js/controllers/login.js3
-rw-r--r--client/js/controllers/network/network.js (renamed from client/js/controllers/network/main.js)0
-rw-r--r--client/js/controllers/status.js6
-rw-r--r--client/js/services/Compute.js125
-rw-r--r--client/js/services/Identity.js65
-rw-r--r--client/js/services/Loading.js23
-rw-r--r--client/partials/home/machineDetails.html32
-rw-r--r--client/partials/home/main.html9
-rw-r--r--client/partials/loading.html18
-rw-r--r--client/partials/nav.html41
-rw-r--r--client/partials/status.html29
15 files changed, 308 insertions, 144 deletions
diff --git a/client/index.html b/client/index.html
index 8d81ac3..48ea4a0 100644
--- a/client/index.html
+++ b/client/index.html
@@ -11,26 +11,28 @@
<link rel="stylesheet" href="./css/style.css">
- <!--[if lt IE 9]>
- <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
+ <!--[if lt IE 9]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
</head>
<body>
-
+
+ <!-- Overlay -->
+ <div ng-include="'./partials/login.html'"></div>
+ <div ng-include="'./partials/home/machineDetails.html'"></div>
+ <div ng-include="'./partials/loading.html'"></div>
+
+
+
<!-- MAIN GRID -->
<div class="container-lg">
<!-- Status bar -->
<div class="row" ng-controller="statusCtrl">
<div class="col-lg-12">
- <!-- Login Overlay -->
- <div ng-include="'./partials/login.html'"></div>
- <!-- Machine Details Overlay -->
- <div ng-include="'./partials/home/machineDetails.html'"></div>
-
- <!-- Nav -->
- <div ng-include="'./partials/nav.html'"></div>
+ <!-- Status bar -->
+ <div ng-include="'./partials/status.html'"></div>
</div>
</div>
<!-- Page content -->
@@ -55,7 +57,7 @@
</div>
</div>
</div>
- </div>
+ </div>
</div>
</div>
</div>
@@ -79,13 +81,14 @@
<script src="./js/services/Identity.js"></script>
<script src="./js/services/Image.js"></script>
<script src="./js/services/Compute.js"></script>
+ <script src="./js/services/Loading.js"></script>
<!-- Include controller -->
<script src="./js/controllers/login.js"></script>
<script src="./js/controllers/status.js"></script>
- <script src="./js/controllers/home/main.js"></script>
+ <script src="./js/controllers/home/home.js"></script>
<script src="./js/controllers/home/machineDetails.js"></script>
- <script src="./js/controllers/network/main.js"></script>
+ <script src="./js/controllers/network/network.js"></script>
diff --git a/client/js/controllers/home/home.js b/client/js/controllers/home/home.js
new file mode 100644
index 0000000..f84f625
--- /dev/null
+++ b/client/js/controllers/home/home.js
@@ -0,0 +1,36 @@
+/**
+ * The home controller
+ *
+ * @param {$scope} $scope The $scope service from angular
+ */
+mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','Identity', function ($scope, Compute, $rootScope, Loading, Identity)
+{
+
+ var callMeAfterPullData=function(data){
+ $scope.machines=Compute.getData().machines;
+ Loading.stop();
+ }
+
+ ;
+ if(Compute.getData().machines == null && Identity.isAlreadyLogin()){
+ Loading.start();
+ Compute.pullData(callMeAfterPullData);
+ }
+
+
+
+
+ $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);
+ }
+
+
+}]);
diff --git a/client/js/controllers/home/machineDetails.js b/client/js/controllers/home/machineDetails.js
index f84a073..c015eaa 100644
--- a/client/js/controllers/home/machineDetails.js
+++ b/client/js/controllers/home/machineDetails.js
@@ -6,21 +6,25 @@
mainApp.controller('machineDetailsCtrl', [ '$scope', 'Compute', '$rootScope', '$timeout', function ($scope, Compute, $rootScope, $timeout)
{
+ // Init scope
$scope.machine={};
- $("#waitingForToggleMachine").hide();
+ $scope.machineIsStarting=false; // For loading icon
- $scope.$on('showMachineDetailsEvent', function(eventName ,machine){
+
+ $scope.$on('showMachineDetailsEvent', function(eventName ,machine, axioms){
$scope.machine=machine;
+ $scope.axioms=axioms;
$('#machineDetailsModal').modal({backdrop: false, keyboard: true});
});
$scope.toggleMachineState=function(){
- $("#waitingForToggleMachine").show();
+ // Display gif
+ $scope.machineIsStarting=true;
// Fake timeout
$timeout(function(){
- $("#waitingForToggleMachine").hide();
+ $scope.machineIsStarting=false;
}, 3000);
$timeout(function(){
$scope.machine.online=!$scope.machine.online;
diff --git a/client/js/controllers/home/main.js b/client/js/controllers/home/main.js
deleted file mode 100644
index d93c376..0000000
--- a/client/js/controllers/home/main.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * The home controller
- *
- * @param {$scope} $scope The $scope service from angular
- */
-mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', function ($scope, Compute, $rootScope)
-{
-
- var updatePage=function(){
- // TODO Update graph etc...
- }
-
- // Retrieve all Data
- Compute.pullData(updatePage);
-
- $scope.raiseShowMachineDetailsEvent=function(){
- var machine={name: "Machine 1", online:true};
- $rootScope.$broadcast("showMachineDetailsEvent", machine);
- }
-
-
-}]);
diff --git a/client/js/controllers/login.js b/client/js/controllers/login.js
index 1a89563..63cb6d1 100644
--- a/client/js/controllers/login.js
+++ b/client/js/controllers/login.js
@@ -16,10 +16,11 @@ mainApp.controller('loginCtrl', ['$scope','$sce','Identity', function ($scope,$s
// Manager logout event
$scope.$on('logoutEvent', function(){
- Identity.logout();
$('#loginModal').modal({backdrop: 'static', keyboard: false});
});
+
+
// Hide loading button and message alert
$('#loadingLoginButton').hide();
$('#failedToLoginAlert').hide();
diff --git a/client/js/controllers/network/main.js b/client/js/controllers/network/network.js
index 7264aec..7264aec 100644
--- a/client/js/controllers/network/main.js
+++ b/client/js/controllers/network/network.js
diff --git a/client/js/controllers/status.js b/client/js/controllers/status.js
index 940d794..6f398ad 100644
--- a/client/js/controllers/status.js
+++ b/client/js/controllers/status.js
@@ -11,10 +11,10 @@ mainApp.controller('statusCtrl', ['$scope','Identity', '$rootScope', function ($
// Give profile to model
$scope.profile=Identity.getProfile();
-
+
// Function to logout
- $scope.raiseLogoutEvent=function(){
- $rootScope.$broadcast('logoutEvent');
+ $scope.logout=function(){
+ Identity.logout();
};
}]);
diff --git a/client/js/services/Compute.js b/client/js/services/Compute.js
index 70359ee..36ddc16 100644
--- a/client/js/services/Compute.js
+++ b/client/js/services/Compute.js
@@ -2,38 +2,139 @@
mainApp.factory('Compute',[ '$http', 'Identity', function($http, Identity){
-
+ // Init data
var data={};
- data.machines={};
+ data.machines=null;
+ data.axioms={} // Contain static data
+ data.axioms.ram=[128,512,1024,2048,4096];
+ data.axioms.disk=[1,2,5,10,25,50,100,150,200]
+ data.axioms.images={}; // Retrieve after
- // Parser
- var parseGetMachinesAnswer=function(response, failedToSendRequest){
+ /**
+ * Parse pullMachines answer
+ * @param {response} the server response
+ * @param {boolean} false if the request as been send true else
+ * @return {requestParserResult} the result of parsing
+ */
+ var parsePullMachinesAnswer=function(response, failedToSendRequest){
+
+ // Defined return object
+ var requestParserResult={};
+ requestParserResult.status=1;
+ requestParserResult.failReason=null;
+
- };
+ if (typeof response.data.Servers !== 'undefined') {
+ // Set status code
+ requestParserResult.status=0;
+ data.machines=response.data.Servers;
+ }
+ else if(failedToSendRequest){
+ requestParserResult.failReason="Failed to send request";
+ }
+ else{
+ requestParserResult.failReason="Error";
+ }
+ return requestParserResult;
+ };
- // Get Machine
- var getMachines=function(callback){
+ /**
+ * Retrieve machine list
+ * @param {callback} function to call after request complete
+ */
+ var pullMachines=function(callback){
+ // Send listServers request
var result=$http.post('../server/index.php',
- $.param({"token" : Identity.profile.token, "task" : "Compute"}));
+ $.param({"token" : Identity.getToken(), "task" : "compute", "action":"listServers"}));
+
+ // Wait and handle the response
+ result.then(function (response){
+ callback(parsePullMachinesAnswer(response, false));
+ },function(response){
+ callback(parsePullMachinesAnswer(response, true));
+ });
+ };
+
+
+ /**
+ * Parse pullImages answer
+ * @param {response} the server response
+ * @param {boolean} false if the request as been send true else
+ * @return {requestParserResult} the result of parsing
+ */
+ var parsePullImagesAnswer=function(response, failedToSendRequest){
+
+ // Defined return object
+ var requestParserResult={};
+ requestParserResult.status=1;
+ requestParserResult.failReason=null;
+ if (typeof response.data.Images !== 'undefined') {
+ // Set status code
+ requestParserResult.status=0;
+ data.axioms.images=response.data.Images;
+ }
+ else if(failedToSendRequest){
+ requestParserResult.failReason="Failed to send request";
+ }
+ else{
+ requestParserResult.failReason="Error";
+ }
+ return requestParserResult;
};
+
+
+
+ /**
+ * Retrieve machine list
+ * @param {callback} function to call after request complete
+ */
+ var pullImages=function(callback){
+ // Send listServers request
+ var result=$http.post('../server/index.php',
+ $.param({"token" : Identity.getToken(), "task" : "compute", "action":"listImages"}));
+
+ // Wait and handle the response
+ result.then(function (response){
+ callback(parsePullImagesAnswer(response, false));
+ },function(response){
+ callback(parsePullImagesAnswer(response, true));
+ });
+ };
+ /**
+ * Retrieve all data
+ * @param {callback} function to call after request complete
+ */
var pullData=function(callback){
- // TODO call getMachines etc...
+ var nextFunction=function(response){
+ if(response.status==0){
+ pullMachines(callback);
+ }
+ }
+ pullImages(nextFunction);
}
-
+
+ /**
+ * Get Data
+ * @return {data} return the data object
+ */
+ var getData=function(){
+ return data;
+ }
+
// Return services objects
return {
- getMachines: getMachines,
+ pullMachines: pullMachines,
pullData: pullData,
- data:data
+ getData: getData
};
diff --git a/client/js/services/Identity.js b/client/js/services/Identity.js
index 7604230..db93e97 100644
--- a/client/js/services/Identity.js
+++ b/client/js/services/Identity.js
@@ -1,5 +1,5 @@
-mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){
+mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){
/* Create profile structure to store informations
* about current session
@@ -9,42 +9,37 @@ mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){
profile.projectname=null;
var token=null;
+
/*
* @returns {boolean} Return true if a cookie is found (and load it in profile) false else
*/
var isAlreadyLogin=function(){
+
+ // Load cookies
var profileInCookie=$cookies.getObject('profile');
var tokenPart_0InCookie=$cookies.getObject('token.part_0');
var tokenPart_1InCookie=$cookies.getObject('token.part_1');
+ // Check if cookie is defined
if(typeof profileInCookie !== 'undefined'
&& typeof tokenPart_0InCookie !== 'undefined'
&& typeof tokenPart_1InCookie !== 'undefined'
){
+
+ // If yes, put it into variables
angular.extend(profile, profileInCookie);
token=tokenPart_0InCookie+tokenPart_1InCookie;
-
+
+ // Return I'm Login
return true;
}
+ // Return I'm not Login
return false;
}
- /*
- * Get the profile
- */
- var getProfile=function(){
- return profile;
- }
-
- /*
- * Get the token
- */
- var getToken=function(){
- return token;
- }
/*
* Destroy profile cookies
@@ -53,6 +48,12 @@ mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){
$cookies.remove('profile');
$cookies.remove('token.part_0');
$cookies.remove('token.part_1');
+ token=null;
+ profile.username=null;
+ profile.projectname=null;
+
+ // Reload Page
+ location.reload();
}
@@ -64,7 +65,7 @@ mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){
*/
var parseLoginAnswer=function(response, failedToSendRequest){
-
+ // Defined return object
var requestParserResult={};
requestParserResult.status=1;
requestParserResult.failReason=null;
@@ -86,6 +87,10 @@ mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){
$cookies.putObject('token.part_0', response.data.token.substring(0, middle), {'expires': expireDate});
// Save second part of token
$cookies.putObject('token.part_1', response.data.token.substring(middle, response.data.token.length), {'expires': expireDate});
+
+ // Put token in var
+ token=response.data.token;
+
}
else if(failedToSendRequest){
requestParserResult.failReason="Failed to send request";
@@ -93,9 +98,11 @@ mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){
else{
requestParserResult.failReason="Please check your username, password and project name !";
}
+
return requestParserResult;
};
+
/**
* Function to connect to OpenStack
@@ -106,25 +113,43 @@ mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){
* @param {string} projectname The user project name
* @param {function} function to call when data is avalaible
*/
- var login=function(username, password,projectname, callback){
+ var login=function(username, password,projectname,callback){
// Set profile information (early)
profile.username=username;
profile.projectname=projectname;
var result=$http.post('../server/index.php',
- $.param({"task" : "Authenticate", "user" : username, "password" : password, "project" : projectname}));
+ $.param({"task" : "Authenticate", "user" : username, "password" : password, "project" : projectname}));
// Wait and handle the response
result.then(function (response){
- callback(parseLoginAnswer(response), false);
+ callback(parseLoginAnswer(response, false));
},function(response){
- callback(parseLoginAnswer(response), true)
+ callback(parseLoginAnswer(response, true));
});
};
+
+
+ /*
+ * Get the profile
+ */
+ var getProfile=function(){
+ return profile;
+ }
+
+ /*
+ * Get the token
+ */
+ var getToken=function(){
+ return token;
+ }
+
+
+
// Return services objects
return {
login: login,
diff --git a/client/js/services/Loading.js b/client/js/services/Loading.js
new file mode 100644
index 0000000..db06194
--- /dev/null
+++ b/client/js/services/Loading.js
@@ -0,0 +1,23 @@
+
+mainApp.factory('Loading',[ function(){
+ /**
+ * Display Loading modal
+ */
+ var start=function(){
+ $('#loadingModal').modal({backdrop: 'static', keyboard: false});
+ };
+
+ /**
+ * Hide Loading modal
+ */
+ var stop=function(){
+ $('#loadingModal').modal('hide');
+ }
+
+
+ // Service returns
+ return {
+ start:start,
+ stop:stop
+ };
+}]);
diff --git a/client/partials/home/machineDetails.html b/client/partials/home/machineDetails.html
index 606edcf..c4c8a38 100644
--- a/client/partials/home/machineDetails.html
+++ b/client/partials/home/machineDetails.html
@@ -21,12 +21,12 @@
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">State</label>
<div class="col-sm-10">
- <span ng-if="machine.online">Online</span>
- <span ng-if="!machine.online">Offline</span>
+ <span ng-if="machine.status=='ACTIVE'">Online</span>
+ <span ng-if="machine.status!=='ACTIVE'">Offline</span>
&nbsp;
- <button class="btn btn-danger" ng-if="machine.online" ng-click="toggleMachineState()">Turn Off</button>
- <button class="btn btn-success" ng-if="!machine.online" ng-click="toggleMachineState()">Turn On</button>
- &nbsp;<img src="images/spin/32x32/Preloader_1.gif" id="waitingForToggleMachine"></span>
+ <button class="btn btn-danger" ng-if="machine.status=='ACTIVE'" ng-click="toggleMachineState()">Turn Off</button>
+ <button class="btn btn-success" ng-if="machine.status!=='ACTIVE'" ng-click="toggleMachineState()">Turn On</button>
+ &nbsp;<img src="images/spin/32x32/Preloader_1.gif" ng-if="machineIsStarting"></span>
</div>
@@ -34,36 +34,22 @@
<fieldset class="form-group">
<label class="control-label col-sm-2">RAM</label>
<select class="col-sm-20" id="ramSelected">
- <option>128 MB</option>
- <option>512 MB</option>
- <option>1024 MB</option>
- <option>2048 MB</option>
- <option>4096 MB</option>
+ <option ng-repeat="ram in axioms.ram" ng-selected="machine.ram == ram">{{ ram }}</option>
</select>
+ <span>MB</span>
</fieldset>
<fieldset class="form-group">
<label class="control-label col-sm-2">Disk</label>
<select class="col-sm-20" id="ramSelected">
- <option>1 Go</option>
- <option>2 Go</option>
- <option>5 Go</option>
- <option>10 Go</option>
- <option>25 Go</option>
- <option>50 Go</option>
- <option>100 Go</option>
- <option>150 Go</option>
- <option>200 Go</option>
+ <option ng-repeat="disk in axioms.disk" ng-selected="machine.disk == disk">{{ disk }}</option>
</select>
</fieldset>
<fieldset class="form-group">
<label class="control-label col-sm-2">Image</label>
<select class="col-sm-20" id="ramSelected">
- <option>Cirros</option>
- <option>Debian</option>
- <option>Tiny Core</option>
- <option>Centos</option>
+ <option ng-repeat="image in axioms.images" ng-selected="machine.imageId == Object.keys(image)">{{ image.name }}</option>
</select>
</fieldset>
diff --git a/client/partials/home/main.html b/client/partials/home/main.html
index 37638d3..f9f8878 100644
--- a/client/partials/home/main.html
+++ b/client/partials/home/main.html
@@ -3,9 +3,10 @@
Home
</div>
<div class="panel-body">
- Main Content
- <button ng-click="raiseShowMachineDetailsEvent()" > Show Machine details</button>
- <div id="test">
- </div>
+
+ Pour charger les machines, recharger la page (temporaire)<br />
+ Selectionner une machine:
+ <div ng-repeat="machine in machines"> <a ng-click="raiseShowMachineDetailsEvent(machine.id)"> {{ machine.name }}</a></div>
+
</div>
</div>
diff --git a/client/partials/loading.html b/client/partials/loading.html
new file mode 100644
index 0000000..c978190
--- /dev/null
+++ b/client/partials/loading.html
@@ -0,0 +1,18 @@
+<div class="modal fade" id="loadingModal" ng-controller="loginCtrl">
+ <div class="modal-dialog">
+ <div class="modal-content"></div>
+ </div>
+ <div class="modal-dialog" style="width:200px;">
+ <div class="modal-content">
+
+ <div class="modal-body" >
+ <div align="center">
+ <img src="images/spin/128x128/Preloader_8.gif" />
+ </div>
+
+
+ </div>
+
+ </div>
+ </div>
+</div>
diff --git a/client/partials/nav.html b/client/partials/nav.html
deleted file mode 100644
index b3ef76a..0000000
--- a/client/partials/nav.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<nav class="navbar navbar-default">
- <div class="container-fluid">
- <!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="#"><b>Status</b></a>
- </div>
-
- <div class="navbar-"></div>
-
- <!-- Collect the nav links, forms, and other content for toggling -->
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-
- <ul class="nav navbar-nav">
- <li class="nav-divider"></li>
- <li><a href="#">User : {{ profile.username }}</a></li>
- <li><a href="#">Project Name : {{ profile.projectname }}</a></li>
-
- <!--<li><a href="#" >Connection : <span ng-bind-html="connection"></span></a></li>-->
-
- </ul>
-
- <ul class="nav navbar-nav navbar-right">
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Account<span class="caret"></span></a>
- <ul class="dropdown-menu">
- <li><a href="#">Informations</a></li>
- <li><a href="#">Settings</a></li>
- <li role="separator" class="divider"></li>
- <li><a href="#" ng-click="raiseLogoutEvent()">Logout</a></li>
- </ul>
- </li>
- </ul>
- </div><!-- /.navbar-collapse -->
- </div><!-- /.container-fluid -->
-</nav>
diff --git a/client/partials/status.html b/client/partials/status.html
new file mode 100644
index 0000000..01b9079
--- /dev/null
+++ b/client/partials/status.html
@@ -0,0 +1,29 @@
+<nav class="navbar navbar-default">
+ <div class="container-fluid">
+ <!-- Brand and toggle get grouped for better mobile display -->
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand"><b>Status</b></a>
+ </div>
+
+ <div class="navbar-"></div>
+
+ <!-- Collect the nav links, forms, and other content for toggling -->
+ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
+ <ul class="nav navbar-nav">
+ <li class="nav-divider"></li>
+ <li><a>User : {{ profile.username }}</a></li>
+ <li><a>Project Name : {{ profile.projectname }}</a></li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+ <li><a ng-click="logout()">Logout</a></li>
+ </ul>
+ </div>
+ </div>
+</nav>
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-16 10:43:34 +0000