[6.0] apply field formatter to tag cloud (#14304)

* apply field formatter to tag cloud (#14230)

* apply field formatter to tag cloud

* use unformatted value for filter creation

* add removeFilter for functional tests
This commit is contained in:
Nathan Reese 2017-10-04 14:31:44 -06:00 committed by GitHub
parent 9062410991
commit cbe69ab156
7 changed files with 81 additions and 12 deletions

View file

@ -99,6 +99,7 @@
aria-label="Filter"
ng-model="fieldFilter"
placeholder="Filter"
data-test-subj="indexPatternFieldFilter"
>
</div>
</div>

View file

@ -200,7 +200,8 @@ class TagCloud extends EventEmitter {
enteringTags.style('fill', getFill);
enteringTags.attr('text-anchor', () => 'middle');
enteringTags.attr('transform', affineTransform);
enteringTags.text(getText);
enteringTags.attr('data-test-subj', getDisplayText);
enteringTags.text(getDisplayText);
const self = this;
enteringTags.on({
@ -358,7 +359,11 @@ function seed() {
}
function toWordTag(word) {
return { value: word.value, text: word.text };
return {
displayText: word.displayText ? word.displayText : word.text,
text: word.text,
value: word.value
};
}
@ -366,6 +371,10 @@ function getText(word) {
return word.text;
}
function getDisplayText(word) {
return word.displayText;
}
function positionWord(xTranslate, yTranslate, word) {
if (isNaN(word.x) || isNaN(word.y) || isNaN(word.rotate)) {

View file

@ -19,6 +19,7 @@ module.controller('KbnTagCloudController', function ($scope, $element, Private,
const aggs = $scope.vis.getAggConfig().getResponseAggs();
const aggConfigResult = new AggConfigResult(aggs[0], false, event, event);
clickHandler({ point: { aggConfigResult: aggConfigResult } });
$scope.$apply();
});
tagCloud.on('renderComplete', () => {
@ -47,14 +48,15 @@ module.controller('KbnTagCloudController', function ($scope, $element, Private,
$scope.renderComplete();
});
$scope.$watch('esResponse', async function (response) {
$scope.$watch('esResponse', function (response) {
if (!response) {
tagCloud.setData([]);
return;
}
const tagsAggId = _.first(_.pluck($scope.vis.getAggConfig().bySchemaName.segment, 'id'));
const bucketsAgg = _.first($scope.vis.getAggConfig().bySchemaName.segment);
const tagsAggId = _.get(bucketsAgg, 'id');
if (!tagsAggId || !response.aggregations) {
tagCloud.setData([]);
return;
@ -65,6 +67,7 @@ module.controller('KbnTagCloudController', function ($scope, $element, Private,
const tags = buckets.map((bucket) => {
return {
displayText: bucketsAgg.fieldFormatter()(bucket.key),
text: bucket.key,
value: getValue(metricsAgg, bucket)
};

View file

@ -1,13 +1,15 @@
import expect from 'expect.js';
export default function ({ getService, getPageObjects }) {
const filterBar = getService('filterBar');
const log = getService('log');
const retry = getService('retry');
const PageObjects = getPageObjects(['common', 'visualize', 'header', 'settings']);
describe('visualize app', function describeIndexTests() {
describe('visualize app', function () {
const fromTime = '2015-09-19 06:31:44.000';
const toTime = '2015-09-23 18:31:44.000';
const termsField = 'machine.ram';
before(function () {
@ -35,7 +37,7 @@ export default function ({ getService, getPageObjects }) {
.then(function () {
log.debug('Click field machine.ram');
return retry.try(function tryingForTime() {
return PageObjects.visualize.selectField('machine.ram');
return PageObjects.visualize.selectField(termsField);
});
})
.then(function () {
@ -49,17 +51,15 @@ export default function ({ getService, getPageObjects }) {
});
});
describe('tile cloud chart', function indexPatternCreation() {
describe('tag cloud chart', function () {
const vizName1 = 'Visualization tagCloud';
it('should show correct tag cloud data', async function () {
const data = await PageObjects.visualize.getTextTag();
log.debug(data);
expect(data).to.eql([ '32212254720', '21474836480','20401094656','19327352832','18253611008' ]);
expect(data).to.eql([ '32,212,254,720', '21,474,836,480', '20,401,094,656', '19,327,352,832', '18,253,611,008' ]);
});
it('should save and load', function () {
return PageObjects.visualize.saveVisualization(vizName1)
.then(function (message) {
@ -110,6 +110,46 @@ export default function ({ getService, getPageObjects }) {
expect(data.trim().split('\n')).to.eql(expectedTableData);
});
});
describe('formatted field', function () {
before(async function () {
await PageObjects.settings.navigateTo();
await PageObjects.settings.clickKibanaIndices();
await PageObjects.settings.filterField(termsField);
await PageObjects.settings.openControlsByName(termsField);
await PageObjects.settings.setFieldFormat('Bytes');
await PageObjects.settings.controlChangeSave();
await PageObjects.common.navigateToUrl('visualize', 'new');
await PageObjects.visualize.loadSavedVisualization(vizName1);
await PageObjects.header.waitUntilLoadingHasFinished();
await PageObjects.header.setAbsoluteRange(fromTime, toTime);
await PageObjects.visualize.waitForVisualization();
});
after(async function () {
await filterBar.removeFilter(termsField);
await PageObjects.settings.navigateTo();
await PageObjects.settings.clickKibanaIndices();
await PageObjects.settings.filterField(termsField);
await PageObjects.settings.openControlsByName(termsField);
await PageObjects.settings.setFieldFormat('- default - ');
await PageObjects.settings.controlChangeSave();
});
it('should format tags with field formatter', async function () {
const data = await PageObjects.visualize.getTextTag();
log.debug(data);
expect(data).to.eql([ '30GB', '20GB', '19GB', '18GB', '17GB' ]);
});
it('should apply filter with unformatted value', async function () {
await PageObjects.visualize.selectTagCloudTag('30GB');
await PageObjects.common.sleep(500);
const data = await PageObjects.visualize.getTextTag();
expect(data).to.eql([ '30GB' ]);
});
});
});
});

View file

@ -253,6 +253,12 @@ export function SettingsPageProvider({ getService, getPageObjects }) {
await PageObjects.header.waitUntilLoadingHasFinished();
}
async filterField(name) {
const input = await testSubjects.find('indexPatternFieldFilter');
await input.clearValue();
await input.type(name);
}
async openControlsByName(name) {
await remote.setFindTimeout(defaultFindTimeout)
.findByCssSelector('[data-test-subj="indexPatternFieldEditButton"][href$="/' + name + '"]')
@ -372,7 +378,7 @@ export function SettingsPageProvider({ getService, getPageObjects }) {
if (language) await this.setScriptedFieldLanguage(language);
if (type) await this.setScriptedFieldType(type);
if (format) {
await this.setScriptedFieldFormat(format.format);
await this.setFieldFormat(format.format);
// null means leave - default - which has no other settings
// Url adds Type, Url Template, and Label Template
// Date adds moment.js format pattern (Default: "MMMM Do YYYY, HH:mm:ss.SSS")
@ -427,7 +433,7 @@ export function SettingsPageProvider({ getService, getPageObjects }) {
.click();
}
async setScriptedFieldFormat(format) {
async setFieldFormat(format) {
log.debug('set scripted field format = ' + format);
await remote.setFindTimeout(defaultFindTimeout)
.findByCssSelector('select[data-test-subj="editorSelectedFormatId"] > option[label="' + format + '"]')

View file

@ -60,6 +60,10 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
await find.clickByPartialLinkText('Visual Builder');
}
async selectTagCloudTag(tagDisplayText) {
await testSubjects.click(tagDisplayText);
}
async getTextTag() {
const elements = await find.allByCssSelector('text');
return await Promise.all(elements.map(async element => await element.getVisibleText()));

View file

@ -11,6 +11,12 @@ export function FilterBarProvider({ getService }) {
);
}
async removeFilter(key) {
const filterElement = await testSubjects.find(`filter & filter-key-${key}`);
await remote.moveMouseTo(filterElement);
await testSubjects.click(`filter & filter-key-${key} removeFilter-${key}`);
}
async toggleFilterEnabled(key) {
const filterElement = await testSubjects.find(`filter & filter-key-${key}`);
await remote.moveMouseTo(filterElement);