ops / monitor-ui · Commits

Go to a project

Authored by linlong
Commit 209c1419b431f9c316996f52c9a11b53bfd75c67 1 parent f46b37c5

redis监控界面优化

Inline Side-by-side
Showing 2 changed files with 110 additions and 11 deletions
... ... @@ -2,12 +2,15 @@ package com.ui.ctrl;
import com.ui.http.HttpRestClient;
import com.ui.model.BaseResponse;
import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.util.*;
/**
* Created by yoho on 2016/9/21.
*/
... ... @@ -32,7 +35,57 @@ public class RedisMonitorCtrl {
@RequestMapping(value = "/allTwemproxy")
public BaseResponse queryAllTwemproxy() {
BaseResponse baseResponse = httpRestClient.defaultGet("/redisMonitor/allTwemproxy", BaseResponse.class);
List list = (ArrayList) baseResponse.getData();
//countMap key为Twemproxy业务分类，value为业务分类的Twemproxy在list中出现的index
Map<String,List<Integer>> countMap = new HashMap<>();
for(int i=0;i<list.size();i++){
Map twemproxy = (LinkedHashMap) list.get(i);
if(countMap.containsKey(twemproxy.get("name"))){
countMap.get(twemproxy.get("name")).add(i);
}else{
List<Integer> temp = new ArrayList<>();
temp.add(i);
countMap.put((String) twemproxy.get("name"),temp);
}
}
List result = new ArrayList();
for (Map.Entry<String,List<Integer>> entry : countMap.entrySet()) {
List<Integer> temp =entry.getValue();
if(temp.size()>1){ //业务分类相同的进行合并，先取出第一个，再将其他的合并到第一个中去，再加入到返回result中
Map twemproxy = (LinkedHashMap) list.get(temp.get(0));
//把其他相同的加到第一个后去
for(int i=1;i<temp.size();i++){
Map tempTwemproxy = (LinkedHashMap) list.get(temp.get(i));
twemproxy.put("connections",(String)twemproxy.get("connections")+"\r\n"+(String)tempTwemproxy.get("connections"));
twemproxy.put("state",(String)twemproxy.get("state")+"\r\n"+(String)tempTwemproxy.get("state"));
twemproxy.put("network",(String)twemproxy.get("network")+"\r\n"+(String)tempTwemproxy.get("network"));
twemproxy.put("taskCtime",(String)twemproxy.get("taskCtime")+"\r\n"+(String)tempTwemproxy.get("taskCtime"));
twemproxy.put("type",(String)twemproxy.get("type")+"\r\n"+(String)tempTwemproxy.get("type"));
twemproxy.put("url",(String)twemproxy.get("url")+"\r\n"+(String)tempTwemproxy.get("url"));
}
result.add(twemproxy);
}else{ //业务分类仅有一个，直接加入到返回result
Map twemproxy = (LinkedHashMap) list.get(temp.get(0));
result.add(twemproxy);
}
}
//对result结果根据网络归属排序
Collections.sort(result, new Comparator<LinkedHashMap>() {
@Override
public int compare(LinkedHashMap o1, LinkedHashMap o2) {
String type1 = (String) o1.get("type");
String type2 = (String) o2.get("type");
if (type1.compareTo(type2)>0) {
return 1;
}else if(type1.compareTo(type2)<0){
return -1;
}
return 0;
}
});
baseResponse.setData(result);
return baseResponse;
}
... ...
... ... @@ -130,31 +130,76 @@
columns: [
{
title: "业务分类",
field: "name"
// field: "name"
formatter: function (value, rowData, rowIndex) {
return "<div style=' padding:10px;'>"+rowData.name+"</div>";
}
},
{
title: "地址",
field: "url"
// field: "url"
formatter: function (value, rowData, rowIndex) {
var array = rowData.url.split("\r\n");
var div = "";
for(var i=0;i<array.length;i++)
div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
return div;
}
}, {
title: "当前连接数",
width: "100px",
field: "connections"
// field: "connections"
formatter: function (value, rowData, rowIndex) {
var array = rowData.connections.split("\r\n");
var div = "";
for(var i=0;i<array.length;i++)
div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
return div;
}
}, {
title: "启动时长",
width: "100px",
field: "taskCtime"
// field: "taskCtime"
formatter: function (value, rowData, rowIndex) {
var array = rowData.taskCtime.split("\r\n");
var div = "";
for(var i=0;i<array.length;i++)
div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
return div;
}
}, {
title: "类型",
width: "100px",
field: "type"
width: "120px",
//field: "type"
formatter: function (value, rowData, rowIndex) {
var array = rowData.type.split("\r\n");
var div = "";
for(var i=0;i<array.length;i++)
div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
return div;
}
}, {
title: "网络归属",
width: "100px",
field: "network"
width: "120px",
// field: "network"
formatter: function (value, rowData, rowIndex) {
var array = rowData.network.split("\r\n");
var div = "";
for(var i=0;i<array.length;i++)
div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
return div;
}
}, {
title: "状态",
width: "100px",
field: "state"
// field: "state"
formatter: function (value, rowData, rowIndex) {
var array = rowData.state.split("\r\n");
var div = "";
for(var i=0;i<array.length;i++)
div = div+ "<div style='height:30px;padding:10px;'>"+array[i]+"</div>";
return div;
}
}, {
title: "Redis",
formatter: function (value, rowData, rowIndex) {
... ... @@ -167,7 +212,7 @@
title: "运行详情",
width: "100px",
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var div = $("<div style=' padding:10px;'>");
//查看volume——instance信息
var shotTaskInfoBtn = $("<button data-target='#updateModal' data-toggle='modal'>").addClass("btn btn-xs btn-primary").html("INFO").appendTo(div);
... ... @@ -189,9 +234,10 @@
function showRedisInfo(rowData) {
var vId = rowData.volumeId;
var array = rowData.url.split("\r\n");
console.log("vId:" + vId);
$("#snapshotTable").table({
url: contextPath + "redisMonitor/allRedis?twemproxy=" + rowData.url,
url: contextPath + "redisMonitor/allRedis?twemproxy=" + array[0],
method: "GET",
striped: true,
panelClass: "panel-success",
... ...