format json & config.html adapt small screen

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

@@ -208,6 +208,7 @@ function ConfigBaseInfoController($rootScope, $scope, $location, toastr, EventMa
                                                                }));
 
                                             EventManager.emit(EventManager.EventType.REFRESH_NAMESPACE);
+                                            $rootScope.showSideBar = false;
                                         }
                                     });
 
@@ -298,5 +299,30 @@ function ConfigBaseInfoController($rootScope, $scope, $location, toastr, EventMa
         };
     }
 
+    var VIEW_MODE_SWITCH_WIDTH = 1156;
+    if (window.innerWidth <= VIEW_MODE_SWITCH_WIDTH) {
+        $rootScope.viewMode = 2;
+        $rootScope.showSideBar = false;
+    } else {
+        $rootScope.viewMode = 1;
+    }
+
+
+    $rootScope.adaptScreenSize = function () {
+        if (window.innerWidth <= VIEW_MODE_SWITCH_WIDTH) {
+            $rootScope.viewMode = 2;
+        } else {
+            $rootScope.viewMode = 1;
+            $rootScope.showSideBar = false;
+        }
+
+    };
+
+    $(window).resize(function(){
+        $scope.$apply(function(){
+            $rootScope.adaptScreenSize();
+        });
+    });
+
 }
 

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

@@ -313,6 +313,7 @@ function controller($rootScope, $scope, toastr, AppUtil, EventManager, ConfigSer
     }
 
     new Clipboard('.clipboard');
+
 }
 
 

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

@@ -8,6 +8,7 @@ directive_module.directive('apollonav',
                                    replace: true,
                                    link: function (scope, element, attrs) {
 
+
                                        scope.sourceApps = [];
                                        scope.copyedApps = [];
 

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

@@ -416,6 +416,8 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
                                                                namespace.baseInfo.clusterName,
                                                                namespace.baseInfo.namespaceName)
                             .then(function (result) {
+                                namespace.isLatestReleaseLoaded = true;
+
                                 if (!result) {
                                     namespace.latestReleaseInstances = {};
                                     namespace.latestReleaseInstances.total = 0;
@@ -430,8 +432,6 @@ function directive($window, toastr, AppUtil, EventManager, PermissionService, Na
                                         namespace.latestReleaseInstances = result;
                                         namespace.latestReleaseInstancesPage++;
                                     })
-
-                                namespace.isLatestReleaseLoaded = true;
                             });
                     } else {
                         InstanceService.findInstancesByRelease(scope.env,

apollo-portal/src/main/resources/static/scripts/directive/show-text-modal-directive.js

@@ -10,7 +10,23 @@ function showTextModalDirective() {
             text: '='
         },
         link: function (scope) {
+            scope.$watch('text', init);
 
+            function init() {
+                scope.jsonObject = undefined;
+                if (isJsonText(scope.text)) {
+                    scope.jsonObject = JSON.parse(scope.text);
+                }
+            }
+
+            function isJsonText(text) {
+                try {
+                    JSON.parse(text);
+                } catch (e) {
+                    return false;
+                }
+                return true;
+            }
         }
     }
 }

apollo-portal/src/main/resources/static/styles/common-style.css

@@ -207,6 +207,38 @@ table th {
     margin-top: 20px;
 }
 
+.side-bar {
+    position: absolute;
+    width: 195px;
+    top: 85px;
+    left: 15px;
+    margin-bottom: 25px;
+    background: #f1f2f7;
+    z-index: 2;
+}
+
+.position-absolute {
+    position: absolute;
+}
+
+.position-fix {
+    position: fixed;
+}
+
+.view-mode-1 {
+    margin-left: 235px;
+    padding-right: 15px;
+}
+
+.view-mode-2 {
+    padding: 0 15px;
+}
+
+.side-bar-switch {
+    padding: 10px 10px;
+    margin-right: 30px;
+}
+
 .node-treeview {
     color: #797979;
 }
@@ -241,7 +273,6 @@ table th {
 }
 
 .panel-heading .header-buttons {
-    /*float: right;*/
     min-width: 405px;
 }
 
@@ -744,3 +775,4 @@ table th {
 .search-focus {
     background: #fff;
 }
+

apollo-portal/src/main/resources/static/views/common/nav.html

 <nav class="navbar navbar-default">
     <div class="container-fluid">
         <div class="navbar-header">
-
+            <img class="navbar-brand side-bar-switch cursor-pointer" src="../../img/show_sidebar.png"
+                 onMouseOver="this.style.background='#f1f2f7'"
+                 onMouseOut="this.style.background='#fff'"
+                 data-tooltip="tooltip" data-placement="bottom" title="显示导航栏"
+                 ng-show="viewMode == 2 && !showSideBar"
+                 ng-click="showSideBar = !showSideBar">
+            <img class="navbar-brand side-bar-switch cursor-pointer" src="../../img/hide_sidebar.png"
+                 onMouseOver="this.style.background='#f1f2f7'"
+                 onMouseOut="this.style.background='#fff'"
+                 data-tooltip="tooltip" data-placement="bottom" title="隐藏导航栏"
+                 ng-show="viewMode == 2 && showSideBar"
+                 ng-click="showSideBar = !showSideBar">
             <a class="navbar-brand logo" href="/">
                 <b>Apollo 配置中心</b>
             </a>
@@ -11,14 +22,15 @@
             <ul class="nav navbar-nav navbar-right">
                 <li>
                     <a href="http://conf.ctripcorp.com/display/FRAM/Apollo" target="_blank">
-                    <span class="glyphicon glyphicon-question-sign"></span>帮助
-                </a>
+                        <span class="glyphicon glyphicon-question-sign"></span>帮助
+                    </a>
                 </li>
 
                 <li class="dropdown">
 
                     <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
-                       aria-expanded="false"><span class="glyphicon glyphicon-user"></span>{{userName}} <span class="caret"></span></a>
+                       aria-expanded="false"><span class="glyphicon glyphicon-user"></span>{{userName}} <span
+                            class="caret"></span></a>
                     <ul class="dropdown-menu">
                         <li><a href="/user/logout">退出</a></li>
                     </ul>
@@ -27,7 +39,8 @@
 
             <div class="navbar-form navbar-right form-inline" role="search">
                 <div class="form-group">
-                    <input type="text" class="form-control search-input" placeholder="搜索项目(项目ID、项目名)" style="width: 350px"
+                    <input type="text" class="form-control search-input" placeholder="搜索项目(项目ID、项目名)"
+                           style="width: 350px"
                            ng-model="searchKey" ng-change="changeSearchKey()" ng-focus="changeSearchKey()">
 
                     <div class="row app-list" ng-show="shouldShowAppList">

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

@@ -736,31 +736,37 @@
         <!--instance view-->
         <div class="panel panel-default instance-view" ng-show="namespace.viewType == 'instance'">
             <div class="panel-heading">
-                <div class="row text-right" style="padding-right: 15px;">
+                <div class="row">
 
-                    <div class="btn-group btn-group-sm" role="group">
-                        <button type="button" class="btn btn-default"
-                                ng-class="{'btn-primary':namespace.instanceViewType == 'latest_release'}"
-                                ng-click="switchInstanceViewType(namespace, 'latest_release')"> 使用最新配置的实例
-                            <span class="badge" ng-bind="namespace.latestReleaseInstances.total"></span>
-                        </button>
-                        <button type="button" class="btn btn-default"
-                                ng-class="{'btn-primary':namespace.instanceViewType == 'not_latest_release'}"
-                                ng-click="switchInstanceViewType(namespace, 'not_latest_release')">使用非最新配置的实例
+                    <div class="col-md-5">
+                        <small>实例说明:只展示最近一天访问过Apollo的实例</small>
+                    </div>
+                    <div class="col-md-7 text-right">
+                        <div class="btn-group btn-group-sm" role="group">
+                            <button type="button" class="btn btn-default"
+                                    ng-class="{'btn-primary':namespace.instanceViewType == 'latest_release'}"
+                                    ng-click="switchInstanceViewType(namespace, 'latest_release')"> 使用最新配置的实例
+                                <span class="badge" ng-bind="namespace.latestReleaseInstances.total"></span>
+                            </button>
+                            <button type="button" class="btn btn-default"
+                                    ng-class="{'btn-primary':namespace.instanceViewType == 'not_latest_release'}"
+                                    ng-click="switchInstanceViewType(namespace, 'not_latest_release')">使用非最新配置的实例
                         <span class="badge"
                               ng-bind="namespace.instancesCount - namespace.latestReleaseInstances.total"></span>
-                        </button>
-                        <button type="button" class="btn btn-default"
-                                ng-class="{'btn-primary':namespace.instanceViewType == 'all'}"
-                                ng-click="switchInstanceViewType(namespace, 'all')">所有实例
-                            <span class="badge" ng-bind="namespace.instancesCount"></span>
+                            </button>
+                            <button type="button" class="btn btn-default"
+                                    ng-class="{'btn-primary':namespace.instanceViewType == 'all'}"
+                                    ng-click="switchInstanceViewType(namespace, 'all')">所有实例
+                                <span class="badge" ng-bind="namespace.instancesCount"></span>
+                            </button>
+                        </div>
+                        <button class="btn btn-default btn-sm"
+                                data-tooltip="tooltip" data-placement="bottom" title="刷新列表"
+                                ng-click="refreshInstancesInfo(namespace)">
+                            <img src="../../img/refresh.png"/>
                         </button>
                     </div>
-                    <button class="btn btn-default btn-sm"
-                            data-tooltip="tooltip" data-placement="bottom" title="刷新列表"
-                            ng-click="refreshInstancesInfo(namespace)">
-                        <img src="../../img/refresh.png"/>
-                    </button>
+
                 </div>
             </div>
 

apollo-portal/src/main/resources/static/views/component/show-text-modal.html

@@ -7,8 +7,11 @@
 
                 <h4 class="modal-title">查看</h4>
             </div>
-            <pre id="watchText" class="modal-body no-radius" style="margin-bottom: 0"
-                 ng-bind="text">
+            <pre class="modal-body no-radius" style="margin-bottom: 0"
+                 ng-show="!jsonObject" ng-bind="text">
+            </pre>
+            <pre class="modal-body no-radius" style="margin-bottom: 0"
+                 ng-show="jsonObject" ng-bind="jsonObject | json:4">
             </pre>
         </div>
     </div>