From 84b29e901df80816a3fde10d0b5c371a74868c73 Mon Sep 17 00:00:00 2001
From: r7raul1984 <tangjijun@yhd.com>
Date: Thu, 16 Feb 2017 08:39:12 +0000
Subject: [PATCH 1/2] [EAGLE-898][EAGLE-899] Improve user experience for HBase
 JMX Dashboard  - EAGLE-898 Show jmx dashboard background first, then render
 the chart as that in JPM application  - EAGLE-899 Show two charts in a line
 by default

https://issues.apache.org/jira/browse/EAGLE-898
https://issues.apache.org/jira/browse/EAGLE-899
---
 .../webapp/app/apps/hadoop_metric/partials/overview.html | 9 +++++++--
 .../apps/hadoop_metric/partials/region/regionDetail.html | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html
index 73912b8541..3a864d3198 100644
--- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html
+++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/overview.html
@@ -85,10 +85,15 @@ <h3 class="box-title">
 	</div>
 	<div class="box-body no-padding">
 		<div class="row border-split">
-			<div class="col-sm-6 col-md-4 col-lg-3" ng-repeat="chart in chartList track by $index">
+			<div class="col-sm-6 col-md-4 col-lg-6" ng-repeat="chart in chartList track by $index">
 				<div class="hadoopMetric-chart">
 					<h3>{{metricList[chart.name].title}}</h3>
-					<div ng-show="metricList[chart.name].loading" class="fa fa-refresh fa-spin no-animate"></div>
+					<div ng-show="metricList[chart.name].loading" chart class="hadoopMetric-chart-container"></div>
+					<div ng-show="metricList[chart.name].loading" class="overlay-wrapper">
+						<div class="overlay">
+							<i class="fa fa-refresh fa-spin"></i>
+						</div>
+					</div>
 					<div ng-show="metricList[chart.name].series.length" chart class="hadoopMetric-chart-container"
 						 series="metricList[chart.name].series"
 						 option="metricList[chart.name].option"></div>
diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/region/regionDetail.html b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/region/regionDetail.html
index 2a5bff4617..63a895f263 100644
--- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/region/regionDetail.html
+++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/partials/region/regionDetail.html
@@ -93,10 +93,15 @@ <h3 class="box-title">
 	</div>
 	<div class="box-body no-padding">
 		<div class="row border-split">
-			<div class="col-sm-6 hadoopMetric-col-md-6 col-lg-3" ng-repeat="chart in chartList track by $index">
+			<div class="col-sm-6 hadoopMetric-col-md-6 col-lg-6" ng-repeat="chart in chartList track by $index">
 				<div class="hadoopMetric-chart">
 					<h3>{{metricList[chart.name].title}}</h3>
-					<div ng-show="metricList[chart.name].loading" class="fa fa-refresh fa-spin no-animate"></div>
+					<div ng-show="metricList[chart.name].loading" class="hadoopMetric-chart-container"></div>
+					<div ng-show="metricList[chart.name].loading" class="overlay-wrapper">
+						<div class="overlay">
+							<i class="fa fa-refresh fa-spin"></i>
+						</div>
+					</div>
 					<div ng-show="metricList[chart.name].series.length" chart class="hadoopMetric-chart-container"
 						 series="metricList[chart.name].series"
 						 option="metricList[chart.name].option"></div>

From 101d01130623589a3e7b0d1a6c70c75636cff67b Mon Sep 17 00:00:00 2001
From: r7raul1984 <tangjijun@yhd.com>
Date: Fri, 17 Feb 2017 00:35:43 +0000
Subject: [PATCH 2/2] Change chart height to 300px.

---
 .../src/main/webapp/app/apps/hadoop_metric/style/index.css      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css
index b921d8f6d6..aa215ab276 100644
--- a/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css
+++ b/eagle-hadoop-metric/src/main/webapp/app/apps/hadoop_metric/style/index.css
@@ -28,7 +28,7 @@
 }
 
 .hadoopMetric-chart .hadoopMetric-chart-container {
-	height: 200px;
+	height: 300px;
 	position: relative;
 }