big-data/hadoop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

YARN-7536. em-table improvement for better filtering in new YARN UI. Contributed by Vasudevan Skm. This closes #313.

Browse Source
This commit is contained in:
Sunil G 2017-12-13 16:46:12 +05:30
parent fa4ecd8b98
commit 880cd754a5
4 changed files with 122 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-nodes/table.js
View File

@ -31,6 +31,7 @@ export default Ember.Controller.extend({
rowCount: Ember.computed.alias('tableDefinition.rowCount'),
tableDefinition: TableDefinition.create({
enableFaceting: true,
minValuesToDisplay: 1,
rowCount: 25
}),
columns: function() {

1
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-services.js
View File

@ -26,6 +26,7 @@ export default AppTableController.extend({
sortColumnId: 'stTime',
sortOrder: 'desc',
rowCount: 25,
minValuesToDisplay: 1,
enableFaceting: true
}),
searchText: Ember.computed.alias('tableDefinition.searchText'),

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

@ -2,6 +2,7 @@
@import 'layout.scss';
@import 'yarn-app.scss';
@import './compose-box.scss';
@import 'em-table.scss';
/**
* Licensed to the Apache Software Foundation (ASF) under one
@ -657,81 +658,6 @@ div.service-action-mask img {
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;
}
.yarn-app-body > div:not(:first-child) {
margin-top: 15px;
}
.em-table .table-column .table-header-cell {
background-color: $yarn-header-bg;
border-bottom: 1px solid $yarn-border-color;
}
.muted-text {
color: $yarn-muted-text;
}
@ -756,10 +682,6 @@ div.service-action-mask img {
overflow: scroll;
}
.flex {
display: flex;
}
.yarn-label {
border-radius: 3px;
margin-bottom: 5px;

119
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/em-table.scss Normal file
View File

@ -0,0 +1,119 @@
/**
* 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.
*/
// All emtable style overrides go here
.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;
.field-list {
padding-top: 0px;
& > li .em-table-facet-panel-values {
margin-top: 0px;
margin-bottom: -4px;
background: $yarn-panel-bg;
border: 1px solid $yarn-border-color;
.field-name {
cursor: default;
&::before {
display: none;
}
.all-button {
display: block;
cursor: pointer;
}
}
&.hide-values {
.value-list,
.more-less,
.field-name .all-button {
display: block;
}
&.hide-select-all {
.field-name .all-button {
display: none;
}
}
}
}
}
.field-name {
background-color: $yarn-header-bg;
border-bottom: 1px solid $yarn-border-color;
padding: 10px 15px;
}
.all-button {
right: 5px !important;
}
.field-name::before {
margin-right: 5px;
}
.value-list {
padding: 0 10px;
}
.filter-box {
padding: 5px;
margin: 5px 0;
}
.more-less {
padding: 5px 0;
}
}
}
.ember-view.table-cell {
padding: 10px 15px;
height: auto;
}
.resize-column {
position: absolute;
right: -14px;
display: inline-block;
padding: 10px 0;
top: -36px;
font-size: 42px;
line-height: 2em;
}
.em-progress-container {
padding-bottom: 1px;
}
}
.em-table {
.table-column {
.table-header-cell {
padding: 7.5px 0 7.5px 7.5px;
background-color: $yarn-header-bg;
border-bottom: 1px solid $yarn-border-color;
}
}
}