[Kimchi-devel] [PATCH 3/5] Storage Pool Add Volume UI: Implement Download/Upload Volume Function
Aline Manera
alinefm at linux.vnet.ibm.com
Tue Sep 16 17:08:11 UTC 2014
On 09/16/2014 06:57 AM, Hongliang Wang wrote:
>
> On 09/16/2014 05:28 AM, Aline Manera wrote:
>> From: Hongliang Wang <hlwang at linux.vnet.ibm.com>
>>
>> Implemented download and upload volumes functions.
>>
>> Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
>> Signed-off-by: Aline Manera <alinefm at linux.vnet.ibm.com>
>
>> ---
>> ui/css/theme-default/storagepool-add-volume.css | 36 ++++++++
>> ui/js/src/kimchi.storagepool_add_volume_main.js | 107
>> ++++++++++++++++++++++++
>> ui/pages/storagepool-add-volume.html.tmpl | 80
>> ++++++++++++++++++
>> 3 files changed, 223 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..590ccde
>> --- /dev/null
>> +++ b/ui/js/src/kimchi.storagepool_add_volume_main.js
>> @@ -0,0 +1,107 @@
>> +/*
>> + * 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');
>> + var remoteURLBox = $('#volume-remote-url');
>> + var localFileBox = $('#volume-input-file');
>> + var typeRadios = $('input.volume-type');
>> +
>> + var isValidURL = function() {
>> + var url = $(remoteURLBox).val();
>> + return kimchi.template_check_url(url);
>> + };
>> +
>> + var isValidFile = function() {
>> + var fileName = $(localFileBox).val();
>> + return fileName.length > 0;
>> + };
>> +
>> + $(typeRadios).change(function(event) {
>> + $('.volume-input').prop('disabled', true);
>> + $('.volume-input.' + this.value).prop('disabled', false);
>> + type = this.value;
>> + if(type == 'download') {
>> + $(addButton).prop('disabled', !isValidURL());
>> + }
>> + else {
>> + $(addButton).prop('disabled', !isValidFile());
>> + }
>> + });
>> +
>> + $(remoteURLBox).on('input propertychange', function(event) {
>> + $(addButton).prop('disabled', !isValidURL());
>> + });
>> +
>> + $(localFileBox).on('change', function(event) {
>> + $(addButton).prop('disabled', !isValidFile());
>> + });
>> +
>> + var onError = function(result) {
>> + $(this).prop('disabled', false);
>> + $(typeRadios).prop('disabled', false);
>> + if(!result) {
>> + return;
>> + }
>> + var msg = result['message'] || (
>> + result['responseJSON'] && result['responseJSON']['reason']
>> + );
>> + kimchi.message.error(msg);
>> + };
>> +
>> + var fetchRemoteFile = function() {
>> + var volumeURL = remoteURLBox.val();
>> + var volumeName = volumeURL.split(/(\\|\/)/g).pop();
>> + kimchi.downloadVolumeToSP({
>> + sp: kimchi.selectedSP,
>> + url: volumeURL
>> + }, function(result) {
>> + kimchi.window.close();
>> + kimchi.topic('kimchi/storageVolumeAdded').publish();
>> + }, onError);
>> + };
>> +
>> + var uploadFile = function() {
>> + 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);
>> + };
>> +
>> + $(addButton).on('click', function(event) {
>> + $(this).prop('disabled', true);
>> + $(typeRadios).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..b01c942
>> --- /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>
> Sorry I forgot to remove author line.
No problem. I will remove it before applying.
>> + *
>> + * 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 ISO file (with .iso
>> suffix) 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" disabled="disabled">
>> + <span class="text">$_("Add")</span>
>> + </button>
>> + </div>
>> + </footer>
>> + </form>
>> +</div>
>> +<script type="text/javascript">
>> + kimchi.sp_add_volume_main();
>> +</script>
>
More information about the Kimchi-devel
mailing list