YARN-7075. Better styling for donut charts in new YARN UI. Contributed by Da Ding.

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)

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;
 }