From 8c54b3a77a4bde9509eb5ad45b134fe3187b145c Mon Sep 17 00:00:00 2001
From: lepdou <lepdou@126.com>
Date: Tue, 3 Jan 2017 13:30:06 +0800
Subject: [PATCH] format json & config.html adapt small screen

---
 .../src/main/resources/static/config.html     | 355 +++++++++---------
 .../resources/static/img/hide_sidebar.png     | Bin 0 -> 3335 bytes
 .../resources/static/img/show_sidebar.png     | Bin 0 -> 3405 bytes
 .../config/ConfigBaseInfoController.js        |  26 ++
 .../config/ConfigNamespaceController.js       |   1 +
 .../static/scripts/directive/directive.js     |   1 +
 .../directive/namespace-panel-directive.js    |   4 +-
 .../directive/show-text-modal-directive.js    |  16 +
 .../resources/static/styles/common-style.css  |  34 +-
 .../resources/static/views/common/nav.html    |  23 +-
 .../component/namespace-panel-master-tab.html |  46 ++-
 .../views/component/show-text-modal.html      |   7 +-
 12 files changed, 311 insertions(+), 202 deletions(-)
 create mode 100644 apollo-portal/src/main/resources/static/img/hide_sidebar.png
 create mode 100644 apollo-portal/src/main/resources/static/img/show_sidebar.png

diff --git a/apollo-portal/src/main/resources/static/config.html b/apollo-portal/src/main/resources/static/config.html
index ae0717ab80b..ee55e63b762 100644
--- a/apollo-portal/src/main/resources/static/config.html
+++ b/apollo-portal/src/main/resources/static/config.html
@@ -16,21 +16,22 @@
 
 <apollonav></apollonav>
 
-<div id="config-info" class="container-fluid apollo-container app">
-    <!--具体配置信息-->
-    <div class="config-info-container row">
+<div id="config-info" class="apollo-container app">
+    <div ng-controller="ConfigBaseInfoController">
+        <div class="J_appNotFound hidden row text-center app-not-found" ng-show="notFoundApp">
+            <img src="img/404.png">
+            <br>
+            <p>
+                <span ng-bind="pageContext.appId"></span> 不存在，<a href="/app.html">点击创建</a>
+            </p>
+        </div>
 
-        <div ng-controller="ConfigBaseInfoController">
+        <div class="side-bar"
+             ng-class="{'position-absolute': viewMode == 1, 'position-fixed': viewMode == 2}">
+            <div class="J_appFound hidden"
+                 ng-show="!notFoundApp && (viewMode == 1 || (viewMode == 2 && showSideBar))">
 
-            <div class="J_appNotFound hidden row text-center app-not-found" ng-show="notFoundApp">
-                <img src="img/404.png">
-                <br>
-                <p>
-                    <span ng-bind="pageContext.appId"></span> 不存在，<a href="/app.html">点击创建</a>
-                </p>
-            </div>
-
-            <div class="J_appFound hidden col-md-2 col-xs-2 col-sm-2" ng-show="!notFoundApp">
+                <!--env list-->
                 <section class="panel">
                     <header class="panel-heading">
                         <img src="img/env.png" class="i-20">&nbsp;环境列表
@@ -98,198 +99,208 @@
                     </div>
                 </section>
 
-                <a class="list-group-item" ng-show="missEnvs.length > 0" ng-click="createAppInMissEnv()">
-                    <div class="row icon-text icon-plus-orange">
-                        <p class="btn-title ng-binding">补缺环境</p>
-                    </div>
-                </a>
-
-                <apolloentrance apollo-title="'添加集群'" apollo-img-src="'plus-orange'"
-                                apollo-href="'cluster.html?#/appid=' + pageContext.appId"
-                                ng-show="hasCreateClusterPermission"></apolloentrance>
-            <span class="list-group-item cursor-pointer hover" ng-click="showMasterPermissionTips()"
-                  ng-show="!hasCreateClusterPermission">
-                <div class="row icon-text icon-plus-orange">
-                    <p class="btn-title">添加集群</p>
-                </div>
-            </span>
-
-                <apolloentrance apollo-title="'添加Namespace'" apollo-img-src="'plus-orange'"
-                                apollo-href="'namespace.html?#/appid=' + pageContext.appId"
-                                ng-show="hasCreateNamespacePermission"></apolloentrance>
-            <span class="list-group-item cursor-pointer hover" ng-click="showMasterPermissionTips()"
-                  ng-show="!hasCreateNamespacePermission">
-                <div class="row icon-text icon-plus-orange">
-                    <p class="btn-title">添加Namespace</p>
-                </div>
-            </span>
-
-                <apolloentrance apollo-title="'项目权限'" apollo-img-src="'user-manage'"
-                                apollo-href="'/app/role.html?#/appid=' + pageContext.appId"
-                                ng-show="hasAssignUserPermission"></apolloentrance>
-                </section>
-
+                <!--operation entrance-->
+                <section>
+                    <a class="list-group-item" ng-show="missEnvs.length > 0" ng-click="createAppInMissEnv()">
+                        <div class="row icon-text icon-plus-orange">
+                            <p class="btn-title ng-binding">补缺环境</p>
+                        </div>
+                    </a>
 
-            </div>
-        </div>
+                    <apolloentrance apollo-title="'添加集群'" apollo-img-src="'plus-orange'"
+                                    apollo-href="'cluster.html?#/appid=' + pageContext.appId"
+                                    ng-show="hasCreateClusterPermission"></apolloentrance>
 
+                    <div class="list-group-item cursor-pointer hover" ng-click="showMasterPermissionTips()"
+                         ng-show="!hasCreateClusterPermission">
+                        <div class="row icon-text icon-plus-orange">
+                            <p class="btn-title">添加集群</p>
+                        </div>
+                    </div>
 
-        <!--namespaces-->
-        <div class="col-md-10 col-xs-10 col-sm-10 config-item-container hide"
-             ng-controller="ConfigNamespaceController">
-            <div class="alert alert-info alert-dismissible" role="alert"
-                 ng-show="(!hideTip || !hideTip[pageContext.appId][pageContext.clusterName]) && envMapClusters[pageContext.env]">
+                    <apolloentrance apollo-title="'添加Namespace'" apollo-img-src="'plus-orange'"
+                                    apollo-href="'namespace.html?#/appid=' + pageContext.appId"
+                                    ng-show="hasCreateNamespacePermission"></apolloentrance>
 
-                <button class="btn btn-sm btn-default pull-right" style="margin-top: -7px;margin-right:-15px;"
-                        ng-click="closeTip(pageContext.clusterName)">不再提示
-                </button>
+                    <div class="list-group-item cursor-pointer hover" ng-click="showMasterPermissionTips()"
+                         ng-show="!hasCreateNamespacePermission">
+                        <div class="row icon-text icon-plus-orange">
+                            <p class="btn-title">添加Namespace</p>
+                        </div>
+                    </div>
 
-                <!--default cluster tip -->
-                <div ng-show="pageContext.clusterName == 'default'">
-                    <strong>注意: </strong>所有不属于
-                    <span ng-bind="envMapClusters[pageContext.env]"></span>
-                    集群的实例会使用default集群（当前页面）的配置，属于
-                    <span ng-bind="envMapClusters[pageContext.env]"></span>
-                    的实例会使用对应集群的配置！
-                </div>
+                    <apolloentrance apollo-title="'项目权限'" apollo-img-src="'user-manage'"
+                                    apollo-href="'/app/role.html?#/appid=' + pageContext.appId"
+                                    ng-show="hasAssignUserPermission"></apolloentrance>
+                </section>
 
-                <!--custom cluster tip-->
-                <div ng-show="pageContext.clusterName != 'default'">
-                    <strong>注意:</strong>属于
-                    <span ng-bind="pageContext.clusterName"></span>
-                    集群的实例只会使用
-                    <span ng-bind="pageContext.clusterName"></span>
-                    集群（当前页面）的配置，只有当对应namespace在当前集群没有发布过配置时，才会使用default集群的配置！
-                </div>
+            </div>
+        </div>
+    </div>
 
+    <!--具体配置信息-->
+    <!--namespaces-->
+    <div class="config-item-container hide"
+         ng-class="{'view-mode-1': viewMode == 1, 'view-mode-2': viewMode == 2}"
+         ng-controller="ConfigNamespaceController">
+
+        <h4 class="text-center" ng-show="viewMode == 2">
+            当前操作环境:{{pageContext.env}}， 集群:{{pageContext.clusterName}}
+        </h4>
+        <div class="alert alert-info alert-dismissible" role="alert"
+             ng-show="(!hideTip || !hideTip[pageContext.appId][pageContext.clusterName]) && envMapClusters[pageContext.env]">
+
+            <button class="btn btn-sm btn-default pull-right" style="margin-top: -7px;margin-right:-15px;"
+                    ng-click="closeTip(pageContext.clusterName)">不再提示
+            </button>
+
+            <!--default cluster tip -->
+            <div ng-show="pageContext.clusterName == 'default'">
+                <strong>注意: </strong>所有不属于
+                <span ng-bind="envMapClusters[pageContext.env]"></span>
+                集群的实例会使用default集群（当前页面）的配置，属于
+                <span ng-bind="envMapClusters[pageContext.env]"></span>
+                的实例会使用对应集群的配置！
             </div>
 
-            <div class="alert alert-info"
-                 ng-if="hasNotPublishNamespace">
-                <p><b>注意:</b>以下环境/集群有未发布的配置，客户端获取不到未发布的配置，请及时发布。</p>
-                <p><mark ng-bind="namespacePublishInfo.join('，')"></mark></p>
+            <!--custom cluster tip-->
+            <div ng-show="pageContext.clusterName != 'default'">
+                <strong>注意:</strong>属于
+                <span ng-bind="pageContext.clusterName"></span>
+                集群的实例只会使用
+                <span ng-bind="pageContext.clusterName"></span>
+                集群（当前页面）的配置，只有当对应namespace在当前集群没有发布过配置时，才会使用default集群的配置！
             </div>
 
-            <apollonspanel ng-repeat="namespace in namespaces"
-                           namespace="namespace"
-                           app-id="pageContext.appId"
-                           env="pageContext.env"
-                           lock-check="lockCheck"
-                           cluster="pageContext.clusterName"
-                           user="currentUser"
-                           pre-release-ns="prepareReleaseNamespace"
-                           create-item="createItem" edit-item="editItem"
-                           pre-delete-item="preDeleteItem"
-                           show-text="showText"
-                           show-no-modify-permission-dialog="showNoModifyPermissionDialog"
-                           pre-create-branch="preCreateBranch"
-                           pre-delete-branch="preDeleteBranch">
-            </apollonspanel>
-
-            <releasemodal app-id="pageContext.appId"
-                          env="pageContext.env"
-                          cluster="pageContext.clusterName">
-            </releasemodal>
-
-            <itemmodal to-operation-namespace="toOperationNamespace"
+        </div>
+
+        <div class="alert alert-info"
+             ng-if="hasNotPublishNamespace">
+            <p><b>注意:</b>以下环境/集群有未发布的配置，客户端获取不到未发布的配置，请及时发布。</p>
+            <p>
+                <mark ng-bind="namespacePublishInfo.join('，')"></mark>
+            </p>
+        </div>
+
+        <apollonspanel ng-repeat="namespace in namespaces"
+                       namespace="namespace"
                        app-id="pageContext.appId"
                        env="pageContext.env"
+                       lock-check="lockCheck"
                        cluster="pageContext.clusterName"
-                       item="item">
-            </itemmodal>
-
-            <showtextmodal text="text"></showtextmodal>
-
-            <rollbackmodal app-id="pageContext.appId"
-                           env="pageContext.env"
-                           cluster="pageContext.clusterName">
-            </rollbackmodal>
+                       user="currentUser"
+                       pre-release-ns="prepareReleaseNamespace"
+                       create-item="createItem" edit-item="editItem"
+                       pre-delete-item="preDeleteItem"
+                       show-text="showText"
+                       show-no-modify-permission-dialog="showNoModifyPermissionDialog"
+                       pre-create-branch="preCreateBranch"
+                       pre-delete-branch="preDeleteBranch">
+        </apollonspanel>
+
+        <releasemodal app-id="pageContext.appId"
+                      env="pageContext.env"
+                      cluster="pageContext.clusterName">
+        </releasemodal>
+
+        <itemmodal to-operation-namespace="toOperationNamespace"
+                   app-id="pageContext.appId"
+                   env="pageContext.env"
+                   cluster="pageContext.clusterName"
+                   item="item">
+        </itemmodal>
+
+        <showtextmodal text="text"></showtextmodal>
+
+        <rollbackmodal app-id="pageContext.appId"
+                       env="pageContext.env"
+                       cluster="pageContext.clusterName">
+        </rollbackmodal>
 
-            <rulesmodal app-id="pageContext.appId"
-                        env="pageContext.env"
-                        cluster="pageContext.clusterName">
+        <rulesmodal app-id="pageContext.appId"
+                    env="pageContext.env"
+                    cluster="pageContext.clusterName">
 
-            </rulesmodal>
+        </rulesmodal>
 
 
-            <mergeandpublishmodal app-id="pageContext.appId"
-                                  env="pageContext.env"
-                                  cluster="pageContext.clusterName">
-            </mergeandpublishmodal>
+        <mergeandpublishmodal app-id="pageContext.appId"
+                              env="pageContext.env"
+                              cluster="pageContext.clusterName">
+        </mergeandpublishmodal>
 
 
-            <apolloconfirmdialog apollo-dialog-id="'deleteConfirmDialog'" apollo-title="'删除配置'"
-                                 apollo-detail="'确定要删除配置吗?'"
-                                 apollo-show-cancel-btn="true" apollo-confirm="deleteItem"></apolloconfirmdialog>
+        <apolloconfirmdialog apollo-dialog-id="'deleteConfirmDialog'" apollo-title="'删除配置'"
+                             apollo-detail="'确定要删除配置吗?'"
+                             apollo-show-cancel-btn="true" apollo-confirm="deleteItem"></apolloconfirmdialog>
 
-            <apolloconfirmdialog apollo-dialog-id="'releaseNoPermissionDialog'" apollo-title="'发布'"
-                                 apollo-detail="'您没有发布权限哦~ 请找项目管理员 ' + masterUsers + ' 分配发布权限'"
-                                 apollo-show-cancel-btn="false"></apolloconfirmdialog>
+        <apolloconfirmdialog apollo-dialog-id="'releaseNoPermissionDialog'" apollo-title="'发布'"
+                             apollo-detail="'您没有发布权限哦~ 请找项目管理员 ' + masterUsers + ' 分配发布权限'"
+                             apollo-show-cancel-btn="false"></apolloconfirmdialog>
 
-            <apolloconfirmdialog apollo-dialog-id="'modifyNoPermissionDialog'" apollo-title="'申请配置权限'"
-                                 apollo-detail="'请找项目管理员 ' + masterUsers + ' 分配编辑或发布权限'"
-                                 apollo-show-cancel-btn="false"></apolloconfirmdialog>
+        <apolloconfirmdialog apollo-dialog-id="'modifyNoPermissionDialog'" apollo-title="'申请配置权限'"
+                             apollo-detail="'请找项目管理员 ' + masterUsers + ' 分配编辑或发布权限'"
+                             apollo-show-cancel-btn="false"></apolloconfirmdialog>
 
-            <apolloconfirmdialog apollo-dialog-id="'masterNoPermissionDialog'" apollo-title="'申请配置权限'"
-                                 apollo-detail="'您不是项目管理员， 只有项目管理员才有添加集群、namespace的权限。
+        <apolloconfirmdialog apollo-dialog-id="'masterNoPermissionDialog'" apollo-title="'申请配置权限'"
+                             apollo-detail="'您不是项目管理员， 只有项目管理员才有添加集群、namespace的权限。
                                  如需管理员权限，请找项目管理员 ' + masterUsers + ' 分配管理员权限'"
-                                 apollo-show-cancel-btn="false"></apolloconfirmdialog>
+                             apollo-show-cancel-btn="false"></apolloconfirmdialog>
 
-            <apolloconfirmdialog apollo-dialog-id="'namespaceLockedDialog'" apollo-title="'编辑受限'"
-                                 apollo-detail="'当前namespace正在被 ' + lockOwner + ' 编辑，一次发布只能被一个人修改.'"
-                                 apollo-show-cancel-btn="false"></apolloconfirmdialog>
+        <apolloconfirmdialog apollo-dialog-id="'namespaceLockedDialog'" apollo-title="'编辑受限'"
+                             apollo-detail="'当前namespace正在被 ' + lockOwner + ' 编辑，一次发布只能被一个人修改.'"
+                             apollo-show-cancel-btn="false"></apolloconfirmdialog>
 
-            <apolloconfirmdialog apollo-dialog-id="'releaseDenyDialog'" apollo-title="'发布受限'"
-                                 apollo-detail="'您不能发布哟~ ' + pageContext.env + '环境配置的编辑和发布必须为不同的人，请找另一个具有当前namespace发布权的人操作发布~'"
-                                 apollo-show-cancel-btn="false"></apolloconfirmdialog>
+        <apolloconfirmdialog apollo-dialog-id="'releaseDenyDialog'" apollo-title="'发布受限'"
+                             apollo-detail="'您不能发布哟~ ' + pageContext.env + '环境配置的编辑和发布必须为不同的人，请找另一个具有当前namespace发布权的人操作发布~'"
+                             apollo-show-cancel-btn="false"></apolloconfirmdialog>
 
-            <apolloconfirmdialog apollo-dialog-id="'rollbackAlertDialog'" apollo-title="'回滚'"
-                                 apollo-detail="'确定要回滚吗?'"
-                                 apollo-show-cancel-btn="true" apollo-confirm="rollback"></apolloconfirmdialog>
+        <apolloconfirmdialog apollo-dialog-id="'rollbackAlertDialog'" apollo-title="'回滚'"
+                             apollo-detail="'确定要回滚吗?'"
+                             apollo-show-cancel-btn="true" apollo-confirm="rollback"></apolloconfirmdialog>
 
-            <apolloconfirmdialog apollo-dialog-id="'deleteBranchDialog'" apollo-title="'删除灰度'"
-                                 apollo-detail="'删除灰度会丢失灰度的配置，确定要删除吗?'"
-                                 apollo-show-cancel-btn="true" apollo-confirm="deleteBranch"></apolloconfirmdialog>
+        <apolloconfirmdialog apollo-dialog-id="'deleteBranchDialog'" apollo-title="'删除灰度'"
+                             apollo-detail="'删除灰度会丢失灰度的配置，确定要删除吗?'"
+                             apollo-show-cancel-btn="true" apollo-confirm="deleteBranch"></apolloconfirmdialog>
 
-            <apolloconfirmdialog apollo-dialog-id="'updateRuleTips'" apollo-title="'更新灰度规则提示'"
-                                 apollo-detail="'灰度规则已生效，但发现灰度版本有未发布的配置，这些配置需要手动灰度发布才会生效'"></apolloconfirmdialog>
+        <apolloconfirmdialog apollo-dialog-id="'updateRuleTips'" apollo-title="'更新灰度规则提示'"
+                             apollo-detail="'灰度规则已生效，但发现灰度版本有未发布的配置，这些配置需要手动灰度发布才会生效'"></apolloconfirmdialog>
 
-            <apolloconfirmdialog apollo-dialog-id="'mergeAndReleaseDenyDialog'" apollo-title="'全量发布'"
-                                 apollo-detail="'namespace主版本有未发布的配置，请先发布主版本配置'"></apolloconfirmdialog>
+        <apolloconfirmdialog apollo-dialog-id="'mergeAndReleaseDenyDialog'" apollo-title="'全量发布'"
+                             apollo-detail="'namespace主版本有未发布的配置，请先发布主版本配置'"></apolloconfirmdialog>
 
-            <apolloconfirmdialog apollo-dialog-id="'grayReleaseWithoutRulesTips'" apollo-title="'缺失灰度规则提示'"
-                                 apollo-detail="'灰度版本还没有配置任何灰度规则，请配置灰度规则'">
-            </apolloconfirmdialog>
+        <apolloconfirmdialog apollo-dialog-id="'grayReleaseWithoutRulesTips'" apollo-title="'缺失灰度规则提示'"
+                             apollo-detail="'灰度版本还没有配置任何灰度规则，请配置灰度规则'">
+        </apolloconfirmdialog>
 
 
-            <div class="modal fade" id="createBranchTips" tabindex="-1" role="dialog">
-                <div class="modal-dialog" role="document">
-                    <div class="modal-content">
-                        <div class="modal-header panel-primary">
-                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
-                                    aria-hidden="true">&times;</span></button>
-                            <h4 class="modal-title">创建灰度须知</h4>
-                        </div>
-                        <div class="modal-body">
-                            通过创建灰度版本，您可以对某些配置做灰度测试<br>
-                            灰度流程为:<br>
-                            &nbsp;&nbsp;1.创建灰度版本 <br>
-                            &nbsp;&nbsp;2.配置灰度配置项<br>
-                            &nbsp;&nbsp;3.配置灰度规则.如果是私有的namespace可以按照客户端的IP进行灰度，如果是公共的namespace则可以同时按AppId和客户端的IP进行灰度<br>
-                            &nbsp;&nbsp;4.灰度发布<br>
-                            灰度版本最终有两种结果:<b>全量发布和放弃灰度</b><br>
-                            <b>全量发布</b>:灰度的配置合到主版本并发布，所有的客户端都会使用合并后的配置<br>
-                            <b>放弃灰度</b>:删除灰度版本，所有的客户端都会使用回主版本的配置<br>
-                            注意事项:<br>
-                            &nbsp;&nbsp;1.如果灰度版本已经有灰度发布过，那么修改灰度规则后，无需再次灰度发布就立即生效<br>
-                        </div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
-                            <button type="button" class="btn btn-primary" data-dismiss="modal"
-                                    ng-click="createBranch()">
-                                确定
-                            </button>
-                        </div>
+        <div class="modal fade" id="createBranchTips" tabindex="-1" role="dialog">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header panel-primary">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                                aria-hidden="true">&times;</span></button>
+                        <h4 class="modal-title">创建灰度须知</h4>
+                    </div>
+                    <div class="modal-body">
+                        通过创建灰度版本，您可以对某些配置做灰度测试<br>
+                        灰度流程为:<br>
+                        &nbsp;&nbsp;1.创建灰度版本 <br>
+                        &nbsp;&nbsp;2.配置灰度配置项<br>
+                        &nbsp;&nbsp;3.配置灰度规则.如果是私有的namespace可以按照客户端的IP进行灰度，如果是公共的namespace则可以同时按AppId和客户端的IP进行灰度<br>
+                        &nbsp;&nbsp;4.灰度发布<br>
+                        灰度版本最终有两种结果:<b>全量发布和放弃灰度</b><br>
+                        <b>全量发布</b>:灰度的配置合到主版本并发布，所有的客户端都会使用合并后的配置<br>
+                        <b>放弃灰度</b>:删除灰度版本，所有的客户端都会使用回主版本的配置<br>
+                        注意事项:<br>
+                        &nbsp;&nbsp;1.如果灰度版本已经有灰度发布过，那么修改灰度规则后，无需再次灰度发布就立即生效<br>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                        <button type="button" class="btn btn-primary" data-dismiss="modal"
+                                ng-click="createBranch()">
+                            确定
+                        </button>
                     </div>
                 </div>
             </div>
diff --git a/apollo-portal/src/main/resources/static/img/hide_sidebar.png b/apollo-portal/src/main/resources/static/img/hide_sidebar.png
new file mode 100644
index 0000000000000000000000000000000000000000..33eb58ac239b97c5a7d58220276b2b8b3a0795a4
GIT binary patch
literal 3335
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
CxEWgj

literal 0
HcmV?d00001

diff --git a/apollo-portal/src/main/resources/static/img/show_sidebar.png b/apollo-portal/src/main/resources/static/img/show_sidebar.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f5979718102051200a0cfba101fde653af92e66
GIT binary patch
literal 3405
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
M7!zxBCCY>JFG&^pg#Z8m

literal 0
HcmV?d00001

diff --git a/apollo-portal/src/main/resources/static/scripts/controller/config/ConfigBaseInfoController.js b/apollo-portal/src/main/resources/static/scripts/controller/config/ConfigBaseInfoController.js
index 259addd2cd6..ae4bedb9187 100644
--- a/apollo-portal/src/main/resources/static/scripts/controller/config/ConfigBaseInfoController.js
+++ b/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();
+        });
+    });
+
 }
 
diff --git a/apollo-portal/src/main/resources/static/scripts/controller/config/ConfigNamespaceController.js b/apollo-portal/src/main/resources/static/scripts/controller/config/ConfigNamespaceController.js
index af5aa0fe9e0..269d5974561 100644
--- a/apollo-portal/src/main/resources/static/scripts/controller/config/ConfigNamespaceController.js
+++ b/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');
+
 }
 
 
diff --git a/apollo-portal/src/main/resources/static/scripts/directive/directive.js b/apollo-portal/src/main/resources/static/scripts/directive/directive.js
index 313c214a43f..078a25881fb 100644
--- a/apollo-portal/src/main/resources/static/scripts/directive/directive.js
+++ b/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 = [];
 
diff --git a/apollo-portal/src/main/resources/static/scripts/directive/namespace-panel-directive.js b/apollo-portal/src/main/resources/static/scripts/directive/namespace-panel-directive.js
index 27ee5bbfefa..ce35c5ee978 100644
--- a/apollo-portal/src/main/resources/static/scripts/directive/namespace-panel-directive.js
+++ b/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,
diff --git a/apollo-portal/src/main/resources/static/scripts/directive/show-text-modal-directive.js b/apollo-portal/src/main/resources/static/scripts/directive/show-text-modal-directive.js
index 73ee5fffd97..3d6b1517f05 100644
--- a/apollo-portal/src/main/resources/static/scripts/directive/show-text-modal-directive.js
+++ b/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;
+            }
         }
     }
 }
diff --git a/apollo-portal/src/main/resources/static/styles/common-style.css b/apollo-portal/src/main/resources/static/styles/common-style.css
index 141753e4599..d6f1799a811 100644
--- a/apollo-portal/src/main/resources/static/styles/common-style.css
+++ b/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;
 }
+
diff --git a/apollo-portal/src/main/resources/static/views/common/nav.html b/apollo-portal/src/main/resources/static/views/common/nav.html
index 66c77626b98..dd9019620e6 100644
--- a/apollo-portal/src/main/resources/static/views/common/nav.html
+++ b/apollo-portal/src/main/resources/static/views/common/nav.html
@@ -1,7 +1,18 @@
 <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">
diff --git a/apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html b/apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html
index 554cf85959c..3213bb8b0a5 100644
--- a/apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html
+++ b/apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html
@@ -736,31 +736,37 @@ <h5>无公共的配置</h5>
         <!--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>
 
diff --git a/apollo-portal/src/main/resources/static/views/component/show-text-modal.html b/apollo-portal/src/main/resources/static/views/component/show-text-modal.html
index 22b8823d40b..0f4b3ab750f 100644
--- a/apollo-portal/src/main/resources/static/views/component/show-text-modal.html
+++ b/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>