<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Apusic应用服务器监控概览</title>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<c:set var="resBase" value="${contextPath}/res" />
<script type="text/javascript" src="${resBase}/scripts/jquery.min.js"></script>
<script type="text/javascript" src="${resBase}/scripts/common.js"></script>
<%@ include file="/WEB-INF/common-monitor/jqplot-js.jsp"%>
<link rel="stylesheet" type="text/css" href="${resBase}/css/om-ui/om-apusic.css" />
<link rel="stylesheet" type="text/css" href="${resBase}/css/common.css" />
<link rel="stylesheet" type="text/css" href="${resBase}/css/preview.css" />
<%@ include file="/WEB-INF/common-monitor/jqplot-css.jsp"%>
<script>

$(function() {
	init();
	showIntervalChart();
	// 非堆内存(不需要重绘)
	showNonHeapChart();
	setInterval("showIntervalChart()", 4000);
});

window.onresize = function(){setTimeout('init()', 100);}

function init() {
    var len = $(".welcome-basic-info")[0].offsetWidth;   
    var basicLen = len - 73 - 8;
    var authLen = len - 100 - 8;
    $('.welcome-basic-info').find("dd").css("width",basicLen); 
    $('.welcome-auth-info').find("dd").css("width",authLen); 
    $('.welcome-basic-info').find("dd").css("display","block"); 
    $('.welcome-auth-info').find("dd").css("display","block"); 
    
    // 定义全局变量
    isRunning = false;
}

function showIntervalChart() {
	// 当前连接数
	if(!isRunning) {
		isRunning = true;
		showAppSessionChart();
		showHttpConnectChart();
		showThreadPoolChart();
		showCpuChart();
		showMemoryChart();
		showJtaChart();
		isRunning = false;
	}
}

function getAppSessionData(url, data) {
	var json = getAjaxJsonData(url, data);
	var ret = {};
	if(json && json != "" && json != "null") {
		var appName = new Array();
		var xyData = new Array();
		$(json).each(function(i, v){
			appName.push(v.appName);
			xyData.push(v.data);
		});
		ret.legend = appName;
		ret.data = xyData;
	} else {
		ret.legend = [];
		ret.data = [];
	}
	return ret;
}

/**
 * 多条折线图
 * 数据格式：
 * [[
 *      // 第一条折线图
 *      ["x轴数据1", "y轴数据1"],
 *      ["x轴数据2", "y轴数据2"],
 *      ["x轴数据3", "y轴数据3"]
 * ],[
 *      // 第二条折线图
 *      ["x轴数据1", "y轴数据1"],
 *      ["x轴数据2", "y轴数据2"],
 *      ["x轴数据3", "y轴数据3"]
 * ]]
 *  图例格式为：["图例1", "图例2"]
 */
function showAppSessionChart() {
	var url = "${contextPath}/protect/monitor/appsession/statisticsJson";
	var data = getAppSessionData(url, {});
	var count = 0;
	try {
		if(appSessionChart) {
			appSessionChart.destroy();
		}
	} catch (e) {
		
	}
	if(data.data.length == 0) {
		showChartNoData("#app-chart-inner");
		return;
	} else {
		$("#app-chart-inner").empty();
	}
	var numberRows = data.legend.length/5, numberColumns = 5;
	if(numberRows == 0) {
		numberRows = 1;
	}
	for(var i=0; i<data.legend.length; i++) {
		if(data.legend[i].length > 10) {
			data.legend[i] = data.legend[i].substring(0, 10) + "...";
		}
	}
	appSessionChart = $.jqplot('app-chart-inner', data.data, $.extend(true, getDefaultOptions(), {
  		axes: {
            xaxis: {
            	tickOptions: {
            		formatter: function(format, val) {
            			count++;
            			if((count)%3 == 0) {
            				return val;
            			}
            			return " ";
            		}
            	}
            }
        },
        legend: {
            renderer: $.jqplot.EnhancedLegendRenderer, 
            show: true,
            location: 's',
            placement: 'outsideGrid',
            // 图例单独指定
            labels: data.legend,
            shrinkGrid: true,
            rendererOptions: {
            	numberRows : numberRows,
            	numberColumns : numberColumns
            }
        }
	}));
}

function getHttpConnectData(url, data) {
	var json = getAjaxJsonData(url, data);
	var ret = {};
	if(json && json != "" && json != "null") {
		ret.data = json;
	} else {
		ret.data = [];
	}
	return ret;
}

/**
 * 柱状图（单层）
 * 数据格式：
 * [[["x轴第1根柱子名称", "y轴数据"],["x轴第2根柱子名称", y轴数据]]]
 */
function showHttpConnectChart() {
	var url = "${contextPath}/protect/monitor/http/currentHttpConnectJson";
	var data = getHttpConnectData(url, {});
	try {
		if(httpConnectChart) {
			httpConnectChart.destroy();
		}
	} catch (e) {
		
	}
	if(data.data.length == 0) {
		showChartNoData("#http-chart-inner");
		return;
	} else {
		$("#http-chart-inner").empty();
	}
	httpConnectChart = $.jqplot('http-chart-inner', data.data, $.extend(true, getDefaultOptions(), {
		 seriesDefaults: {
             renderer: $.jqplot.BarRenderer,
             rendererOptions: {
   				varyBarColor: true,
   				barWidth: 45,
   				highlightMouseDown: false
   			 },
             pointLabels: {
                 show: true
             },
             showLabel: true
         }
	}));
}

function getThreadPoolData(url, data) {
	var json = getAjaxJsonData(url, data);
	var ret = {};
	if(json && json != "" && json != "null") {
		ret.data = json.data;
		ret.ticks = json.ticks;
	} else {
		ret.data = [];
	}
	return ret;
}

/**
 * 柱状图(多层)
 * 数据格式：
 * [[
 *   ["第1根柱子第1层y轴值", "第2根柱子第1层y轴值"， 第3根柱子第1层y轴值],
 *   ["第1根柱子第2层y轴值", "第2根柱子第2层y轴值"， 第3根柱子第2层y轴值]
 * ]]
 * x轴坐标格式：
 * ["第1根柱子x轴坐标值", "第2根柱子x轴坐标值", "第3根柱子x轴坐标值"]
 */
function showThreadPoolChart() {
	var url = "${contextPath}/protect/monitor/thread/refreshThreadPoolJson";
	var data = getThreadPoolData(url, {});
	try {
		if(httpThreadPoolChart) {
			httpThreadPoolChart.destroy();
		}
	} catch (e) {
		
	}
	if(data.data.length == 0) {
		showChartNoData("#thread-chart-inner");
		return;
	} else {
		$("#thread-chart-inner").empty();
	}
	httpThreadPoolChart = $.jqplot('thread-chart-inner', data.data, $.extend(true, getDefaultOptions(), {
		seriesColors:['#a50c64', '#5a82d0', "#953579", "#4b5de4", "#C7754C"],
		stackSeries: true, 
		axes: {
            xaxis: {
            	// 图例
            	ticks: data.ticks,
            	renderer: $.jqplot.CategoryAxisRenderer
            }
		},
		seriesDefaults: {
             renderer: $.jqplot.BarRenderer,
             rendererOptions: {
   				varyBarColor: true,
   				barWidth: 45,
   				highlightMouseDown: false
   			 },
             pointLabels: {
                 show: true
             },
             showLabel: true
         },
         legend: {
             renderer: $.jqplot.EnhancedLegendRenderer, 
             show: true,
             location: 's',
             placement: 'outsideGrid',
             labels: ["活动线程", "空闲线程"],
             shrinkGrid: true,
             rendererOptions: {
             	numberRows : 1
             }
         }
	}));
}

/**
 * 仪表盘
 * 数据格式：
 * [["具体数据"]]
 */
function showNonHeapChart() {
	var value = 0, max = 0, step = 0;
	if(!isNaN(parseInt("${nonHeapMem}"))) {
		value = parseInt("${nonHeapMem}");
	}
	if(!isNaN(parseInt("${maxNonHeapMem}"))) {
		max = parseInt("${maxNonHeapMem}");
		step = max/3;
	}
	if(max <= value) {
		max = value * 3;
		step = max/3;
	}
	if(max == 0) {
		max = 500;
		step = max/3;
	}
	try {
		if(nonHeapChart) {
			httpThreadPoolChart.destroy()
		}
	} catch (e) {
		
	}
	if(isNaN(parseInt("${nonHeapMem}"))) {
		showChartNoData("#non-heap-chart");
		return;
	} else {
		$("#non-heap-chart").empty();
	}
	nonHeapChart = $.jqplot('non-heap-chart', [[value]], {
		grid: {
            drawBorder: false, 
            drawGridlines: false,
            background: '#C8E9FA',
            shadow: false
        },
		seriesDefaults: {
			renderer: $.jqplot.MeterGaugeRenderer,
			rendererOptions: {
				// 最外层颜色
				ringColor: "#cfe2f3",
				max: max,
				label: 'MB',
                labelHeightAdjust: -5,
                intervals: [step, step*2, step*3],
                // 里面分半圆直径
                intervalOuterRadius: 65,
                intervalColors:['#66cc66', '#93b75f', '#CC6666']
            }
		}
	});
}

function getCpuData(url, data) {
	var json = getAjaxJsonData(url, data);
	var ret = {};
	if(json && json != "" && json != "null") {
		ret.data = json;
	} else {
		ret.data = [];
	}
	return ret;
}

/**
 * 柱状图（单层）
 * 数据格式：
 * [[["x轴第1根柱子名称", "y轴数据"],["x轴第2根柱子名称", y轴数据]]]
 */
function showCpuChart() {
	var url = "${contextPath}/protect/monitor/cpu/currentMonitorJsonData";
	var data = getCpuData(url, {});
	try {
		if(apuChart) {
			apuChart.destroy();
		}
	} catch (e) {
		
	}
	if(data.data.length == 0) {
		showChartNoData("#cpu-chart-inner");
		return;
	} else {
		$("#cpu-chart-inner").empty();
	}
	apuChart = $.jqplot("cpu-chart-inner", data.data, $.extend(true, getDefaultOptions(), {
		seriesDefaults: {
             renderer: $.jqplot.BarRenderer,
             rendererOptions: {
            	// 每个柱子都显示不同颜色
   				varyBarColor: true,
   				barWidth: 45,
   				highlightMouseDown: false
   			 },
             pointLabels: {
            	 // 是否显示柱子上的数字
                 show: true
             },
             showLabel: true
        },
        axes: {
        	yaxis : {
        		tickOptions: {
                	formatString: '%.2f',
                	formatter: function(format, val) {
                		if (!format) {
                            format = $.jqplot.config.defaultTickFormatString;
                        } 
                        return $.jqplot.sprintf(format, val);
                	}
            	}
        	}
        }
	}));
}

function getMemoryData(url, data) {
	var json = getAjaxJsonData(url, data);
	var ret = {};
	if(json && json != "" && json != "null") {
		ret.data = json;
	} else {
		ret.data = [];
		window.location.href="${contextPath}/login";
	}
	return ret;
}

/**
 * 单条折线图
 * 数据格式：
 * [[
 *      ["x轴数据1", "y轴数据1"],
 *      ["x轴数据2", "y轴数据2"],
 *      ["x轴数据3", "y轴数据3"]
 * ]]
 */
function showMemoryChart() {
	var url = "${contextPath}/protect/monitor/memory/refreshJsonDate";
	var data = getMemoryData(url, {});
	var count = 0;
	try {
		if(memoryChart) {
			memoryChart.destroy();
		}
	} catch (e) {
		
	}
	if(data.data.length == 0) {
		showChartNoData("#memory-chart-inner");
		return;
	} else {
		$("#memory-chart-inner").empty();
	}
	memoryChart = $.jqplot('memory-chart-inner', data.data, $.extend(true, getDefaultOptions(), {
		seriesColors:['#17BDB8'],
		axes: {
            xaxis: {
            	tickOptions: {
            		// 输出x轴坐标值
            		formatter: function(format, val) {
            			count++;
            			if((count)%3 == 0) {
            				return val;
            			}
            			return " ";
            		}
            	}
            },
            yaxis : {
            	tickOptions: {
            		// 输出y轴坐标值
            		formatter: function(format, val) {
            			return val+"M";
            		}
            	}
            }
        },
        seriesDefaults:{
        	// 是否填充模式(填充模式会把线到x轴之间填充)
            fill: true,
            fillAndStroke: true,
            fillAlpha: 0.5,
            shadow: false
        }
	}));
}

function getJtaData(url, data) {
	var json = getAjaxJsonData(url, data);
	var ret = {};
	if(json && json != "" && json != "null") {
		ret.data = json;
	} else {
		ret.data = [];
	}
	return ret;
}

/**
 * 饼状图
 * 数据格式：
 * [[
 *      ["图例1", "数据1"],
 *      ["图例2", "数据2"],
 *      ["图例3", "数据3"]
 * ]]
 */
function showJtaChart() {
	var url = "${contextPath}/protect/monitor/jta/refreshJsonData";
	var data = getJtaData(url, {});
	var count = 0;
	try {
		if(jtaChart) {
			jtaChart.destroy();
		}
	} catch (e) {
		
	}
	if(data.data.length == 0) {
		showChartNoData("#jta-chart-inner");
		return;
	} else {
		$("#jta-chart-inner").empty();
	}
	jtaChart = $.jqplot('jta-chart-inner', data.data, {
		grid: {
            drawBorder: false, 
            drawGridlines: false,
            background: '#C8E9FA',
            shadow: false
        },
		seriesColors: ["#4bb2c5", "#C5B47F", "#CC6666"],
		seriesDefaults:{
			renderer:$.jqplot.PieRenderer,
		    rendererOptions: {
		    	sliceMargin: 8,
		    	// 距离表格边框大小,间接影响饼状图圆大小
		    	padding: 5,
		    	startAngle: 180,
		      	sliceMargin: 4,
		      	showDataLabels: true,
		      	dataLabels: "value"
		    }
		},
		legend: {
            show: true,
            // 图例显示方向
            location: 's',
            // 显示位置(inside,outside)
            placement: 'outsideGrid',
            shrinkGrid: true,
            rendererOptions: {
            	// 图例显示为一行
            	numberRows : 1
            }
        }
	});
}


</script>
</head>
<body style="width: 100%; height: 100%;">
    <table class="grid" cellpadding="0" cellspacing="0">
        <tr>
            <td rowspan="2" width="25%" class="welcome-grid-cell-rowspan">
                <div class="welcome-grid-cell">
                    <div class="welcome-grid-cell-border-left">
                        <div class="welcome-grid-cell-border-right">
                            <div class="welcome-grid-cell-content">
                                <div class="welcome-grid-cell-title">
                                    <div class="welcome-grid-cell-title-text">基本信息</div>
                                    <div class="welcome-grid-cell-title-bar">
                                        <div class="welcome-grid-cell-title-icon">I</div>
                                    </div>
                                </div>
                                <div class="welcome-server-name">
                                	<div class="welcome-server-name-label">
	                                    <div class="welcome-server-name-label-content">主机名</div>
	                                    <div class="welcome-server-name-label-content" title="${osConfig.hostName}">${osConfig.hostName}</div>
                                    </div>
                                </div>
                                <dl class="welcome-basic-info">
                                    <dt>产品名称</dt>
                                    <dd title="${server.productName}">：${server.productName}</dd>
                                    <dt>产品版本</dt>
                                    <dd title="${server.productVersion}">：${server.productVersion}</dd>
                                    <dt>提供商</dt>
                                    <dd title="${server.vendor}">：<a href="${server.vendorUrl}" target="_blank">${server.vendor}</a></dd>
                                    <dt>连接串</dt>
                                    <dd title="iiop://${server.host}:${server.port}">：iiop://${server.host}:${server.port}</dd>
                                    <dt>Domain 位置</dt>
                                    <dd title="${server.serverHome}">：${server.serverHome}</dd>
                                </dl>
                                <dl class="welcome-auth-info">
                                    <dt>客户名称</dt>
                                    <dd title="${server.licensee}">：${server.licensee}</dd>
                                    <dt>生产编号</dt>
                                    <dd title="${server.productNumber}">：${server.productNumber}</dd>
                                    <dt>CPU 授权数量</dt>
                                    <dd>：${server.cpuAmount == 0 ? '无限制' : server.cpuAmount}</dd>
                                    <dt>连接数授权数量</dt>
                                    <dd>：${server.connections == 0 ? '无限制' : server.connections}</dd>
                                    <dt>授权日期</dt>
                                    <dd title="${server.endDate == null ? '' : dateFmt.format(server.startDate) + '至' + dateFmt.format(server.endDate)}">：${server.endDate == null ? '无限制' : dateFmt.format(server.startDate) + '至' + dateFmt.format(server.endDate)}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td width="50%">
                <div class="welcome-grid-cell">
                    <div class="welcome-grid-cell-border-left">
                        <div class="welcome-grid-cell-border-right">
                            <div class="welcome-grid-cell-content">
                                <div class="welcome-grid-cell-title">
                                    <div class="welcome-grid-cell-title-text">应用会话数</div>
                                    <div class="welcome-grid-cell-title-bar">
                                        <div class="welcome-grid-cell-title-icon">A</div>
                                    </div>
                                </div>
                              <div id="app-chart-inner" style="height:85%"><span>没有数据</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td width="25%">
                <div class="welcome-grid-cell">
                    <div class="welcome-grid-cell-border-left">
                        <div class="welcome-grid-cell-border-right">
                            <div class="welcome-grid-cell-content">
                                <div class="welcome-grid-cell-title">
                                    <div class="welcome-grid-cell-title-text">当前连接数</div>
                                    <div class="welcome-grid-cell-title-bar">
                                        <div class="welcome-grid-cell-title-icon">L</div>
                                    </div>
                                </div>
                                 <div id="http-chart-inner" style="height:80%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="welcome-grid-cell">
                    <div class="welcome-grid-cell-border-left">
                        <div class="welcome-grid-cell-border-right">
                            <div class="welcome-grid-cell-content">
                                <div class="welcome-grid-cell-title">
                                    <div class="welcome-grid-cell-title-text">线程池</div>
                                    <div class="welcome-grid-cell-title-bar">
                                        <div class="welcome-grid-cell-title-icon">T</div>
                                    </div>
                                </div>
                                 <div id="thread-chart-inner" style="height:85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <div class="welcome-grid-cell">
                    <div class="welcome-grid-cell-border-left">
                        <div class="welcome-grid-cell-border-right">
                            <div class="welcome-grid-cell-content">
                                <div class="welcome-grid-cell-title">
                                    <div class="welcome-grid-cell-title-text">内存·非堆</div>
                                    <div class="welcome-grid-cell-title-bar">
                                          <div class="welcome-grid-cell-title-icon">N</div>
                                    </div>
                                </div>
                                  <div id="non-heap-chart" style="height:85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="welcome-grid-cell">
                    <div class="welcome-grid-cell-border-left">
                        <div class="welcome-grid-cell-border-right">
                            <div class="welcome-grid-cell-content">
                                <div class="welcome-grid-cell-title">
                                    <div class="welcome-grid-cell-title-text">CPU</div>
                                    <div class="welcome-grid-cell-title-bar">
                                        <div class="welcome-grid-cell-title-icon">C</div>
                                    </div>
                                </div>
                                <div id="cpu-chart-inner" style="height:78%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <div class="welcome-grid-cell">
                    <div class="welcome-grid-cell-border-left">
                        <div class="welcome-grid-cell-border-right">
                            <div class="welcome-grid-cell-content">
                                <div class="welcome-grid-cell-title">
                                    <div class="welcome-grid-cell-title-text">内存·堆</div>
                                    <div class="welcome-grid-cell-title-bar">
                                        <div class="welcome-grid-cell-title-icon">H</div>
                                    </div>
                                </div>
                                <div id="memory-chart-inner" style="height:85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <div class="welcome-grid-cell">
                    <div class="welcome-grid-cell-border-left">
                        <div class="welcome-grid-cell-border-right">
                            <div class="welcome-grid-cell-content">
                                <div class="welcome-grid-cell-title">
                                    <div class="welcome-grid-cell-title-text">事务</div>
                                    <div class="welcome-grid-cell-title-bar">
                                       <div class="welcome-grid-cell-title-icon">O</div>
                                    </div>
                                </div>
                                 <div id="jta-chart-inner" style="height:85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
