[Kimchi-devel] [PATCH 3/3] Enable storage volume upload on UI

[Aline Manera]

Also update the code to request the new upload API.

Signed-off-by: Aline Manera <alinefm at linux.vnet.ibm.com>
---
 ui/js/src/kimchi.api.js                         | 25 ++++++++---
 ui/js/src/kimchi.storagepool_add_volume_main.js | 55 +++++++++++++++++++++----
 ui/pages/storagepool-add-volume.html.tmpl       |  4 +-
 3 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
index 5c36418..9207d7e 100644
--- a/ui/js/src/kimchi.api.js
+++ b/ui/js/src/kimchi.api.js
@@ -1243,14 +1243,29 @@ var kimchi = {
     },
 
     /**
-     * Add a volume to a given storage pool.
+     * Create a new volume with capacity
      */
-    uploadVolumeToSP: function(settings, suc, err) {
-        var fd = settings['formData'];
-        var sp = encodeURIComponent(settings['sp']);
+    createVolumeWithCapacity: function(poolName, settings, suc, err) {
         kimchi.requestJSON({
-            url : 'storagepools/' + sp + '/storagevolumes',
+            url : 'storagepools/' + encodeURIComponent(poolName) + '/storagevolumes',
             type : 'POST',
+            contentType : "application/json",
+            data : JSON.stringify(settings),
+            dataType : "json",
+            success : suc,
+            error : err
+        });
+    },
+
+    /**
+     * Upload volume content
+     */
+    uploadVolumeToSP: function(poolName, volumeName, settings, suc, err) {
+        var url = 'storagepools/' + encodeURIComponent(poolName) + '/storagevolumes/' + encodeURIComponent(volumeName);
+        var fd = settings['formData'];
+        kimchi.requestJSON({
+            url : url,
+            type : 'PUT',
             data : fd,
             processData : false,
             contentType : false,
diff --git a/ui/js/src/kimchi.storagepool_add_volume_main.js b/ui/js/src/kimchi.storagepool_add_volume_main.js
index 590ccde..91c8d94 100644
--- a/ui/js/src/kimchi.storagepool_add_volume_main.js
+++ b/ui/js/src/kimchi.storagepool_add_volume_main.js
@@ -1,7 +1,7 @@
 /*
  * Project Kimchi
  *
- * Copyright IBM, Corp. 2014
+ * Copyright IBM, Corp. 2014-2015
  *
  * Licensed under the Apache License, Version 2.0 (the 'License');
  * you may not use this file except in compliance with the License.
@@ -78,18 +78,59 @@ kimchi.sp_add_volume_main = function() {
         }, onError);
     };
 
+    var trackVolCreation = function(taskid, suc) {
+        var onTaskResponse = function(result) {
+            var taskStatus = result['status'];
+            var taskMsg = result['message'];
+            if (taskStatus == 'running') {
+                if (taskMsg != 'ready for upload') {
+                    setTimeout(function() {
+                        trackVolCreation(taskid, suc);
+                    }, 2000);
+                } else {
+                    suc && suc();
+                }
+            }
+        };
+        kimchi.getTask(taskid, onTaskResponse, onError);
+    };
+
     var uploadFile = function() {
         var blobFile = $(localFileBox)[0].files[0];
+        var fileSize = blobFile.size;
         var fileName = blobFile.name;
-        var fd = new FormData();
-        fd.append('name', fileName);
-        fd.append('file', blobFile);
-        kimchi.uploadVolumeToSP({
-            sp: kimchi.selectedSP,
-            formData: fd
+        var chunkSize = 8 * 1024 * 1024; // 8MB
+        var uploaded = 0;
+
+        var doUpload = function() {
+            var blob = blobFile.slice(uploaded, uploaded + chunkSize);
+            var reader = new FileReader();
+            reader.readAsBinaryString(blob);
+
+            var fd = new FormData();
+            fd.append('chunk', blob);
+            fd.append('chunk_size', blob.size);
+
+            kimchi.uploadVolumeToSP(kimchi.selectedSP, fileName, {
+                formData: fd
+            }, function(result) {
+                if (uploaded < fileSize)
+                    setTimeout(doUpload, 1000);
+            }, onError);
+
+            uploaded += blob.size
+        }
+
+        kimchi.createVolumeWithCapacity(kimchi.selectedSP, {
+            name: fileName,
+            format: '',
+            capacity: fileSize,
+            upload: true
         }, function(result) {
             kimchi.window.close();
             kimchi.topic('kimchi/storageVolumeAdded').publish();
+
+            trackVolCreation(result.id, doUpload, onError);
         }, onError);
     };
 
diff --git a/ui/pages/storagepool-add-volume.html.tmpl b/ui/pages/storagepool-add-volume.html.tmpl
index b5f365f..048f1ed 100644
--- a/ui/pages/storagepool-add-volume.html.tmpl
+++ b/ui/pages/storagepool-add-volume.html.tmpl
@@ -1,7 +1,7 @@
 #*
  * Project Kimchi
  *
- * Copyright IBM, Corp. 2014
+ * Copyright IBM, Corp. 2014-2015
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -47,7 +47,7 @@
                 </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 a file")
                         </label>
-- 
2.1.0