From 52a9c6dbd5d188c7fd4680a3857022c3e19c1f26 Mon Sep 17 00:00:00 2001
From: "yong.you" <yong.you@dianping.com>
Date: Tue, 3 Sep 2013 17:09:54 +0800
Subject: [PATCH] add the metric full screen

---
 .../jsp/report/dependency/dependencyOpNav.jsp |   4 +
 .../webapp/jsp/report/metric/dashboard.jsp    | 119 ++++++++----------
 .../main/webapp/jsp/report/metric/detail.jsp  |  24 ++++
 .../webapp/jsp/report/metric/metricOpNav.jsp  |   4 +
 4 files changed, 87 insertions(+), 64 deletions(-)
 create mode 100644 cat-home/src/main/webapp/jsp/report/metric/detail.jsp

diff --git a/cat-home/src/main/webapp/jsp/report/dependency/dependencyOpNav.jsp b/cat-home/src/main/webapp/jsp/report/dependency/dependencyOpNav.jsp
index e187fc9a3..b0e354ac1 100644
--- a/cat-home/src/main/webapp/jsp/report/dependency/dependencyOpNav.jsp
+++ b/cat-home/src/main/webapp/jsp/report/dependency/dependencyOpNav.jsp
@@ -24,6 +24,10 @@ $(document).ready(function() {
 	
 	var refresh = ${payload.refresh};
 	var frequency = ${payload.frequency};
+	var fullscreen = ${payload.fullScreen};
+	if(fullscreen){
+		$('#fullScreen').addClass('btn-danger');
+	}
 	if(refresh){
 		$('#refresh${payload.frequency}').addClass('btn-danger');
 		setInterval(function(){
diff --git a/cat-home/src/main/webapp/jsp/report/metric/dashboard.jsp b/cat-home/src/main/webapp/jsp/report/metric/dashboard.jsp
index 131c01fc0..4c382e6ad 100644
--- a/cat-home/src/main/webapp/jsp/report/metric/dashboard.jsp
+++ b/cat-home/src/main/webapp/jsp/report/metric/dashboard.jsp
@@ -7,12 +7,46 @@
 <jsp:useBean id="payload" type="com.dianping.cat.report.page.metric.Payload" scope="request"/>
 <jsp:useBean id="model" type="com.dianping.cat.report.page.metric.Model" scope="request"/>
 
-<a:body>
-
+<res:bean id="res" />
 <res:useCss value='${res.css.local.table_css}' target="head-css" />
 <res:useJs value="${res.js.local['svgchart.latest.min.js']}" target="head-js"/>
 <res:useJs value="${res.js.local['baseGraph.js']}" target="head-js"/>
 
+<c:choose>
+	<c:when test="${payload.fullScreen}">
+		<res:useCss value='${res.css.local.body_css}' target="head-css" />
+		<res:useCss value="${res.css.local['bootstrap.css']}" target="head-css" />
+		<res:useJs value="${res.js.local['jquery-1.7.1.js']}" target="head-js" />
+		<res:useJs value="${res.js.local['bootstrap.min.js']}" target="head-js" />
+		<%@ include file="detail.jsp" %>
+	</c:when>
+	<c:otherwise>
+	<a:body>
+		<div class="report">
+			<table class="header">
+				<tr>
+					<td class="title">&nbsp;&nbsp;From ${w:format(model.startTime,'yyyy-MM-dd HH:mm:ss')} to ${w:format(model.endTime,'yyyy-MM-dd HH:mm:ss')}</td>
+					<td class="nav">
+						<c:forEach var="nav" items="${model.navs}">
+							&nbsp;[ <a href="${model.baseUri}?date=${model.date}&domain=${model.domain}&step=${nav.hours}&product=${payload.product}&test=${payload.test}&${navUrlPrefix}">${nav.title}</a> ]&nbsp;
+						</c:forEach>
+						&nbsp;[ <a href="${model.baseUri}?${navUrlPrefix}&product=${payload.product}">now</a> ]&nbsp;
+					</td>
+				</tr>
+			</table>
+			</br>
+			<%@ include file="detail.jsp" %>
+			<table  class="footer">
+				<tr>
+					<td>[ end ]</td>
+				</tr>
+			</table>
+		</div>
+		</a:body>
+	</c:otherwise>
+</c:choose>
+
+
 <script type="text/javascript">
 	$(document).ready(function() {
 		<c:forEach var="item" items="${model.lineCharts}" varStatus="status">
@@ -21,67 +55,24 @@
 		</c:forEach>
 	});
 </script>
-<div class="report">
-	<table class="header">
-		<tr>
-			<td class="title">&nbsp;&nbsp;From ${w:format(model.startTime,'yyyy-MM-dd HH:mm:ss')} to ${w:format(model.endTime,'yyyy-MM-dd HH:mm:ss')}</td>
-			<td class="nav">
-				<c:forEach var="nav" items="${model.navs}">
-					&nbsp;[ <a href="${model.baseUri}?date=${model.date}&domain=${model.domain}&step=${nav.hours}&product=${payload.product}&test=${payload.test}&${navUrlPrefix}">${nav.title}</a> ]&nbsp;
-				</c:forEach>
-				&nbsp;[ <a href="${model.baseUri}?${navUrlPrefix}&product=${payload.product}">now</a> ]&nbsp;
-			</td>
-		</tr>
-	</table>
-	</br>
-	<div class="container-fluid">
-	  <%@ include file="metricOpNav.jsp" %>
-      <div class="row-fluid">
-        <div class="span2">
-          <div class="well sidebar-nav">
-            <ul class="nav nav-list">
-            	 <li class='nav-header active' id="${item.id}"><a href="?op=dashboard&date=${model.date}&domain=${model.domain}"><strong>业务大盘</strong></a></li>
-	            <c:forEach var="item" items="${model.productLines}" varStatus="status">
-	              <li class='nav-header' id="${item.id}"><a href="?date=${model.date}&domain=${model.domain}&product=${item.id}"><strong>${item.title}</strong></a></li>
-	            </c:forEach>
-              <li >&nbsp;</li>
-            </ul>
-          </div><!--/.well -->
-        </div><!--/span-->
-        <div class="span10">
-        	<h3 class='text-red'>说明：图中纵轴数据为10分钟数据之和</h3>
-        	<c:forEach var="item" items="${model.lineCharts}" varStatus="status">
-       			<div style="float:left;">
-       				<h5 class="text-center text-error">${item.title}</h5>
-       				<div  id="${item.title}" class="metricGraph"></div>
-       			</div>
-			</c:forEach>
-        </div>
-	<table  class="footer">
-		<tr>
-			<td>[ end ]</td>
-		</tr>
-	</table>
-</div>
-</a:body>
 <style type="text/css">
-.row-fluid .span2{
-	width:10%;
-}
-.row-fluid .span10{
-	width:87%;
-}
-.well {
-padding: 10px 10px 10px 19p;
-}
-.nav-list  li  a{
-	padding:2px 15px;
-}
-
-.nav li  +.nav-header{
-	margin-top:2px;
-}
-.nav-header{
-	padding:5px 3px;
-}
+	.row-fluid .span2{
+		width:10%;
+	}
+	.row-fluid .span10{
+		width:87%;
+	}
+	.well {
+	padding: 10px 10px 10px 19p;
+	}
+	.nav-list  li  a{
+		padding:2px 15px;
+	}
+	
+	.nav li  +.nav-header{
+		margin-top:2px;
+	}
+	.nav-header{
+		padding:5px 3px;
+	}
 </style>
diff --git a/cat-home/src/main/webapp/jsp/report/metric/detail.jsp b/cat-home/src/main/webapp/jsp/report/metric/detail.jsp
new file mode 100644
index 000000000..650ff03dd
--- /dev/null
+++ b/cat-home/src/main/webapp/jsp/report/metric/detail.jsp
@@ -0,0 +1,24 @@
+<%@ page contentType="text/html; charset=utf-8" %>
+
+ <%@ include file="metricOpNav.jsp" %>
+    <div class="row-fluid">
+      <div class="span2">
+        <div class="well sidebar-nav">
+          <ul class="nav nav-list">
+          	 <li class='nav-header active' id="${item.id}"><a href="?op=dashboard&date=${model.date}&domain=${model.domain}"><strong>业务大盘</strong></a></li>
+           <c:forEach var="item" items="${model.productLines}" varStatus="status">
+             <li class='nav-header' id="${item.id}"><a href="?date=${model.date}&domain=${model.domain}&product=${item.id}"><strong>${item.title}</strong></a></li>
+           </c:forEach>
+            <li >&nbsp;</li>
+          </ul>
+        </div><!--/.well -->
+      </div><!--/span-->
+      <div class="span10">
+      	<h3 class='text-red'>说明：图中纵轴数据为10分钟数据之和</h3>
+      	<c:forEach var="item" items="${model.lineCharts}" varStatus="status">
+     			<div style="float:left;">
+     				<h5 class="text-center text-error">${item.title}</h5>
+     				<div  id="${item.title}" class="metricGraph"></div>
+     			</div>
+	</c:forEach>
+ </div></div>
\ No newline at end of file
diff --git a/cat-home/src/main/webapp/jsp/report/metric/metricOpNav.jsp b/cat-home/src/main/webapp/jsp/report/metric/metricOpNav.jsp
index c41066048..06bfba845 100644
--- a/cat-home/src/main/webapp/jsp/report/metric/metricOpNav.jsp
+++ b/cat-home/src/main/webapp/jsp/report/metric/metricOpNav.jsp
@@ -21,6 +21,10 @@
 $(document).ready(function() {
 	var refresh = ${payload.refresh};
 	var frequency = ${payload.frequency};
+	var fullscreen = ${payload.fullScreen};
+	if(fullscreen){
+		$('#fullScreen').addClass('btn-danger');
+	}
 	if(refresh){
 		$('#refresh${payload.frequency}').addClass('btn-danger');
 		setInterval(function(){
-- 
GitLab