Re: [Kimchi-devel] [PATCH] UI: Attach/Replace/Detach a CDROM to/in/from a VM

The API to add/remove/update the cdrom is: # to attach new storage POST /vms/<id>/storages {<data>} # to update a storage PUT /vms/<id>/storages/<dev> {<data>} # to deattach (remove) the storage DELETE /vms/<id>/storages/<dev> # to list all devices GET /vms/<id>/storages # to list all cdrom GET /vms/<id>/storages?type=cdrom As we have different ways to update a VM (PUT /vms/<id> and those I listed above) I'd suggest to display the edit window in tabs: | General | Storages | | ^ | | | Name: | | OS: | | Icon: | And on Storages tabs we list all the cdrom's and allow user to add/remove/update them. What do you think? Because the way you did, there are 2 actions associated with the same button: "PUT /vms/<id>" and "PUT /vms/<id>/storages/<dev>" which caused some problems on my tests Some comments inline below On 02/27/2014 09:35 AM, Hongliang Wang wrote: we are not including the authors per file anymore. > + * 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; > +} > + > +#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..7014577 > --- /dev/null > +++ b/ui/css/theme-default/guest-cdrom-edit.css > @@ -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. > + */ > +#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; > +} > + > +#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-edit.css b/ui/css/theme-default/guest-edit.css > index 79fca83..aff262a 100644 > --- a/ui/css/theme-default/guest-edit.css > +++ b/ui/css/theme-default/guest-edit.css > @@ -20,13 +20,14 @@ > */ > #guest-edit-window { > font-size: 13px; > - height: 380px; > - width: 420px; > + height: 320px; > + width: 1000px; > } > > .guest-edit-fieldset { > float: left; > padding: 1em; > + padding-right: 0; > } > > .guest-edit-wrapper-label, .guest-edit-wrapper-controls { > @@ -40,16 +41,20 @@ > } > > .guest-edit-wrapper-label { > - width: 10em; > + height: 38px; > + line-height: 38px; > + margin-top: 5px; > + vertical-align: top; > + width: 80px; > } > > .guest-edit-wrapper-controls { > - width: 18em; > + width: 392px; > } > > .guest-edit-wrapper-controls input[type="text"] { > + font-size: 16px; > height: 38px; > - line-height: 38px; > background: #fff; > -webkit-border-radius: 5px; > border-radius: 5px; > @@ -57,7 +62,7 @@ > border-top: 1px solid #bbb; > border-left: 1px solid #bbb; > padding-left: 10px; > - width: 100%; > + width: 300px; > } > > .guest-edit-wrapper-controls input[type="text"][disabled] { > @@ -65,3 +70,76 @@ > background-color: #fafafa; > cursor: not-allowed; > } > + > +#guest-edit-cdrom-row-container { > + max-height: 146px; > + overflow: auto; > +} > + > +.guest-edit-cdrom-button { > + background: url("../images/theme-default/guest-icon-sprite.png") no-repeat left top transparent; > + border: none; > + height: 25px; > + vertical-align: middle; > + width: 25px; > +} > + > +.guest-edit-cdrom-button.attach { > + margin-top: 5px; > +} > + > +.guest-edit-cdrom-button.attach:hover { > + background-position: 0 -27px; > +} > + > +.guest-edit-cdrom-button.attach:focus { > + background-position: 0 -54px; > +} > + > +.guest-edit-cdrom-button.attach:active { > + background-position: 0 -81px; > +} > + > +.guest-edit-cdrom-button.attach[disabled] { > + background-position: 0 -108px; > +} > + > +.guest-edit-cdrom-button.replace { > + background-position: -27px 0; > +} > + > +.guest-edit-cdrom-button.replace:hover { > + background-position: -27px -27px; > +} > + > +.guest-edit-cdrom-button.replace:focus { > + background-position: -27px -54px; > +} > + > +.guest-edit-cdrom-button.replace:active { > + background-position: -27px -81px; > +} > + > +.guest-edit-cdrom-button.replace[disabled] { > + background-position: -27px -108px; > +} > + > +.guest-edit-cdrom-button.detach { > + background-position: -54px 0; > +} > + > +.guest-edit-cdrom-button.detach:hover { > + background-position: -54px -27px; > +} > + > +.guest-edit-cdrom-button.detach:focus { > + background-position: -54px -54px; > +} > + > +.guest-edit-cdrom-button.detach:active { > + background-position: -54px -81px; > +} > + > +.guest-edit-cdrom-button.detach[disabled] { > + background-position: -54px -108px; > +} > diff --git a/ui/images/theme-default/guest-icon-sprite.png b/ui/images/theme-default/guest-icon-sprite.png > new file mode 100644 > index 0000000000000000000000000000000000000000..81edb5945d3bd204313a6d53b55cecf17ee97679 > GIT binary patch > literal 6748 > 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 > Bz#9Mn > > literal 0 > HcmV?d00001 > > diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js > index 6433fe0..52ecdd8 100644 > --- a/ui/js/src/kimchi.api.js > +++ b/ui/js/src/kimchi.api.js > @@ -731,5 +731,73 @@ var kimchi = { > success : suc, > error : err > }); > + }, > + > + addVMStorage : function(settings, suc, err) { > + var vm = encodeURIComponent(settings['vm']); > + delete settings['vm']; > + kimchi.requestJSON({ > + url : kimchi.url + 'vms/' + vm + '/storages', > + type : 'POST', > + contentType : 'application/json', > + data : JSON.stringify(settings), > + dataType : 'json', > + success : suc, > + error : err > + }); > + }, > + > + retrieveVMStorage : function(settings, suc, err) { > + var vm = encodeURIComponent(settings['vm']); > + var dev = encodeURIComponent(settings['dev']); > + kimchi.requestJSON({ > + url : kimchi.url + "vms/" + vm + '/storages/' + dev, > + type : 'GET', > + contentType : 'application/json', > + dataType : 'json', > + success: suc, > + error: err > + }); > + }, > + > + replaceVMStorage : function(settings, suc, err) { > + var vm = encodeURIComponent(settings['vm']); > + var dev = encodeURIComponent(settings['dev']); > + kimchi.requestJSON({ > + url : kimchi.url + 'vms/' + vm + '/storages/' + dev, > + type : 'PUT', > + contentType : 'application/json', > + data : JSON.stringify({ > + path: settings['path'] > + }), > + dataType : 'json', > + success : suc, > + error : err > + }); > + }, > + > + deleteVMStorage : function(settings, suc, err) { > + var vm = settings['vm']; > + var dev = settings['dev']; > + kimchi.requestJSON({ > + url : kimchi.url + 'vms/' + encodeURIComponent(vm) + > + '/storages/' + encodeURIComponent(dev), > + type : 'DELETE', > + contentType : 'application/json', > + dataType : 'json', > + success : suc, > + error : err > + }); > + }, > + > + listVMStorages : function(vm, suc, err) { > + kimchi.requestJSON({ > + url : kimchi.url + 'vms/' + encodeURIComponent(vm) + '/storages', > + type : 'GET', > + contentType : 'application/json', > + dataType : 'json', > + success : suc, > + error : err > + }); > } > }; > 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..8b19a57 > --- /dev/null > +++ b/ui/js/src/kimchi.guest_cdrom_add_main.js > @@ -0,0 +1,82 @@ > +/* > + * Project Kimchi > + * > + * Copyright IBM, Corp. 2013 > + * Same I commented above > + * 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['KCHVM6004M']); > + $(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/vmCDROMAdded').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['KCHVM6003M']); > + }); > + > + 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..76ab459 > --- /dev/null > +++ b/ui/js/src/kimchi.guest_cdrom_edit_main.js > @@ -0,0 +1,90 @@ > +/* > + * 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['KCHVM6006M']); > + $(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['KCHVM6005M']); > + }); > + > + 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_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js > index 13ea9d0..1244dd0 100644 > --- a/ui/js/src/kimchi.guest_edit_main.js > +++ b/ui/js/src/kimchi.guest_edit_main.js > @@ -21,14 +21,69 @@ > kimchi.guest_edit_main = function() { > var guestEditForm = $('#form-guest-edit'); > var saveButton = $('#guest-edit-button-save'); > + > + var refreshCDROMs = function() { > + kimchi.listVMStorages(kimchi.selectedGuest, function(storages) { > + var rowHTML = $('#cdrom-row-tmpl').html(); > + var container = $('#guest-edit-cdrom-row-container'); > + $(container).empty(); > + > + $.each(storages, function(index, storage) { > + if(storage['type'] !== 'cdrom') { > + return; > + } > + > + storage['vm'] = kimchi.selectedGuest; > + var templated = kimchi.template(rowHTML, storage); > + container.append(templated); > + }); > + > + $('.replace', container).on('click', function(e) { > + event.preventDefault(); > + kimchi.selectedGuestStorage = $(this).data('dev'); > + kimchi.window.open("guest-cdrom-edit.html"); > + }); > + > + $('.detach', container).on('click', function(e) { > + event.preventDefault(); > + var settings = { > + title : i18n['KCHAPI6004M'], > + content : i18n['KCHVM6002M'], > + confirm : i18n['KCHAPI6002M'], > + cancel : i18n['KCHAPI6003M'] > + }; > + > + var dev = $(this).data('dev'); > + kimchi.confirm(settings, function() { > + kimchi.deleteVMStorage({ > + vm: kimchi.selectedGuest, > + dev: dev > + }, function() { > + refreshCDROMs(); > + }); > + }); > + }); > + }); > + }; > + > kimchi.retrieveVM(kimchi.selectedGuest, function(guest) { > guest['icon'] = guest['icon'] || 'images/icon-vm.png'; > for ( var prop in guest) { > $('input[name="' + prop + '"]', guestEditForm).val(guest[prop]); > } > + > + refreshCDROMs(); > + > + $('#guest-edit-attach-cdrom-button').on('click', function(event) { > + event.preventDefault(); > + kimchi.window.open("guest-cdrom-add.html"); > + }); > + > + kimchi.topic('kimchi/vmCDROMAdded').subscribe(refreshCDROMs); > + kimchi.topic('kimchi/vmCDROMReplaced').subscribe(refreshCDROMs); > }); > > - $('#guest-edit-button-cancel').on('click', function() { > + $('#guest-edit-button-cancel').on('click', function(event) { > kimchi.window.close(); > }); > > @@ -45,6 +100,7 @@ kimchi.guest_edit_main = function() { > }, function(err) { > kimchi.message.error(err.responseJSON.reason); > }); > + > event.preventDefault(); > }; > > diff --git a/ui/pages/guest-cdrom-add.html.tmpl b/ui/pages/guest-cdrom-add.html.tmpl > new file mode 100644 > index 0000000..65663a9 > --- /dev/null > +++ b/ui/pages/guest-cdrom-add.html.tmpl > @@ -0,0 +1,76 @@ > +#* > + * 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" readonly /> > + </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..1af7e7e > --- /dev/null > +++ b/ui/pages/guest-cdrom-edit.html.tmpl > @@ -0,0 +1,76 @@ > +#* > + * 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" readonly /> > + </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" readonly /> > + </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-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl > index 91f780c..dadff21 100644 > --- a/ui/pages/guest-edit.html.tmpl > +++ b/ui/pages/guest-edit.html.tmpl > @@ -86,6 +86,24 @@ > </div> > </div> > </fieldset> > + <fieldset class="guest-edit-fieldset"> > + <div> > + <div class="guest-edit-wrapper-label"> > + <label> > + $_("CDROM") > + </label> > + </div> > + <div class="guest-edit-wrapper-controls"> > + <div id="guest-edit-cdrom-row-container"></div> > + <div> > + <button id="guest-edit-attach-cdrom-button" > + class="guest-edit-cdrom-button attach" > + title="$_("Attach")"> > + </button> > + </div> > + </div> > + </div> > + </fieldset> > </form> > </div> > <footer> > @@ -99,6 +117,22 @@ > </div> > </footer> > </div> > +<script id="cdrom-row-tmpl" type="text/html"> > +<div> > + <input 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> > + <button class="guest-edit-cdrom-button detach" > + data-vm="{vm}" data-dev="{dev}" > + title="$_("Detach")"> > + </button> > +</div> > +</script> > + > <script type="text/javascript"> > kimchi.guest_edit_main(); > </script> > diff --git a/ui/pages/i18n.html.tmpl b/ui/pages/i18n.html.tmpl > index f8af68e..97fc4f4 100644 > --- a/ui/pages/i18n.html.tmpl > +++ b/ui/pages/i18n.html.tmpl > @@ -95,6 +95,11 @@ var i18n = { > 'KCHDR6011M': "$_("Report name should contain only letters, digits and/or hyphen ('-').")", > > 'KCHVM6001M': "$_("This will delete the virtual machine and its virtual disks. This operation cannot be undone. Would you like to continue?")", > + 'KCHVM6002M': "$_("This CDROM will be detached permanently and you can re-attach it. Continue to detach it?")", > + 'KCHVM6003M': "$_("Attach")", > + 'KCHVM6004M': "$_("Attaching...")", > + 'KCHVM6005M': "$_("Replace")", > + 'KCHVM6006M': "$_("Replacing...")", > > 'KCHNET6001E': "$_("The VLAN id must be between 1 and 4094.")", >