[Kimchi-devel] [PATCH 2/4] Download Remote Image UI: Add Corresponding Window
Hongliang Wang
hlwang at linux.vnet.ibm.com
Thu Sep 11 07:37:24 UTC 2014
On 09/11/2014 09:16 AM, Aline Manera wrote:
>
> On 09/10/2014 09:02 AM, Hongliang Wang wrote:
>> Implemented add volume window.
>>
>> Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
>> ---
>> 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
1. eval() is supposed not to be abused due to security and performance.
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval)
2. We need 2 parts: downloaded size, and total size. When
eval('1024/2048') we'll get only the percentage without total size
information. I'll use regular expression to make here clearer.
>
>> + }
>> + 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 at linux.vnet.ibm.com>
>> + *
>> + * 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>
>
More information about the Kimchi-devel
mailing list