[Kimchi-devel] [PATCH] Enable storage volume upload

[Aline Manera]

This patch enables storage volume upload and close the upload dialog
right before send the POST request.
It is needed to improve the user usability as the POST request takes around
5 minutes to be sent for an ISO ~1G.
So before send the POST request, the upload file name is saved in a
cookie according to its pool to be used later to update the UI.
When listing the storage volumes, the cookie will be read to retrieve
those storage volumes and create a fake entry on UI (in a similar way we
did for on going tasks).
That way the POST request will be sent in background and do not block
user on the Storage tab.

Signed-off-by: Aline Manera <alinefm at linux.vnet.ibm.com>
---
 ui/js/src/kimchi.storage_main.js                | 40 +++++++++++++++++--------
 ui/js/src/kimchi.storagepool_add_volume_main.js | 20 ++++++++++++-
 ui/pages/storagepool-add-volume.html.tmpl       |  4 +--
 3 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js
index 9a45b65..1659351 100644
--- a/ui/js/src/kimchi.storage_main.js
+++ b/ui/js/src/kimchi.storage_main.js
@@ -233,21 +233,29 @@ kimchi.doListVolumes = function(poolObj) {
         var listHtml = '';
         var ongoingVolumes = [];
         var ongoingVolumesMap = getOngoingVolumes();
+        var volume = {
+            poolName: poolName,
+            ref_cnt: 0,
+            capacity: 0,
+            format: '',
+            bootable: null,
+            os_distro: '',
+            allocation: 0,
+            os_version: '',
+            path: '',
+            type: 'file'
+        };
+
+        onholdVolumes = JSON.parse(kimchi.cookie.get('uploadVolumes') || '{}')
+        onholdVolumes = onholdVolumes[poolName] || []
+        $.each(onholdVolumes, function(index) {
+            volume.name = onholdVolumes[index]
+            listHtml += kimchi._generateVolumeHTML(volume);
+        });
+
         $.each(ongoingVolumesMap, function(volumeName, task) {
             ongoingVolumes.push(volumeName)
-            var volume = {
-                poolName: poolName,
-                ref_cnt: 0,
-                capacity: 0,
-                name: volumeName,
-                format: '',
-                bootable: null,
-                os_distro: '',
-                allocation: 0,
-                os_version: '',
-                path: '',
-                type: 'file'
-            };
+            volume.name = volumeName
             listHtml += kimchi._generateVolumeHTML(volume);
         });
 
@@ -264,6 +272,12 @@ kimchi.doListVolumes = function(poolObj) {
             volumeDiv.html("<div class='pool-empty'>" + i18n['KCHPOOL6002M'] + "</div>");
         }
 
+        $.each(onholdVolumes, function(index) {
+            volumeBox = $('#volume' + poolName + ' [data-volume-name="' + onholdVolumes[index] + '"]');
+            $('.volume-progress', volumeBox).removeClass('hidden');
+            $('.progress-status', volumeBox).text(i18n['KCHPOOL6014M']);
+        });
+
         $.each(ongoingVolumesMap, function(volumeName, task) {
             kimchi.topic('kimchi/volumeTransferProgress').publish(task);
         });
diff --git a/ui/js/src/kimchi.storagepool_add_volume_main.js b/ui/js/src/kimchi.storagepool_add_volume_main.js
index 590ccde..73877a2 100644
--- a/ui/js/src/kimchi.storagepool_add_volume_main.js
+++ b/ui/js/src/kimchi.storagepool_add_volume_main.js
@@ -84,11 +84,29 @@ kimchi.sp_add_volume_main = function() {
         var fd = new FormData();
         fd.append('name', fileName);
         fd.append('file', blobFile);
+
+
+        volName = $('#volume-input-file').val()
+        uploadVolumes = JSON.parse(kimchi.cookie.get('uploadVolumes') || '{}');
+        vols = uploadVolumes[kimchi.selectedSP] || [];
+        vols.push(volName);
+        uploadVolumes[kimchi.selectedSP] = vols;
+        kimchi.cookie.set('uploadVolumes', JSON.stringify(uploadVolumes));
+
+        kimchi.topic('kimchi/storageVolumeAdded').publish();
+        kimchi.window.close();
+
         kimchi.uploadVolumeToSP({
             sp: kimchi.selectedSP,
             formData: fd
         }, function(result) {
-            kimchi.window.close();
+            uploadVolumes = JSON.parse(kimchi.cookie.get('uploadVolumes') || '{}');
+            vols = uploadVolumes[kimchi.selectedSP] || [];
+            vols = jQuery.grep(vols, function(name) {
+                return name !== volName;
+            });
+            uploadVolumes[kimchi.selectedSP] = vols;
+            kimchi.cookie.set('uploadVolumes', JSON.stringify(uploadVolumes));
             kimchi.topic('kimchi/storageVolumeAdded').publish();
         }, onError);
     };
diff --git a/ui/pages/storagepool-add-volume.html.tmpl b/ui/pages/storagepool-add-volume.html.tmpl
index 573a764..0927948 100644
--- a/ui/pages/storagepool-add-volume.html.tmpl
+++ b/ui/pages/storagepool-add-volume.html.tmpl
@@ -47,14 +47,14 @@
                 </div>
                 <div class="form-section">
                     <h2>
-                        <input type="radio" id="volume-type-upload" class="volume-type" name="volumeType" value="upload" disabled/>
+                        <input type="radio" id="volume-type-upload" class="volume-type" name="volumeType" value="upload"/>
                         <label for="volume-type-upload">
                         $_("Upload an file")
                         </label>
                     </h2>
                     <div class="field">
                         <p class="text-help">
-                            $_("Choose the ISO file (with .iso suffix) you want to upload.")
+                            $_("Choose the file you want to upload.")
                         </p>
                         <div class="textbox-wrapper">
                             <input type="file" class="volume-input upload" id="volume-input-file" name="volumeLocalFile" disabled="disabled" />
-- 
1.9.3