mirror of
https://github.com/elastic/kibana.git
synced 2025-04-19 15:35:00 -04:00
[Vega] Add ability to open links in Vega in new window (#216200)
## Summary Fix #70745 Enables the option to open the clickable mark links of a Vega Visualization in a new tab. To achieve this functionality: - use the `usermeta.embedOptions.loader` property in the vega chart spec to pass the `"target": "_blank"` configuration: ```javascript "usermeta": { "embedOptions": { "loader": {"target": "_blank"} } } ``` Link opens in a new tab:  ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
This commit is contained in:
parent
530dd5ba20
commit
f8e688f881
2 changed files with 95 additions and 0 deletions
|
@ -233,6 +233,11 @@ export class VegaBaseView {
|
|||
|
||||
return result;
|
||||
};
|
||||
|
||||
const vegaSpec = this._parser.isVegaLite ? this._parser.vlspec : this._parser.spec;
|
||||
const usermetaLoaderOptions = vegaSpec.usermeta?.embedOptions?.loader;
|
||||
vegaLoader.options = usermetaLoaderOptions ?? {};
|
||||
|
||||
config.loader = vegaLoader;
|
||||
|
||||
const vegaLogger = logger(Warn);
|
||||
|
|
|
@ -27,6 +27,49 @@ signals: [ {
|
|||
}]
|
||||
}]}`;
|
||||
|
||||
const getLinkTestSpec = (url: string, usermeta?: string) => `
|
||||
{
|
||||
$schema: https://vega.github.io/schema/vega-lite/v5.json
|
||||
data: {
|
||||
url: {
|
||||
%context%: true
|
||||
%timefield%: @timestamp
|
||||
index: logstash-*
|
||||
body: {
|
||||
aggs: {
|
||||
country_buckets: {
|
||||
terms: {
|
||||
field: geo.dest
|
||||
size: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
size: 0
|
||||
}
|
||||
}
|
||||
format: {property: "aggregations.country_buckets.buckets"}
|
||||
}
|
||||
transform: [
|
||||
{
|
||||
"calculate": "'${url}'", "as": "url"
|
||||
}
|
||||
]
|
||||
mark: bar
|
||||
encoding: {
|
||||
x: {
|
||||
field: key
|
||||
type: nominal
|
||||
axis: {labelAngle: 0}
|
||||
}
|
||||
y: {
|
||||
field: doc_count
|
||||
type: quantitative
|
||||
}
|
||||
"href": {"field": "url", "type": "nominal"}
|
||||
}
|
||||
usermeta: ${usermeta}
|
||||
}`;
|
||||
|
||||
export default function ({ getPageObjects, getService }: FtrProviderContext) {
|
||||
const { timePicker, visualize, visChart, visEditor, vegaChart } = getPageObjects([
|
||||
'timePicker',
|
||||
|
@ -292,5 +335,52 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
|
|||
expect(await filterBar.getFilterCount()).to.be(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('clickable marks with links', () => {
|
||||
beforeEach(async () => {
|
||||
await timePicker.setDefaultAbsoluteRange();
|
||||
});
|
||||
|
||||
const fillSpecAndGo = async (newSpec: string) => {
|
||||
await vegaChart.fillSpec(newSpec);
|
||||
await visEditor.clickGo();
|
||||
|
||||
const viewContainer = await vegaChart.getViewContainer();
|
||||
const canvasElement = await viewContainer.findByTagName('canvas');
|
||||
const { width, height } = await canvasElement.getSize();
|
||||
|
||||
await canvasElement.moveMouseTo({
|
||||
xOffset: Math.round(width / 2),
|
||||
yOffset: Math.round(height / 2),
|
||||
});
|
||||
await canvasElement.click();
|
||||
};
|
||||
|
||||
const getKibanaBaseUrl = async () => {
|
||||
const currentUrl = await browser.getCurrentUrl();
|
||||
return currentUrl.substring(0, currentUrl.indexOf('#'));
|
||||
};
|
||||
|
||||
it('should open in a new tab when passing the appropriate usermeta to spec', async () => {
|
||||
const usermeta = JSON.stringify({ embedOptions: { loader: { target: '_blank' } } });
|
||||
const spec = getLinkTestSpec(await getKibanaBaseUrl(), usermeta);
|
||||
await fillSpecAndGo(spec);
|
||||
|
||||
const windowHandlers = await browser.getAllWindowHandles();
|
||||
expect(windowHandlers.length).to.equal(2);
|
||||
|
||||
await browser.switchTab(1);
|
||||
await browser.closeCurrentWindow();
|
||||
await browser.switchTab(0);
|
||||
});
|
||||
|
||||
it('should open in the same tab without passing the appropriate usermeta to spec', async () => {
|
||||
const spec = getLinkTestSpec(await getKibanaBaseUrl());
|
||||
await fillSpecAndGo(spec);
|
||||
|
||||
const windowHandlers = await browser.getAllWindowHandles();
|
||||
expect(windowHandlers.length).to.equal(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue