add hostname to all pages containing ip

cat-home/src/main/webapp/jsp/report/cache/cache.jsp

@@ -71,6 +71,20 @@
 		    <input id="queryname" style="WIDTH: 60px"  onclick="filterByName('${model.date}','${model.domain}','${model.ipAddress}','${payload.type}')" type="submit">
 			支持多个字符串查询，例如sql|url|task，查询结果为包含任一sql、url、task的列
 			</th></tr>
+			<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
+			<script type="text/javascript">
+				var buildIpHostMap = function(){
+					var ipToHost = {};
+					<c:forEach var="ip" items="${model.ips}">
+						ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+					</c:forEach>
+					return ipToHost;
+				};
+				
+				$(document).ready(function() {
+					appendHostname(buildIpHostMap());
+				});
+			</script>
 			<script>
 			function filterByName(date,domain,ip){
 				var queryname=$("#queryname").val();

cat-home/src/main/webapp/jsp/report/cache/cacheHistory.jsp

@@ -64,6 +64,20 @@ navUrlPrefix="ip=${model.ipAddress}&queryname=${model.queryName}&domain=${model.
 		    <input id="queryname" style="WIDTH: 60px" onclick="filterByName('${model.date}','${model.domain}','${model.ipAddress}','${payload.type}')" type="submit">
 			支持多个字符串查询，例如sql|url|task，查询结果为包含任一sql、url、task的列
 			</th></tr>
+			<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
+			<script type="text/javascript">
+				var buildIpHostMap = function(){
+					var ipToHost = {};
+					<c:forEach var="ip" items="${model.ips}">
+						ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+					</c:forEach>
+					return ipToHost;
+				};
+				
+				$(document).ready(function() {
+					appendHostname(buildIpHostMap());
+				});
+			</script>
 			<script>
 			function filterByName(date,domain,ip,type){
 				var queryname=$("#queryname").val();

cat-home/src/main/webapp/jsp/report/cross/cross.jsp

@@ -36,6 +36,20 @@
 		</th>
 	</tr>
 </table>
+<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
+<script type="text/javascript">
+	var buildIpHostMap = function(){
+		var ipToHost = {};
+		<c:forEach var="ip" items="${model.ips}">
+			ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+		</c:forEach>
+		return ipToHost;
+	};
+	
+	$(document).ready(function() {
+		appendHostname(buildIpHostMap());
+	});
+</script>
 <table class='data'>
 		<c:if test="${!empty model.projectInfo.callProjectsInfo}">
 		<tr>

cat-home/src/main/webapp/jsp/report/cross/crossHistoryHost.jsp

@@ -38,6 +38,20 @@
 		</th>
 	</tr>
 </table>
+<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
+<script type="text/javascript">
+	var buildIpHostMap = function(){
+		var ipToHost = {};
+		<c:forEach var="ip" items="${model.ips}">
+			ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+		</c:forEach>
+		return ipToHost;
+	};
+	
+	$(document).ready(function() {
+		appendHostname(buildIpHostMap());
+	});
+</script>
 <table class='data'>
 		<c:if test="${!empty model.hostInfo.callProjectsInfo}">
 		<tr>

cat-home/src/main/webapp/jsp/report/cross/crossHistoryMethod.jsp

@@ -43,6 +43,20 @@
 		    <input style="WIDTH: 60px" value="Filter" onclick="filterByName('${model.date}','${model.domain}','${model.ipAddress}')" type="submit">
 			支持多个字符串查询，例如sql|url|task，查询结果为包含任一sql、url、task的列
 			</th></tr>
+		<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
+		<script type="text/javascript">
+			var buildIpHostMap = function(){
+				var ipToHost = {};
+				<c:forEach var="ip" items="${model.ips}">
+					ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+				</c:forEach>
+				return ipToHost;
+			};
+			
+			$(document).ready(function() {
+				appendHostname(buildIpHostMap());
+			});
+		</script>
 		<script>
 			function filterByName(date,domain,ip){
 				var queryName=$("#queryname").val();

cat-home/src/main/webapp/jsp/report/cross/crossHistoryProject.jsp

@@ -38,6 +38,20 @@
 		</th>
 	</tr>
 </table>
+<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
+<script type="text/javascript">
+	var buildIpHostMap = function(){
+		var ipToHost = {};
+		<c:forEach var="ip" items="${model.ips}">
+			ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+		</c:forEach>
+		return ipToHost;
+	};
+	
+	$(document).ready(function() {
+		appendHostname(buildIpHostMap());
+	});
+</script>
 <table class='data'>
 		<c:if test="${!empty model.projectInfo.callProjectsInfo}">
 		<tr>

cat-home/src/main/webapp/jsp/report/cross/crossHost.jsp

@@ -38,6 +38,20 @@
 		</th>
 	</tr>
 </table>
+<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
+<script type="text/javascript">
+	var buildIpHostMap = function(){
+		var ipToHost = {};
+		<c:forEach var="ip" items="${model.ips}">
+			ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+		</c:forEach>
+		return ipToHost;
+	};
+	
+	$(document).ready(function() {
+		appendHostname(buildIpHostMap());
+	});
+</script>
 <table class='data'>
 		<c:if test="${!empty model.hostInfo.callProjectsInfo}">
 		<tr>

cat-home/src/main/webapp/jsp/report/cross/crossMethod.jsp

@@ -38,6 +38,20 @@
 		</th>
 	</tr>
 </table>
+<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
+<script type="text/javascript">
+	var buildIpHostMap = function(){
+		var ipToHost = {};
+		<c:forEach var="ip" items="${model.ips}">
+			ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+		</c:forEach>
+		return ipToHost;
+	};
+	
+	$(document).ready(function() {
+		appendHostname(buildIpHostMap());
+	});
+</script>
 <table class='data'>
 		<tr><th colspan='8'><input type="text" name="queryname" id="queryname" size="40" value="${model.queryName}">
 		    <input style="WIDTH: 60px" value="Filter" onclick="filterByName('${model.date}','${model.domain}','${model.ipAddress}')" type="submit">

cat-home/src/main/webapp/jsp/report/heartbeat/heartbeat.jsp

@@ -143,9 +143,18 @@
 	</c:forEach>
 </table>
 
-
+<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
 <script type="text/javascript">
+	var buildIpHostMap = function(){
+		var ipToHost = {};
+		<c:forEach var="ip" items="${model.ips}">
+			ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+		</c:forEach>
+		return ipToHost;
+	};
+	
 	$(document).ready(function() {
+		appendHostname(buildIpHostMap());
 		$($('.text-error')[3]).hide();
 	});
 </script>

cat-home/src/main/webapp/jsp/report/heartbeat/heartbeatHistoryGraph.jsp

@@ -89,4 +89,18 @@
 	</script>
 </jsp:body>
 </a:historyReport>
-	<script type="text/javascript" src="/cat/js/heartbeatHistory.js"></script>
+<script type="text/javascript" src="/cat/js/heartbeatHistory.js"></script>
\ No newline at end of file
+<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
+<script type="text/javascript">
+	var buildIpHostMap = function(){
+		var ipToHost = {};
+		<c:forEach var="ip" items="${model.ips}">
+			ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+		</c:forEach>
+		return ipToHost;
+	};
+	
+	$(document).ready(function() {
+		appendHostname(buildIpHostMap());
+	});
+</script>
\ No newline at end of file

cat-home/src/main/webapp/jsp/report/problem/problemGroupStatics.jsp

@@ -49,8 +49,19 @@
 				 </c:forEach>
 			</th>
 		</tr>
+		<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
 		<script type="text/javascript">
+			var buildIpHostMap = function(){
+				var ipToHost = {};
+				<c:forEach var="ip" items="${model.ips}">
+					ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+				</c:forEach>
+				return ipToHost;
+			};
+
 			$(document).ready(function() {
+				appendHostname(buildIpHostMap());
+				
 				$.each($('table.machines a'),function(index,item){
 					var id=$(item).text();
 					<c:forEach var="ip" items="${model.groupIps}">

cat-home/src/main/webapp/jsp/report/problem/problemHistoryGroupReport.jsp

@@ -46,8 +46,18 @@
 				 </c:forEach>
 			</th>
 		</tr>
+		<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
 		<script type="text/javascript">
+			var buildIpHostMap = function(){
+				var ipToHost = {};
+				<c:forEach var="ip" items="${model.ips}">
+					ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+				</c:forEach>
+				return ipToHost;
+			};
+
 			$(document).ready(function() {
+				appendHostname(buildIpHostMap());
 				$.each($('table.machines a'),function(index,item){
 					var id=$(item).text();
 					<c:forEach var="ip" items="${model.groupIps}">

cat-home/src/main/webapp/jsp/report/problem/problemHistoryReport.jsp

@@ -54,6 +54,20 @@
 		
 		<tr><th>
 		<%@ include file="problemQuery.jsp" %></th>
+		<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
+		<script type="text/javascript">
+			var buildIpHostMap = function(){
+				var ipToHost = {};
+				<c:forEach var="ip" items="${model.ips}">
+					ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+				</c:forEach>
+				return ipToHost;
+			};
+			
+			$(document).ready(function() {
+				appendHostname(buildIpHostMap());
+			});
+		</script>
 		<script>
 			function longTimeChange(date,domain,ip){
 				var customDate ='${model.customDate}';

cat-home/src/main/webapp/jsp/report/problem/problemStatics.jsp

@@ -59,6 +59,20 @@
 		
 		<tr><th>
 		<%@ include file="problemQuery.jsp" %>
+		<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
+		<script type="text/javascript">
+			var buildIpHostMap = function(){
+				var ipToHost = {};
+				<c:forEach var="ip" items="${model.ips}">
+					ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+				</c:forEach>
+				return ipToHost;
+			};
+			
+			$(document).ready(function() {
+				appendHostname(buildIpHostMap());
+			});
+		</script>
 		<script>
 			function longTimeChange(date,domain,ip){
 				var longUrlTime=$("#p_longUrl").val();

cat-home/src/main/webapp/jsp/report/state/state.jsp

@@ -197,8 +197,18 @@
 </jsp:body>
 </a:report>
 
+<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
 <script type="text/javascript">
+	var buildIpHostMap = function(){
+		var ipToHost = {};
+		<c:forEach var="ip" items="${model.ips}">
+			ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+		</c:forEach>
+		return ipToHost;
+	};
+	
 	$(document).ready(function() {
+		appendHostname(buildIpHostMap());
 		$('.position').hide();
 	});
 </script>

cat-home/src/main/webapp/jsp/report/state/stateHistory.jsp

-<%@ page contentType="text/html; charset=utf-8" %>
+<%@ page contentType="text/html; charset=utf-8"%>
 <%@ page contentType="text/html; charset=utf-8"%>
 <%@ taglib prefix="a" uri="/WEB-INF/app.tld"%>
 <%@ taglib prefix="w" uri="http://www.unidal.org/web/core"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%@ taglib prefix="res" uri="http://www.unidal.org/webres"%>
-<jsp:useBean id="ctx" type="com.dianping.cat.report.page.state.Context" scope="request"/>
-<jsp:useBean id="payload" type="com.dianping.cat.report.page.state.Payload" scope="request"/>
-<jsp:useBean id="model" type="com.dianping.cat.report.page.state.Model" scope="request"/>
+<jsp:useBean id="ctx" type="com.dianping.cat.report.page.state.Context"
+	scope="request" />
+<jsp:useBean id="payload"
+	type="com.dianping.cat.report.page.state.Payload" scope="request" />
+<jsp:useBean id="model" type="com.dianping.cat.report.page.state.Model"
+	scope="request" />
 
-<a:historyReport title="CAT State Report" navUrlPrefix="domain=${model.domain}&ip=${model.ipAddress}">
+<a:historyReport title="CAT State Report"
+	navUrlPrefix="domain=${model.domain}&ip=${model.ipAddress}">
 	<jsp:attribute name="subtitle">From ${w:format(model.report.startTime,'yyyy-MM-dd HH:mm:ss')} to ${w:format(model.report.endTime,'yyyy-MM-dd HH:mm:ss')}  &nbsp;&nbsp;&nbsp;&nbsp;CAT项目指标</jsp:attribute>
 	<jsp:body>	
-	<res:useJs value="${res.js.local['highcharts.js']}" target="head-js"/>
-	<res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
+	<res:useJs value="${res.js.local['highcharts.js']}" target="head-js" />
+	<res:useJs value="${res.js.local['baseGraph.js']}" target="head-js" />
 <table class="machines">
-	<tr style="text-align:left">
+	<tr style="text-align: left">
 		<th>机器: &nbsp;[&nbsp; <c:choose>
 				<c:when test="${model.ipAddress eq 'All'}">
-					<a href="?op=history&reportType=${model.reportType}&domain=${model.domain}&date=${model.date}"
-						class="current">All</a>
+					<a
+								href="?op=history&reportType=${model.reportType}&domain=${model.domain}&date=${model.date}"
+								class="current">All</a>
 				</c:when>
 				<c:otherwise>
-					<a href="?op=history&reportType=${model.reportType}&domain=${model.domain}&date=${model.date}">All</a>
+					<a
+								href="?op=history&reportType=${model.reportType}&domain=${model.domain}&date=${model.date}">All</a>
 				</c:otherwise>
 			</c:choose> &nbsp;]&nbsp; <c:forEach var="ip" items="${model.ips}">
    	  		&nbsp;[&nbsp;
    	  		<c:choose>
 					<c:when test="${model.ipAddress eq ip}">
-						<a href="?op=history&reportType=${model.reportType}&domain=${model.domain}&ip=${ip}&date=${model.date}"
-							class="current">${ip}</a>
+						<a
+									href="?op=history&reportType=${model.reportType}&domain=${model.domain}&ip=${ip}&date=${model.date}"
+									class="current">${ip}</a>
 					</c:when>
 					<c:otherwise>
-						<a href="?op=history&reportType=${model.reportType}&domain=${model.domain}&ip=${ip}&date=${model.date}">${ip}</a>
+						<a
+									href="?op=history&reportType=${model.reportType}&domain=${model.domain}&ip=${ip}&date=${model.date}">${ip}</a>
 					</c:otherwise>
 				</c:choose>
    	 		&nbsp;]&nbsp;
@@ -41,118 +49,185 @@
 </table>
 <table width="80%">
 	<tr>
-		<tr>
+		
+			<tr>
 		<th width="35%" colspan=2>指标</th>
 		<th width="20%">值</th>
 		<th width="45%">备注</th>
 	</tr>
 	</tr>
 	<tr class='odd'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=total" data-status="total" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=total"
+					data-status="total" class="state_graph_link">[:: show ::]</a></td>
 		<td>处理消息总量</td>
 		<td class="right">${w:format(model.state.total.total,'#,###,###,###,##0.#')}</td>
 		<td>服务器接受到消息总量</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="total" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="total" style="display: none"></div></td>
+			</tr>
 	<tr class='even'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=totalLoss" data-status="totalLoss" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=totalLoss"
+					data-status="totalLoss" class="state_graph_link">[:: show ::]</a></td>
 		<td>丢失消息总量</td>
 		<c:choose>
-			<c:when test="${model.state.total.totalLoss > 0}"><td class="right" style="color:red;">${w:format(model.state.total.totalLoss,'#,###,###,###,##0.#')}</td></c:when>
-			<c:otherwise><td class="right">${w:format(model.state.total.totalLoss,'#,###,###,###,##0.#')}</td></c:otherwise>
+			<c:when test="${model.state.total.totalLoss > 0}">
+						<td class="right" style="color: red;">${w:format(model.state.total.totalLoss,'#,###,###,###,##0.#')}</td>
+					</c:when>
+			<c:otherwise>
+						<td class="right">${w:format(model.state.total.totalLoss,'#,###,###,###,##0.#')}</td>
+					</c:otherwise>
 		</c:choose>
 		<td>服务器进行encode以及analyze处理来不及而丢失消息总量</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="totalLoss" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="totalLoss" style="display: none"></div></td>
+			</tr>
 	<tr class='odd'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=avgTps" data-status="avgTps" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=avgTps"
+					data-status="avgTps" class="state_graph_link">[:: show ::]</a></td>
 		<td>每分钟平均处理数</td>
 		<td class="right">${w:format(model.state.total.avgTps,'###,###,###,##0')}</td>
 		<td>平均每分钟处理消息量</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="avgTps" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="avgTps" style="display: none"></div></td>
+			</tr>
 	<tr class='even'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=maxTps" data-status="maxTps" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=maxTps"
+					data-status="maxTps" class="state_graph_link">[:: show ::]</a></td>
 		<td>单台机器每分钟最大处理数</td>
 		<td class="right">${w:format(model.state.total.maxTps,'###,###,###,##0')}</td>
 		<td>单台机器平均每分钟最大处理消息数目</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="maxTps" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="maxTps" style="display: none"></div></td>
+			</tr>
 	<tr class='odd'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=dump" data-status="dump" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=dump"
+					data-status="dump" class="state_graph_link">[:: show ::]</a></td>
 		<td>gzip压缩成功消息数量</td>
 		<td class="right">${w:format(model.state.total.dump,'###,###,###,##0')}</td>
 		<td>将消息进行gzip压缩消息数目</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="dump" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="dump" style="display: none"></div></td>
+			</tr>
 	<tr class='even'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=dumpLoss" data-status="dumpLoss" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=dumpLoss"
+					data-status="dumpLoss" class="state_graph_link">[:: show ::]</a></td>
 		<td>gzip来不及压缩丢失消息数量</td>
 		<c:choose>
-			<c:when test="${model.state.total.dumpLoss > 0}"><td class="right" style="color:red;">${w:format(model.state.total.dumpLoss,'#,###,###,###,##0.#')}</td></c:when>
-			<c:otherwise><td class="right">${w:format(model.state.total.dumpLoss,'#,###,###,###,##0.#')}</td></c:otherwise>
+			<c:when test="${model.state.total.dumpLoss > 0}">
+						<td class="right" style="color: red;">${w:format(model.state.total.dumpLoss,'#,###,###,###,##0.#')}</td>
+					</c:when>
+			<c:otherwise>
+						<td class="right">${w:format(model.state.total.dumpLoss,'#,###,###,###,##0.#')}</td>
+					</c:otherwise>
 		</c:choose>
 		<td>将消息进行gzip压缩，gzip线程太忙而丢失消息丢失数目</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="dumpLoss" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="dumpLoss" style="display: none"></div></td>
+			</tr>
 	<tr class='odd'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=pigeonTimeError" data-status="pigeonTimeError" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=pigeonTimeError"
+					data-status="pigeonTimeError" class="state_graph_link">[:: show ::]</a></td>
 		<td>两台机器时钟不准导致消息存储丢失</td>
 		<td class="right">${w:format(model.state.total.pigeonTimeError,'###,###,###,##0')}</td>
 		<td>这个场景用于Pigeon，服务端id是由客户端产生，客户端和服务端时钟差2小时，会导致存储丢失</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="pigeonTimeError" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="pigeonTimeError" style="display: none"></div></td>
+			</tr>
 	<tr class='even'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=networkTimeError" data-status="networkTimeError" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=networkTimeError"
+					data-status="networkTimeError" class="state_graph_link">[:: show ::]</a></td>
 		<td>网络传输或者客户端延迟发送导致消息丢失</td>
 		<td class="right">${w:format(model.state.total.networkTimeError,'###,###,###,##0')}</td>
 		<td>CAT分小时处理，当一个小时过去了，默认会延迟3分钟结束当前小时，在3分钟后还接受上个小时消息，直接丢弃</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="networkTimeError" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="networkTimeError"
+						style="display: none"></div></td>
+			</tr>
 	<tr class='odd'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=blockTotal" data-status="blockTotal" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=blockTotal"
+					data-status="blockTotal" class="state_graph_link">[:: show ::]</a></td>
 		<td>存储消息块数量</td>
 		<td class="right">${w:format(model.state.total.blockTotal,'###,###,###,##0')}</td>
 		<td>CAT是分块存储，消息块成功放入存储队列</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="blockTotal" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="blockTotal" style="display: none"></div></td>
+			</tr>
 	<tr class='even'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=blockLoss" data-status="blockLoss" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=blockLoss"
+					data-status="blockLoss" class="state_graph_link">[:: show ::]</a></td>
 		<td>存储消息块丢失数量</td>
 		<td class="right">${w:format(model.state.total.blockLoss,'###,###,###,##0')}</td>
 		<td>将存储块写入磁盘的线程太忙，存储队列溢出的消息块数量</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="blockLoss" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="blockLoss" style="display: none"></div></td>
+			</tr>
 	<tr class='odd'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=blockTime" data-status="blockTime" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=blockTime"
+					data-status="blockTime" class="state_graph_link">[:: show ::]</a></td>
 		<td>存储消息块花费时间(分钟)</td>
 		<td class="right">${w:format(model.state.total.blockTime/1000/60,'###,###,###,##0')}</td>
 		<td>存储消息花费的CPU时间</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="blockTime" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="blockTime" style="display: none"></div></td>
+			</tr>
 	<tr class='even'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=size" data-status="size" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=size"
+					data-status="size" class="state_graph_link">[:: show ::]</a></td>
 		<td>压缩前消息大小(GB)</td>
 		<td class="right">${w:format(model.state.total.size/1024/1024/1024,'0.00#')}</td>
 		<td>压缩前所有存储消息的总大小</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="size" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="size" style="display: none"></div></td>
+			</tr>
 	<tr class='odd'>
-		<td><a href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=delayAvg" data-status="delayAvg" class="state_graph_link">[:: show ::]</a></td>
+		<td><a
+					href="?op=historyGraph&ip=${model.ipAddress}&reportType=${model.reportType}&date=${model.date}&key=delayAvg"
+					data-status="delayAvg" class="state_graph_link">[:: show ::]</a></td>
 		<td>系统处理延迟(ms)</td>
 		<td class="right">${w:format(model.state.total.delayAvg,'0.#')}</td>
 		<td>客户端产生消息，到服务端存储之间的时钟误差。（在机器时钟完全准确的情况下）</td>
 	</tr>
-	<tr class="graphs"><td colspan="4"><div id="delayAvg" style="display:none"></div></td></tr>
+	<tr class="graphs">
+				<td colspan="4"><div id="delayAvg" style="display: none"></div></td>
+			</tr>
 </table>
 </br>
 <table width="100%">
 	<tr class='odd'>
-		<td width="15%"><a href="?op=history&domain=${model.domain}&ip=${model.ipAddress}&date=${model.date}&sort=domain">处理项目列表</a></td>
-		<td width="5%"><a href="?op=history&domain=${model.domain}&ip=${model.ipAddress}&date=${model.date}&sort=total">处理消息总量</a></td>
-		<td width="5%"><a href="?op=history&domain=${model.domain}&ip=${model.ipAddress}&date=${model.date}&sort=loss">Analyzer丢失消息总量</a></td>
-		<td width="5%"><a href="?op=history&domain=${model.domain}&ip=${model.ipAddress}&date=${model.date}&sort=size">压缩前消息大小(GB)</a></td>
-		<td width="5%"><a href="?op=history&domain=${model.domain}&ip=${model.ipAddress}&date=${model.date}&sort=avg">平均消息大小(KB)</a></td>
+		<td width="15%"><a
+					href="?op=history&domain=${model.domain}&ip=${model.ipAddress}&date=${model.date}&sort=domain">处理项目列表</a></td>
+		<td width="5%"><a
+					href="?op=history&domain=${model.domain}&ip=${model.ipAddress}&date=${model.date}&sort=total">处理消息总量</a></td>
+		<td width="5%"><a
+					href="?op=history&domain=${model.domain}&ip=${model.ipAddress}&date=${model.date}&sort=loss">Analyzer丢失消息总量</a></td>
+		<td width="5%"><a
+					href="?op=history&domain=${model.domain}&ip=${model.ipAddress}&date=${model.date}&sort=size">压缩前消息大小(GB)</a></td>
+		<td width="5%"><a
+					href="?op=history&domain=${model.domain}&ip=${model.ipAddress}&date=${model.date}&sort=avg">平均消息大小(KB)</a></td>
 		<td width="5%">机器总数</td>
 		<td>项目对应机器列表</td>
 	</tr>
@@ -161,26 +236,48 @@
 		<tr class="${status.index mod 2 != 0 ? 'odd' : 'even'}">
 			<c:set var="lastIndex" value="${status.index}" />
 			<td>${item.name}</td>
-			<td style="text-align:right;">${w:format(item.total,'#,###,###,###,##0.#')}</td>
-			<td style="text-align:right;">${w:format(item.totalLoss,'#,###,###,###,##0.#')}</td>
-			<td style="text-align:right;">${w:format(item.size/1024/1024/1024,'#,###,##0.000')}</td>
-			<td style="text-align:right;">${w:format(item.avg/1024,'#,###,##0.000')}</td>
-			<td style="text-align:center;">${w:size(item.ips)}</td>
+			<td style="text-align: right;">${w:format(item.total,'#,###,###,###,##0.#')}</td>
+			<td style="text-align: right;">${w:format(item.totalLoss,'#,###,###,###,##0.#')}</td>
+			<td style="text-align: right;">${w:format(item.size/1024/1024/1024,'#,###,##0.000')}</td>
+			<td style="text-align: right;">${w:format(item.avg/1024,'#,###,##0.000')}</td>
+			<td style="text-align: center;">${w:size(item.ips)}</td>
 			<td style="white-space: normal">${item.ips}</td>
 		</tr>
-		<tr class="graphs"><td colspan="7"><div id="${item.name}:total" style="display:none"></div></td></tr>
-		<tr class="graphs"><td colspan="7"><div id="${item.name}:totalLoss" style="display:none"></div></td></tr>
-		<tr class="graphs"><td colspan="7"><div id="${item.name}:size" style="display:none"></div></td></tr>
+		<tr class="graphs">
+					<td colspan="7"><div id="${item.name}:total"
+							style="display: none"></div></td>
+				</tr>
+		<tr class="graphs">
+					<td colspan="7"><div id="${item.name}:totalLoss"
+							style="display: none"></div></td>
+				</tr>
+		<tr class="graphs">
+					<td colspan="7"><div id="${item.name}:size"
+							style="display: none"></div></td>
+				</tr>
 	</c:forEach>
-	<tr style="color:white;"><td>${lastIndex+1}</td><td>${model.state.totalSize}</td></tr>
+	<tr style="color: white;">
+				<td>${lastIndex+1}</td>
+				<td>${model.state.totalSize}</td>
+			</tr>
 </table>
 <res:useJs value="${res.js.local['state_js']}" target="bottom-js" />
 </jsp:body>
 </a:historyReport>
 
+<script type="text/javascript" src="/cat/js/appendHostname.js"></script>
 <script type="text/javascript">
-$(document).ready(function(){
-	$('.position').hide();
-});
+	var buildIpHostMap = function() {
+		var ipToHost = {};
+		<c:forEach var="ip" items="${model.ips}">
+		ipToHost["${ip}"] = "${model.ipToHostname[ip]}";
+		</c:forEach>
+		return ipToHost;
+	};
+
+	$(document).ready(function() {
+		appendHostname(buildIpHostMap());
+		$('.position').hide();
+	});
 </script>