<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<div class="header-title table">
	<div class="cell">
		<h1>图表总览</h1>
	</div>
</div>

<div class="table widget-placeholder">
	<div class="row">
		<div class="cell">
			<div class="dashbrd-widget" id="favgrph_widget">
				<div class="dashbrd-widget-head cursor-move">
					<h4 id="favgrph_header">资源列表</h4>
				</div>



				<input type="button" id="button" onclick='testAjax()'>响应时间 <input
					type="button" id="button" onclick='testAjax2()'>当前关注 <input
					type="button" id="button" onclick='testAjax3()'>异常信息 <input
					type="button" id="button" onclick='testAjax4()'>磁盘排行 <input
					type="button" id="button" onclick='testAjax5()'>CPU排行 <input
					type="button" id="button" onclick='testAjax6()'>内存排行

				<div class="body" id="favgrph">
					<table class="list-table" id="t58ec9c7db1ef7">
						<tbody>
							<c:forEach items="${listHosts}" var="hostsGroup">
								<tr>
									<td><span style="padding-left: 0em;"><button
												type="button" class="treeview"
												onclick='arrowClick(${hostsGroup.groupid})'>
												<span id="arrow${hostsGroup.groupid}" class="arrow-right"></span>
											</button> ${hostsGroup.name}</span></td>
								</tr>
								<c:forEach items="${hostsGroup.hosts}" var="host">
									<tr class="p${hostsGroup.groupid}" style="display: none;">
										<td><span style="padding-left: 2em;"><a href="#"
												onclick="window.open('host.html?hostid=${host.hostid}')">${host.name}</a></span></td>
									</tr>
								</c:forEach>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>

			<div class="dashbrd-widget" id="favgrph_widget">
				<div class="dashbrd-widget-head cursor-move">
					<h4 id="favgrph_header">CPU使用率TOPN</h4>
				</div>
				<div class="body" id="favgrph">
					<table class="list-table" id="t58ec9c7db1ef7">
						<thead>
							<tr>
								<th>主机名</th>
								<th>CPU使用率</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${listCpu}" var="useRate">
								<tr>
									<td><span style="padding-left: 0em;">${useRate.hostName}</span></td>
									<td><span style="padding-left: 0em;">${useRate.useRate}</span></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>


			<div class="dashbrd-widget" id="favgrph_widget">
				<div class="dashbrd-widget-head cursor-move">
					<h4 id="favgrph_header">内存利用率TOPN</h4>
				</div>
				<div class="body" id="favgrph">
					<table class="list-table" id="t58ec9c7db1ef7">
						<thead>
							<tr>
								<th>主机名</th>
								<th>内存利用率</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${listCpu}" var="useRate">
								<tr>
									<td><span style="padding-left: 0em;">${useRate.hostName}</span></td>
									<td><span style="padding-left: 0em;">${useRate.useRate}</span></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="cell">
			<div class="dashbrd-widget" id="favgrph_widget">
				<div class="dashbrd-widget-head cursor-move">
					<h4 id="favgrph_header">当前关注</h4>
				</div>


				<div class="body" id="favgrph">
					<table class="list-table" id="t58ec9c7db1ef7">
						<thead>
							<tr>
								<th>名称</th>
								<th>协议可用性</th>
								<th>CPU</th>
								<th>内存</th>
								<th>磁盘使用率</th>
								<th>当前最高异常</th>
								<th>接口总数</th>
								<th>异常数</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${listHosts}" var="hostsGroup">
								<tr>
									<td><span style="padding-left: 0em;">${hostsGroup.name}</span></td>
									<td><span style="padding-left: 0em;">${hostsGroup.name}</span></td>
									<td><span style="padding-left: 0em;">${hostsGroup.name}</span></td>
									<td><span style="padding-left: 0em;">${hostsGroup.name}</span></td>
									<td><span style="padding-left: 0em;">${hostsGroup.name}</span></td>
									<td><span style="padding-left: 0em;">${hostsGroup.name}</span></td>
									<td><span style="padding-left: 0em;">${hostsGroup.name}</span></td>
									<td><span style="padding-left: 0em;">${hostsGroup.name}</span></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>

			<div class="dashbrd-widget" id="favgrph_widget">
				<div class="dashbrd-widget-head cursor-move">
					<h4 id="favgrph_header">告警环比(条/天)</h4>
				</div>


				<div class="body" id="favgrph">
					<table class="list-table" id="t58ec9c7db1ef7">
						<tbody>
							<tr>
								<td>这里是环比图</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="cell">
			<div class="dashbrd-widget" id="favgrph_widget">
				<div class="dashbrd-widget-head cursor-move">
					<h4 id="favgrph_header">异常告警统计</h4>
				</div>


				<div class="body" id="favgrph">
					<table class="list-table" id="t58ec9c7db1ef7">
						<tbody>
							<tr>
								<td>这里是异常统计的饼图</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>

			<div class="dashbrd-widget" id="favgrph_widget">
				<div class="dashbrd-widget-head cursor-move">
					<h4 id="favgrph_header">ICMP响应时间TOPN</h4>
				</div>


				<div class="body" id="favgrph">
					<table class="list-table" id="t58ec9c7db1ef7">
						<thead>
							<tr>
								<th>名称</th>
								<th>ICMP响应时间</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>机器名称</td>
								<td>时间</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>

			<div class="dashbrd-widget" id="favgrph_widget">
				<div class="dashbrd-widget-head cursor-move">
					<h4 id="favgrph_header">磁盘使用率TOPN</h4>
				</div>


				<div class="body" id="favgrph">
					<table class="list-table" id="t58ec9c7db1ef7">
						<thead>
							<tr>
								<th>名称</th>
								<th>磁盘使用率</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>这里是盘符名称</td>
								<td>使用率</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>




<script type="text/javascript">
  function testAjax(){
	  jQuery.ajax({
		  method: "POST",
		  url: "${ctx}/formview/responseTime.json",
		  data: {
			  	order:"desc",
			  	limit:10
		  },
		  success:function(data) {
			  for(var i=0;i<data.length;i++){
			    	var j=data[i];
				  var hostName=j.hostName;
				 var responseTime=j.responseTime;
			  }  
		  }
	  });
  }
  
  
  function testAjax2(){
	  jQuery.ajax({
		  method: "POST",
		  url: "${ctx}/formview/currentFocus.json",
		  data: {
			  	hosts:"10290,10190"
		  },
		  success:function(data) {
			  for(var i in data){
				   var f = data[i];
				   var h=f.host;
				   var available=f.available;
				   var snmpAvailable=f.snmpAvailable;
				   var jmxAvailable=f.jmxAvailable;
				   var ipmiAvailable=f.ipmiAvailable;
				   var cpuRate=f.cpuRate;
				   var diskRate=f.diskRate;
				   var totalInterFace=f.totalInterFace;
				   var maxPriority=f.maxPriority;
				   var totalException=f.totalException;
				   var memoryRate=f.memoryRate;
			   }
		  }
	  });
  }  
  
  
  
  function testAjax3(){
	  jQuery.ajax({
		  method: "POST",
		  url: "${ctx}/formview/messageByPriority.json",
		  data: {
			  	priority:3
		  },
		  success:function(data) {
	      	// console.log(data);
			  for(var i=0;i<data.length;i++){
				   var f = data[i];
				   var host=f.host;
				   var description=f.description;
				   var startClock=f.startClock;
				   var subClock=f.subClock;
				   var acknowledged=f.acknowledged;
			   }
		  }
	  });
  }
  
  
  
  function testAjax4(){
	  jQuery.ajax({
		  method: "POST",
		  url: "${ctx}/formview/hostsDisk.json",
		  data: {
				order:"desc",
			  	limit:10
		  },
		  success:function(data) {
	      	// console.log(data);
			  for(var i=0;i<data.length;i++){
				  var j=data[i];
				  var host=j.hostName;
				  var rate=j.diskRate;
			   }
		  }
	  });
  }
  
  function testAjax5(){
	  jQuery.ajax({
		  method: "POST",
		  url: "${ctx}/formview/hostsCpu.json",
		  data: {
				order:"desc",
			  	limit:10
		  },
		  success:function(data) {
	      	// console.log(data);
			  for(var i=0;i<data.length;i++){
				  var j=data[i];
				  var host=j.hostName;
				  var rate=j.diskRate;
			   }
		  }
	  });
  } 
  
  
  function testAjax6(){
	  jQuery.ajax({
		  method: "POST",
		  url: "${ctx}/formview/hostsMemory.json",
		  data: {
				order:"desc",
			  	limit:10
		  },
		  success:function(data) {
	      	// console.log(data);
			  for(var i=0;i<data.length;i++){
				  var j=data[i];
				  var host=j.hostName;
				  var rate=j.diskRate;
			   }
		  }
	  });
  } 
  
  
  
  
  
function arrowClick(groupId){
	if(jQuery("#arrow"+groupId).hasClass("arrow-right")){
		jQuery(".p"+groupId).prop({"style":"display:block"});
		jQuery("#arrow"+groupId).removeClass('arrow-right');
		jQuery("#arrow"+groupId).addClass('arrow-down');
	}else{
		jQuery(".p"+groupId).prop({"style":"display:none"});
		jQuery("#arrow"+groupId).removeClass('arrow-down');
		jQuery("#arrow"+groupId).addClass('arrow-right');
	}
}
</script>

