[Kimchi-devel] [PATCH v2 3/4] [UI] Add/Edit CDROM Support
Hongliang Wang
hlwang at linux.vnet.ibm.com
Wed Mar 5 09:30:23 UTC 2014
On 03/05/2014 05:09 PM, Sheldon wrote:
> Just a minor comment below
>
> On 03/04/2014 05:01 PM, Hongliang Wang wrote:
>> In this patch, we introduced Add CDROM to VM Window and Edit CDROM
>> in VM Window.
>>
>> 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 | 87
>> +++++++++++++++++++++++++++++++
>> ui/pages/guest-cdrom-add.html.tmpl | 73
>> ++++++++++++++++++++++++++
>> ui/pages/guest-cdrom-edit.html.tmpl | 73
>> ++++++++++++++++++++++++++
>> 6 files changed, 436 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..2751993
>> --- /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();
> seems formData is unused.
ACK.
>> + $.each([submitButton, nameTextbox, pathTextbox], function(i,
>> c) {
>> + $(c).prop('disabled', true);
>> + });
>> + $(submitButton).addClass('loading').text(i18n['KCHVM6005M']);
>> + $(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['KCHVM6004M']);
>> + });
>> +
>> + 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..5cb6829
>> --- /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['KCHVM6007M']);
>> + $(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['KCHVM6006M']);
>> + });
>> +
>> + 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>
>
>
More information about the Kimchi-devel
mailing list