Merge pull request #507 from lepdou/0113

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

@@ -16,12 +16,8 @@
 
 <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>
@@ -30,7 +26,12 @@
             </p>
         </div>
 
-            <div class="J_appFound hidden col-md-2 col-xs-2 col-sm-2" ng-show="!notFoundApp">
+        <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))">
+
+                <!--env list-->
                 <section class="panel">
                     <header class="panel-heading">
                         <img src="img/env.png" class="i-20">&nbsp;环境列表
@@ -98,6 +99,8 @@
                     </div>
                 </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>
@@ -107,36 +110,43 @@
                     <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()"
+
+                    <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>
-            </span>
+                    </div>
 
                     <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()"
+
+                    <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>
-            </span>
+                    </div>
 
                     <apolloentrance apollo-title="'项目权限'" apollo-img-src="'user-manage'"
                                     apollo-href="'/app/role.html?#/appid=' + pageContext.appId"
                                     ng-show="hasAssignUserPermission"></apolloentrance>
                 </section>
 
-
+            </div>
         </div>
     </div>
 
-
+    <!--具体配置信息-->
     <!--namespaces-->
-        <div class="col-md-10 col-xs-10 col-sm-10 config-item-container hide"
+    <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]">
 
@@ -167,7 +177,9 @@
         <div class="alert alert-info"
              ng-if="hasNotPublishNamespace">
             <p><b>注意:</b>以下环境/集群有未发布的配置，客户端获取不到未发布的配置，请及时发布。</p>
-                <p><mark ng-bind="namespacePublishInfo.join('，')"></mark></p>
+            <p>
+                <mark ng-bind="namespacePublishInfo.join('，')"></mark>
+            </p>
         </div>
 
         <apollonspanel ng-repeat="namespace in namespaces"
@@ -294,7 +306,6 @@
             </div>
         </div>
     </div>
-    </div>
 </div>
 
 

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>
@@ -18,7 +29,8 @@
                 <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,8 +736,12 @@
         <!--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="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'}"
@@ -762,6 +766,8 @@
                             <img src="../../img/refresh.png"/>
                         </button>
                     </div>
+
+                </div>
             </div>
 
             <!--latest release instances-->

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>