YARN-7492. Set up SASS for new YARN UI styling. Contributed by Vasudevan Skm.

.gitignore

@@ -8,6 +8,7 @@
 *.sdf
 *.suo
 *.vcxproj.user
+*.patch
 .idea
 .svn
 .classpath
@@ -45,3 +46,5 @@ hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/tmp
 yarnregistry.pdf
 patchprocess/
 .history/
+hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/package-lock.json
+hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/yarn-error.log

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js

@@ -122,8 +122,8 @@ export default BaseChartComponent.extend({
     var xOffset = layout.margin;
     var yOffset = layout.margin * 3;
 
-    var gradientStartColor = "#2ca02c";
+    var gradientStartColor = "#60cea5";
-    var gradientEndColor = "#ffb014";
+    var gradientEndColor = "#ffbc0b";
 
     var colorFunc = d3.interpolateRgb(d3.rgb(gradientStartColor), d3.rgb(gradientEndColor));
 
@@ -138,7 +138,7 @@ export default BaseChartComponent.extend({
       var rect = g.append("rect")
         .attr("x", sampleXOffset)
         .attr("y", sampleYOffset)
-        .attr("fill", this.selectedCategory === i ? "#2c7bb6" : colorFunc(ratio))
+        .attr("fill", this.selectedCategory === i ? "#26bbf0" : colorFunc(ratio))
         .attr("width", this.SAMPLE_CELL_WIDTH)
         .attr("height", this.SAMPLE_HEIGHT)
         .attr("class", "hyperlink");

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/per-app-memusage-by-nodes-stacked-barchart.js

@@ -74,7 +74,7 @@ export default StackedBarchart.extend({
   didInsertElement: function() {
     this.initChart(true);
 
-    this.colors = ["Orange", "Grey", "LimeGreen"];
+    this.colors = ["lightsalmon", "Grey", "mediumaquamarine"];
 
     var containers = this.get("rmContainers");
     var nodes = this.get("nodes");

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js

@@ -156,11 +156,11 @@ export default Ember.Component.extend({
         maxCap = maxCap === undefined ? 100 : maxCap;
         var usedCap = d.queueData.get(this.used) / maxCap * 100.0;
         if (usedCap <= 60.0) {
-          return "LimeGreen";
+          return "mediumaquamarine";
         } else if (usedCap <= 100.0) {
-          return "DarkOrange";
+          return "coral";
         } else {
-          return "LightCoral";
+          return "salmon";
         }
       }.bind(this));
 

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss

@@ -1,3 +1,5 @@
+@import 'variables.scss';
+
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -19,7 +21,8 @@
 body, html, body > .ember-view {
   height: 100%;
   overflow: visible;
-  background: #f6f6f8;
+  background: $yarn-bg;
+  color: $yarn-primary-color;
   font-family: "Open Sans","Helvetica Neue", sans-serif!important;
 }
 body, html {
@@ -186,7 +189,7 @@ table.dataTable thead .sorting_desc_disabled {
 
 .breadcrumb {
   padding-bottom: 3px;
-  background-color: #f6f6f8;
+  background-color: none;
 }
 
 .navbar-default .navbar-nav > li > a {
@@ -201,7 +204,7 @@ table.dataTable thead .sorting_desc_disabled {
 }
 
 .node circle {
-  fill: #fff;
+  fill: $yarn-panel-bg;
   stroke: steelblue;
   stroke-width: 3px;
 }
@@ -221,8 +224,8 @@ table.dataTable thead .sorting_desc_disabled {
 }
 
 .footer {
-  background-color: @white;
+  background-color: $yarn-panel-bg;
-  color: @text-color;
+  color: $yarn-primary-color;
 
   padding: 10px 0px;
   margin: 0px;
@@ -246,7 +249,7 @@ table.dataTable thead .sorting_desc_disabled {
 .dataTables_wrapper .table {
   border: 1px solid lightgrey;
   border-bottom: 1px solid lightgrey !important;
-  border-radious: 5px;
+  border-radius: 5px;
 }
 
 .dataTables_wrapper .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
@@ -272,9 +275,9 @@ td {
 }
 
 .panel {
-  background-color: #fff;
+  background-color: $yarn-panel-bg;
-  border: 1px solid #ddd;
+  border: 1px solid $yarn-border-color;
-  border-radius: 15px;
+  border-radius: 3px;
   -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;
@@ -287,8 +290,9 @@ td {
 
 .panel-default > .panel-heading {
   background-image: none;
-  background-color: #f5f5f5 !important;
+  background-color: $yarn-header-bg !important;
-  border-radius: 15px 15px 0px 0px;
+  border-color: $yarn-border-color;
+  border-radius: 3px;
 }
 
 
@@ -356,7 +360,7 @@ div.attempt-info-panel table > tbody > tr > td:last-of-type {
 
 #sequence text, #legend text {
   font-weight: 600;
-  fill: #fff;
+  fill: $yarn-panel-bg;
 }
 
 #chart {
@@ -364,7 +368,7 @@ div.attempt-info-panel table > tbody > tr > td:last-of-type {
 }
 
 #chart path {
-  stroke: #fff;
+  stroke: $yarn-panel-bg;
 }
 
 #explanation {
@@ -441,23 +445,25 @@ div.attempt-info-panel table > tbody > tr > td:last-of-type {
 
 .yarn-cluster-status i.started,
 .em-table-simple-status-cell i.finished {
-  border-color: #43b135;
+  border-color: $yarn-success-border;
-  background-color: #60cea5;
+  background-color: $yarn-success-bg;
 }
+
 .yarn-cluster-status i.stopped,
-.em-table-simple-status-cell i.killed {
+.em-table-simple-status-cell i.killed,
-  border-color: #b04b4e;
+.em-table-simple-status-cell i.failed {
-  background-color: #ef6162;
+  border-color: $yarn-error-border;
+  background-color: $yarn-error-bg;
 }
 .yarn-cluster-status i.inited,
 .em-table-simple-status-cell i.running {
-  border-color: #1c95c0;
+  border-color: $yarn-info-border;
-  background-color: #26bbf0;
+  background-color: $yarn-info-bg;
 }
 .yarn-cluster-status i.notinited,
 .em-table-simple-status-cell i.accepted {
-    border-color: #dca41b;
+    border-color: $yarn-warn-border;
-    background-color: #ffbc0b;
+    background-color: $yarn-warn-bg;
 }
 .yarn-cluster-info {
   display: flex;
@@ -546,7 +552,7 @@ table.table-custom-action > thead > tr > th:last-of-type, table.table-custom-act
 }
 
 .deploy-service .toggle-btn.active {
-  color: #fff;
+  color: $yarn-panel-bg;
   background-color: #337ab7;
   border-color: #337ab7;
   text-shadow: none;
@@ -657,13 +663,13 @@ div.service-action-mask img {
 .yarn-applications-container .table-panel-left .em-table-facet-panel .field-list > li .em-table-facet-panel-values{
   margin-top: 0px;
   margin-bottom: -4px;
-  background: #fff;
+  background: $yarn-panel-bg;
-  border: 1px solid #d5d5d5;
+  border: 1px solid $yarn-border-color;
 }
 
 .yarn-applications-container .table-panel-left .em-table-facet-panel .field-name {
-  background-color: #f7f7f7;
+  background-color: $yarn-header-bg;
-  border-bottom: 1px solid #d5d5d5;
+  border-bottom: 1px solid $yarn-border-color;
   padding: 10px 15px;
 }
 
@@ -712,6 +718,6 @@ div.service-action-mask img {
 }
 
 .em-table .table-column .table-header-cell {
-  background-color: #f7f7f7;
+  background-color: $yarn-header-bg;
-  border-bottom: 1px solid #d5d5d5;
+  border-bottom: 1px solid $yarn-border-color;
 }

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/colors.scss

@@ -0,0 +1,37 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Colors
+$color-ghost-white: #f1f2f8;
+$color-white: #fff;
+
+$color-gray-20: #333;
+$color-gray-97: #f7f7f7;
+$color-light-gray: #d5d5d5;
+
+$color-green-primary: #60cea5;
+$color-green-secondary: #43b135;
+
+$color-red-primary: #ef6162;
+$color-red-secondary: #b04b4e;
+
+$color-blue-primary: #26bbf0;
+$color-blue-secondary:#1c95c0;
+
+$color-yellow-primary: #ffbc0b;
+$color-yellow-secondary: #dca41b;

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss

@@ -0,0 +1,40 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+@import './colors.scss';
+
+$yarn-bg: $color-ghost-white;
+$yarn-panel-bg: $color-white;
+$yarn-primary-color: $color-gray-20;
+
+$yarn-header-bg: $color-gray-97;
+$yarn-border-color: $color-light-gray;
+
+
+$yarn-success-border: $color-green-secondary;
+$yarn-success-bg: $color-green-primary;
+$yarn-error-border: $color-red-secondary;
+$yarn-error-bg: $color-red-primary;
+$yarn-info-border: $color-blue-secondary;
+$yarn-info-bg: $color-blue-primary;
+$yarn-warn-border: $color-yellow-secondary;
+$yarn-warn-bg: $color-yellow-primary;
+
+
+//shadows

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/utils/color-utils.js

@@ -23,10 +23,10 @@ export default {
     "#dbdb8d", "#17becf", "#9edae5"],
 
   colorMap: {
-    "warn": "#ff7f0e",
+    "warn": "#ffbc0b",
-    "good": "#2ca02c",
+    "good": "#60cea5",
-    "error": "#d62728",
+    "error": "#cc6164",
-    "others": "#7f7f7f",
+    "others": "#26bbf0",
   },
 
   getColors: function(nColors, colorsTarget, reverse = false) {

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/package.json

@@ -52,7 +52,8 @@
     "ember-truth-helpers": "1.3.0",
     "loader.js": "4.2.3",
     "select2": "4.0.0",
-    "testem": "0.9.11"
+    "testem": "0.9.11",
+    "ember-cli-sass": "=7.0.0"
   },
   "dependencies": {
     "em-helpers": "^0.8.0",