[Kimchi-devel] [PATCH v4 4/5] [UI] Add/Edit CDROM Support
Hongliang Wang
hlwang at linux.vnet.ibm.com
Mon Mar 10 09:44:07 UTC 2014
In this patch, we introduced 3 features:
1) Attach a CDROM to VM
2) Replace a CDROM in running VM
3) Replace a CDROM in stopped VM
Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
---
ui/css/theme-default/guest-cdrom-edit.css | 62 +++++++++++++++++++++
ui/css/theme-default/guest-media.css | 42 +++++++++++++++
ui/css/theme-default/guest-storage-add.css | 70 ++++++++++++++++++++++++
ui/js/src/kimchi.guest_cdrom_edit_main.js | 87 ++++++++++++++++++++++++++++++
ui/js/src/kimchi.guest_media_main.js | 59 ++++++++++++++++++++
ui/js/src/kimchi.guest_storage_add.main.js | 85 +++++++++++++++++++++++++++++
ui/pages/guest-cdrom-edit.html.tmpl | 73 +++++++++++++++++++++++++
ui/pages/guest-media.html.tmpl | 60 +++++++++++++++++++++
ui/pages/guest-storage-add.html.tmpl | 80 +++++++++++++++++++++++++++
9 files changed, 618 insertions(+)
create mode 100644 ui/css/theme-default/guest-cdrom-edit.css
create mode 100644 ui/css/theme-default/guest-media.css
create mode 100644 ui/css/theme-default/guest-storage-add.css
create mode 100644 ui/js/src/kimchi.guest_cdrom_edit_main.js
create mode 100644 ui/js/src/kimchi.guest_media_main.js
create mode 100644 ui/js/src/kimchi.guest_storage_add.main.js
create mode 100644 ui/pages/guest-cdrom-edit.html.tmpl
create mode 100644 ui/pages/guest-media.html.tmpl
create mode 100644 ui/pages/guest-storage-add.html.tmpl
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/css/theme-default/guest-media.css b/ui/css/theme-default/guest-media.css
new file mode 100644
index 0000000..3aee8ca
--- /dev/null
+++ b/ui/css/theme-default/guest-media.css
@@ -0,0 +1,42 @@
+/*
+ * 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-media-window {
+ font-size: 14px;
+ height: 320px;
+ width: 570px;
+}
+
+#form-guest-media {
+ padding: 1em;
+}
+
+#guest-media-window .guest-media-fieldset {
+ padding-right: 0;
+}
+
+#form-guest-media .guest-edit-wrapper-label {
+ width: 30px;
+}
+
+#form-guest-media .guest-edit-wrapper-controls {
+ width: 480px;
+}
+
+#form-guest-media .guest-edit-cdrom-row-container input[type="text"] {
+ width: 437px;
+}
diff --git a/ui/css/theme-default/guest-storage-add.css b/ui/css/theme-default/guest-storage-add.css
new file mode 100644
index 0000000..c8c31a2
--- /dev/null
+++ b/ui/css/theme-default/guest-storage-add.css
@@ -0,0 +1,70 @@
+/*
+ * 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-storage-add-window {
+ font-size: 13px;
+ height: 600px;
+ width: 700px;
+}
+
+.guest-storage-add-fieldset {
+ padding: 1em;
+}
+
+#guest-storage-add-window .btn {
+ width: 587px;
+}
+
+#form-guest-storage-add .form-section .field {
+ overflow: visible;
+}
+
+#guest-storage-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-storage-add-window input[type="text"][disabled] {
+ color: #bbb;
+ background-color: #fafafa;
+ cursor: not-allowed;
+}
+
+#storage-error-message {
+ color: red;
+ padding: 5px;
+}
+
+#vm-storage-button-add[disabled] {
+ background: #c0c0c0;
+ color: #ddd;
+ padding-left: 26px;
+}
+
+#vm-storage-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/js/src/kimchi.guest_cdrom_edit_main.js b/ui/js/src/kimchi.guest_cdrom_edit_main.js
new file mode 100644
index 0000000..45fc80c
--- /dev/null
+++ b/ui/js/src/kimchi.guest_cdrom_edit_main.js
@@ -0,0 +1,87 @@
+/*
+ * 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.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/js/src/kimchi.guest_media_main.js b/ui/js/src/kimchi.guest_media_main.js
new file mode 100644
index 0000000..1669646
--- /dev/null
+++ b/ui/js/src/kimchi.guest_media_main.js
@@ -0,0 +1,59 @@
+/*
+ * 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_media_main = function() {
+
+ var refreshCDROMs = function() {
+ kimchi.listVMStorages({
+ vm: kimchi.selectedGuest,
+ storageType: 'cdrom'
+ }, function(storages) {
+ var rowHTML = $('#cdrom-row-tmpl').html();
+ var container = $('#guest-edit-cdrom-row-container');
+ $(container).empty();
+
+ $.each(storages, function(index, storage) {
+ storage['vm'] = kimchi.selectedGuest;
+ var templated = kimchi.template(rowHTML, storage);
+ container.append(templated);
+ });
+
+ var replaceCDROM = function(event) {
+ event.preventDefault();
+ kimchi.selectedGuestStorage = $(this).data('dev');
+ kimchi.window.open("guest-cdrom-edit.html");
+ };
+
+ $('input[type="text"][name="cdrom"]', container).on('click', replaceCDROM);
+ $('.replace', container).on('click', replaceCDROM);
+ });
+ };
+
+ refreshCDROMs();
+
+ var messageNode = $('#message-container');
+ var onReplaced = function(params) {
+ $(messageNode).empty();
+ kimchi.message.success(i18n['KCHVMCD6007M'], messageNode);
+ refreshCDROMs();
+ };
+ kimchi.topic('kimchi/vmCDROMReplaced').subscribe(onReplaced);
+
+ kimchi.clearGuestMedia = function() {
+ kimchi.topic('kimchi/vmCDROMReplaced').unsubscribe(onReplaced);
+ };
+};
diff --git a/ui/js/src/kimchi.guest_storage_add.main.js b/ui/js/src/kimchi.guest_storage_add.main.js
new file mode 100644
index 0000000..7c96e3a
--- /dev/null
+++ b/ui/js/src/kimchi.guest_storage_add.main.js
@@ -0,0 +1,85 @@
+/*
+ * 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_storage_add_main = function() {
+ var types = [{
+ label: 'cdrom',
+ value: 'cdrom'
+ }];
+ kimchi.select('guest-storage-type-list', types);
+
+ var storageAddForm = $('#form-guest-storage-add');
+ var submitButton = $('#guest-storage-button-add');
+ var nameTextbox = $('input[name="dev"]', storageAddForm);
+ var typeTextbox = $('input[name="type"]', storageAddForm);
+ var pathTextbox = $('input[name="path"]', storageAddForm);
+ var errorMessage = $('#storage-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 = storageAddForm.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();
+ };
+
+ storageAddForm.on('submit', submitForm);
+ submitButton.on('click', submitForm);
+ pathTextbox.on('input propertychange', function(event) {
+ $(submitButton).prop('disabled', $(this).val() === '');
+ });
+};
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>
diff --git a/ui/pages/guest-media.html.tmpl b/ui/pages/guest-media.html.tmpl
new file mode 100644
index 0000000..eb12d72
--- /dev/null
+++ b/ui/pages/guest-media.html.tmpl
@@ -0,0 +1,60 @@
+#*
+ * 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
+#silent t = gettext.translation($lang.domain, $lang.localedir, languages=$lang.lang)
+#silent _ = t.gettext
+#silent _t = t.gettext
+
+<div id="guest-media-window" class="window">
+ <header>
+ <h1 class="title">$_("Manage Media")</h1>
+ <div class="close">X</div>
+ </header>
+ <div class="content">
+ <form id="form-guest-media">
+ <fieldset
+ id="guest-edit-cdrom-row-container"
+ class="guest-edit-fieldset guest-edit-cdrom-row-container">
+ </fieldset>
+ </form>
+ </div>
+ <footer>
+ <div id="message-container"></div>
+ </footer>
+</div>
+<script id="cdrom-row-tmpl" type="text/html">
+ <div>
+ <div class="guest-edit-wrapper-label">
+ <label for="cdrom-{dev}">{dev}</label>
+ </div>
+ <div class="guest-edit-wrapper-controls">
+ <input id="cdrom-{dev}" name="cdrom" type="text"
+ data-vm="{vm}" data-dev="{dev}"
+ value="{path}" readonly="readonly" />
+ <button class="guest-edit-cdrom-button replace"
+ data-vm="{vm}" data-dev="{dev}"
+ title="$_("Replace")">
+ </button>
+ </div>
+ </div>
+</script>
+
+<script type="text/javascript">
+ kimchi.guest_media_main();
+</script>
diff --git a/ui/pages/guest-storage-add.html.tmpl b/ui/pages/guest-storage-add.html.tmpl
new file mode 100644
index 0000000..c190d0e
--- /dev/null
+++ b/ui/pages/guest-storage-add.html.tmpl
@@ -0,0 +1,80 @@
+#*
+ * 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-storage-add-window" class="window">
+ <header>
+ <h1 class="title">$_("Add a Storage Device to VM")</h1>
+ <div class="close">X</div>
+ </header>
+ <div class="content">
+ <form id="form-guest-storage-add">
+ <section class="form-section">
+ <h2>1. $_("Device Name")</h2>
+ <div class="field">
+ <p class="text-help">
+ $_("The name used to identify the device. 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>
+ <div class="btn dropdown popable">
+ <input id="guest-storage-type" name="type" value="cdrom" type="hidden" />
+ <span class="text" id="guest-storage-type-label"></span>
+ <span class="arrow"></span>
+ <div class="popover">
+ <ul class="select-list" id="guest-storage-type-list" data-target="guest-storage-type" data-label="guest-storage-type-label"></ul>
+ </div>
+ </div>
+ </div>
+ </section>
+ <section class="form-section">
+ <h2>3. $_("File Path")</h2>
+ <div class="field">
+ <p class="text-help">
+ $_("The ISO file path in the server for CDROM.")
+ </p>
+ <input type="text" class="text" name="path" />
+ </div>
+ </section>
+ <section class="form-section">
+ <div id="storage-error-message"></div>
+ </section>
+ </form>
+ </div>
+ <footer>
+ <div class="btn-group">
+ <button id="guest-storage-button-add" class="btn-normal" disabled="disabled">
+ <span class="text">$_("Attach")</span>
+ </button>
+ </div>
+ </footer>
+</div>
+<script type="text/javascript">
+ kimchi.guest_storage_add_main();
+</script>
--
1.8.1.4
More information about the Kimchi-devel
mailing list