[Kimchi-devel] [PATCH v3 4/5] [UI] Add/Edit CDROM Support
Hongliang Wang
hlwang at linux.vnet.ibm.com
Wed Mar 5 07:23:57 UTC 2014
In this patch, we introduced 2 features:
1) Add CDROM to VM
2) Edit CDROM in VM
Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
---
ui/css/theme-default/guest-cdrom-add.css | 62 ++++++++++++++++++++++
ui/css/theme-default/guest-cdrom-edit.css | 62 ++++++++++++++++++++++
ui/js/src/kimchi.guest_cdrom_add_main.js | 79 +++++++++++++++++++++++++++
ui/js/src/kimchi.guest_cdrom_edit_main.js | 88 +++++++++++++++++++++++++++++++
ui/pages/guest-cdrom-add.html.tmpl | 73 +++++++++++++++++++++++++
ui/pages/guest-cdrom-edit.html.tmpl | 73 +++++++++++++++++++++++++
6 files changed, 437 insertions(+)
create mode 100644 ui/css/theme-default/guest-cdrom-add.css
create mode 100644 ui/css/theme-default/guest-cdrom-edit.css
create mode 100644 ui/js/src/kimchi.guest_cdrom_add_main.js
create mode 100644 ui/js/src/kimchi.guest_cdrom_edit_main.js
create mode 100644 ui/pages/guest-cdrom-add.html.tmpl
create mode 100644 ui/pages/guest-cdrom-edit.html.tmpl
diff --git a/ui/css/theme-default/guest-cdrom-add.css b/ui/css/theme-default/guest-cdrom-add.css
new file mode 100644
index 0000000..656e328
--- /dev/null
+++ b/ui/css/theme-default/guest-cdrom-add.css
@@ -0,0 +1,62 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013
+ *
+ * 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.
+ */
+#guest-cdrom-add-window {
+ font-size: 13px;
+ height: 600px;
+ width: 700px;
+}
+
+.guest-cdrom-add-fieldset {
+ padding: 1em;
+}
+
+#guest-cdrom-add-window input[type="text"] {
+ font-size: 16px;
+ height: 38px;
+ background: #fff;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ box-shadow: 2px 2px 2px #eee inset;
+ border-top: 1px solid #bbb;
+ border-left: 1px solid #bbb;
+ padding-left: 10px;
+ width: 600px;
+}
+
+#guest-cdrom-add-window input[type="text"][disabled] {
+ color: #bbb;
+ background-color: #fafafa;
+ cursor: not-allowed;
+}
+
+#cdrom-error-message {
+ color: red;
+ padding: 5px;
+}
+
+#vm-cdrom-button-add[disabled] {
+ background: #c0c0c0;
+ color: #ddd;
+ padding-left: 26px;
+}
+
+#vm-cdrom-button-add.loading[disabled] {
+ background: url("../../images/theme-default/loading.gif") 7px center no-repeat #c0c0c0;
+ color: #ddd;
+ padding-left: 26px;
+}
diff --git a/ui/css/theme-default/guest-cdrom-edit.css b/ui/css/theme-default/guest-cdrom-edit.css
new file mode 100644
index 0000000..7008d73
--- /dev/null
+++ b/ui/css/theme-default/guest-cdrom-edit.css
@@ -0,0 +1,62 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013
+ *
+ * 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.
+ */
+#guest-cdrom-edit-window {
+ font-size: 13px;
+ height: 600px;
+ width: 700px;
+}
+
+.guest-cdrom-edit-fieldset {
+ padding: 1em;
+}
+
+#guest-cdrom-edit-window input[type="text"] {
+ font-size: 16px;
+ height: 38px;
+ background: #fff;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ box-shadow: 2px 2px 2px #eee inset;
+ border-top: 1px solid #bbb;
+ border-left: 1px solid #bbb;
+ padding-left: 10px;
+ width: 600px;
+}
+
+#guest-cdrom-edit-window input[type="text"][disabled] {
+ color: #bbb;
+ background-color: #fafafa;
+ cursor: not-allowed;
+}
+
+#cdrom-error-message {
+ color: red;
+ padding: 5px;
+}
+
+#vm-cdrom-button-edit[disabled] {
+ background: #c0c0c0;
+ color: #ddd;
+ padding-left: 26px;
+}
+
+#vm-cdrom-button-edit.loading[disabled] {
+ background: url("../../images/theme-default/loading.gif") 7px center no-repeat #c0c0c0;
+ color: #ddd;
+ padding-left: 26px;
+}
diff --git a/ui/js/src/kimchi.guest_cdrom_add_main.js b/ui/js/src/kimchi.guest_cdrom_add_main.js
new file mode 100644
index 0000000..464c8bf
--- /dev/null
+++ b/ui/js/src/kimchi.guest_cdrom_add_main.js
@@ -0,0 +1,79 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013
+ *
+ * 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.guest_cdrom_add_main = function() {
+ var cdromAddForm = $('#form-vm-cdrom-add');
+ var submitButton = $('#vm-cdrom-button-add');
+ var nameTextbox = $('input[name="dev"]', cdromAddForm);
+ var typeTextbox = $('input[name="type"]', cdromAddForm);
+ var pathTextbox = $('input[name="path"]', cdromAddForm);
+ var errorMessage = $('#cdrom-error-message');
+
+ var submitForm = function(event) {
+ if(submitButton.prop('disabled')) {
+ return false;
+ }
+
+ var dev = nameTextbox.val();
+ var type = typeTextbox.val();
+ var path = pathTextbox.val();
+ if(!path || path === '') {
+ return false;
+ }
+
+ var formData = cdromAddForm.serializeObject();
+ $.each([submitButton, nameTextbox, pathTextbox], function(i, c) {
+ $(c).prop('disabled', true);
+ });
+ $(submitButton).addClass('loading').text(i18n['KCHVMCD6003M']);
+ $(errorMessage).text('');
+
+ var settings = {
+ vm: kimchi.selectedGuest,
+ type: type,
+ path: path
+ };
+
+ if(dev && dev !== '') {
+ settings['dev'] = dev;
+ }
+
+ kimchi.addVMStorage(settings, function(result) {
+ kimchi.window.close();
+ kimchi.topic('kimchi/vmCDROMAttached').publish({
+ result: result
+ });
+ }, function(result) {
+ var errText = result['reason'] ||
+ result['responseJSON']['reason'];
+ $(errorMessage).text(errText);
+
+ $.each([submitButton, nameTextbox, pathTextbox], function(i, c) {
+ $(c).prop('disabled', false);
+ });
+ $(submitButton).removeClass('loading').text(i18n['KCHVMCD6002M']);
+ });
+
+ event.preventDefault();
+ };
+
+ cdromAddForm.on('submit', submitForm);
+ submitButton.on('click', submitForm);
+ pathTextbox.on('input propertychange', function(event) {
+ $(submitButton).prop('disabled', $(this).val() === '');
+ });
+};
diff --git a/ui/js/src/kimchi.guest_cdrom_edit_main.js b/ui/js/src/kimchi.guest_cdrom_edit_main.js
new file mode 100644
index 0000000..bf608bc
--- /dev/null
+++ b/ui/js/src/kimchi.guest_cdrom_edit_main.js
@@ -0,0 +1,88 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013
+ *
+ * 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.guest_cdrom_edit_main = function() {
+ var cdromEditForm = $('#form-vm-cdrom-edit');
+ var submitButton = $('#vm-cdrom-button-edit');
+ var nameTextbox = $('input[name="dev"]', cdromEditForm);
+ var typeTextbox = $('input[name="type"]', cdromEditForm);
+ var pathTextbox = $('input[name="path"]', cdromEditForm);
+ var errorMessage = $('#cdrom-error-message');
+ var originalPath = null;
+
+ kimchi.retrieveVMStorage({
+ vm: kimchi.selectedGuest,
+ dev: kimchi.selectedGuestStorage
+ }, function(storage) {
+ for(var prop in storage) {
+ $('input[name="' + prop + '"]', cdromEditForm).val(storage[prop]);
+ }
+
+ originalPath = storage['path'];
+ });
+
+ var submitForm = function(event) {
+ if(submitButton.prop('disabled')) {
+ return false;
+ }
+
+ var path = pathTextbox.val();
+ if(!path || path === '') {
+ return false;
+ }
+
+ $.each([submitButton, nameTextbox, pathTextbox], function(i, c) {
+ $(c).prop('disabled', true);
+ });
+ $(submitButton).addClass('loading').text(i18n['KCHVMCD6005M']);
+ $(errorMessage).text('');
+
+ var settings = {
+ vm: kimchi.selectedGuest,
+ dev: kimchi.selectedGuestStorage,
+ path: path
+ };
+
+ kimchi.replaceVMStorage(settings, function(result) {
+ kimchi.window.close();
+ kimchi.message.success(i18n['KCHVMCD6007M']);
+ kimchi.topic('kimchi/vmCDROMReplaced').publish({
+ result: result
+ });
+ }, function(result) {
+ var errText = result['reason'] ||
+ result['responseJSON']['reason'];
+ $(errorMessage).text(errText);
+
+ $.each([submitButton, nameTextbox, pathTextbox], function(i, c) {
+ $(c).prop('disabled', false);
+ });
+ $(submitButton).removeClass('loading').text(i18n['KCHVMCD6004M']);
+ });
+
+ event.preventDefault();
+ };
+
+ cdromEditForm.on('submit', submitForm);
+ submitButton.on('click', submitForm);
+ pathTextbox.on('input propertychange', function(event) {
+ var invalid =
+ ($(this).val() === originalPath) ||
+ ($(this).val() === '');
+ $(submitButton).prop('disabled', invalid);
+ });
+};
diff --git a/ui/pages/guest-cdrom-add.html.tmpl b/ui/pages/guest-cdrom-add.html.tmpl
new file mode 100644
index 0000000..59df474
--- /dev/null
+++ b/ui/pages/guest-cdrom-add.html.tmpl
@@ -0,0 +1,73 @@
+#*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013
+ *
+ * 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="guest-cdrom-add-window" class="window">
+ <header>
+ <h1 class="title">$_("Attach a CDROM to VM")</h1>
+ <div class="close">X</div>
+ </header>
+ <div class="content">
+ <form id="form-vm-cdrom-add">
+ <section class="form-section">
+ <h2>1. $_("Device Name")</h2>
+ <div class="field">
+ <p class="text-help">
+ $_("The name used to identify the CDROM. If omitted, a name will be chosen automatically.")
+ </p>
+ <input type="text" class="text" name="dev" />
+ </div>
+ </section>
+ <section class="form-section">
+ <h2>2. $_("Device Type")</h2>
+ <div class="field">
+ <p class="text-help">
+ $_("The device type. Currently, only \"cdrom\" is supported.")
+ </p>
+ <input type="text" class="text" name="type" value="cdrom" disabled="disabled" />
+ </div>
+ </section>
+ <section class="form-section">
+ <h2>3. $_("ISO File Path")</h2>
+ <div class="field">
+ <p class="text-help">
+ $_("The ISO file path in the server.")
+ </p>
+ <input type="text" class="text" name="path" />
+ </div>
+ </section>
+ <section class="form-section">
+ <div id="cdrom-error-message"></div>
+ </section>
+ </form>
+ </div>
+ <footer>
+ <div class="btn-group">
+ <button id="vm-cdrom-button-add" class="btn-normal" disabled="disabled">
+ <span class="text">$_("Attach")</span>
+ </button>
+ </div>
+ </footer>
+</div>
+<script type="text/javascript">
+ kimchi.guest_cdrom_add_main();
+</script>
diff --git a/ui/pages/guest-cdrom-edit.html.tmpl b/ui/pages/guest-cdrom-edit.html.tmpl
new file mode 100644
index 0000000..9f07d9f
--- /dev/null
+++ b/ui/pages/guest-cdrom-edit.html.tmpl
@@ -0,0 +1,73 @@
+#*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013
+ *
+ * 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="guest-cdrom-edit-window" class="window">
+ <header>
+ <h1 class="title">$_("Replace a CDROM of VM")</h1>
+ <div class="close">X</div>
+ </header>
+ <div class="content">
+ <form id="form-vm-cdrom-edit">
+ <section class="form-section">
+ <h2>1. $_("Device Name")</h2>
+ <div class="field">
+ <p class="text-help">
+ $_("The name used to identify the CDROM. Read-only.")
+ </p>
+ <input type="text" class="text" name="dev" disabled="disabled" />
+ </div>
+ </section>
+ <section class="form-section">
+ <h2>2. $_("Device Type")</h2>
+ <div class="field">
+ <p class="text-help">
+ $_("The device type. Currently, only \"cdrom\" is supported.")
+ </p>
+ <input type="text" class="text" name="type" value="cdrom" disabled="disabled" />
+ </div>
+ </section>
+ <section class="form-section">
+ <h2>3. $_("ISO File Path")</h2>
+ <div class="field">
+ <p class="text-help">
+ $_("The ISO file path in the server.")
+ </p>
+ <input type="text" class="text" name="path" />
+ </div>
+ </section>
+ <section class="form-section">
+ <div id="cdrom-error-message"></div>
+ </section>
+ </form>
+ </div>
+ <footer>
+ <div class="btn-group">
+ <button id="vm-cdrom-button-edit" class="btn-normal" disabled="disabled">
+ <span class="text">$_("Replace")</span>
+ </button>
+ </div>
+ </footer>
+</div>
+<script type="text/javascript">
+ kimchi.guest_cdrom_edit_main();
+</script>
--
1.8.1.4
More information about the Kimchi-devel
mailing list