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

Aline Manera alinefm at linux.vnet.ibm.com
Mon Mar 10 17:25:28 UTC 2014


Reviewed-by: Aline Manera <alinefm at linux.vnet.ibm.com>

On 03/10/2014 06:44 AM, Hongliang Wang wrote:
> 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 at linux.vnet.ibm.com>
> ---
>   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>




More information about the Kimchi-devel mailing list