[Kimchi-devel] [PATCH v2 3/4] [UI] Add/Edit CDROM Support
Adam King
rak at linux.vnet.ibm.com
Wed Mar 5 00:37:57 UTC 2014
Reviewed-by: Adam King <rak at linux.vnet.ibm.com>
Tested-by: Adam King <rak at linux.vnet.ibm.com>
Code works as intended. See comments to patch 0 for thoughts on the UI
itself
On 03/04/2014 04:01 AM, 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();
> + $.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>
--
Adam King <rak at linux.vnet.ibm.com>
IBM CSI
More information about the Kimchi-devel
mailing list