mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
[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:
parent
9062410991
commit
cbe69ab156
7 changed files with 81 additions and 12 deletions
|
@ -99,6 +99,7 @@
|
|||
aria-label="Filter"
|
||||
ng-model="fieldFilter"
|
||||
placeholder="Filter"
|
||||
data-test-subj="indexPatternFieldFilter"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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)) {
|
||||
|
|
|
@ -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)
|
||||
};
|
||||
|
|
|
@ -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' ]);
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -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 + '"]')
|
||||
|
|
|
@ -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()));
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue