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

Add machine creation overlay

Browse source
This commit is contained in:
Loic GUEGAN 2016-05-04 18:50:28 +02:00
parent f4f2f50f21
commit f819bc0c90
6 changed files with 356 additions and 255 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/index.html
View file

@ -24,6 +24,7 @@
<!-- Overlay -->
<div ng-include="'./partials/login.html'"></div>
<div ng-include="'./partials/home/machineDetails.html'"></div>
<div ng-include="'./partials/home/machineCreation.html'"></div>
<div ng-include="'./partials/loading.html'"></div>
<div ng-include="'./partials/image/upload.html'"></div>
<div ng-include="'./partials/image/edit.html'"></div>
@ -93,6 +94,7 @@
<script src="./js/controllers/status.js"></script>
<script src="./js/controllers/home/home.js"></script>
<script src="./js/controllers/home/machineDetails.js"></script>
<script src="./js/controllers/home/machineCreation.js"></script>
<script src="./js/controllers/network/network.js"></script>
<script src="./js/controllers/image/image.js"></script>
<script src="./js/controllers/image/upload.js"></script>

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

@ -31,6 +31,11 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I
tryToRetrieveData();
});
$scope.raiseShowMachineCreationEvent = function (){
$rootScope.$broadcast("showMachineCreationEvent");
};
// Function to call from view to display the details of a machine
$scope.raiseShowMachineDetailsEvent = function (id) {
@ -195,7 +200,9 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I
function makeElement(vm) {
var label = vm[0];
var maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length;
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

16
client/js/controllers/home/machineCreation.js Normal file
View file

@ -0,0 +1,16 @@
/**
* The home controller
*
* @param {$scope} $scope The $scope service from angular
*/
mainApp.controller('machineCreationCtrl', ['$scope', 'Compute', '$rootScope', '$timeout', 'Identity', function ($scope, Compute, $rootScope, $timeout, Identity)
{
$scope.name = "loic"
// When we need to show details of machine
$scope.$on('showMachineCreationEvent', function (eventName) {
$('#machineCreationModal').modal({backdrop: false, keyboard: true});
});
}]);

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

@ -9,6 +9,12 @@
<div class="col-md-12">
<div id="graphHolder"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-default" ng-click="raiseShowMachineCreationEvent()">Create machine</button>
</div>
</div>
</div>
</div>

70
client/partials/home/machineCreation.html Normal file
View file

@ -0,0 +1,70 @@
<div class="modal" id="machineCreationModal" ng-controller="machineCreationCtrl" >
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>-->
<h4 class="modal-title">Create Machine</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Name</label>
<div class="col-sm-10">
<p class="form-control-static">{{ name}}</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">State</label>
<div class="col-sm-10">
<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.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>
</div>
<fieldset class="form-group">
<label class="control-label col-sm-2">RAM</label>
<select class="col-sm-20" id="ramSelected">
<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 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 ng-repeat="image in axioms.images" ng-selected="machine.imageId == Object.keys(image)">{{ image.name}}</option>
</select>
</fieldset>
</form>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-primary">Apply</a>
<a href="#" data-dismiss="modal" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>