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

On 09/12/2014 06:42 AM, Hongliang Wang wrote: > 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'); > + } > + }); It is not working for me. I needed to change to .show() and .hide() to get it working as planned.

> + > 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>