YARN-7492. Set up SASS for new YARN UI styling. Contributed by Vasudevan Skm.
Project: http://git-wip-us.apache.org/repos/asf/hadoop/repo Commit: http://git-wip-us.apache.org/repos/asf/hadoop/commit/09a13426 Tree: http://git-wip-us.apache.org/repos/asf/hadoop/tree/09a13426 Diff: http://git-wip-us.apache.org/repos/asf/hadoop/diff/09a13426 Branch: refs/heads/YARN-5881 Commit: 09a13426086aed9d1bc63a844858dcac560763a6 Parents: 675e9a8 Author: Sunil G <sun...@apache.org> Authored: Thu Nov 16 13:44:21 2017 +0530 Committer: Sunil G <sun...@apache.org> Committed: Thu Nov 16 13:44:21 2017 +0530 ---------------------------------------------------------------------- .gitignore | 3 + .../main/webapp/app/components/nodes-heatmap.js | 6 +- ...er-app-memusage-by-nodes-stacked-barchart.js | 2 +- .../main/webapp/app/components/tree-selector.js | 6 +- .../src/main/webapp/app/styles/app.css | 717 ------------------ .../src/main/webapp/app/styles/app.scss | 723 +++++++++++++++++++ .../src/main/webapp/app/styles/colors.scss | 37 + .../src/main/webapp/app/styles/variables.scss | 40 + .../src/main/webapp/app/utils/color-utils.js | 8 +- .../hadoop-yarn-ui/src/main/webapp/package.json | 3 +- .../hadoop-yarn-ui/src/main/webapp/yarn.lock | 674 ++++++++++++++++- 11 files changed, 1477 insertions(+), 742 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/hadoop/blob/09a13426/.gitignore ---------------------------------------------------------------------- diff --git a/.gitignore b/.gitignore index 70c1f23..440708a 100644 --- a/.gitignore +++ b/.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 http://git-wip-us.apache.org/repos/asf/hadoop/blob/09a13426/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js ---------------------------------------------------------------------- diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js index 1ea655b..7802d42 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js +++ b/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 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"); http://git-wip-us.apache.org/repos/asf/hadoop/blob/09a13426/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/per-app-memusage-by-nodes-stacked-barchart.js ---------------------------------------------------------------------- diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/per-app-memusage-by-nodes-stacked-barchart.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/per-app-memusage-by-nodes-stacked-barchart.js index 65cbaf5..c01fe36 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/per-app-memusage-by-nodes-stacked-barchart.js +++ b/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"); http://git-wip-us.apache.org/repos/asf/hadoop/blob/09a13426/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js ---------------------------------------------------------------------- diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js index 4a0e6aa..7a9d53b 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js +++ b/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)); http://git-wip-us.apache.org/repos/asf/hadoop/blob/09a13426/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css ---------------------------------------------------------------------- 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 deleted file mode 100644 index 04c484b..0000000 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css +++ /dev/null @@ -1,717 +0,0 @@ -/** - * 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. - */ - -body, html, body > .ember-view { - height: 100%; - overflow: visible; - background: #f6f6f8; - font-family: "Open Sans","Helvetica Neue", sans-serif!important; -} -body, html { - min-width: 1024px; -} - -/* - Over all style - */ -text { - font-size: 14px; -} - -text.small { - font-size: 8px; -} - -html, body -{ - margin: 0px; - padding: 0px; - height: 100%; - width: 100%; -} - - -/* - queue's style (left banner of queues) - */ - -text.queue { - font-family : sans-serif; - font-size : 15px; - fill : gray; -} - -text.heatmap-cell { - font-size: 14px; - text-anchor: middle; - fill: Azure; - text-align: center; -} - -.hyperlink { - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.heatmap-clear { - fill: #337ab7; -} - -text.heatmap-cell-notselected { - font: 14px sans-serif; - font-weight: bold; - text-anchor: middle; - fill: Silver; - text-align: center; - -} - -text.heatmap-rack { - font-size: 18px; - font-weight: 400; - fill: #4b5052; -} - -path.queue { - stroke: "red"; - fill: none; -} - -/* - background style - */ -line.grid { - stroke: WhiteSmoke; -} - -line.chart { - stroke: Gray; -} - -/* - charts styles - */ -text.chart-title { - font-size: 30px; - text-anchor: middle; - fill: #4b5052; -} - -text.donut-highlight-text, text.donut-highlight-sub { - font-size: 15px; - font-family: sans-serif; - text-anchor: middle; - fill: Gray; - vertical-align: middle; -} - -text.donut-highlight-sub { - font-size: 23px; - margin-top: 10px; -} - -rect.chart-frame { - fill: none; -} - -text.bar-chart-text { - font-size: 8px; - font-family: sans-serif; - vertical-align: middle; - fill: Gray;; -} - -div.tooltip { - position: absolute; - text-align: center; - padding: 10px; - font-size: 16px; - background: black; - color: white; - border: 0px; - border-radius: 8px; - pointer-events: none; -} - -/* - * Loading icon styles - */ -.loading-mask > img { - display: block; - margin: 0 auto; -} - -/* - * Data table - */ - -table.dataTable thead .sorting { - background-image: url("/assets/images/datatables/sort_both.png"); -} -table.dataTable thead .sorting_asc { - background-image: url("/assets/images/datatables/sort_asc.png"); -} -table.dataTable thead .sorting_desc { - background-image: url("/assets/images/datatables/sort_desc.png"); -} -table.dataTable thead .sorting_asc_disabled { - background-image: url("/assets/images/datatables/sort_asc_disabled.png"); -} -table.dataTable thead .sorting_desc_disabled { - background-image: url("/assets/images/datatables/sort_desc_disabled.png"); -} - -.add-ellipsis { - overflow: hidden; - text-overflow: ellipsis; -} - -.breadcrumb { - padding-bottom: 3px; - background-color: #f6f6f8; -} - -.navbar-default .navbar-nav > li > a { - color: #337ab7; -} - -/* - * Queue selector - */ -.node { - cursor: pointer; -} - -.node circle { - fill: #fff; - stroke: steelblue; - stroke-width: 3px; -} - -.node text { - font: 12px sans-serif; -} - -.link { - fill: none; - stroke: #ccc; - stroke-width: 2px; -} - -.lr-margin { - margin: 0px 30px; -} - -.footer { - background-color: @white; - color: @text-color; - - padding: 10px 0px; - margin: 0px; - - border-top: 1px lightgrey solid; - - font-size: .9em; -} - -.table { - margin-bottom: 0px; - border: none; - - overflow: hidden; -} - -.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 { - border: none !important; -} - -.dataTables_wrapper .table { - border: 1px solid lightgrey; - border-bottom: 1px solid lightgrey !important; - border-radious: 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 { - border: 1px solid lightgrey; -} - -td { - padding: 8px 15px 8px 15px !important; -} - -.footer-frame { - height: 60px; -} -.footer { - height: 40px; -} - -.footer-pusher { - min-height: 100%; - height: auto !important; - height: 100%; - 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; -} - -.hadoop-brand-image { - margin-top: -10px; - width: auto; - height: 45px; -} - -li a.navigation-link.ember-view { - color: #2196f3; - font-weight: bold; -} - -.breadcrumb-bar .refresh { - position: absolute; - right: 20px; - top: 3px; -} - -.x-scroll { - overflow-x: scroll; -} - -.donut-chart { - padding: 0px !important; -} - -.donut-chart svg { - width: 100%; -} - -div.attempt-info-panel table { - table-layout: fixed; -} - -div.attempt-info-panel table > tbody > tr > td:last-of-type { - overflow: hidden; - text-overflow: ellipsis; -} - -#main { - float: left; - width: 750px; -} - -#sidebar { - float: right; - width: 100px; -} - -#sequence { - width: 600px; - height: 70px; -} - -#legend { - padding: 10px 0 0 3px; -} - -#sequence text, #legend text { - font-weight: 600; - fill: #fff; -} - -#chart { - position: relative; -} - -#chart path { - stroke: #fff; -} - -#explanation { - position: absolute; - top: 360px; - left: 385px; - width: 230px; - text-align: center; - color: #666; - z-index: -1; -} - -.simple-bar-chart .axis text { - font: 10px sans-serif; -} - -.simple-bar-chart .axis path, .simple-bar-chart .axis line { - fill: none; - stroke: #000; - stroke-width: 1px; -} - -.simple-bar-chart rect { - fill: steelblue; -} - -.simple-bar-chart rect:hover { - fill: brown; - cursor: pointer; -} - -.yarn-flow-runs .chart-panel, .yarn-flow-runinfo .chart-panel { - overflow: auto; -} - -.yarn-flow-runs .glyphicon-remove, .yarn-flow-runinfo .glyphicon-remove { - cursor: pointer; -} - -.yarn-flow-runs .glyphicon-remove:hover, .yarn-flow-runinfo .glyphicon-remove:hover { - color: #c9302c; -} - -.yarn-flow-runs .dropdown-menu .item-text, .yarn-flow-runinfo .dropdown-menu .item-text { - width: auto; - display: inline-block; -} - -.yarn-flow-runs .dropdown-menu .item-icon, .yarn-flow-runinfo .dropdown-menu .item-icon { - width: 14px; - display: inline-block; -} - -.yarn-cluster-status i, -.em-table-simple-status-cell i{ - display: inline-block; - border-radius: 100%; - border: 1px solid; -} - -.yarn-cluster-status i { - width: 12px; - height: 12px; - margin: 3px; - vertical-align: bottom; -} - -.em-table-simple-status-cell i { - width: 10px; - height: 10px; - margin: 3px 3px 3px 0; - vertical-align: text-bottom; -} - -.yarn-cluster-status i.started, -.em-table-simple-status-cell i.finished { - border-color: #43b135; - background-color: #60cea5; -} -.yarn-cluster-status i.stopped, -.em-table-simple-status-cell i.killed { - border-color: #b04b4e; - background-color: #ef6162; -} -.yarn-cluster-status i.inited, -.em-table-simple-status-cell i.running { - border-color: #1c95c0; - background-color: #26bbf0; -} -.yarn-cluster-status i.notinited, -.em-table-simple-status-cell i.accepted { - border-color: #dca41b; - background-color: #ffbc0b; -} -.yarn-cluster-info { - display: flex; - margin-left: auto -} - -.yarn-ui-footer { - display: flex; - padding: 10px 25px; -} - -.deploy-service textarea { - border-radius: 5px !important; - resize: none; - word-wrap: break-word; -} - -.deploy-service .loading-state { - opacity: 0.5; -} - -.deploy-service .loading-state img { - width: 80px; - height: 80px; - margin: 40px auto; - left: 50% !important; - position: absolute; - z-index: 9999; -} - -.align-center { - text-align: center !important; -} - -.bold-text { - font-weight: bold !important; -} - -.deploy-service .saved-list { - min-height: 600px; -} - -.deploy-service .glyphicon { - cursor: pointer; -} - -.deploy-service .remove-icon:hover { - color: #d9534f; -} - -.deploy-service .savedlist-column { - padding-top: 10px; -} - -.deploy-service .definition-column { - padding-top: 10px; - border-left: 1px solid #ddd; -} - -.deploy-service .content-area { - padding: 15px 0px; - border-top: 1px solid #ddd; -} - -.deploy-service .custom-json-area { - padding: 10px 0; - margin-top: -26px; -} - -.deploy-service-modal .modal-dialog { - width: 400px; -} - -.deploy-service-modal .form-group { - margin-bottom: 5px; -} - -.deploy-service .action-btns { - text-align: right; - padding-bottom: 15px; - padding-right: 0; -} - -table.table-custom-action > thead > tr > th:last-of-type, table.table-custom-action > tbody > tr > td:last-of-type { - width: 50px !important; -} - -.deploy-service .toggle-btn.active { - color: #fff; - background-color: #337ab7; - border-color: #337ab7; - text-shadow: none; -} - -.deploy-service .service-resp { - word-wrap: break-word; -} - -table.table-custom-bordered { - border: 1px solid #ddd !important; - border-radius: 4px !important; -} - -table.table-custom-bordered > thead > tr > th, table.table-custom-bordered > tbody > tr > td { - border-bottom: 1px solid #ddd !important; - border-right: 1px solid #ddd !important; -} - -table.table-custom-striped > thead > tr, .table-custom-striped > tbody > tr:nth-of-type(even) { - background-color: #f9f9f9 !important; -} - -table.table-custom-header > thead > tr > th { - background-color: #f5f5f5 !important; -} - -table.table-radius-none { - border-radius: 0 !important; -} - -table.table-border-none { - border: none !important; -} - -.deploy-service label.required:after, .deploy-service-modal label.required:after { - content: '*'; - color: #d9534f; -} - -.deploy-service .form-group.shrink-height { - margin-bottom: -8px; -} - -table.fix-table-overflow { - table-layout: fixed; -} - -table.fix-table-overflow > tbody > tr > td:last-of-type { - overflow: hidden; - text-overflow: ellipsis; -} - -div.tooltip.info-tooltip { - font: 14px sans-serif !important; - background: lightsteelblue; - word-wrap: break-word; - position: absolute; - text-align: justify; - border-radius: 3px; - z-index: 9999; - padding: 10px; - display: none; - min-width: 200px; - max-width: 500px; - opacity: 1; - top: 10px; - left: 0; -} - -div.tooltip.info-tooltip > span.top-arrow { - color: lightsteelblue; - position: absolute; - top: -10px; - left: 10px; -} - -span.info-icon { - color: #337ab7 !important; -} - -div.service-action-mask { - position: absolute; - opacity: 0.5; - z-index: 9999; - width: 100%; - height: 100%; -} - -div.service-action-mask img { - position: absolute; - width: 80px; - height: 80px; - margin: 40px auto; - left: 45% !important; - z-index: 9999; -} - -.yarn-applications-container .table-panel-left .em-table-facet-panel { - width: 240px; - margin-right: 15px; - padding: 0 0 15px 0; - background: none; - border: none; - border-radius: 0; -} - -.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; -} - -.yarn-applications-container .table-panel-left .em-table-facet-panel .field-name { - background-color: #f7f7f7; - border-bottom: 1px solid #d5d5d5; - padding: 10px 15px; -} - -.yarn-applications-container .table-panel-left .em-table-facet-panel .all-button { - right: 5px !important; -} - -.yarn-applications-container .table-panel-left .em-table-facet-panel .field-name::before { - margin-right: 5px; -} - -.yarn-applications-container .table-panel-left .em-table-facet-panel .value-list { - padding: 0 10px; -} - -.yarn-applications-container .table-panel-left .em-table-facet-panel .filter-box { - padding: 5px; - margin: 5px 0; -} - -.yarn-applications-container .table-panel-left .em-table-facet-panel .more-less { - padding: 5px 0; -} - -.yarn-applications-container .table-panel-left .em-table-facet-panel .field-list { - padding-top: 0px; -} - -.yarn-applications-container .em-table .table-column .table-header-cell { - padding: 7.5px 0 7.5px 7.5px; -} - -.yarn-applications-container .ember-view.table-cell { - padding: 10px 15px; - height: auto; -} - -.yarn-applications-container .resize-column { - position: absolute; - right: -14px; - display: inline-block; - padding: 10px 0; - top: -36px; - font-size: 42px; - line-height: 2em; -} - -.em-table .table-column .table-header-cell { - background-color: #f7f7f7; - border-bottom: 1px solid #d5d5d5; -} http://git-wip-us.apache.org/repos/asf/hadoop/blob/09a13426/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss ---------------------------------------------------------------------- diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss new file mode 100644 index 0000000..350c794 --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss @@ -0,0 +1,723 @@ +@import 'variables.scss'; + +/** + * 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. + */ + +body, html, body > .ember-view { + height: 100%; + overflow: visible; + background: $yarn-bg; + color: $yarn-primary-color; + font-family: "Open Sans","Helvetica Neue", sans-serif!important; +} +body, html { + min-width: 1024px; +} + +/* + Over all style + */ +text { + font-size: 14px; +} + +text.small { + font-size: 8px; +} + +html, body +{ + margin: 0px; + padding: 0px; + height: 100%; + width: 100%; +} + + +/* + queue's style (left banner of queues) + */ + +text.queue { + font-family : sans-serif; + font-size : 15px; + fill : gray; +} + +text.heatmap-cell { + font-size: 14px; + text-anchor: middle; + fill: Azure; + text-align: center; +} + +.hyperlink { + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.heatmap-clear { + fill: #337ab7; +} + +text.heatmap-cell-notselected { + font: 14px sans-serif; + font-weight: bold; + text-anchor: middle; + fill: Silver; + text-align: center; + +} + +text.heatmap-rack { + font-size: 18px; + font-weight: 400; + fill: #4b5052; +} + +path.queue { + stroke: "red"; + fill: none; +} + +/* + background style + */ +line.grid { + stroke: WhiteSmoke; +} + +line.chart { + stroke: Gray; +} + +/* + charts styles + */ +text.chart-title { + font-size: 30px; + text-anchor: middle; + fill: #4b5052; +} + +text.donut-highlight-text, text.donut-highlight-sub { + font-size: 15px; + font-family: sans-serif; + text-anchor: middle; + fill: Gray; + vertical-align: middle; +} + +text.donut-highlight-sub { + font-size: 23px; + margin-top: 10px; +} + +rect.chart-frame { + fill: none; +} + +text.bar-chart-text { + font-size: 8px; + font-family: sans-serif; + vertical-align: middle; + fill: Gray;; +} + +div.tooltip { + position: absolute; + text-align: center; + padding: 10px; + font-size: 16px; + background: black; + color: white; + border: 0px; + border-radius: 8px; + pointer-events: none; +} + +/* + * Loading icon styles + */ +.loading-mask > img { + display: block; + margin: 0 auto; +} + +/* + * Data table + */ + +table.dataTable thead .sorting { + background-image: url("/assets/images/datatables/sort_both.png"); +} +table.dataTable thead .sorting_asc { + background-image: url("/assets/images/datatables/sort_asc.png"); +} +table.dataTable thead .sorting_desc { + background-image: url("/assets/images/datatables/sort_desc.png"); +} +table.dataTable thead .sorting_asc_disabled { + background-image: url("/assets/images/datatables/sort_asc_disabled.png"); +} +table.dataTable thead .sorting_desc_disabled { + background-image: url("/assets/images/datatables/sort_desc_disabled.png"); +} + +.add-ellipsis { + overflow: hidden; + text-overflow: ellipsis; +} + +.breadcrumb { + padding-bottom: 3px; + background-color: none; +} + +.navbar-default .navbar-nav > li > a { + color: #337ab7; +} + +/* + * Queue selector + */ +.node { + cursor: pointer; +} + +.node circle { + fill: $yarn-panel-bg; + stroke: steelblue; + stroke-width: 3px; +} + +.node text { + font: 12px sans-serif; +} + +.link { + fill: none; + stroke: #ccc; + stroke-width: 2px; +} + +.lr-margin { + margin: 0px 30px; +} + +.footer { + background-color: $yarn-panel-bg; + color: $yarn-primary-color; + + padding: 10px 0px; + margin: 0px; + + border-top: 1px lightgrey solid; + + font-size: .9em; +} + +.table { + margin-bottom: 0px; + border: none; + + overflow: hidden; +} + +.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 { + border: none !important; +} + +.dataTables_wrapper .table { + border: 1px solid lightgrey; + border-bottom: 1px solid lightgrey !important; + 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 { + border: 1px solid lightgrey; +} + +td { + padding: 8px 15px 8px 15px !important; +} + +.footer-frame { + height: 60px; +} +.footer { + height: 40px; +} + +.footer-pusher { + min-height: 100%; + height: auto !important; + height: 100%; + margin: 0 auto -40px; // Must be same as footer & footer-frame +} + +.panel { + 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; +} + +.panel-default .container-fluid { + margin-top: -45px !important; + margin-bottom: -10px !important; +} + +.panel-default > .panel-heading { + background-image: none; + background-color: $yarn-header-bg !important; + border-color: $yarn-border-color; + border-radius: 3px; +} + + +.panel-heading { + background-color: rgba(0, 0, 0, 0) !important; + font-weight: bold; +} + +.hadoop-brand-image { + margin-top: -10px; + width: auto; + height: 45px; +} + +li a.navigation-link.ember-view { + color: #2196f3; + font-weight: bold; +} + +.breadcrumb-bar .refresh { + position: absolute; + right: 20px; + top: 3px; +} + +.x-scroll { + overflow-x: scroll; +} + +.donut-chart { + padding: 0px !important; +} + +.donut-chart svg { + width: 100%; +} + +div.attempt-info-panel table { + table-layout: fixed; +} + +div.attempt-info-panel table > tbody > tr > td:last-of-type { + overflow: hidden; + text-overflow: ellipsis; +} + +#main { + float: left; + width: 750px; +} + +#sidebar { + float: right; + width: 100px; +} + +#sequence { + width: 600px; + height: 70px; +} + +#legend { + padding: 10px 0 0 3px; +} + +#sequence text, #legend text { + font-weight: 600; + fill: $yarn-panel-bg; +} + +#chart { + position: relative; +} + +#chart path { + stroke: $yarn-panel-bg; +} + +#explanation { + position: absolute; + top: 360px; + left: 385px; + width: 230px; + text-align: center; + color: #666; + z-index: -1; +} + +.simple-bar-chart .axis text { + font: 10px sans-serif; +} + +.simple-bar-chart .axis path, .simple-bar-chart .axis line { + fill: none; + stroke: #000; + stroke-width: 1px; +} + +.simple-bar-chart rect { + fill: steelblue; +} + +.simple-bar-chart rect:hover { + fill: brown; + cursor: pointer; +} + +.yarn-flow-runs .chart-panel, .yarn-flow-runinfo .chart-panel { + overflow: auto; +} + +.yarn-flow-runs .glyphicon-remove, .yarn-flow-runinfo .glyphicon-remove { + cursor: pointer; +} + +.yarn-flow-runs .glyphicon-remove:hover, .yarn-flow-runinfo .glyphicon-remove:hover { + color: #c9302c; +} + +.yarn-flow-runs .dropdown-menu .item-text, .yarn-flow-runinfo .dropdown-menu .item-text { + width: auto; + display: inline-block; +} + +.yarn-flow-runs .dropdown-menu .item-icon, .yarn-flow-runinfo .dropdown-menu .item-icon { + width: 14px; + display: inline-block; +} + +.yarn-cluster-status i, +.em-table-simple-status-cell i{ + display: inline-block; + border-radius: 100%; + border: 1px solid; +} + +.yarn-cluster-status i { + width: 12px; + height: 12px; + margin: 3px; + vertical-align: bottom; +} + +.em-table-simple-status-cell i { + width: 10px; + height: 10px; + margin: 3px 3px 3px 0; + vertical-align: text-bottom; +} + +.yarn-cluster-status i.started, +.em-table-simple-status-cell i.finished { + border-color: $yarn-success-border; + background-color: $yarn-success-bg; +} + +.yarn-cluster-status i.stopped, +.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: $yarn-info-border; + background-color: $yarn-info-bg; +} +.yarn-cluster-status i.notinited, +.em-table-simple-status-cell i.accepted { + border-color: $yarn-warn-border; + background-color: $yarn-warn-bg; +} +.yarn-cluster-info { + display: flex; + margin-left: auto +} + +.yarn-ui-footer { + display: flex; + padding: 10px 25px; +} + +.deploy-service textarea { + border-radius: 5px !important; + resize: none; + word-wrap: break-word; +} + +.deploy-service .loading-state { + opacity: 0.5; +} + +.deploy-service .loading-state img { + width: 80px; + height: 80px; + margin: 40px auto; + left: 50% !important; + position: absolute; + z-index: 9999; +} + +.align-center { + text-align: center !important; +} + +.bold-text { + font-weight: bold !important; +} + +.deploy-service .saved-list { + min-height: 600px; +} + +.deploy-service .glyphicon { + cursor: pointer; +} + +.deploy-service .remove-icon:hover { + color: #d9534f; +} + +.deploy-service .savedlist-column { + padding-top: 10px; +} + +.deploy-service .definition-column { + padding-top: 10px; + border-left: 1px solid #ddd; +} + +.deploy-service .content-area { + padding: 15px 0px; + border-top: 1px solid #ddd; +} + +.deploy-service .custom-json-area { + padding: 10px 0; + margin-top: -26px; +} + +.deploy-service-modal .modal-dialog { + width: 400px; +} + +.deploy-service-modal .form-group { + margin-bottom: 5px; +} + +.deploy-service .action-btns { + text-align: right; + padding-bottom: 15px; + padding-right: 0; +} + +table.table-custom-action > thead > tr > th:last-of-type, table.table-custom-action > tbody > tr > td:last-of-type { + width: 50px !important; +} + +.deploy-service .toggle-btn.active { + color: $yarn-panel-bg; + background-color: #337ab7; + border-color: #337ab7; + text-shadow: none; +} + +.deploy-service .service-resp { + word-wrap: break-word; +} + +table.table-custom-bordered { + border: 1px solid #ddd !important; + border-radius: 4px !important; +} + +table.table-custom-bordered > thead > tr > th, table.table-custom-bordered > tbody > tr > td { + border-bottom: 1px solid #ddd !important; + border-right: 1px solid #ddd !important; +} + +table.table-custom-striped > thead > tr, .table-custom-striped > tbody > tr:nth-of-type(even) { + background-color: #f9f9f9 !important; +} + +table.table-custom-header > thead > tr > th { + background-color: #f5f5f5 !important; +} + +table.table-radius-none { + border-radius: 0 !important; +} + +table.table-border-none { + border: none !important; +} + +.deploy-service label.required:after, .deploy-service-modal label.required:after { + content: '*'; + color: #d9534f; +} + +.deploy-service .form-group.shrink-height { + margin-bottom: -8px; +} + +table.fix-table-overflow { + table-layout: fixed; +} + +table.fix-table-overflow > tbody > tr > td:last-of-type { + overflow: hidden; + text-overflow: ellipsis; +} + +div.tooltip.info-tooltip { + font: 14px sans-serif !important; + background: lightsteelblue; + word-wrap: break-word; + position: absolute; + text-align: justify; + border-radius: 3px; + z-index: 9999; + padding: 10px; + display: none; + min-width: 200px; + max-width: 500px; + opacity: 1; + top: 10px; + left: 0; +} + +div.tooltip.info-tooltip > span.top-arrow { + color: lightsteelblue; + position: absolute; + top: -10px; + left: 10px; +} + +span.info-icon { + color: #337ab7 !important; +} + +div.service-action-mask { + position: absolute; + opacity: 0.5; + z-index: 9999; + width: 100%; + height: 100%; +} + +div.service-action-mask img { + position: absolute; + width: 80px; + height: 80px; + margin: 40px auto; + left: 45% !important; + z-index: 9999; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel { + width: 240px; + margin-right: 15px; + padding: 0 0 15px 0; + background: none; + border: none; + border-radius: 0; +} + +.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: $yarn-panel-bg; + border: 1px solid $yarn-border-color; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .field-name { + background-color: $yarn-header-bg; + border-bottom: 1px solid $yarn-border-color; + padding: 10px 15px; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .all-button { + right: 5px !important; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .field-name::before { + margin-right: 5px; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .value-list { + padding: 0 10px; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .filter-box { + padding: 5px; + margin: 5px 0; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .more-less { + padding: 5px 0; +} + +.yarn-applications-container .table-panel-left .em-table-facet-panel .field-list { + padding-top: 0px; +} + +.yarn-applications-container .em-table .table-column .table-header-cell { + padding: 7.5px 0 7.5px 7.5px; +} + +.yarn-applications-container .ember-view.table-cell { + padding: 10px 15px; + height: auto; +} + +.yarn-applications-container .resize-column { + position: absolute; + right: -14px; + display: inline-block; + padding: 10px 0; + top: -36px; + font-size: 42px; + line-height: 2em; +} + +.em-table .table-column .table-header-cell { + background-color: $yarn-header-bg; + border-bottom: 1px solid $yarn-border-color; +} http://git-wip-us.apache.org/repos/asf/hadoop/blob/09a13426/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/colors.scss ---------------------------------------------------------------------- diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/colors.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/colors.scss new file mode 100644 index 0000000..5d74b86 --- /dev/null +++ b/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; http://git-wip-us.apache.org/repos/asf/hadoop/blob/09a13426/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss ---------------------------------------------------------------------- diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss new file mode 100644 index 0000000..377ac00 --- /dev/null +++ b/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 http://git-wip-us.apache.org/repos/asf/hadoop/blob/09a13426/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/utils/color-utils.js ---------------------------------------------------------------------- diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/utils/color-utils.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/utils/color-utils.js index af0cdf4..f3acad0 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/utils/color-utils.js +++ b/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", - "good": "#2ca02c", - "error": "#d62728", - "others": "#7f7f7f", + "warn": "#ffbc0b", + "good": "#60cea5", + "error": "#cc6164", + "others": "#26bbf0", }, getColors: function(nColors, colorsTarget, reverse = false) { http://git-wip-us.apache.org/repos/asf/hadoop/blob/09a13426/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/package.json ---------------------------------------------------------------------- diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/package.json b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/package.json index 9b2c1e4..234d0f0 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/package.json +++ b/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", --------------------------------------------------------------------- To unsubscribe, e-mail: common-commits-unsubscr...@hadoop.apache.org For additional commands, e-mail: common-commits-h...@hadoop.apache.org
