[Kimchi-devel] [PATCH 2/4] Download Remote Image UI: Add Corresponding Window
Aline Manera
alinefm at linux.vnet.ibm.com
Thu Sep 11 01:16:24 UTC 2014
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
> + }
> + 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