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

Aline Manera alinefm at linux.vnet.ibm.com
Fri May 29 14:23:57 UTC 2015


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 | 96 +++++++++++++++++++++----
 ui/pages/i18n.json.tmpl                         |  2 +
 ui/pages/storagepool-add-volume.html.tmpl       |  4 +-
 4 files changed, 108 insertions(+), 19 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..c56f68c 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.
@@ -79,18 +79,90 @@ kimchi.sp_add_volume_main = function() {
     };
 
     var uploadFile = function() {
+        var chunkSize = 8 * 1024 * 1024; // 8MB
+        var uploaded = 0;
+
         var blobFile = $(localFileBox)[0].files[0];
-        var fileName = blobFile.name;
-        var fd = new FormData();
-        fd.append('name', fileName);
-        fd.append('file', blobFile);
-        kimchi.uploadVolumeToSP({
-            sp: kimchi.selectedSP,
-            formData: fd
-        }, function(result) {
-            kimchi.window.close();
-            kimchi.topic('kimchi/storageVolumeAdded').publish();
-        }, onError);
+
+        var createUploadVol = function() {
+            kimchi.createVolumeWithCapacity(kimchi.selectedSP, {
+                name: blobFile.name,
+                format: '',
+                capacity: blobFile.size,
+                upload: true
+            }, function(result) {
+                kimchi.window.close();
+                trackVolCreation(result.id);
+            }, onError);
+        };
+
+        var uploadRequest = function(blob) {
+            var fd = new FormData();
+            fd.append('chunk', blob);
+            fd.append('chunk_size', blob.size);
+
+            kimchi.uploadVolumeToSP(kimchi.selectedSP, blobFile.name, {
+                formData: fd
+            }, function(result) {
+                if (uploaded < blobFile.size)
+                    setTimeout(doUpload, 500);
+            }, onError);
+
+            uploaded += blob.size
+        };
+
+        // Check file exists and has read permission
+        try {
+            var blob = blobFile.slice(0, 20);
+            var reader = new FileReader();
+            reader.onloadend = function(e) {
+                if (e.loaded == 0)
+                    kimchi.message.error.code('KCHAPI6008E');
+                else
+                    createUploadVol();
+            };
+
+            reader.readAsBinaryString(blob);
+        } catch (err) {
+            kimchi.message.error.code('KCHAPI6008E');
+            return;
+        }
+
+        var doUpload = function() {
+            try {
+                var blob = blobFile.slice(uploaded, uploaded + chunkSize);
+                var reader = new FileReader();
+                reader.onloadend = function(e) {
+                    if (e.loaded == 0)
+                        kimchi.message.error.code('KCHAPI6009E');
+                    else
+                        uploadRequest(blob);
+                };
+
+                reader.readAsBinaryString(blob);
+            } catch (err) {
+                kimchi.message.error.code('KCHAPI6009E');
+                return;
+            }
+        }
+
+        var trackVolCreation = function(taskid) {
+            var onTaskResponse = function(result) {
+                var taskStatus = result['status'];
+                var taskMsg = result['message'];
+                if (taskStatus == 'running') {
+                    if (taskMsg != 'ready for upload') {
+                        setTimeout(function() {
+                            trackVolCreation(taskid);
+                        }, 2000);
+                    } else {
+                        kimchi.topic('kimchi/storageVolumeAdded').publish();
+                        doUpload();
+                    }
+                }
+            };
+            kimchi.getTask(taskid, onTaskResponse, onError);
+        };
     };
 
     $(addButton).on('click', function(event) {
diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
index 675d9a6..f705613 100644
--- a/ui/pages/i18n.json.tmpl
+++ b/ui/pages/i18n.json.tmpl
@@ -39,6 +39,8 @@
     "KCHAPI6004E": "$_("This is not a valid URL.")",
     "KCHAPI6005E": "$_("No such data available.")",
     "KCHAPI6007E": "$_("Can not contact the host system. Verify the host system is up and that you have network connectivity to it. HTTP request response %1. ")",
+    "KCHAPI6008E": "$_("Unable to read file.")",
+    "KCHAPI6009E": "$_("Error while uploading file.")",
 
     "KCHAPI6001M": "$_("Delete Confirmation")",
     "KCHAPI6002M": "$_("OK")",
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




More information about the Kimchi-devel mailing list