YARN-7492. Set up SASS for new YARN UI styling. Contributed by Vasudevan Skm.
This commit is contained in:
Sunil G
parent
675e9a8f57
commit
09a1342608
3
.gitignore
vendored
3
.gitignore
vendored
@ -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
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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));
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
@ -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
|
||||
@ -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) {
|
||||
|
||||
@ -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",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user