[Kimchi-devel] [PATCH v2 3/4] [UI] Add/Edit CDROM Support

Hongliang Wang hlwang at linux.vnet.ibm.com
Tue Mar 4 09:01:15 UTC 2014


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>
-- 
1.8.1.4




More information about the Kimchi-devel mailing list