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

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

@@ -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() {

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

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

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

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

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

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