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
Download patch file Download diff file Expand all files Collapse all files

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>

80
client/partials/home/machineDetails.html
View file

@ -11,56 +11,56 @@
</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">{{ machine.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>
<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">{{ machine.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>
</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">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>
<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>
</form>
</div>
</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>