[Kimchi-devel] [PATCH v2 4/4] Storage Pool Add Volume UI: Connect the Feature in Storage Tab

Connect download/upload volume window with storage pool add button. Signed-off-by: Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/storage.css | 31 ++++++++++- ui/js/src/kimchi.storage_main.js | 116 ++++++++++++++++++++++++++++++++++++--- ui/pages/tabs/storage.html.tmpl | 12 +++- 3 files changed, 149 insertions(+), 10 deletions(-) diff --git a/ui/css/theme-default/storage.css b/ui/css/theme-default/storage.css index f635c2f..e0ab290 100644 --- a/ui/css/theme-default/storage.css +++ b/ui/css/theme-default/storage.css @@ -336,7 +336,6 @@ float: left; padding: 4px; margin-bottom: 5px; - height: 40px; width: 130px; } @@ -622,3 +621,33 @@ #iSCSITarget input { width: 493px; } + +/* Progress bar */ +.volume-progress { + clear: both; + width: 140px; +} + +.volume-progress .progress-bar-outer { + background: #ccc; + height: 4px; + overflow: hidden; + width: 100%; +} + +.volume-progress .progress-bar-inner { + background: #090; + height: 100%; + width: 0%; +} + +.volume-progress .progress-label { + color: #999; + font-size: 10px; + line-height: 16px; +} + +.volume-progress .progress-transferred { + float: right; +} +/* End of Progress bar */ diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js index ae3f963..6c1aade 100644 --- a/ui/js/src/kimchi.storage_main.js +++ b/ui/js/src/kimchi.storage_main.js @@ -79,6 +79,19 @@ kimchi.storageBindClick = function() { } }); + $('.pool-add-volume').each(function(index) { + var canAddVolume = + $(this).data('stat') === 'active' && + $(this).data('type') !== 'iscsi' && + $(this).data('type') !== 'scsi'; + if(canAddVolume) { + $(this).removeClass('hidden'); + } + else { + $(this).addClass('hidden'); + } + }); + if(kimchi.tabMode['storage'] === 'admin') { $('.pool-delete').on('click', function(event) { var $pool = $(this); @@ -135,6 +148,12 @@ kimchi.storageBindClick = function() { } }); + $('.pool-add-volume').on('click', function(event) { + var poolName = $(this).data('name'); + kimchi.selectedSP = poolName; + kimchi.window.open('storagepool-add-volume.html'); + }); + $('.storage-action').on('click', function() { var storage_action = $(this); var deleteButton = storage_action.find('.pool-delete'); @@ -149,10 +168,6 @@ kimchi.storageBindClick = function() { $("#logicalPoolExtend").dialog("option", "poolName", $(this).data('name')); $("#logicalPoolExtend").dialog("open"); }); - - $('#volume-doAdd').on('click', function() { - kimchi.window.open('storagevolume-add.html'); - }); } $('.storage-li').on('click', function(event) { @@ -173,8 +188,24 @@ kimchi.storageBindClick = function() { }); } +kimchi._generateVolumeHTML = function(volume) { + if(volume['type'] === 'kimchi-iso') { + return ''; + } + var volumeHtml = $('#volumeTmpl').html(); + volume.capacity = kimchi.changetoProperUnit(volume.capacity,1); + volume.allocation = kimchi.changetoProperUnit(volume.allocation,1); + return kimchi.substitute(volumeHtml, volume); +}; + +kimchi._updateVolumeBoxUI = function(box, volume) { + var html = kimchi._generateVolumeHTML(volume); + $(box).replaceWith(html); +}; + kimchi.doListVolumes = function(poolObj) { var volumeDiv = $('#volume' + poolObj.data('name')); + $(volumeDiv).empty(); var slide = poolObj.next('.volumes'); var handleArrow = poolObj.children().last().children(); kimchi.listStorageVolumes(poolObj.data('name'), function(result) { @@ -184,9 +215,7 @@ kimchi.doListVolumes = function(poolObj) { var listHtml = ''; $.each(result, function(index, value) { value.poolname = poolObj.data('name'); - value.capacity = kimchi.changetoProperUnit(value.capacity,1); - value.allocation = kimchi.changetoProperUnit(value.allocation,1); - listHtml += kimchi.substitute(volumeHtml, value); + listHtml += kimchi._generateVolumeHTML(value); }); volumeDiv.html(listHtml); } else { @@ -255,7 +284,78 @@ kimchi.storage_main = function() { } kimchi.doListStoragePools(); kimchi.initLogicalPoolExtend(); -} + + kimchi.topic('kimchi/allVolumeTasksFinished').subscribe(function(data) { + var sp = data['sp']; + var poolNode = $('.storage-li[data-name="' + sp + '"]'); + kimchi.doListVolumes(poolNode); + }); + + kimchi.topic('kimchi/volumeTransferStarted').subscribe(function(data) { + var sp = data['sp'], + type = data['type'], + volumeName = data['volume']; + var volumesContainer = $('#volume' + sp); + var volume = { + poolName: sp, + ref_cnt: 0, + capacity: 0, + name: volumeName, + format: '', + bootable: true, + os_distro: '', + allocation: 0, + os_version: '', + path: '', + type: 'file' + }; + if($('.volume-box', volumesContainer).length === 0) { + volumesContainer.empty(); + } + volumesContainer.prepend(kimchi._generateVolumeHTML(volume)); + var volumeBox = $('#volume' + sp + ' [data-volume-name="' + volumeName + '"]'); + $('.volume-progress', volumeBox).removeClass('hidden'); + $('.progress-status', volumeBox).text( + type === 'download' ? i18n['KCHPOOL6014M'] : i18n['KCHPOOL6017M'] + ); + }); + + kimchi.topic('kimchi/volumeTransferProgress').subscribe(function(data) { + var sp = data['sp'], + type = data['type'], + volumeName = data['volume'], + size = data['size'], + percent = data['percent']; + volumeBox = $('#volume' + sp + ' [data-volume-name="' + volumeName + '"]'); + $('.progress-bar-inner', volumeBox).css({ + width: percent + '%' + }); + $('.progress-status', volumeBox).text( + type === 'download' ? i18n['KCHPOOL6014M'] : i18n['KCHPOOL6017M'] + ); + $('.progress-transferred', volumeBox).text(size); + $('.volume-progress', volumeBox).removeClass('hidden'); + }); + + kimchi.topic('kimchi/volumeTransferFinished').subscribe(function(data) { + var sp = data['sp'], + volumeName = data['volume'], + volumeBox = $('#volume' + sp + ' [data-volume-name="' + volumeName + '"]'); + $('.volume-progress', volumeBox).addClass('hidden'); + kimchi.getStoragePoolVolume(sp, volumeName, function(volume) { + kimchi._updateVolumeBoxUI(volumeBox, volume); + }, function(err) { + kimchi.message.error(err.responseJSON.reason); + }); + }); + + kimchi.topic('kimchi/volumeTransferError').subscribe(function(data) { + var sp = data['sp'], + volumeName = data['volume'], + volumeBox = $('#volume' + sp + ' [data-volume-name="' + volumeName + '"]'); + $('.progress-status', volumeBox).text(i18n['KCHPOOL6016M']); + }); +}; kimchi.changeArrow = function(obj) { if ($(obj).hasClass('arrow-down')) { diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl index 87205bd..523f480 100644 --- a/ui/pages/tabs/storage.html.tmpl +++ b/ui/pages/tabs/storage.html.tmpl @@ -82,6 +82,7 @@ <div class="popover actionsheet right-side" style="width: 250px"> <button class="button-big pool-deactivate" data-stat="{state}" data-name="{name}" data-persistent="{persistent}"><span class="text">$_("Deactivate")</span></button> <button class="button-big pool-activate" data-stat="{state}" data-name="{name}"><span class="text">$_("Activate")</span></button> + <button class="button-big pool-add-volume" data-stat="{state}" data-name="{name}" data-type="{type}"><span class="text">$_("Add Volume")</span></button> <button class="button-big pool-extend {enableExt}" data-stat="{state}" data-name="{name}"><span class="text">$_("Extend")</span></button> <button class="button-big red pool-delete" data-stat="{state}" data-name="{name}"><span class="text">$_("Undefine")</span></button> </div> @@ -98,11 +99,20 @@ </li> </script> <script id="volumeTmpl" type="html/text"> - <div class="volume-box white-box"> + <div class="volume-box white-box" data-volume-name="{name}"> <div class="storage-icon volume-default icon-{format} "> </div> <div class="volume-title"> <div class="volume-name" title="{name}">{name}</div> + <div class="volume-progress hidden"> + <div class="progress-bar-outer"> + <div class="progress-bar-inner"></div> + </div> + <div class="progress-label"> + <span class="progress-status"></span> + <span class="progress-transferred"></span> + </div> + </div> </div> <div class="volume-setting"> </div> -- 1.8.1.4