Merge branch 'master' of http://git.yoho.cn/ops/monitor-ui

+<%@ page import="org.aspectj.weaver.ast.Var"%>
 <%@ page language="java" contentType="text/html; charset=UTF-8"
 <%@ page language="java" contentType="text/html; charset=UTF-8"
          pageEncoding="UTF-8"%>
          pageEncoding="UTF-8"%>
-
 <%
 <%
     String path = request.getContextPath();
     String path = request.getContextPath();
     String basePath = request.getScheme() + "://"
     String basePath = request.getScheme() + "://"
             + request.getServerName() + ":" + request.getServerPort()
             + request.getServerName() + ":" + request.getServerPort()
             + path + "/";
             + path + "/";
 %>
 %>
-<script type="text/javascript" src="<%=basePath %>/js/jquery.min.js"></script>
-<script language="JavaScript" src="<%=basePath %>/js/charts/FusionCharts.js"></script>
+
 <div id="breadcrumb">
 <div id="breadcrumb">
     <a href="#" title="Go to Home" class="tip-bottom"><i
     <a href="#" title="Go to Home" class="tip-bottom"><i
-            class="icon-home"></i> Home</a> <a href="#" class="current">Redis监控</a>
+            class="icon-home"></i> Home</a> <a href="#" class="current">Redis</a>
 </div>
 </div>
 
 
 <div class="container-fluid">
 <div class="container-fluid">
-    <div class="widget-box">
-        <div class="widget-title">
-            <h5>Redis监控</h5>
+    <div class="row-fluid"
+         style="border: solid 1px #CDC9C9; padding: 10px">
+        <div class="span12">
+            <div class="section section-visible">
+                <h3 style="margin-left: 16px;">REDIS(最近两分钟)</h3>
+                <div id="redisAppendDiv">
+
+                </div>
+
+            </div>
+            <!-- row -->
         </div>
         </div>
-        <div class="widget-content nopadding" id="charDiv">
 
 
+    </div>
+</div>
+
+
+
+<div class="modal fade"  style="margin-top: 60px;" id="myRedisProxyDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal"
+                        aria-hidden="true">&times;</button>
+                <h4 class="modal-title" id="myModalLabel"></h4>
+            </div>
+            <div class="modal-body" id="redislistDetail">
+
+            </div>
         </div>
         </div>
+        <!-- /.modal-content -->
     </div>
     </div>
+    <!-- /.modal -->
 </div>
 </div>
-<div id="testDiv"></div>
+
 <script type="text/javascript">
 <script type="text/javascript">
+    var myMasterRedis=new Array();
+    var mySlaveRedis=new Array();
     $.ajax({
     $.ajax({
-        url: contextPath + "/redisInfo/getRedisInfo",
-        type: 'post',
+        url: contextPath + "redisInfo/getRedisInfo",
+        type: 'get',
         async: false,
         async: false,
         dataType: "json",
         dataType: "json",
         success: function (data) {
         success: function (data) {
-            if(data.data!=null&&data.data!=''){
-                $.each(data.data, function (n, value) {
-                    var idDiv="chartdiv"+n;
-                    $("#charDiv").prepend('<div id="'+idDiv+'" align="center" style="width:600px;">FusionCharts. </div>');
-                    var chart0 = new FusionCharts("<%=basePath %>/js/charts/DragNode.swf", "ChartId", "1200", "650", "0");
-                    chart0.setXMLData(value);
-                    chart0.render(idDiv);
+            var time="";
+            var awsHtml = '';
+            if(data.data != null){
+                $.each(data.data,function(name,value) {
+                    var contentHtml="";
+                    var topNode="";
+                    var activeCount=0;
+                    var failedCount=0;
+                    var successIp='';
+                    var failedIp="";
+                    $.each(value, function (n, obj) {
+                        if(obj.level==0){
+                            topNode=obj.nodeFrom;
+                            return true;
+                        }
+                        if(obj.level==1){
+                            if(obj.isFailed==1){
+                                successIp=successIp+'<a href="#" style="color: white;" onclick="displatyTetail(\''+obj.nodeTo+'\')">'+obj.nodeTo+'('+obj.paramMonitor+')</a><br/>';
+                                activeCount=activeCount+1;
+                            }else if(obj.isFailed==0){
+                                failedCount=failedCount+1;
+                                failedIp=failedIp+obj.nodeTo+'<br/>';
+                            }
+                            return true;
+                        }
+                        if(obj.level==2){
+                            if(obj.isSlave==0){
+                                myMasterRedis.push(obj);
+                            }else if(obj.isSlave==1){
+                                mySlaveRedis.push(obj);
+                            }
 
 
+                        }
+                    });
+                    contentHtml='<div class="col-md-4" id="aws" style="height: 300px;">'+
+                        '<div class="panel panel-success-alt noborder" style="background-color: #5cb85c;">'+
+                        '<div class="panel-heading noborder">'+
+                        '<div>'+ '<div style="margin-left: 18px;"><img src="img/log_redis.png"><span style="font-size:28px;color: white;margin-left: 180px;">'+topNode+'</span></div>'+
+                        '</div>'+
+                        '<hr>'+
+                        '<div class="clearfix mt15">'+
+                        '<div class="pull-left">'+
+                        '<h5 class="md-title nomargin" style="color: white;">twemproxy列表:'+activeCount+'(好),'+failedCount+'(失败)</h5>'+
+                        '<h4 class="nomargin" style="font-size: 16px; line-height: 21px;">'+successIp+'</h4>'+
+                        '</div>'+
+                        '</div>'+
+                        '</div>'+
+                        '</div>'+
+                        '</div>';
+                    $("#redisAppendDiv").append(contentHtml);
                 });
                 });
-            }else{
-                alert("数据加载失败！");
             }
             }
         }
         }
     });
     });
+
+    function displatyTetail(ip){
+        var detailListRedis=new Array();
+        $.each(myMasterRedis, function (i, myMasterObj) {
+            if(ip==myMasterObj.nodeFrom){
+                detailListRedis.push(myMasterObj);
+                $.each(mySlaveRedis, function (j, mySlaveObj) {
+                    if(myMasterObj.nodeTo==mySlaveObj.nodeFrom){
+                        detailListRedis.push(mySlaveObj);
+                    }
+                });
+            }
+        });
+
+        $("#redislistDetail").table({
+            columnAutoWidth : false,
+            data : detailListRedis,
+            striped : true,
+            columns : [{
+                title : "nodeFrom",
+                field : "nodeFrom",
+                width : "12%"
+            },{
+                title : "nodeTo",
+                field : "nodeTo",
+                width : "12%"
+            },{
+                title : "redis监控信息",
+                field : "paramMonitor",
+                width : "12%"
+            }]
+        });
+        $("#myModalLabel").text("twemproxy详细信息");
+        $("#myRedisProxyDetail").modal('show');
+    }
+
 </script>
 </script>