[Kimchi-devel] [PATCHv2] [Kimchi] Add UI netboot support for adding templates; add loading icon when switching back to image src

Socorro Stoppler socorro at linux.vnet.ibm.com
Mon Jun 20 22:09:07 UTC 2016


v2:
Add loading icon when switching back to image src radio button
per feedback from pvital

v1:
Add UI netboot support for adding templates

Signed-off-by: Socorro Stoppler <socorro at linux.vnet.ibm.com>
---
 ui/js/src/kimchi.template_add_main.js | 74 ++++++++++++++++++++++++++++++++---
 ui/pages/template-add.html.tmpl       | 29 +++++++++-----
 2 files changed, 89 insertions(+), 14 deletions(-)

diff --git a/ui/js/src/kimchi.template_add_main.js b/ui/js/src/kimchi.template_add_main.js
index 948f710..28057a7 100644
--- a/ui/js/src/kimchi.template_add_main.js
+++ b/ui/js/src/kimchi.template_add_main.js
@@ -17,6 +17,7 @@
  */
 kimchi.template_add_main = function() {
     "use strict";
+    var currentPage = 'iso-local-box';
     $('#loading-isos').removeClass('hidden');
     kimchi.deepScanHandler = null;
     var isos = [];
@@ -53,6 +54,7 @@ kimchi.template_add_main = function() {
         $('#local-iso-field').hide();
         $('#select-all-local-iso').prop('checked', false);
         $('#btn-template-local-iso-create').attr('disabled', 'disabled');
+        $('#btn-template-netboot-create').attr('disabled', 'disabled');
         $('#iso-search').hide();
         $('#iso-more').hide();
         $('#iso-search-loading').hide();
@@ -64,6 +66,7 @@ kimchi.template_add_main = function() {
         $('#iso-url').val(''); // 4 - Remote folder path text
         $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 1 - Folder path
         $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
+        $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot
         $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes
         $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes
     };
@@ -98,6 +101,7 @@ kimchi.template_add_main = function() {
         $('#iso-url').val('');
         $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'inline-block');
         $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
+        $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot
         $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes
         $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes
     };
@@ -116,6 +120,7 @@ kimchi.template_add_main = function() {
         } else {
             $('#btn-template-file-create').attr('disabled', 'disabled');
         }
+        $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot
     });
 
     initLocalIsoField();
@@ -222,12 +227,11 @@ kimchi.template_add_main = function() {
             $('#iso-file').parent().removeClass('has-error');
 
             $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path
-
             $('#btn-template-local-iso-create').removeAttr('disabled').css('display', 'inline-block'); // 2 - Selected ISOs
-
         } else {
             $('#btn-template-local-iso-create').attr('disabled', 'disabled');
         }
+        $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot
     });
 
     $('#list-local-iso').on('click', '[type="checkbox"]', function() {
@@ -238,6 +242,7 @@ kimchi.template_add_main = function() {
 
         $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path
         $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'inline-block'); // 2 - Selected ISOs
+        $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot
 
         if (checkedLength) {
             $('#btn-template-local-iso-create').removeAttr('disabled');
@@ -250,6 +255,16 @@ kimchi.template_add_main = function() {
         }
     });
 
+    $('#btn-template-netboot-create').click(function() {
+        var data = {
+            "source_media": {"type": "netboot"}
+        };
+        addTemplate(data, function() {
+            $('#btn-template-netboot-create').text(i18n['KCHAPI6005M']);
+            $('#btn-template-netboot-create').prop('disabled', false);
+        });
+    });
+
     $('#btn-template-local-iso-create').click(function() {
         $('input', '#iso-file-box').prop('disabled', true);
         $('#btn-template-local-iso-create').text(i18n['KCHAPI6008M']);
@@ -299,11 +314,9 @@ kimchi.template_add_main = function() {
         $('#iso-url').val('');
 
         $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path
-
         $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
-
+        $('#btn-template-netboot-create').attr('disabled', 'disabled').css('display', 'none'); // 3 - Netboot
         $('#select-all-local-iso, #select-all-remote-iso').prop('checked', false); // False to all select-all checkboxes
-
         $('#list-local-iso [type="checkbox"], #list-remote-iso [type="checkbox"]').prop('checked', false); // False to all list checkboxes
 
     };
@@ -340,6 +353,57 @@ kimchi.template_add_main = function() {
             $('input#iso-url').parent().toggleClass('has-error', !isValid);
         }, 0);
     });
+
+    $('#image-src').change(function() {
+        if (this.checked) {
+            if (currentPage === 'netboot-path') {
+                kimchi.switchPage(currentPage, 'iso-local-box', 'right');
+            }
+            currentPage = 'iso-local-box';
+            $('#template-add-window .modal-body .template-pager').animate({
+                height: "635px"
+            }, 400);
+            initLocalIsoField();
+            initIsoFileField();
+            $('#loading-isos').removeClass('hidden');
+            kimchi.listIsos(function(local_isos) { //local ISOs
+                kimchi.listDistros(function(remote_isos) {  //remote ISOs
+
+                    isos = local_isos.concat(remote_isos); //all isos
+                    if (isos && isos.length) {
+                        showLocalIsoField(isos);
+                        $('#iso-more').show();
+                    } else {
+                        $('#iso-search').show();
+                    }
+                    $('#loading-isos').fadeOut(100, function() {});
+                });
+            }, function(err) {
+                wok.message.error(err.responseJSON.reason, '#local-iso-error-container');
+                $('#loading-isos').fadeOut(300, function() {
+                    $('#loading-isos').addClass('hidden');
+                });
+            });
+            setupFilters();
+            enabledRemoteIso();
+        }
+    });
+
+    $('#netboot-src').change(function() {
+        if (this.checked) {
+            if (currentPage === 'iso-local-box') {
+                kimchi.switchPage(currentPage, 'netboot-path', 'left');
+            }
+            currentPage = 'netboot-path';
+            $('#template-add-window .modal-body .template-pager').animate({
+                height: "300px"
+            }, 400);
+            $('#btn-template-file-create').attr('disabled', 'disabled').css('display', 'none'); // 1 - Folder path
+            $('#btn-template-local-iso-create').attr('disabled', 'disabled').css('display', 'none'); // 2 - Selected ISOs
+            $('#btn-template-netboot-create').removeAttr('disabled').css('display', 'inline-block'); // 3 - Netboot
+        }
+    });
+
     //do create
     var addTemplate = function(data, callback) {
         kimchi.createTemplate(data, function() {
diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
index 4226a8f..87d6cb4 100644
--- a/ui/pages/template-add.html.tmpl
+++ b/ui/pages/template-add.html.tmpl
@@ -30,11 +30,18 @@
             <div class="modal-body">
                 <div class="template-modal-container">
                     <div id="alert-modal-container"></div>
+                    <div>
+                        <h5>$_("Where is the source media for this template? ")</h5>
+                        <input type="radio" checked="checked" name="iso-source" id="image-src" value="image-src" class="wok-radio">
+                        <label for="image-src">$_("Image Template")</label>
+                        <input type="radio" name="iso-source" id="netboot-src" value="netboot-src" class="wok-radio">
+                        <label for="netboot-src">$_("Netboot Template")</label>
+                    </div>
                 </div>
                 <div class="template-pager">
                     <div class="page-list">
                         <div class="page" id="iso-local-box">
-                            <div id="loading-isos">
+                            <div id="loading-isos hidden">
                                 <div class="wok-mask-loader-container">
                                     <div class="wok-mask-loading">
                                         <div class="wok-mask-loading-icon"></div>
@@ -103,16 +110,20 @@
                                     </div>
                                 </div>
                         </div>
-        </div>
-    </div>
-    <div class="modal-footer">
-                <button class="btn btn-default" id="btn-template-file-create" disabled="disabled">$_("Create")</button>
-                <button class="btn btn-default" id="btn-template-local-iso-create" disabled="disabled">$_("Create")</button>
-                <button class="btn btn-default" data-dismiss="modal" type="button">$_("Cancel")</button>
-    </div>
-</div>
+                        <div class="page" id="netboot-path">
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-default" id="btn-template-file-create" disabled="disabled">$_("Create")</button>
+                    <button class="btn btn-default" id="btn-template-local-iso-create" disabled="disabled">$_("Create")</button>
+                    <button class="btn btn-default" id="btn-template-netboot-create" disabled="disabled">$_("Create")</button>
+                    <button class="btn btn-default" data-dismiss="modal" type="button">$_("Cancel")</button>
+                </div>
+            </div>
 <script>
 kimchi.template_add_main();
 </script>
+</div>
 </body>
 </html>
-- 
2.5.0




More information about the Kimchi-devel mailing list