YARN-7480. Render tooltips on columns where text is clipped in new YARN UI. Contributed by Vasudevan Skm. This closes #293

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/em-table-tooltip-text.js

@@ -0,0 +1,33 @@
+/**
+ * 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 Ember from 'ember';
+
+export default Ember.Component.extend({
+  content: null,
+
+  classNames: ["em-table-text-with-tooltip"],
+
+  didRender: function() {
+    this.$().parent().css("position", "static");
+  },
+
+  tooltipText: Ember.computed("content", function () {
+    return this.get("content");
+  }),
+});

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

@@ -50,6 +50,7 @@ export default Ember.Controller.extend({
       }, {
           id: 'appName',
           headerTitle: 'Application Name',
+          cellComponentName: 'em-table-tooltip-text',
           contentPath: 'appName',
           facetType: null,
       }, {
@@ -66,6 +67,7 @@ export default Ember.Controller.extend({
       }, {
           id: 'queue',
           headerTitle: 'Queue',
+          cellComponentName: 'em-table-tooltip-text',
           contentPath: 'queue',
       }, {
           id: 'progress',
@@ -128,6 +130,7 @@ export default Ember.Controller.extend({
       headerTitle: 'Application ID',
       contentPath: 'id',
       facetType: null,
+      cellComponentName: 'em-table-tooltip-text',
       minWidth: "250px"
     }, {
       id: 'state',
@@ -160,6 +163,7 @@ export default Ember.Controller.extend({
         id: 'queue',
         headerTitle: 'Queue',
         contentPath: 'queue',
+        cellComponentName: 'em-table-tooltip-text',
     }, {
       id: 'stTime',
       headerTitle: 'Started Time',

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/em-table-tooltip-text.hbs

@@ -0,0 +1,26 @@
+{{!
+ * 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.
+}}
+
+
+{{#if content}}
+  <span title={{tooltipText}} class="yarn-tooltip">
+    {{content}}
+  </span>
+{{else}}
+  <span class="txt-message"> N/A </span>
+{{/if}}

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/tests/integration/components/em-table-tooltip-text-test.js

@@ -0,0 +1,43 @@
+/**
+ * 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 { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('em-table-tooltip-text', 'Integration | Component | em table tooltip text', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });" + EOL + EOL +
+
+  this.render(hbs`{{em-table-tooltip-text}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:" + EOL +
+  this.render(hbs`
+    {{#em-table-tooltip-text}}
+      template block text
+    {{/em-table-tooltip-text}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});