From da104a3e7845f39b2f02eb10c872aac84d4a0293 Mon Sep 17 00:00:00 2001
From: Sunil G <sunilg@apache.org>
Date: Sat, 2 Sep 2017 08:08:59 +0530
Subject: [PATCH] YARN-7075. Better styling for donut charts in new YARN UI.
 Contributed by Da Ding.

---
 .../main/webapp/app/components/donut-chart.js |  5 +++-
 .../src/main/webapp/app/styles/app.css        | 24 +++++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js
index 82d2d467a19..b1e6ecf5076 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js
@@ -53,7 +53,10 @@ export default BaseChartComponent.extend({
 
     // 50 is for title
     var outerRadius = (h - 50 - 2 * layout.margin) / 2;
-    var innerRadius = outerRadius * 0.618;
+
+    // Ratio of inner radius to outer radius
+    var radiusRatio = 0.75;
+    var innerRadius = outerRadius * radiusRatio;
 
     var arc = d3.svg.arc()
       .innerRadius(innerRadius)
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
index 8b8ea566258..38e25e4ed96 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
@@ -20,6 +20,8 @@ body, html, body > .ember-view {
   height: 100%;
   overflow: visible;
   color: @text-color;
+  background: #f6f6f8;
+  font-family: "Open Sans","Helvetica Neue", sans-serif!important;
 }
 body, html {
   min-width: 1024px;
@@ -29,11 +31,11 @@ body, html {
  Over all style
  */
 text {
-  font: 16px sans-serif;
+  font-size: 14px;
 }
 
 text.small {
-  font: 8px sans-serif;
+  font-size: 8px;
 }
 
 html, body
@@ -184,6 +186,7 @@ table.dataTable thead .sorting_desc_disabled {
 
 .breadcrumb {
   padding-bottom: 3px;
+  background-color: #f6f6f8;
 }
 
 .navbar-default .navbar-nav > li > a {
@@ -268,12 +271,29 @@ td {
   margin: 0 auto -40px; // Must be same as footer & footer-frame
 }
 
+.panel {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 15px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
 .panel-default .container-fluid {
   margin-top: -45px !important;
   margin-bottom: -10px !important;
 }
 
+.panel-default > .panel-heading {
+  background-image: none;
+  background-color: #f5f5f5 !important;
+  border-radius: 15px 15px 0px 0px;
+}
+
+
 .panel-heading {
+  background-color: rgba(0, 0, 0, 0) !important;
   font-weight: bold;
 }