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

This commit is contained in:
Sunil G 2017-11-28 22:41:52 +05:30
parent 641ba5c7a1
commit 6b76695f88
4 changed files with 106 additions and 0 deletions

View File

@ -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");
}),
});

View File

@ -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',

View File

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

View File

@ -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');
});