[Kimchi-devel] [PATCH 2/4] Download Remote Image UI: Add Corresponding Window
Hongliang Wang
hlwang at linux.vnet.ibm.com
Wed Sep 10 12:02:34 UTC 2014
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;
+ }
+ 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>
--
1.8.1.4
More information about the Kimchi-devel
mailing list