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

This commit is contained in:
Sunil G 2017-11-16 13:44:21 +05:30
parent 675e9a8f57
commit 09a1342608
10 changed files with 789 additions and 54 deletions

3
.gitignore vendored
View File

@ -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

View File

@ -122,8 +122,8 @@ export default BaseChartComponent.extend({
var xOffset = layout.margin;
var yOffset = layout.margin * 3;
var gradientStartColor = "#2ca02c";
var gradientEndColor = "#ffb014";
var gradientStartColor = "#60cea5";
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");

View File

@ -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");

View File

@ -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));

View File

@ -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;
color: @text-color;
background-color: $yarn-panel-bg;
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;
border: 1px solid #ddd;
border-radius: 15px;
background-color: $yarn-panel-bg;
border: 1px solid $yarn-border-color;
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;
border-radius: 15px 15px 0px 0px;
background-color: $yarn-header-bg !important;
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;
background-color: #60cea5;
border-color: $yarn-success-border;
background-color: $yarn-success-bg;
}
.yarn-cluster-status i.stopped,
.em-table-simple-status-cell i.killed {
border-color: #b04b4e;
background-color: #ef6162;
.em-table-simple-status-cell i.killed,
.em-table-simple-status-cell i.failed {
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;
background-color: #26bbf0;
border-color: $yarn-info-border;
background-color: $yarn-info-bg;
}
.yarn-cluster-status i.notinited,
.em-table-simple-status-cell i.accepted {
border-color: #dca41b;
background-color: #ffbc0b;
border-color: $yarn-warn-border;
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;
border: 1px solid #d5d5d5;
background: $yarn-panel-bg;
border: 1px solid $yarn-border-color;
}
.yarn-applications-container .table-panel-left .em-table-facet-panel .field-name {
background-color: #f7f7f7;
border-bottom: 1px solid #d5d5d5;
background-color: $yarn-header-bg;
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;
border-bottom: 1px solid #d5d5d5;
background-color: $yarn-header-bg;
border-bottom: 1px solid $yarn-border-color;
}

View File

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

View File

@ -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

View File

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

View File

@ -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",