do lazy load if page contains too many namespaces(>10)

apollo-portal/src/main/resources/static/config.html

@@ -214,7 +214,8 @@
                        pre-delete-item="preDeleteItem"
                        show-text="showText"
                        show-no-modify-permission-dialog="showNoModifyPermissionDialog"
-                       show-body="namespaces.length == 1"
+                       show-body="namespaces.length < 3"
+                       lazy-load="namespaces.length > 10"
                        pre-create-branch="preCreateBranch"
                        pre-delete-branch="preDeleteBranch">
         </apollonspanel>

apollo-portal/src/main/resources/static/scripts/controller/config/ConfigBaseInfoController.js

@@ -116,7 +116,7 @@ function ConfigBaseInfoController($rootScope, $scope, $window, $location, toastr
     $scope.findMissingNamespaces = function () {
         $scope.missingNamespaces = [];
         // only check missing private namespaces when app exists in current env
-        if ($scope.missEnvs.indexOf($rootScope.pageContext.env) === -1) {
+        if ($rootScope.pageContext.env && $scope.missEnvs.indexOf($rootScope.pageContext.env) === -1) {
           AppService.find_missing_namespaces($rootScope.pageContext.appId, $rootScope.pageContext.env,
               $rootScope.pageContext.clusterName).then(function (result) {
                   $scope.missingNamespaces = AppUtil.collectData(result);

apollo-portal/src/main/resources/static/scripts/controller/config/ConfigNamespaceController.js

@@ -130,6 +130,7 @@ function controller($rootScope, $scope, toastr, AppUtil, EventManager, ConfigSer
                     if (namespace.baseInfo.namespaceName == result.baseInfo.namespaceName) {
                         $scope.namespaces[index] = result;
                         $scope.namespaces[index].showNamespaceBody = true;
+                        $scope.namespaces[index].initialized = true;
                     }
                 });
 

apollo-portal/src/main/resources/static/scripts/directive/namespace-panel-directive.js

@@ -22,7 +22,8 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
             preCreateBranch: '=',
             preDeleteBranch: '=',
             showMergeAndPublishGrayTips: '=',
-            showBody: "=?"
+            showBody: "=?",
+            lazyLoad: "=?"
         },
         link: function (scope) {
 
@@ -43,6 +44,7 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
 
             var operate_branch_storage_key = 'OperateBranch';
 
+            scope.init = init;
             scope.switchView = switchView;
             scope.toggleItemSearchInput = toggleItemSearchInput;
             scope.searchItems = searchItems;
@@ -75,18 +77,34 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
                                          subscriberId, scope.namespace.baseInfo.namespaceName);
             });
 
-            init();
+            preInit(scope.namespace);
 
-            function init() {
+            if (!scope.lazyLoad || scope.namespace.initialized) {
+                init(false);
+            }
+
+            function preInit(namespace) {
+                scope.showNamespaceBody = false;
+                namespace.isLinkedNamespace =
+                    namespace.isPublic ? namespace.parentAppId != namespace.baseInfo.appId : false;
+                //namespace view name hide suffix
+                namespace.viewName = namespace.baseInfo.namespaceName.replace(".xml", "").replace(
+                            ".properties", "").replace(".json", "").replace(".yml", "")
+                            .replace(".yaml", "");
+            }
+
+            function init(forceShowBody) {
                 initNamespace(scope.namespace);
                 initOther();
+                scope.namespace.initialized = true;
+                if (forceShowBody) {
+                    scope.showNamespaceBody = true;
+                }
             }
 
             function initNamespace(namespace, viewType) {
                 namespace.hasBranch = false;
                 namespace.isBranch = false;
-                namespace.isLinkedNamespace =
-                    namespace.isPublic ? namespace.parentAppId != namespace.baseInfo.appId : false;
                 namespace.displayControl = {
                     currentOperateBranch: 'master',
                     showSearchInput: false,
@@ -309,12 +327,6 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
                 }
 
                 function initNamespaceViewName(namespace) {
-                    //namespace view name hide suffix
-                    namespace.viewName =
-                        namespace.baseInfo.namespaceName.replace(".xml", "").replace(
-                            ".properties", "").replace(".json", "").replace(".yml", "")
-                            .replace(".yaml", "");
-
                     if (!viewType) {
                         if (namespace.isPropertiesFormat) {
                             switchView(namespace, namespace_view_type.TABLE);
@@ -350,7 +362,7 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
 
                     localStorage.setItem(operate_branch_storage_key, JSON.stringify(operateBranchStorage));
 
-                    switchBranch(operateBranchStorage[namespaceId]);
+                    switchBranch(operateBranchStorage[namespaceId], false);
 
                 }
 
@@ -380,11 +392,14 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
                     });
             }
 
-            function switchBranch(branchName) {
+            function switchBranch(branchName, forceShowBody) {
                 if (branchName != 'master') {
                     initRules(scope.namespace.branch);
+                }
+                if (forceShowBody) {
                     scope.showNamespaceBody = true;
                 }
+
                 scope.namespace.displayControl.currentOperateBranch = branchName;
 
                 //save to local storage

apollo-portal/src/main/resources/static/views/component/namespace-panel-branch-tab.html

 <section class="branch-panel-body"
-         ng-if="namespace.hasBranch && namespace.displayControl.currentOperateBranch != 'master'">
+         ng-if="namespace.initialized &&
+                (namespace.hasBranch && namespace.displayControl.currentOperateBranch != 'master')">
     <!--main header-->
     <header class="panel-heading">
 
         <div class="row">
             <div class="col-md-6 col-sm-6 header-namespace">
-                <span class="cursor-pointer"
-                      data-toggle="collapse" data-target="#BODY{{namespace.branch.id}}" aria-expanded="false"
-                      ng-click="namespace.branch.displayControl.show = !namespace.branch.displayControl.show">
-                    </span>
                 <b class="namespace-name" ng-bind="namespace.viewName"></b>
                 <span class="label label-warning no-radius namespace-label"
                       ng-show="namespace.branch.itemModifiedCnt > 0">有修改

apollo-portal/src/main/resources/static/views/component/namespace-panel-header.html

@@ -21,11 +21,11 @@
         </div>
         <div class="col-md-6 text-right" style="padding-right:23px;">
             <span data-toggle="collapse" data-target="#BODY{{namespace.branch.id}}" aria-expanded="false">
-                <span
-                        class="label no-radius cursor-pointer"
-                        data-toggle="collapse" data-target="#BODY{{namespace.id}}" aria-expanded="false"
-                        ng-click="showNamespaceBody = !showNamespaceBody">
-                    <a ><small>[展开/收缩]</small></a>
+                <span class="label no-radius cursor-pointer"
+                      data-toggle="collapse" data-target="#BODY{{namespace.id}}" aria-expanded="false"
+                      ng-click="showNamespaceBody = !showNamespaceBody"
+                      ng-show="namespace.initialized">
+                    <a>[展开/收缩]</a>
                 </span>
             </span>
         </div>
@@ -33,20 +33,20 @@
 </header>
 
 <!--branch nav-->
-<header class="panel-heading second-panel-heading" ng-show="namespace.hasBranch">
+<header class="panel-heading second-panel-heading" ng-show="namespace.initialized && namespace.hasBranch">
     <div class="row">
         <div class="col-md-8 pull-left">
             <ul class="nav nav-tabs">
                 <li role="presentation">
                     <a ng-class="{'node_active': namespace.displayControl.currentOperateBranch == 'master'}"
-                       ng-click="switchBranch('master')">
+                       ng-click="switchBranch('master', true)">
                         <img src="img/branch.png">
                         主版本
                     </a>
                 </li>
                 <li role="presentation">
                     <a ng-class="{'node_active': namespace.displayControl.currentOperateBranch != 'master'}"
-                       ng-click="switchBranch(namespace.branchName)">
+                       ng-click="switchBranch(namespace.branchName, true)">
                         <img src="img/branch.png">
                         灰度版本
                     </a>

apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html

+<!--master panel body when not initialized-->
+<section class="master-panel-body" ng-if="!namespace.initialized">
+    <!--main header-->
+    <header class="panel-heading">
+        <div class="row">
+            <div class="col-md-6 col-sm-6 header-namespace">
+                <b class="namespace-name" ng-bind="namespace.viewName"></b>
+            </div>
+
+            <div class="col-md-6 col-sm-6 text-right header-buttons">
+
+                <button type="button" class="btn btn-default btn-sm"
+                        data-tooltip="tooltip" data-placement="bottom" title="加载Namespace"
+                        ng-click="init(true)">
+                    <img src="img/more.png">
+                    加载Namespace
+                </button>
+            </div>
+        </div>
+    </header>
+
+</section>
 <!--master panel body-->
 <section class="master-panel-body"
-         ng-if="namespace.hasBranch
-         && namespace.displayControl.currentOperateBranch == 'master' ||
-          !namespace.hasBranch">
+         ng-if="namespace.initialized &&
+         (namespace.hasBranch && namespace.displayControl.currentOperateBranch == 'master' || !namespace.hasBranch)">
     <!--main header-->
     <header class="panel-heading">
         <div class="row">