调整面包屑以及菜单规则

gaoyibing111 · Nov 7, 2015 · 73e71d1 · 73e71d1
1 parent 5f72f61
commit 73e71d1
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 85 deletions.
diff --git a/dubbokeeper-ui/src/main/webapp/WEB-INF/jsp/index.jsp b/dubbokeeper-ui/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -9,15 +9,15 @@
 <%@include file="common/header.jsp"%>
 <div class="container-fluid " ng-controller="dubbokeeperCtrl">
     <div class="row">
-        <div class="col-md-2 col-lg-2 col-xs-2" ng-show="needMenus">
+        <div class="col-md-2 col-lg-2 col-xs-2" ng-show="hasMenu">
             <div class="row">
                 <div class="col-md-12 col-lg-12 col-xs-12">
                     <menu-tpl></menu-tpl>
                 </div>
             </div>
         </div>
-        <div class="{{needMenus?'col-md-10 col-lg-10 col-xs-10':'col-md-12 col-lg-12 col-xs-12'}} app-container">
-            <breadcrumb-tpl ng-show="needMenus"></breadcrumb-tpl>
+        <div class="{{hasMenu?'col-md-10 col-lg-10 col-xs-10':'col-md-12 col-lg-12 col-xs-12'}} app-container">
+            <breadcrumb-tpl ng-show="needBreadCrumb"></breadcrumb-tpl>
             <div class="row">
                 <div class="col-md-12 col-lg-12 col-xs-12" ng-view>
                 </div>

diff --git a/dubbokeeper-ui/src/main/webapp/js/modules/head/head.js b/dubbokeeper-ui/src/main/webapp/js/modules/head/head.js
@@ -9,7 +9,7 @@ head.directive("headTpl",function(){
 head.controller("headController",function($scope,$menu,$dkContext,$breadcrumb,$bars,$theme){
     $scope.currentBar="dashboard";
     $scope.bars=$dkContext.getBars();
-    $dkContext.changeProperty('needMenus',false);
+    $dkContext.changeProperty('needBreadCrumb',false);
     $scope.currentTheme = $theme.getCurrentTheme();
     $scope.switchTheme=function(type){
         $theme.setTheme(type);
@@ -21,7 +21,7 @@ head.controller("headController",function($scope,$menu,$dkContext,$breadcrumb,$b
             if($scope.bars[i].barIdentify==barName){
                 if($scope.bars[i].menus){
                     menus=$scope.bars[i].menus;
-                    $dkContext.changeProperty('needMenus',true);
+                    $dkContext.changeProperty('needBreadCrumb',true);
                     for(var j=0;j<menus.length;j++){
                         if(menus[j].isHome){
                             $dkContext.changeProperty("currentHome",menus[j]);
@@ -30,7 +30,7 @@ head.controller("headController",function($scope,$menu,$dkContext,$breadcrumb,$b
                         }
                     }
                 }else{
-                    $dkContext.changeProperty('needMenus',false);
+                    $dkContext.changeProperty('needBreadCrumb',false);
                 }
                 break;
             }

diff --git a/dubbokeeper-ui/src/main/webapp/js/modules/index.js b/dubbokeeper-ui/src/main/webapp/js/modules/index.js
@@ -34,7 +34,15 @@ dubbokeeper.barDataset=[{
     barShowName:"Monitor",
     barIdentify:"monitor",
     barHref:"/monitor",
-    barIconClass:"icon-bar-chart"
+    barIconClass:"icon-bar-chart",
+    menus:[{
+        showName:"监控室",
+        identify:"monitor/index",
+        href:"/monitor",
+        icon:"icon-bar-chart",
+        disable:true,
+        isHome:true
+    }]
 },{
     barShowName:"ZooPeeper",
     barIdentify:"zoopeeper",

diff --git a/dubbokeeper-ui/src/main/webapp/js/modules/menu/menu.js b/dubbokeeper-ui/src/main/webapp/js/modules/menu/menu.js
@@ -14,27 +14,41 @@ menu.directive("menuTpl",function(){
         controller:"menuController"
     };
 });
-menu.controller("menuController",function($scope,$cookieStore,$menu){
+menu.controller("menuController",function($scope,$cookieStore,$dkContext,$menu){
     $scope.currentMenu=menu.statistics.HOME;
     $scope.currentBar='dashboard';
     $scope.switchMenu=function(m){
         $scope.currentMenu=m;
     }
-    $menu._init($scope);
+    $menu._init($scope,$dkContext);
 });
 menu.$menu= function () {
     var dubboKeeperMenu = function () {
         this.inited=false;
     }
-    dubboKeeperMenu.prototype._init=function($scope){
+    dubboKeeperMenu.prototype._init=function($scope,$dkContext){
         this.inited=true;
         this.scope = $scope;
+        this.dkContext=$dkContext;
         if(this.lastMenu){
            this._switch(this.lastMenu);
         }
     }
     dubboKeeperMenu.prototype.refreshMenus=function(menus){
-        this.scope.menus=menus;
+        var rendingMenus=[];
+        if(menus){
+            for(var i=0;i<menus.length;i++){
+                if(!menus[i].disable){
+                    rendingMenus.push(menus[i])
+                }
+            }
+            if(rendingMenus.length==0){
+                this.dkContext.changeProperty('hasMenu',false);
+            }else{
+                this.dkContext.changeProperty('hasMenu',true);
+            }
+        }
+        this.scope.menus=rendingMenus;
     }
     dubboKeeperMenu.prototype.switchMenu=function(menu){
         if(this.inited){

diff --git a/dubbokeeper-ui/src/main/webapp/js/modules/monitor/monitor.js b/dubbokeeper-ui/src/main/webapp/js/modules/monitor/monitor.js
@@ -1,4 +1,4 @@
-var monitor = angular.module("monitor",['ngRoute','lineChart','isteven-multi-select']);
+var monitor = angular.module("monitor",['ngRoute','lineChart','breadCrumb','isteven-multi-select']);
 
 monitor.config(function($routeProvider){
     $routeProvider.when("/monitor/:application/:service/overview",{
@@ -17,9 +17,10 @@ monitor.config(function($routeProvider){
 });
 
 monitor.controller("applicationOverview",function($scope,$httpWrapper,$routeParams,$breadcrumb,$menu){
-    $menu.switchBarOnly("monitor");
+    $menu.switchMenu("monitor/index");
     var oneDay=24*60*60*1000;
     $scope.app=$routeParams.application;
+    $breadcrumb.pushCrumb("应用"+$scope.app+"监控大盘","应用"+$scope.app+"监控大盘","monitor-applicationOverview");
     $scope.dayRange=1;
     $httpWrapper.post({
             url:"monitor/"+$scope.app+"/services.htm",
@@ -111,7 +112,8 @@ var generateOptions=function(app,values,prop,name,dayRange){
 }
 
 monitor.controller("index",function($scope,$httpWrapper,$routeParams,$breadcrumb,$menu){
-    $menu.switchBarOnly("monitor");
+    $menu.switchMenu("monitor/index");
+    $breadcrumb.pushCrumb("监控大盘","监控大盘","monitor-index");
     var oneDay=24*60*60*1000;
     $scope.dayRange=1;
     $httpWrapper.post({
@@ -181,7 +183,8 @@ monitor.controller("monitorCharts",function($scope,$httpWrapper,$routeParams,$br
     $scope.service = $routeParams.service;
     $scope.application=$routeParams.application;
     $scope.method=$routeParams.method;
-    $menu.switchBarOnly("monitor");
+    $menu.switchMenu("monitor/index");
+    $breadcrumb.pushCrumb("应用"+$scope.application+"下服务"+$scope.service+"."+$scope.method+"监控大盘","应用"+$scope.application+"下服务"+$scope.service+"."+$scope.method+"监控大盘","monitor-monitorCharts");
     $scope.elapsedOptions={};
     $scope.concurrentOptions={};
     $scope.tpsOptions={};
@@ -306,9 +309,10 @@ monitor.controller("monitorCharts",function($scope,$httpWrapper,$routeParams,$br
 });
 
 monitor.controller("monitorOverview",function($scope,$httpWrapper,$routeParams,$breadcrumb,$menu,$interval){
-    $menu.switchBarOnly("monitor");
+    $menu.switchMenu("monitor/index");
     $scope.service=$routeParams.service;
     $scope.application=$routeParams.application;
+    $breadcrumb.pushCrumb("应用"+$scope.application+"下服务"+$scope.service+"基本监控信息","应用"+$scope.application+"下服务"+$scope.service+"基本监控信息","monitor-monitorOverview");
     $scope.timeRange={};
     var currentDate = new Date();
     $scope.timeRange.startTime= currentDate.getTime()-60*60*1000;

diff --git a/dubbokeeper-ui/src/main/webapp/templates/breadcrumb/breadcrumb.html b/dubbokeeper-ui/src/main/webapp/templates/breadcrumb/breadcrumb.html
@@ -1,7 +1,7 @@
 <div class="row">
     <div class="col-md-12 col-lg-12 col-xs-12">
         <ol class="breadcrumb">
-            <li  class="{{items.length>0?'active':''}}">
+            <li  class="{{items.length>0?'active':''}}" >
                 <a href="#{{home.url}}" title="{{home.tip}}" ng-show="items.length>0">{{home.name}}</a>
                 <span ng-show="items.length==0"  title="{{home.tip}}">{{home.name}}</span>
             </li>

diff --git a/dubbokeeper-ui/src/main/webapp/templates/monitor/application-index.html b/dubbokeeper-ui/src/main/webapp/templates/monitor/application-index.html
@@ -6,12 +6,12 @@
         <div class="row" style="padding-bottom: 10px;">
             <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12">
                 <div  isteven-multi-select
-                        input-model="serviceOptions"
-                        output-model="services"
-                        button-label="name"
-                        item-label="name"
-                        tick-property="ticked"
-                        orientation="horizontal"  >
+                      input-model="serviceOptions"
+                      output-model="services"
+                      button-label="name"
+                      item-label="name"
+                      tick-property="ticked"
+                      orientation="horizontal"  >
                 </div>
             </div>
         </div>
@@ -68,21 +68,21 @@
                         <div class="row" ng-show="service.showType=='elapsed'">
                             <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12 max-view-height">
                                 <table class="table table-hover table-condensed">
-                                     <thead>
-                                     <tr>
-                                         <th>#</th>
-                                         <th>消耗时间(ms)</th>
-                                         <th>方法名称</th>
-                                         <th>触发时间</th>
-                                     </tr>
-                                     </thead>
+                                    <thead>
+                                    <tr>
+                                        <th>#</th>
+                                        <th>消耗时间(ms)</th>
+                                        <th>方法名称</th>
+                                        <th>触发时间</th>
+                                    </tr>
+                                    </thead>
                                     <tbody>
-                                        <tr class="{{elapsed.remoteType=='CONSUMER'?'success':''}}" title="{{elapsed.remoteType=='CONSUMER'?'提供端':'消费端'}}" ng-repeat="elapsed in service.overview.elapsedItems">
-                                            <td>{{$index+1}}</td>
-                                            <td>{{elapsed.elapsed}}</td>
-                                            <td>{{elapsed.method}}</td>
-                                            <td>{{elapsed.timestamp | date : 'MM-dd hh:mm:ss'}}</td>
-                                        </tr>
+                                    <tr class="{{elapsed.remoteType=='CONSUMER'?'success':''}}" title="{{elapsed.remoteType=='CONSUMER'?'提供端':'消费端'}}" ng-repeat="elapsed in service.overview.elapsedItems">
+                                        <td>{{$index+1}}</td>
+                                        <td>{{elapsed.elapsed}}</td>
+                                        <td>{{elapsed.method}}</td>
+                                        <td>{{elapsed.timestamp | date : 'MM-dd hh:mm:ss'}}</td>
+                                    </tr>
                                     </tbody>
                                 </table>
                             </div>

diff --git a/dubbokeeper-ui/src/main/webapp/templates/monitor/index.html b/dubbokeeper-ui/src/main/webapp/templates/monitor/index.html
@@ -6,12 +6,12 @@
         <div class="row" style="padding-bottom: 10px;">
             <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12">
                 <div  isteven-multi-select
-                        input-model="appOptions"
-                        output-model="applications"
-                        button-label="name"
-                        item-label="name"
-                        tick-property="ticked"
-                        orientation="horizontal"  >
+                      input-model="appOptions"
+                      output-model="applications"
+                      button-label="name"
+                      item-label="name"
+                      tick-property="ticked"
+                      orientation="horizontal"  >
                 </div>
             </div>
         </div>
@@ -68,23 +68,23 @@
                         <div class="row" ng-show="app.showType=='elapsed'">
                             <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12 max-view-height">
                                 <table class="table table-hover table-condensed">
-                                     <thead>
-                                     <tr>
-                                         <th>#</th>
-                                         <th>消耗时间(ms)</th>
-                                         <th>服务名称</th>
-                                         <th>方法名称</th>
-                                         <th>触发时间</th>
-                                     </tr>
-                                     </thead>
+                                    <thead>
+                                    <tr>
+                                        <th>#</th>
+                                        <th>消耗时间(ms)</th>
+                                        <th>服务名称</th>
+                                        <th>方法名称</th>
+                                        <th>触发时间</th>
+                                    </tr>
+                                    </thead>
                                     <tbody>
-                                        <tr class="{{elapsed.remoteType=='CONSUMER'?'success':''}}" title="{{elapsed.remoteType=='CONSUMER'?'提供端':'消费端'}}" ng-repeat="elapsed in app.overview.elapsedItems">
-                                            <td>{{$index+1}}</td>
-                                            <td>{{elapsed.elapsed}}</td>
-                                            <td>{{elapsed.service}}</td>
-                                            <td>{{elapsed.method}}</td>
-                                            <td>{{elapsed.timestamp | date : 'MM-dd hh:mm:ss'}}</td>
-                                        </tr>
+                                    <tr class="{{elapsed.remoteType=='CONSUMER'?'success':''}}" title="{{elapsed.remoteType=='CONSUMER'?'提供端':'消费端'}}" ng-repeat="elapsed in app.overview.elapsedItems">
+                                        <td>{{$index+1}}</td>
+                                        <td>{{elapsed.elapsed}}</td>
+                                        <td>{{elapsed.service}}</td>
+                                        <td>{{elapsed.method}}</td>
+                                        <td>{{elapsed.timestamp | date : 'MM-dd hh:mm:ss'}}</td>
+                                    </tr>
                                     </tbody>
                                 </table>
                             </div>

diff --git a/dubbokeeper-ui/src/main/webapp/templates/monitor/monitor-charts.html b/dubbokeeper-ui/src/main/webapp/templates/monitor/monitor-charts.html
@@ -1,4 +1,3 @@
-
 <div class="panel panel-default">
     <div class="panel-heading">
         <i class="icon-bar-chart"></i> <span><strong class='text-primary'>{{service}}.{{method}}</strong>方法监控大盘</span>

diff --git a/dubbokeeper-ui/src/main/webapp/templates/monitor/monitor-overview.html b/dubbokeeper-ui/src/main/webapp/templates/monitor/monitor-overview.html
@@ -19,35 +19,35 @@
             <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12">
                 <table class="table-responsive table-striped table-hover table-condensed  table table-condensed">
                     <thead>
-                        <tr>
-                            <th>方法名</th>
-                            <th>耗时(ms)</th>
-                            <th>TPS</th>
-                            <th>KBPS</th>
-                            <th>并发</th>
+                    <tr>
+                        <th>方法名</th>
+                        <th>耗时(ms)</th>
+                        <th>TPS</th>
+                        <th>KBPS</th>
+                        <th>并发</th>
 
-                            <th>接受数据(byte)</th>
-                            <th>输出数据(byte)</th>
-                            <th>监控图表</th>
-                        </tr>
+                        <th>接受数据(byte)</th>
+                        <th>输出数据(byte)</th>
+                        <th>监控图表</th>
+                    </tr>
                     </thead>
                     <tbody>
-                        <tr ng-show="!details||details.length<=0">
-                            <td class="text-center text-warning" colspan="10">{{(isEmpty||!details||details.length<=0)?"未发现任何数据...":"努力加载中...."}}</td>
-                        </tr>
-                        <tr ng-show="details&&details.length>0"  ng-repeat="detail in details | orderBy : 'method'" class="ng-animation">
-                            <td>{{detail.method}}</td>
-                            <td>{{detail.minElapsed}}->{{detail.maxElapsed}}</td>
-                            <td>{{detail.minTps}}->{{detail.maxTps}}</td>
-                            <td>{{detail.minKbps}}->{{detail.maxKbps}}</td>
-                            <td>{{detail.minConcurrent}}->{{detail.maxConcurrent}}</td>
+                    <tr ng-show="!details||details.length<=0">
+                        <td class="text-center text-warning" colspan="10">{{(isEmpty||!details||details.length<=0)?"未发现任何数据...":"努力加载中...."}}</td>
+                    </tr>
+                    <tr ng-show="details&&details.length>0"  ng-repeat="detail in details | orderBy : 'method'" class="ng-animation">
+                        <td>{{detail.method}}</td>
+                        <td>{{detail.minElapsed}}->{{detail.maxElapsed}}</td>
+                        <td>{{detail.minTps}}->{{detail.maxTps}}</td>
+                        <td>{{detail.minKbps}}->{{detail.maxKbps}}</td>
+                        <td>{{detail.minConcurrent}}->{{detail.maxConcurrent}}</td>
 
-                            <td>{{detail.minOutput}}->{{detail.maxOutput}}</td>
-                            <td>{{detail.minInput}}->{{detail.maxInput}}</td>
-                            <td>
-                                <a href="#/monitor/{{application}}/{{service}}/{{detail.method}}/charts">查看监控图表</a>
-                            </td>
-                        </tr>
+                        <td>{{detail.minOutput}}->{{detail.maxOutput}}</td>
+                        <td>{{detail.minInput}}->{{detail.maxInput}}</td>
+                        <td>
+                            <a href="#/monitor/{{application}}/{{service}}/{{detail.method}}/charts">查看监控图表</a>
+                        </td>
+                    </tr>
                     </tbody>
                 </table>
             </div>