[Kimchi-devel] [PATCH v2 4/4] Storage Pool Add Volume UI: Connect the Feature in Storage Tab
Hongliang Wang
hlwang at linux.vnet.ibm.com
Mon Sep 15 08:23:27 UTC 2014
On 09/12/2014 11:33 PM, Aline Manera wrote:
>
> 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 at linux.vnet.ibm.com>
>> ---
>> 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.
OK.
>
>> +
>> 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>
>
More information about the Kimchi-devel
mailing list