[Kimchi-devel] [PATCH] Issue#343 & #353: Improve&Correct UI Init Logic Flow

[Hongliang Wang]

Fixed the 2 issues:
1) When refreshing (F5) a plugin tab, default tab will be redirected then;
2) tabs.xml is requested twice.

Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
---
 ui/js/src/kimchi.main.js | 127 +++++++++++++++++++++++++++--------------------
 1 file changed, 72 insertions(+), 55 deletions(-)

diff --git a/ui/js/src/kimchi.main.js b/ui/js/src/kimchi.main.js
index aac7e28..9b0acbf 100644
--- a/ui/js/src/kimchi.main.js
+++ b/ui/js/src/kimchi.main.js
@@ -16,10 +16,75 @@
  * limitations under the License.
  */
 kimchi.main = function() {
-    var tabUrl = "/config/ui/tabs.xml";
-    var DEFAULT_HASH = kimchi.getDefaultPage(tabUrl);
     kimchi.popable();
 
+    var genTabs = function(tabs) {
+        var tabsHtml = [];
+        $(tabs).each(function(i, tab) {
+            var title = tab['title'];
+            var path = tab['path'];
+            tabsHtml.push(
+                '<li>',
+                    '<a class="item" href="', path, '">',
+                        title,
+                    '</a>',
+                '</li>'
+            );
+        });
+        return tabsHtml.join('');
+    };
+
+    var parseTabs = function(xmlData) {
+        var tabs = [];
+        $(xmlData).find('tab').each(function() {
+            var $tab = $(this);
+            var titleKey = $tab.find('title').text();
+            var title = i18n[titleKey];
+            var path = $tab.find('path').text();
+            tabs.push({
+                title: title,
+                path: path
+            });
+        });
+
+        return tabs;
+    };
+
+    var retrieveTabs = function(url) {
+        var tabs;
+        $.ajax({
+            url : url,
+            async : false,
+            success : function(xmlData) {
+                tabs = parseTabs(xmlData);
+            }
+        });
+        return tabs;
+    };
+
+    var tabConfigUrl = '/config/ui/tabs.xml';
+    var pluginConfigUrl = '/plugins/{plugin}/ui/config/tab-ext.xml';
+    var DEFAULT_HASH;
+    var buildTabs = function(callback) {
+        var tabs = retrieveTabs(tabConfigUrl);
+        kimchi.listPlugins(function(plugins) {
+            $(plugins).each(function(i, p) {
+                var url = kimchi.template(pluginConfigUrl, {
+                    plugin: p
+                });
+                tabs.concat(retrieveTabs(url));
+            });
+
+            var firstTabPath = tabs[0] && tabs[0]['path'];
+            DEFAULT_HASH = firstTabPath &&
+                firstTabPath.substring(0, firstTabPath.length - 5);
+
+            $('#nav-menu').append(genTabs(tabs));
+
+            callback && callback();
+        });
+    };
+
     var onLanguageChanged = function(lang) {
         kimchi.lang.set(lang);
         location.reload();
@@ -132,8 +197,6 @@ kimchi.main = function() {
         });
 
         // Perform logging out via Ajax request.
-
-
         $('#btn-logout').on('click', function() {
             kimchi.logout(function() {
                 updatePage();
@@ -145,9 +208,7 @@ kimchi.main = function() {
         $('#btn-help').on('click', kimchi.getHelp);
     };
 
-    // Load i18n translation strings first and then render the page.
-    $('#main').load('i18n.html', function() {
-        kimchi.addTabs(tabUrl);
+    var initUI = function() {
         $(document).bind('ajaxError', function(event, jqXHR, ajaxSettings, errorThrown) {
             if (!ajaxSettings['kimchi']) {
                 return;
@@ -175,56 +236,12 @@ kimchi.main = function() {
         kimchi.user.showUser(true);
         initListeners();
         updatePage();
-    });
-};
-
-kimchi.addTabs = function(url) {
-    var tabsHtml = kimchi.getTabHtml(url);
-    $('#nav-menu').prepend(tabsHtml);
-    kimchi.addExtTabs();
-};
-
-kimchi.addExtTabs = function() {
-    kimchi.listPlugins(function(results) {
-        for ( var i = 0; i < results.length; i++) {
-            var tabsHtml = kimchi.getTabHtml("/plugins/" + results[i] + "/ui/config/tab-ext.xml");
-            $('#nav-menu').append(tabsHtml);
-        }
-    });
-};
-
-kimchi.getDefaultPage = function(url) {
-    var defautLocation = "";
-    $.ajax({
-        url : url,
-        async : false,
-        success : function(xmlData) {
-            var tab = $(xmlData).find('tab').first();
-            var path = tab.find('path').text();
-            if (path) {
-                defautLocation = path.substring(0, path.length - 5);
-            }
-        }
-    });
-    return defautLocation;
-};
+    };
 
-kimchi.getTabHtml = function(url) {
-    var tabsHtml = "";
-    $.ajax({
-        url : url,
-        async : false,
-        success : function(xmlData) {
-            $(xmlData).find('tab').each(function() {
-                var $tab = $(this);
-                var titleKey = $tab.find('title').text();
-                var title = i18n[titleKey];
-                var path = $tab.find('path').text();
-                tabsHtml += "<li><a class='item' href=" + path + ">" + title + "</a></li>";
-            });
-        }
+    // Load i18n translation strings first and then render the page.
+    $('#main').load('i18n.html', function() {
+        buildTabs(initUI);
     });
-    return tabsHtml;
 };
 
 kimchi.getHelp = function(e) {
-- 
1.8.1.4