ops / monitor-ui · Commits

Go to a project

Authored by FengRuwei
Commit 4371203af9159eb206be2e41975acba0afc7cb4f 1 parent 5c85f36e

从数据库读取java服务类型

Inline Side-by-side
Showing 5 changed files with 261 additions and 154 deletions
... ... @@ -20,7 +20,7 @@ public class HttpUriContants {
public static String TYPE_DEL = "/type/delete";
public static String TYPE_UPDATE = "/type/update";
public static String TYPE_QUERY_NODE = "/type/queryNode";
public static String TYPE_QUERY_JAVAAPI = "/type/queryJavaApi";
/*** 主机信息 ****/
public static final String GET_HOST_INFOS = "/hostInfo/getHostInfos";
... ...
... ... @@ -97,6 +97,11 @@ public class TypeCtrl {
return response;
}
@RequestMapping("/queryJavaApiType")
@ResponseBody
public BaseResponse queryAllJavaApiType() throws Exception {
BaseResponse response=httpClient.defaultGet(HttpUriContants.TYPE_QUERY_JAVAAPI, BaseResponse.class);
return response;
}
}
... ...
<%@page language="java" contentType="text/html;charset=utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css" />
<link href="<%=basePath %>js/bootstrap-plugin/css/bootstrap.table.css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="<%=basePath %>css/fullcalendar.css" />
<link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css" />
<link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css" class="skin-color" />
<link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css" />
<link rel="stylesheet" href="<%=basePath %>css/uniform.css" />
<link rel="stylesheet" href="<%=basePath %>css/select2.css" />
<link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
<script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>/js/bootstrap.min.js"></script>
<script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/jstree/jstree.min.js"></script>
<script src="<%=basePath %>js/jquery.toaster.js"></script>
<script>
var contextPath='<%=basePath %>';
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
<link href="<%=basePath %>js/bootstrap-plugin/css/bootstrap.table.css" rel="stylesheet" media="screen"/>
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/fullcalendar.css"/>
<link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
<link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css" class="skin-color"/>
<link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
<link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
<link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
<link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
<script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>/js/bootstrap.min.js"></script>
<script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/jstree/jstree.min.js"></script>
<script src="<%=basePath %>js/jquery.toaster.js"></script>
<script>
var contextPath = '<%=basePath %>';
</script>
<title>YOHO!运维</title>
<title>YOHO!运维</title>
</head>
<body>
<!-- 头部 -->
<div id="head">
<h5 style="color: #E0EEE0;font-style:oblique;font-weight:900;font-size:200%;margin-left: 45px;margin-top: 40px;">YOHO</h5>
</div>
<!-- 头部 -->
<div id="head">
<h5 style="color: #E0EEE0;font-style:oblique;font-weight:900;font-size:200%;margin-left: 45px;margin-top: 40px;">
YOHO</h5>
</div>
<!-- 左侧菜单项 -->
<div id="sidebar">
<ul>
<li class=""><a href="#"><i class="icon icon-home"></i> <span>Dashboard</span></a></li>
<li class="" id="jspmobjectmobjectInfojsp" onclick="clickMenuToPage('jsp/mobject/mobjectInfo.jsp')"><a href="#" ><i class="icon icon-th"></i> <span>监控对象</span></a></li>
<li class="" id="jsphosthostGroupListjsp" onclick="clickMenuToPage('jsp/host/hostGroupList.jsp')" ><a href="#" ><i class="icon icon-th"></i> <span>主机组</span></a></li>
<li class="" id="jsphosthostInfoListjsp" onclick="clickMenuToPage('jsp/host/hostInfoList.jsp')" ><a href="#" ><i class="icon icon-th"></i> <span>主机信息</span></a></li>
<li class="" id="javaApiListjsp" onclick="clickMenuToPage('jsp/javaapi/javaApiList.jsp')" ><a href="#" ><i class="icon icon-th"></i> <span>JAVA服务信息</span></a></li>
<!-- 左侧菜单项 -->
<div id="sidebar">
<ul>
<li class=""><a href="#"><i class="icon icon-home"></i> <span>Dashboard</span></a></li>
<li class="" id="jspmobjectmobjectInfojsp" onclick="clickMenuToPage('jsp/mobject/mobjectInfo.jsp')"><a href="#"><i
class="icon icon-th"></i> <span>监控对象</span></a></li>
<li class="" id="jsphosthostGroupListjsp" onclick="clickMenuToPage('jsp/host/hostGroupList.jsp')"><a href="#"><i
class="icon icon-th"></i> <span>主机组</span></a></li>
<li class="" id="jsphosthostInfoListjsp" onclick="clickMenuToPage('jsp/host/hostInfoList.jsp')"><a href="#"><i
class="icon icon-th"></i> <span>主机信息</span></a></li>
<li class="" id="jspjavaapijavaApiListjsp" onclick="clickMenuToPage('jsp/javaapi/javaApiList.jsp')"><a
href="#"><i class="icon icon-th"></i> <span>JAVA服务信息</span></a></li>
</ul>
</div>
<!-- 右侧具体内容 -->
<div id="content">
</ul>
</div>
<!-- 右侧具体内容 -->
<div id="content">
</div>
</div>
<script type="text/javascript">
function clickMenuToPage(page){
var g = page.replace(/\//g,"").replace(".","");
$("#"+g).addClass("active").siblings().removeClass("active");
//加载左侧内容
$("#content").load(contextPath+page);
}
<script type="text/javascript">
function clickMenuToPage(page) {
var g = page.replace(/\//g, "").replace(".", "");
$("#" + g).addClass("active").siblings().removeClass("active");
//加载左侧内容
$("#content").load(contextPath + page);
}
function localAlert(title,message){
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title : title,
backdrop : "static",
content : message,
buttons : [{
text : "确定",
className : "btn-danger",
onclick : function() {
$(dialog).dialog("hide");
}
}]
});
}
</script>
</body>
function localAlert(title, message) {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: title,
backdrop: "static",
content: message,
buttons: [{
text: "确定",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}]
});
}
</script>
</body>
</html>
\ No newline at end of file
... ...
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@page language="java" contentType="text/html;charset=utf-8" %>
<form method="post" class="form-horizontal" id="javaInfoForm" name="javaInfoForm">
<form class="form-horizontal" id="javaInfoForm" name="javaInfoForm">
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>服务名：</label>
... ... @@ -24,17 +24,14 @@
<label class="col-sm-2 control-label"> <span style="color:red">*</span>类型：</label>
<div class="col-sm-2">
<select id="apiType" name="cloudType" class="form-control">
<option value="1">gateway</option>
<option value="2">order</option>
<option value="3">product</option>
<select id="serviceType" name="serviceType" class="form-control">
</select>
</div>
<label class="col-sm-2 control-label"> <span style="color:red">*</span>请求类型：</label>
<div class="col-sm-2">
<select id="requestType" name="cloudType" class="form-control">
<select id="apiReqMethod" name="apiReqMethod" class="form-control">
<option value="0">GET</option>
<option value="1">POST</option>
</select>
... ... @@ -43,26 +40,26 @@
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>是否启用：</label>
<label class="col-sm-2 control-label">是否启用：</label>
<div class="col-sm-2">
<input type="checkbox" id="apiIsUse" name="apiIsUse">
<input type="checkbox" id="apiToggle" name="apiToggle">
</div>
<label class="col-sm-2 control-label"> <span style="color:red">*</span>告警阈值：</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="apiTrigger" name="apiTrigger" placeholder="输入告警阈值"
<input type="text" class="form-control" id="apiWarnTrigger" name="apiWarnTrigger" placeholder="输入告警阈值"
maxlength="30" size="40"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>请求参数：</label>
<label class="col-sm-2 control-label">请求参数：</label>
<div class="col-sm-8">
<textarea class="form-control" rows="3"></textarea>
<textarea id="apiData" name="apiData" class="form-control" rows="3"></textarea>
</div>
</div>
<div class="form-group">
... ... @@ -75,39 +72,35 @@
<script>
$(function () {
// $("#javaInfoForm #groupId").select({
// valueField: "id",
// textField: "groupName",
// firstText: "请选择主机组类型",
// firstValue: 0,
// className: "form-control",
// url: contextPath + "/hostGroup/getAllGroups",
$.each(java_api_type, function (idx, val) {
var selObj = $("#javaInfoForm #serviceType");
var value = val.value;
var text = val.text;
selObj.append("<option value='" + value + "'>" + text + "</option>");
});
// //加载form
// $("#javaInfoForm").form({
// loadUrl: contextPath + "/hostInfo/getHostInfoById.do",
// loadParams: {
// id: paramObj.hoseInfoId
// },
// loadFilter: function (data) {
// return defaultLoadFilter(data);
// },
// value: 0
// onBeforeLoad: function (loadParams) {
// if (loadParams.hoseInfoId == 0) {
// return false;
// }
// },
// onLoadSuccess: function (data) {
// $("#javaInfoForm #hostIp").prop("readonly", true);
// }
// });
//加载form
$("#javaInfoForm").form({
loadUrl: contextPath + "/hostInfo/getHostInfoById.do",
loadParams: {
id: paramObj.hoseInfoId
},
loadFilter: function (data) {
return defaultLoadFilter(data);
},
onBeforeLoad: function (loadParams) {
if (loadParams.hoseInfoId == 0) {
return false;
}
},
onLoadSuccess: function (data) {
$("#javaInfoForm #hostIp").prop("readonly", true);
}
});
});
</script>
\ No newline at end of file
... ...
... ... @@ -23,12 +23,14 @@
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">服务类型：</span>
<input type="text" id="searchapiType" name="apiType" class="form-control" placeholder=""/>
<select id="searchApiType" name="searchApiType" class="form-control" placeholder=""/>
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">请求类型：</span>
<input type="text" id="searchapiMethod" name="apiMethod" class="form-control"
placeholder=""/>
<select id="searchApiReqMethod" name="searchApiReqMethod" class="form-control">
<option value="0">GET</option>
<option value="1">POST</option>
</select>
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">url：</span>
... ... @@ -39,6 +41,9 @@
<button id="addInfoBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 100px;">
新增
</button>
<button id="modeoBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 100px;">
编辑模式
</button>
</div>
</div>
<div id="infoTable">
... ... @@ -48,8 +53,49 @@
</div>
</div>
<script>
var java_api_type=[];
var refreshTypeSelected=function(){
$.each(java_api_type,function(idx,val){
var selObj = $("#searchApiType");
var value=val.value;
var text=val.text;
selObj.append("<option value='"+value+"'>"+text+"</option>");
});
};
var getTypeName=function(typeId){
for(var i=0;i<java_api_type.length;i++){
if(java_api_type[i].value==typeId){
return java_api_type[i].text;
}
}
return "unkown"
};
$(function () {
$.ajax({
url: contextPath + "/type/queryJavaApiType",
type: 'get',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取java服务类型失败', '警告', 'warn');
return;
}
$.each(data.data,function(idx,val){
java_api_type.push({
"value":val.typeId,
"text":val.typeName
});
})
refreshTypeSelected();
},
error: function (data) {
$.toaster('获取java服务类型失败', '警告', 'warn');
}
});
//加载表格
$("#infoTable").table({
columnAutoWidth: false,
... ... @@ -65,7 +111,7 @@
columns: [{
title: "ID",
field: "serviceId",
width: "5%"
width: "2%"
}, {
title: "服务名",
field: "apiName",
... ... @@ -77,16 +123,48 @@
}, {
title: "服务类型",
field: "serviceType",
formatter:function(value,rowData,rowIndex) {
return getTypeName(rowData.serviceType);
},
width: "5%"
}, {
title: "请求类型",
field: "apiMethod",
formatter: function (value, rowData, rowIndex) {
if (rowData.apiReqMethod == 0)
return "GET";
else
return "POST";
},
width: "4%"
}, {
title: "告警阈值",
field: "apiTrigger",
width: "3%"
}, {
title: "是否启用",
field: "apiIsUse",
width: "4%"
}, {
title: "运行状态",
field: "apiStatus",
formatter: function (value, rowData, rowIndex) {
return "<span style='height: 200px' id='status_'+rowData.serviceId>192.168.0.1,192.168.0.1,192.168.0.1,192.168.0.1,192.168.0.1,192.168.0.1,192.168.0.1,192.168.0.1,192.168.0.1,192.168.0.1</span>"
},
width: "40%"
},{
title: "操作",
field: "op",
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("修改").appendTo(div);
editBtn.click(function () {
editJavaInfo(rowData.id);
editJavaInfo(rowData);
});
div.append("&nbsp;");
var delBtn = $("<button>").addClass("btn btn-xs btn-danger").html("删除").appendTo(div);
... ... @@ -110,7 +188,6 @@
$.ajax({
url: contextPath + "/javaApi/del?id=" + rowData.serviceId,
type: 'get',
async: false,
dataType: "json",
success: function (data) {
if (!data || data.code != 200) {
... ... @@ -128,11 +205,11 @@
});
return div;
},
width: "15%"
width: "7%"
}]
});
$("#addInfoBtn").click(function () {
editJavaInfo(0);
editJavaInfo(null);
});
});
... ... @@ -151,28 +228,45 @@
});
});
//打开新增或修改页面
function editJavaInfo(javaInfoId) {
paramObj.hoseInfoId = javaInfoId;
function editJavaInfo(rowData) {
console.log(rowData);
var dialog = $("<div>").appendTo($("body"));
var dialogTitle;
if(javaInfoId==0){
title="新增JAVA服务信息";
$("#javaInfoForm #serviceType").
}else{
title="修改JAVA服务信息";
$("#javaInfoForm #serviceType")
var serviceId;
if (rowData == null || rowData == undefined || rowData.serviceId == 0) {
dialogTitle = "新增JAVA服务信息";
serviceId = 0;
} else {
dialogTitle = "修改JAVA服务信息";
serviceId = rowData.serviceId;
}
dialog.dialog({
size: "modal-lg",
title: dialogTitle,
backdrop: "static",
href: contextPath + "jsp/javaapi/editJavaInfo.jsp",
onLoadSuccess: function (data) {
if (serviceId == 0) {
$("#javaInfoForm #apiName").val("");
$("#javaInfoForm #apiUrl").val("");
$("#javaInfoForm #apiData").val("");
$("#javaInfoForm #apiToggle").prop("checked", true)
$("#javaInfoForm #apiWarnTrigger").val(0);
$("#javaInfoForm #apiReqMethod").val(0);
$("#javaInfoForm #serviceType").val(1);
} else {
$("#javaInfoForm #serviceType").val(rowData.serviceType);
$("#javaInfoForm #apiName").val(rowData.apiName);
$("#javaInfoForm #apiUrl").val(rowData.apiUrl);
$("#javaInfoForm #apiData").val(rowData.apiData);
$("#javaInfoForm #apiToggle").prop("checked", (rowData.apiToggle == 1) ? true : false);
$("#javaInfoForm #apiWarnTrigger").val(rowData.apiWarnTrigger);
$("#javaInfoForm #apiReqMethod").val(rowData.apiReqMethod);
}
},
buttons: [{
text: "关闭",
className: "btn-danger",
... ... @@ -185,23 +279,23 @@
onclick: function () {
var btn = $(this);
this.prop("disabled", "disabled");
var serviceType = $("#javaInfoForm #serviceType").val();
var apiName = $("#javaInfoForm #apiName").val();
var apiUrl = $("#javaInfoForm #apiUrl").val();
$("#javaInfoForm").form("submit", {
submitUrl: contextPath + "javaApi/save",
submitData: {
'serviceId': javaInfoId
},
onBeforeSubmit: function () {
if (!$(this).form("validate")) {
btn.removeAttr("disabled");
return false;
}
$.ajax({
url: contextPath + "/javaApi/save",
type: 'post',
dataType: "json",
sync: false,
data: {
'serviceId':serviceId,
'serviceType': $("#javaInfoForm #serviceType").val(),
'apiName': $("#javaInfoForm #apiName").val(),
'apiUrl': $("#javaInfoForm #apiUrl").val(),
'apiData': $("#javaInfoForm #apiData").val(),
'apiToggle': $("#javaInfoForm #apiToggle").prop("checked") == true ? 1 : 0,
'apiWarnTrigger': $("#javaInfoForm #apiWarnTrigger").val(),
'apiReqMethod': $("#javaInfoForm #apiReqMethod").val(),
},
success: function (data) {
console.log("fffuck 1");
if (!data || data.code != 200) {
btn.removeAttr("disabled");
$("#javaInfoForm #messageAlert").alerts({
... ... @@ -212,6 +306,12 @@
}
$("#infoTable").table("load");
$(dialog).dialog("hide");
},
error: function (data) {
$("#javaInfoForm #messageAlert").alerts({
content: data,
type: "danger"
});
}
});
}
... ...