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

On 09/10/2014 09:02 AM, Hongliang Wang wrote: > 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; Can't you use eval() instead of splitting the string into 2 values

> + } > + 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>