ref dubboclub#5 完成对一个应用下面服务的概要监控

gaoyibing111 · Nov 7, 2015 · 5f72f61 · 5f72f61
1 parent 2ae744b
commit 5f72f61
Show file tree

Hide file tree

Showing 8 changed files with 189 additions and 76 deletions.
diff --git a/dubbokeeper-ui/src/main/java/com/dubboclub/web/controller/MonitorController.java b/dubbokeeper-ui/src/main/java/com/dubboclub/web/controller/MonitorController.java
@@ -9,7 +9,8 @@
 import com.alibaba.dubbo.common.utils.StringUtils;
 import com.dubboclub.admin.model.Provider;
 import com.dubboclub.admin.service.ProviderService;
-import com.dubboclub.monitor.model.ApplicationOverview;
+import com.dubboclub.monitor.model.ServiceInfo;
+import com.dubboclub.monitor.model.StatisticsOverview;
 import com.dubboclub.monitor.model.MethodMonitorOverview;
 import com.dubboclub.monitor.storage.StatisticsStorage;
 import com.dubboclub.web.model.MethodStatistics;
@@ -73,14 +74,21 @@ Collection<MethodMonitorOverview> overviewService(@PathVariable("application")St
 
     @RequestMapping("/{application}/{dayRange}/overview.htm")
     public @ResponseBody
-    ApplicationOverview queryApplicationOverview(@PathVariable("application")String application,@PathVariable("dayRange")int dayRange){
+    StatisticsOverview queryApplicationOverview(@PathVariable("application")String application,@PathVariable("dayRange")int dayRange){
         long currentTime = System.currentTimeMillis();
         return statisticsStorage.queryApplicationOverview(application,currentTime-(dayRange*ONE_DAY),currentTime);
     }
+    @RequestMapping("/{application}/{service}/{dayRange}/overview.htm")
+    public @ResponseBody
+    StatisticsOverview queryServiceOverview(@PathVariable("application")String application,@PathVariable("service")String service,@PathVariable("dayRange")int dayRange){
+        long currentTime = System.currentTimeMillis();
+        return statisticsStorage.queryServiceOverview(application, service, currentTime - (dayRange * ONE_DAY), currentTime);
+    }
+
 
 
     @RequestMapping("/{application}/services.htm")
-    public @ResponseBody Collection<String> queryServiceByApp(@PathVariable("application")String application){
+    public @ResponseBody Collection<ServiceInfo> queryServiceByApp(@PathVariable("application")String application){
         return statisticsStorage.queryServiceByApp(application);
     }
 

diff --git a/dubbokeeper-ui/src/main/webapp/css/dubbokeeper.css b/dubbokeeper-ui/src/main/webapp/css/dubbokeeper.css
@@ -87,4 +87,7 @@ body{
 .max-view-height{
     max-height: 600px;
     overflow: auto;
+}
+.white-color{
+    color:#ffffff;
 }
diff --git a/dubbokeeper-ui/src/main/webapp/js/modules/monitor/monitor.js b/dubbokeeper-ui/src/main/webapp/js/modules/monitor/monitor.js
@@ -28,15 +28,16 @@ monitor.controller("applicationOverview",function($scope,$httpWrapper,$routePara
                     $scope.serviceOptions = [];
                     for(var i=0;i<data.length;i++){
                         var option = {};
-                        option.name=data[i];
+                        option.name=data[i].name;
+                        option.remoteType=data[i].remoteType;
                         option.ticked=true;
                         option.elapsed={};
                         option.concurrent={};
                         option.fault={};
                         option.success={};
                         if(i==0){
                             option.show=true;
-                            //loadApplicationOverview(option);
+                            loadServiceOverview(option);
                         }
                         option.showType='chart';
                         $scope.serviceOptions.push(option);
@@ -46,8 +47,69 @@ monitor.controller("applicationOverview",function($scope,$httpWrapper,$routePara
             }
         }
     );
+    $scope.switchView = function(service,type){
+        service.showType=type;
+    }
+    var loadServiceOverview=function(service){
+        $httpWrapper.post({
+            url:"monitor/"+$scope.app+"/"+service.name+"/"+$scope.dayRange+"/overview.htm",
+            success:function(data){
+                service.overview=data;
+                generateOptions(service,data.elapsedItems,'elapsed','耗时(ms)',$scope.dayRange);
+                generateOptions(service,data.concurrentItems,'concurrent','并发',$scope.dayRange);
+                generateOptions(service,data.faultItems,'fault','失败次数',$scope.dayRange);
+                generateOptions(service,data.successItems,'success','成功次数',$scope.dayRange);
+            }
+        })
+    }
+    $scope.toggleAppCharts=function(service){
+        if(service.show){
+            service.show=false;
+        }else{
+            loadServiceOverview(service);
+            service.show=true;
+        }
+    }
+    $scope.switchTimeRange=function(dayRange){
+        $scope.dayRange=dayRange;
+        for(var i=0;i<$scope.services.length;i++){
+            if($scope.services[i].show){
+                loadServiceOverview($scope.services[i]);
+            }
+        }
+
+    }
 })
 
+var generateMainData = function(items,prop){
+    var values = [];
+    for(var i=0;i<items.length;i++){
+        values.push(items[i][prop]);
+    }
+    return values;
+}
+var generateXAxisData=function(items){
+    var xAxisData = [];
+    for(var i=0;i<items.length;i++){
+        var date = new Date(items[i].timestamp);
+        var item = items[i].method+"于"+date.getDate()+"日"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
+        xAxisData.push(item);
+    }
+    return xAxisData;
+}
+var generateOptions=function(app,values,prop,name,dayRange){
+    var options = {};
+    if(!values){
+        app[prop]=options;
+        return;
+    }
+    options.title="在"+dayRange+"天内的"+name+"TOP200";
+    options.subTitle="来自应用端";
+    options.seriesConfig=[{name:name,data:generateMainData(values,prop)}];
+    options.xAxis=generateXAxisData(values);
+    app[prop]=options;
+}
+
 monitor.controller("index",function($scope,$httpWrapper,$routeParams,$breadcrumb,$menu){
     $menu.switchBarOnly("monitor");
     var oneDay=24*60*60*1000;
@@ -85,43 +147,17 @@ monitor.controller("index",function($scope,$httpWrapper,$routeParams,$breadcrumb
             url:"monitor/"+app.name+"/"+$scope.dayRange+"/overview.htm",
             success:function(data){
                 app.overview=data;
-                generateOptions(app,data.elapsedItems,'elapsed','耗时(ms)');
-                generateOptions(app,data.concurrentItems,'concurrent','并发');
-                generateOptions(app,data.faultItems,'fault','失败次数');
-                generateOptions(app,data.successItems,'success','成功次数');
+                generateOptions(app,data.elapsedItems,'elapsed','耗时(ms)',$scope.dayRange);
+                generateOptions(app,data.concurrentItems,'concurrent','并发',$scope.dayRange);
+                generateOptions(app,data.faultItems,'fault','失败次数',$scope.dayRange);
+                generateOptions(app,data.successItems,'success','成功次数',$scope.dayRange);
             }
         })
     }
 
-    var generateOptions=function(app,values,prop,name){
-        var options = {};
-        if(!values){
-            app[prop]=options;
-            return;
-        }
-        options.title="在"+$scope.dayRange+"天内的"+name+"TOP200";
-        options.subTitle="来自应用端";
-        options.seriesConfig=[{name:name,data:generateMainData(values,prop)}];
-        options.xAxis=generateXAxisData(values);
-        app[prop]=options;
-    }
 
-    var generateMainData = function(items,prop){
-        var values = [];
-        for(var i=0;i<items.length;i++){
-            values.push(items[i][prop]);
-        }
-        return values;
-    }
-    var generateXAxisData=function(items){
-        var xAxisData = [];
-        for(var i=0;i<items.length;i++){
-            var date = new Date(items[i].timestamp);
-            var item = items[i].service+"."+items[i].method+"于"+date.getDate()+"日"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
-            xAxisData.push(item);
-        }
-        return xAxisData;
-    }
+
+
     $scope.toggleAppCharts=function(app){
         if(app.show){
             app.show=false;

diff --git a/dubbokeeper-ui/src/main/webapp/templates/monitor/application-index.html b/dubbokeeper-ui/src/main/webapp/templates/monitor/application-index.html
@@ -31,17 +31,17 @@
         </div>
         <div class="row"  ng-repeat="service in services">
             <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12">
-                <div class="panel panel-default">
-                    <div class="panel-heading"><i class="icon-cloud"></i> {{service.name}} <span style="float: right;cursor: pointer;"><a href="#/monitor/{{app}}/{{service.name}}/overview">详细信息>></a>&nbsp;&nbsp;<i class="glyphicon {{service.show?'glyphicon-chevron-up':'glyphicon-chevron-down'}}"  ng-click="toggleAppCharts(service)"></i></span></div>
+                <div class="panel {{service.remoteType=='CONSUMER'?'panel-success':'panel-info'}}">
+                    <div class="panel-heading"><i class="glyphicon glyphicon-th-large"></i> {{service.remoteType=='CONSUMER'?'发布的服务':'订阅的服务'}}{{service.name}} <span style="float: right;cursor: pointer;"><a href="#/monitor/{{app}}/{{service.name}}/overview" class="{{service.remoteType=='CONSUMER'?'white-color':''}}">详细信息&gt;&gt;</a>&nbsp;&nbsp;<i class="glyphicon {{service.show?'glyphicon-chevron-up':'glyphicon-chevron-down'}}"  ng-click="toggleAppCharts(service)"></i></span></div>
                     <div class="panel-body" ng-show="service.show">
                         <div class="row">
                             <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12">
                                 <ul class="nav nav-tabs">
-                                    <li role="presentation" ng-click="switchView(service,'chart')" class="{{app.showType=='chart'?'active':''}} can-click"><a href="javascript:void(0);">图表</a></li>
-                                    <li role="presentation" ng-click="switchView(service,'elapsed')" class="{{app.showType=='elapsed'?'active':''}} can-click"><a href="javascript:void(0);">耗时详细列表</a></li>
-                                    <li role="presentation" ng-click="switchView(service,'concurrent')" class="{{app.showType=='concurrent'?'active':''}} can-click"><a href="javascript:void(0);">并发详细列表</a></li>
-                                    <li role="presentation" ng-click="switchView(service,'fault')" class="{{app.showType=='fault'?'active':''}} can-click"><a href="javascript:void(0);">失败详细列表</a></li>
-                                    <li role="presentation" ng-click="switchView(service,'success')" class="{{app.showType=='success'?'active':''}} can-click"><a href="javascript:void(0);">成功详细列表</a></li>
+                                    <li role="presentation" ng-click="switchView(service,'chart')" class="{{service.showType=='chart'?'active':''}} can-click"><a href="javascript:void(0);">图表</a></li>
+                                    <li role="presentation" ng-click="switchView(service,'elapsed')" class="{{service.showType=='elapsed'?'active':''}} can-click"><a href="javascript:void(0);">耗时详细列表</a></li>
+                                    <li role="presentation" ng-click="switchView(service,'concurrent')" class="{{service.showType=='concurrent'?'active':''}} can-click"><a href="javascript:void(0);">并发详细列表</a></li>
+                                    <li role="presentation" ng-click="switchView(service,'fault')" class="{{service.showType=='fault'?'active':''}} can-click"><a href="javascript:void(0);">失败详细列表</a></li>
+                                    <li role="presentation" ng-click="switchView(service,'success')" class="{{service.showType=='success'?'active':''}} can-click"><a href="javascript:void(0);">成功详细列表</a></li>
                                 </ul>
                             </div>
                         </div>
@@ -72,7 +72,6 @@
                                      <tr>
                                          <th>#</th>
                                          <th>消耗时间(ms)</th>
-                                         <th>服务名称</th>
                                          <th>方法名称</th>
                                          <th>触发时间</th>
                                      </tr>
@@ -81,7 +80,6 @@
                                         <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.service}}</td>
                                             <td>{{elapsed.method}}</td>
                                             <td>{{elapsed.timestamp | date : 'MM-dd hh:mm:ss'}}</td>
                                         </tr>
@@ -96,16 +94,14 @@
                                     <tr>
                                         <th>#</th>
                                         <th>并发数量</th>
-                                        <th>服务名称</th>
                                         <th>方法名称</th>
                                         <th>触发时间</th>
                                     </tr>
                                     </thead>
                                     <tbody>
-                                    <tr class="{{concurrent.remoteType=='CONSUMER'?'success':''}}"  title="{{concurrent.remoteType=='CONSUMER'?'提供端':'消费端'}}"  ng-repeat="concurrent in app.overview.concurrentItems">
+                                    <tr class="{{concurrent.remoteType=='CONSUMER'?'success':''}}"  title="{{concurrent.remoteType=='CONSUMER'?'提供端':'消费端'}}"  ng-repeat="concurrent in service.overview.concurrentItems">
                                         <td>{{$index+1}}</td>
                                         <td>{{concurrent.concurrent}}</td>
-                                        <td>{{concurrent.service}}</td>
                                         <td>{{concurrent.method}}</td>
                                         <td>{{concurrent.timestamp | date : 'MM-dd hh:mm:ss'}}</td>
                                     </tr>
@@ -120,16 +116,14 @@
                                     <tr>
                                         <th>#</th>
                                         <th>失败数量</th>
-                                        <th>服务名称</th>
                                         <th>方法名称</th>
                                         <th>触发时间</th>
                                     </tr>
                                     </thead>
                                     <tbody>
-                                    <tr class="{{fault.remoteType=='CONSUMER'?'success':''}}"  title="{{fault.remoteType=='CONSUMER'?'提供端':'消费端'}}"  ng-repeat="fault in app.overview.faultItems">
+                                    <tr class="{{fault.remoteType=='CONSUMER'?'success':''}}"  title="{{fault.remoteType=='CONSUMER'?'提供端':'消费端'}}"  ng-repeat="fault in service.overview.faultItems">
                                         <td>{{$index+1}}</td>
                                         <td>{{fault.fault}}</td>
-                                        <td>{{fault.service}}</td>
                                         <td>{{fault.method}}</td>
                                         <td>{{fault.timestamp | date : 'MM-dd hh:mm:ss'}}</td>
                                     </tr>
@@ -144,16 +138,14 @@
                                     <tr>
                                         <th>#</th>
                                         <th>成功数量</th>
-                                        <th>服务名称</th>
                                         <th>方法名称</th>
                                         <th>触发时间</th>
                                     </tr>
                                     </thead>
                                     <tbody>
-                                    <tr class="{{success.remoteType=='CONSUMER'?'success':''}}"  title="{{success.remoteType=='CONSUMER'?'提供端':'消费端'}}"  ng-repeat="success in app.overview.successItems">
+                                    <tr class="{{success.remoteType=='CONSUMER'?'success':''}}"  title="{{success.remoteType=='CONSUMER'?'提供端':'消费端'}}"  ng-repeat="success in service.overview.successItems">
                                         <td>{{$index+1}}</td>
                                         <td>{{success.success}}</td>
-                                        <td>{{success.service}}</td>
                                         <td>{{success.method}}</td>
                                         <td>{{success.timestamp | date : 'MM-dd hh:mm:ss'}}</td>
                                     </tr>

diff --git a/monitor/src/main/java/com/dubboclub/monitor/model/ServiceInfo.java b/monitor/src/main/java/com/dubboclub/monitor/model/ServiceInfo.java
@@ -0,0 +1,26 @@
+package com.dubboclub.monitor.model;
+
+/**
+ * Created by bieber on 2015/11/7.
+ */
+public class ServiceInfo {
+    private String name;
+
+    private String remoteType;
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getRemoteType() {
+        return remoteType;
+    }
+
+    public void setRemoteType(String remoteType) {
+        this.remoteType = remoteType;
+    }
+}
diff --git a/...ub/monitor/model/ApplicationOverview.java → ...lub/monitor/model/StatisticsOverview.java b/...ub/monitor/model/ApplicationOverview.java → ...lub/monitor/model/StatisticsOverview.java
@@ -5,7 +5,7 @@
 /**
  * Created by bieber on 2015/11/3.
  */
-public class ApplicationOverview {
+public class StatisticsOverview {
 
     private List<ConcurrentItem> concurrentItems;
 

diff --git a/monitor/src/main/java/com/dubboclub/monitor/storage/StatisticsStorage.java b/monitor/src/main/java/com/dubboclub/monitor/storage/StatisticsStorage.java
@@ -1,9 +1,9 @@
 package com.dubboclub.monitor.storage;
 
-import com.dubboclub.monitor.model.ApplicationOverview;
+import com.dubboclub.monitor.model.ServiceInfo;
+import com.dubboclub.monitor.model.StatisticsOverview;
 import com.dubboclub.monitor.model.MethodMonitorOverview;
 import com.dubboclub.monitor.model.Statistics;
-import com.dubboclub.monitor.model.Usage;
 
 import java.util.Collection;
 import java.util.List;
@@ -48,15 +48,28 @@ public interface StatisticsStorage {
      * @param application
      * @return
      */
-    public ApplicationOverview queryApplicationOverview(String application,long start,long end);
+    public StatisticsOverview queryApplicationOverview(String application,long start,long end);
+
+
+    /**
+     * 查询某个应用下面某个服务的统计信息
+     * @param application
+     * @param service
+     * @param start
+     * @param end
+     * @return
+     */
+    public StatisticsOverview queryServiceOverview(String application,String service,long start,long end);
 
 
     /**
      * 查询某个应用里面提供的服务列表
      * @param application
      * @return
      */
-    public Collection<String> queryServiceByApp(String application);
+    public Collection<ServiceInfo> queryServiceByApp(String application);
+
+