[Kimchi-devel] [PATCH 2/4] Download Remote Image UI: Add Corresponding Window

Implemented add volume window. Signed-off-by: Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/storagepool-add-volume.css | 36 ++++++++ ui/js/src/kimchi.storagepool_add_volume_main.js | 110 ++++++++++++++++++++++++ ui/pages/storagepool-add-volume.html.tmpl | 80 +++++++++++++++++ 3 files changed, 226 insertions(+) create mode 100644 ui/css/theme-default/storagepool-add-volume.css create mode 100644 ui/js/src/kimchi.storagepool_add_volume_main.js create mode 100644 ui/pages/storagepool-add-volume.html.tmpl diff --git a/ui/css/theme-default/storagepool-add-volume.css b/ui/css/theme-default/storagepool-add-volume.css new file mode 100644 index 0000000..6e8a551 --- /dev/null +++ b/ui/css/theme-default/storagepool-add-volume.css @@ -0,0 +1,36 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2014 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +#sp-add-volume-window { + height: 400px; + width: 500px; +} + +#sp-add-volume-window .textbox-wrapper input[type="text"] { + box-sizing: border-box; + width: 100%; +} + +#sp-add-volume-window .textbox-wrapper label { + vertical-align: middle; +} + +#sp-add-volume-window input[type="text"][disabled] { + color: #bbb; + background-color: #fafafa; + cursor: not-allowed; +} diff --git a/ui/js/src/kimchi.storagepool_add_volume_main.js b/ui/js/src/kimchi.storagepool_add_volume_main.js new file mode 100644 index 0000000..52d08a2 --- /dev/null +++ b/ui/js/src/kimchi.storagepool_add_volume_main.js @@ -0,0 +1,110 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 2014 + * + * Licensed under the Apache License, Version 2.0 (the 'License'); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an 'AS IS' BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +kimchi.sp_add_volume_main = function() { + // download from remote server or upload from local file + var type = 'download'; + + var addButton = $('#sp-add-volume-button'); + + $('input.volume-type').change(function(e) { + $('.volume-input').prop('disabled', true); + $('.volume-input.' + this.value).prop('disabled', false); + type = this.value; + }); + + var onError = function(result) { + if (result['message']) { + var errText = result['message']; + } + else { + var errText = result['responseJSON']['reason']; + } + result && kimchi.message.error(errText); + var volumeName = result['target_uri'].split('/').pop(); + kimchi.topic('kimchi/volumeDownloadError').publish({ + sp: kimchi.selectedSP, + volume: volumeName + }); + }; + + var extractProgressData = function(data) { + var sizeArray = data.split('/'); + var downloaded = sizeArray[0]; + var percent = 0; + if(isNaN(downloaded)) { + downloaded = 0; + } + else { + var total = sizeArray[1]; + percent = downloaded / total * 100; + } + var formatted = kimchi.formatMeasurement(downloaded); + var size = formatted['v'].toFixed(1) + formatted['s']; + return { + size: size, + percent: percent + }; + }; + + var fetchRemoteFile = function() { + var volumeURL = $('#volume-remote-url').val(); + var volumeName = volumeURL.split(/(\\|\/)/g).pop(); + kimchi.downloadVolumeToSP({ + sp: kimchi.selectedSP, + name: volumeName, + url: volumeURL + }, function(resp) { + var taskID = resp['id']; + kimchi.window.close(); + kimchi.topic('kimchi/volumeDownloadStarted').publish({ + sp: kimchi.selectedSP, + volume: volumeName + }); + + kimchi.makeTaskTrackFunc(taskID)(function(result) { + var progress = extractProgressData(resp['message']); + var volumeName = result['target_uri'].split('/').pop(); + kimchi.topic('kimchi/volumeDownloadFinished').publish($.extend(progress, { + sp: kimchi.selectedSP, + volume: volumeName + })); + }, onError, onProgress); + }, onError); + }; + + var onProgress = function(resp) { + var progress = extractProgressData(resp['message']); + var volumeName = resp['target_uri'].split('/').pop(); + kimchi.topic('kimchi/volumeDownloadProgress').publish($.extend(progress, { + sp: kimchi.selectedSP, + volume: volumeName + })); + + }; + + $(addButton).on('click', function(event) { + $(this).prop('disabled', true); + if(type === 'download') { + fetchRemoteFile(); + } + else { + // uploadFile(); + } + event.preventDefault(); + }); +}; diff --git a/ui/pages/storagepool-add-volume.html.tmpl b/ui/pages/storagepool-add-volume.html.tmpl new file mode 100644 index 0000000..148a17b --- /dev/null +++ b/ui/pages/storagepool-add-volume.html.tmpl @@ -0,0 +1,80 @@ +#* + * Project Kimchi + * + * Copyright IBM, Corp. 2014 + * + * Authors: + * Hongliang Wang <hlwang(a)linux.vnet.ibm.com&gt; + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + *# +#unicode UTF-8 +#import gettext +#from kimchi.cachebust import href +#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang) +#silent _ = t.gettext +#silent _t = t.gettext +<div id="sp-add-volume-window" class="window"> + <form id="form-sp-add-volume"> + <header class="window-header"> + <h1 class="title">$_("Add a Volume to Storage Pool")</h1> + <div class="close">X</div> + </header> + <section> + <div class="content"> + <div class="form-section"> + <h2> + <input type="radio" id="volume-type-download" class="volume-type" name="volumeType" value="download" checked="checked" /> + <label for="volume-type-download"> + $_("Fetch from remote URL") + </label> + </h2> + <div class="field"> + <p class="text-help"> + $_("Enter the remote URL here.") + </p> + <div class="textbox-wrapper"> + <input type="text" id="volume-remote-url" class="text volume-input download" name="volumeRemoteURL" /> + </div> + </div> + </div> + <div class="form-section"> + <h2> + <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 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" /> + </div> + </div> + </div> + </div> + </section> + <footer> + <div class="btn-group"> + <button type="submit" id="sp-add-volume-button" class="btn-normal"> + <span class="text">$_("OK")</span> + </button> + </div> + </footer> + </form> +</div> +<script type="text/javascript"> + kimchi.sp_add_volume_main(); +</script> -- 1.8.1.4