Re: [Kimchi-devel] [PATCH v4 4/5] [UI] Add/Edit CDROM Support

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(a)linux.vnet.ibm.com&gt; --- 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>