[Kimchi-devel] [PATCHv4 2/3] UI: Support add guest disk
lvroyce at linux.vnet.ibm.com
lvroyce at linux.vnet.ibm.com
Tue Apr 29 10:11:34 UTC 2014
From: Royce Lv <lvroyce at linux.vnet.ibm.com>
Extend current cdrom disk add to cdrom disk attachment.
Also add 'bus' for user to choose from.
Signed-off-by: Royce Lv <lvroyce at linux.vnet.ibm.com>
---
ui/css/theme-default/guest-storage-add.css | 16 ++++
ui/js/src/kimchi.guest_storage_add.main.js | 137 ++++++++++++++++++++++++-----
ui/pages/guest-storage-add.html.tmpl | 62 +++++++++++--
3 files changed, 188 insertions(+), 27 deletions(-)
diff --git a/ui/css/theme-default/guest-storage-add.css b/ui/css/theme-default/guest-storage-add.css
index 4da8389..e0be9c0 100644
--- a/ui/css/theme-default/guest-storage-add.css
+++ b/ui/css/theme-default/guest-storage-add.css
@@ -52,6 +52,22 @@
cursor: not-allowed;
}
+.guest-storage-add-wrapper-label, .guest-storage-add-wrapper-controls {
+ display: inline-block;
+}
+
+.guest-storage-add-wrapper-label {
+ height: 38px;
+ line-height: 38px;
+ margin-top: 5px;
+ vertical-align: top;
+ width: 80px;
+}
+
+.guest-storage-add-wrapper-controls {
+ width: 470px;
+}
+
#vm-storage-button-add[disabled] {
background: #c0c0c0;
color: #ddd;
diff --git a/ui/js/src/kimchi.guest_storage_add.main.js b/ui/js/src/kimchi.guest_storage_add.main.js
index 9e232d7..6af00cc 100644
--- a/ui/js/src/kimchi.guest_storage_add.main.js
+++ b/ui/js/src/kimchi.guest_storage_add.main.js
@@ -18,43 +18,136 @@
kimchi.guest_storage_add_main = function() {
var types = [{
label: 'cdrom',
- value: 'cdrom'
+ value: 'cdrom',
+ bus: ['ide']
+ },
+ {
+ label: 'disk',
+ value: 'disk',
+ bus: ['virtio', 'ide']
}];
kimchi.select('guest-storage-type-list', types);
+ kimchi.select('guest-storage-bus-list', [{label: 'ide', value: 'ide'}]);
var storageAddForm = $('#form-guest-storage-add');
var submitButton = $('#guest-storage-button-add');
var nameTextbox = $('input[name="dev"]', storageAddForm);
var typeTextbox = $('input[name="type"]', storageAddForm);
+ var busTextbox = $('input[name="bus"]', storageAddForm);
var pathTextbox = $('input[name="path"]', storageAddForm);
+ var poolTextbox = $('input[name="pool"]', storageAddForm);
+ var volTextbox = $('input[name="vol"]', storageAddForm);
- var submitForm = function(event) {
- if(submitButton.prop('disabled')) {
- return false;
+ typeTextbox.change(function() {
+ $('#guest-storage-bus').selectMenu();
+ var pathObject = {'cdrom': ".path-section", 'disk': '.volume-section'}
+ var selectType = $(this).val();
+ $.each(pathObject, function(type, value) {
+ if(selectType == type){
+ $(value).removeClass('hidden');
+ } else {
+ $(value).addClass('hidden');
+ }
+ });
+
+ $.each(types, function(index, elem){
+ if (selectType == elem.value) {
+ var buses = new Array();
+ $.each(elem.bus, function (index, elem) {
+ buses[index] = {label: elem, value: elem};
+ });
+ $('#guest-storage-bus').selectMenu("setData", buses);
+ $('#guest-storage-bus-label').text(buses[0].value);
+ $('#guest-storage-bus-type').val(buses[0].value);
+ }
+ });
+ });
+
+ kimchi.listStoragePools(function(result) {
+ var options = [];
+ if (result && result.length) {
+ $.each(result, function(index, storagePool) {
+ if ((storagePool.state=="active") && (storagePool.type !== 'kimchi-iso')) {
+ options.push({
+ label: storagePool.name,
+ value: storagePool.name
+ });
+ }
+ });
+ $(poolTextbox).val('default');
+ $(poolTextbox).change();
+ kimchi.select('guest-add-storage-pool-list', options);
}
+ });
- var dev = nameTextbox.val();
- var type = typeTextbox.val();
- var path = pathTextbox.val();
- if(!path || path === '') {
+ poolTextbox.change(function() {
+ var options = [];
+ kimchi.listStorageVolumes($(this).val(), function(result) {
+ $('#guest-disk').selectMenu();
+ if (result.length) {
+ $.each(result, function(index, value) {
+ // Only unused volume can be attached
+ if (value.ref_cnt == 0) {
+ options.push({
+ label: value.name,
+ value: value.name
+ });
+ }
+ });
+ if (options.length) {
+ $(volTextbox).val(options[0].value);
+ $(volTextbox).change();
+ }
+ }
+ $('#guest-disk').selectMenu("setData", options);
+ });
+ });
+
+
+ typeTextbox.change(function() {
+ var pathObject = {'cdrom': ".path-section", 'disk': '.volume-section'}
+ var selectType = $(this).val();
+ $.each(pathObject, function(type, value) {
+ if(selectType == type){
+ $(value).removeClass('hidden');
+ } else {
+ $(value).addClass('hidden');
+ }
+ });
+
+ $.each(types, function(index, elem){
+ if (selectType == elem.value) {
+ var buses = new Array();
+ $.each(elem.bus, function (index, elem) {
+ buses[index] = {label: elem, value: elem};
+ });
+ $('#guest-storage-bus').selectMenu("setData", buses);
+ $('#guest-storage-bus-label').text(buses[0].value);
+ }
+ });
+ });
+
+ var submitForm = function(event) {
+ if (submitButton.prop('disabled')) {
return false;
}
var formData = storageAddForm.serializeObject();
- $.each([submitButton, nameTextbox, pathTextbox], function(i, c) {
- $(c).prop('disabled', true);
- });
- $(submitButton).addClass('loading').text(i18n['KCHVMCD6003M']);
-
var settings = {
vm: kimchi.selectedGuest,
- type: type,
- path: path
+ type: typeTextbox.val(),
+ bus: busTextbox.val()
};
- if(dev && dev !== '') {
- settings['dev'] = dev;
- }
+ $(submitButton).prop('disabled', true);
+ $.each([nameTextbox, pathTextbox, poolTextbox, volTextbox], function(i, c) {
+ $(c).prop('disabled', true);
+ val = $(c).val()
+ if (val && val != '') {
+ settings[$(c).attr('name')] = $(c).val();
+ }
+ });
+ $(submitButton).addClass('loading').text(i18n['KCHVMCD6003M']);
kimchi.addVMStorage(settings, function(result) {
kimchi.window.close();
@@ -66,7 +159,7 @@ kimchi.guest_storage_add_main = function() {
result['responseJSON']['reason'];
kimchi.message.error(errText);
- $.each([submitButton, nameTextbox, pathTextbox], function(i, c) {
+ $.each([submitButton, nameTextbox, pathTextbox, poolTextbox, volTextbox], function(i, c) {
$(c).prop('disabled', false);
});
$(submitButton).removeClass('loading').text(i18n['KCHVMCD6002M']);
@@ -77,7 +170,11 @@ kimchi.guest_storage_add_main = function() {
storageAddForm.on('submit', submitForm);
submitButton.on('click', submitForm);
- pathTextbox.on('input propertychange', function(event) {
+ pathTextbox.on('change input propertychange', function(event) {
$(submitButton).prop('disabled', $(this).val() === '');
});
+ volTextbox.on('change propertychange', function (event) {
+ $(submitButton).prop('disabled', $(this).val() === '');
+ });
+
};
diff --git a/ui/pages/guest-storage-add.html.tmpl b/ui/pages/guest-storage-add.html.tmpl
index 71e0610..6574dcf 100644
--- a/ui/pages/guest-storage-add.html.tmpl
+++ b/ui/pages/guest-storage-add.html.tmpl
@@ -41,7 +41,7 @@
<h2>2. $_("Device Type")</h2>
<div class="field">
<p class="text-help">
- $_("The device type. Currently, only \"cdrom\" is supported.")
+ $_("The device type. Currently, \"cdrom\" and \"disk\" are supported.")
</p>
<div class="btn dropdown popable">
<input id="guest-storage-type" name="type" value="cdrom" type="hidden" />
@@ -54,20 +54,68 @@
</div>
</section>
<section class="form-section">
- <h2>3. $_("File Path")</h2>
+ <h2>3. $_("Device Bus")</h2>
<div class="field">
- <p class="text-help">
- $_("The ISO file path in the server for CDROM.")
- </p>
- <input type="text" class="text" name="path" />
+ <div class="btn dropdown popable" id="guest-storage-bus">
+ <input id="guest-storage-bus-type" name="bus" value='ide' type="hidden" />
+ <span class="text" id="guest-storage-bus-label"></span>
+ <span class="arrow"></span>
+ <div class="popover">
+ <ul class="select-list" id="guest-storage-bus-list" data-target="guest-storage-bus-type" data-label="guest-storage-bus-label"></ul>
+ </div>
+ </div>
</div>
</section>
+ <div class="volume-section hidden">
+ <section class="form-section">
+ <h2>4. $_("Storage Pool")</h2>
+ <div class="field storage-field">
+ <p class="text-help">
+ $_("Storage pool which volume located in")
+ </p>
+ <div class="btn dropdown popable">
+ <input value="default" id="guest-disk-pool" name="pool" type="hidden"/>
+ <span class="text" id="guest-disk-pool-label">default</span><span class="arrow"></span>
+ <div class="popover" style="width: 100%">
+ <ul class="select-list" id="guest-add-storage-pool-list" data-target="guest-disk-pool" data-label="guest-disk-pool-label"></ul>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section class="form-section">
+ <h2>5. $_("Storage Volume")</h2>
+ <div class="field storage-field">
+ <p class="text-help">
+ $_("Storage volume to be attached")
+ </p>
+ <div class="btn dropdown popable" id="guest-disk">
+ <input id="guest-disk-vol" name="vol" type="hidden">
+ <span class="text" id="guest-disk-vol-label"></span><span class="arrow"></span>
+ <div class="popover" style="width: 100%">
+ <ul class="select-list" id="guest-add-storage-pool-list" data-target="guest-disk-vol" data-label="guest-disk-vol-label"></ul>
+ </div>
+ </div>
+ </div>
+ </section>
+ </div>
+ <div class="path-section">
+ <section class="form-section">
+ <h2>4. $_("File Path")</h2>
+ <div class="field">
+ <p class="text-help">
+ $_("The ISO file path in the server for CDROM.")
+ </p>
+ <input type="text" class="text" name="path" />
+ </div>
+ </section>
+ </div>
+ </fieldset>
</form>
</div>
<footer>
<div class="btn-group">
<button id="guest-storage-button-add" class="btn-normal" disabled="disabled">
- <span class="text">$_("Attach")</span>
+ <span class="text">$_("Attach")</span>
</button>
</div>
</footer>
--
1.8.3.2
More information about the Kimchi-devel
mailing list