Dashboard links requires vega.enableExternalUrls: true

Elastic Stack Kibana
1

Hi,

after some analysis we learned to understand that this is not possible set vega.enableExternalUrls: true in the Kibana hosted by Elastic Cloud.

as we are currently using HREF in vega visualisation for Kibana to navigate from one dashboard to another. this is important for us, href is using also reflecting the user selected object from the vega visualisation.

my question is there any possibility to make the HREF working, vega.enableExternalUrls: false and give reference to the other dashboards, in same or other space.

Thanks,
David

2

@joshdover - I seen another topic on similar subject, you kindly offered help.

May I ask your help here? is there maybe additional information I could provide?

3

Hi & Welcome to our little big community! :wave:

Could you share your Vega Config, or parts of it?
So you using the URL for internal navigation between dashboards?

Thx & Best,
Matthias

4

Hi,

tried to remove any modification and just to put the link as provided from "share dashboard" link in kibana. unfortunately could not make it work.

here is the transformation, that is creating the LINK.

'https://e0b254acd7704180af686c2c74047a2f.us-east-1.aws.found.io:9243/s/tf---overview/app/kibana#/dashboard/a0244b80-11a5-11e9-ae98-0145f64ec559?_g=(refreshInterval:(pause:!t,value:0),time:(from:now-7d,mode:quick,to:now))&_a=(description:%27ability+to+visualise+each+state+and+KPI+over+TIME+and+Location+%27,filters:!((%27$state%27:(store:appState),meta:(alias:!n,controlledBy:%271546773540252%27,disabled:!f,field:OPplmn,index:fbcdf0f0-11a3-11e9-ae98-0145f64ec559,key:OPplmn,negate:!f,params:(value:'+ datum.OperatorNAME + '),type:phrase,value:'+ datum.OperatorNAME + '),script:(script:(lang:painless,params:(value:'+ datum.OperatorNAME + '),source:%27boolean+compare(Supplier+s,+def+v)+%7Breturn+s.get()+%3D%3D+v;%7Dcompare(()+-%3E+%7B+def+mcc%3Ddoc%5B!%27key.mccPLMN.keyword!%27%5D.value;+def+mnc%3Ddoc%5B!%27key.mncPLMN.keyword!%27%5D.value;+if+(mnc%3D%3D%220%22+%7C%7C+mcc%3D%3D%220%22)+%7Breturn+%22ServiceRisk%22%7D+else+if+(mcc%3D%3D%22311%22+%26%26+mnc%3D%3D%22480%22)+%7Breturn+%22Verizon%22%7D+else+if+(mcc%3D%3D%22310%22+%26%26+mnc%3D%3D%22410%22)+%7Breturn+%22AT%26T%22%7D+else+if+(mcc%3D%3D%22310%22+%26%26+mnc%3D%3D%22260%22)+%7Breturn+%22T-Mobile%22%7D+else+if+(mcc%3D%3D%22310%22+%26%26+mnc%3D%3D%22120%22)+%7Breturn+%22Sprint%22%7D+else+if+(mcc%3D%3D%22123%22+%26%26+mnc%3D%3D%22456%22)+%7Breturn+%22other%22%7D+return+%22other%22+%7D,+params.value);%27))),(%27$state%27:(store:appState),meta:(alias:!n,controlledBy:%271546773561994%27,disabled:!f,index:fbcdf0f0-11a3-11e9-ae98-0145f64ec559,key:state.keyword,negate:!f,params:(query:%27'+ datum.OperatorState + '%27,type:phrase),type:phrase,value:%27'+ datum.OperatorState + '%27),query:(match:(state.keyword:(query:%27'+ datum.OperatorState + '%27,type:phrase))))),fullScreenMode:!f,options:(darkTheme:!f,hidePanelTitles:!t,useMargins:!f),panels:!((embeddableConfig:(),gridData:(h:14,i:%271%27,w:18,x:0,y:0),id:%2740164c70-11a5-11e9-ae98-0145f64ec559%27,panelIndex:%271%27,type:visualization,version:%276.5.1%27),(embeddableConfig:(),gridData:(h:15,i:%272%27,w:18,x:0,y:14),id:adb32870-11a0-11e9-ae98-0145f64ec559,panelIndex:%272%27,type:visualization,version:%276.5.1%27),(embeddableConfig:(mapCenter:!(42.7605854349501,-75.8178616175428),mapZoom:6),gridData:(h:29,i:%273%27,w:30,x:18,y:0),id:e4847f50-11a7-11e9-ae98-0145f64ec559,panelIndex:%273%27,type:visualization,version:%276.5.1%27),(embeddableConfig:(mapCenter:!(42.7605854349501,-75.8178616175428),mapZoom:6),gridData:(h:29,i:%274%27,w:30,x:18,y:29),id:f491be30-11ac-11e9-ae98-0145f64ec559,panelIndex:%274%27,type:visualization,version:%276.5.1%27),(embeddableConfig:(),gridData:(h:10,i:%275%27,w:18,x:0,y:29),id:d69e00f0-11b6-11e9-ae98-0145f64ec559,panelIndex:%275%27,type:visualization,version:%276.5.1%27),(embeddableConfig:(),gridData:(h:19,i:%276%27,w:18,x:0,y:39),id:%2760542520-11b9-11e9-ae98-0145f64ec559%27,panelIndex:%276%27,type:visualization,version:%276.5.1%27),(embeddableConfig:(),gridData:(h:19,i:%277%27,w:18,x:0,y:69),id:ac443e10-11bf-11e9-ae98-0145f64ec559,panelIndex:%277%27,type:visualization,version:%276.5.1%27),(embeddableConfig:(mapCenter:!(42.7605854349501,-75.8178616175428),mapZoom:6),gridData:(h:30,i:%278%27,w:30,x:18,y:58),id:%2784cbdf50-11bf-11e9-ae98-0145f64ec559%27,panelIndex:%278%27,type:visualization,version:%276.5.1%27),(embeddableConfig:(),gridData:(h:11,i:%279%27,w:18,x:0,y:58),id:%2725f1afe0-11c0-11e9-ae98-0145f64ec559%27,panelIndex:%279%27,type:visualization,version:%276.5.1%27),(embeddableConfig:(),gridData:(h:20,i:%2710%27,w:18,x:0,y:88),id:%2715382a70-11c6-11e9-ae98-0145f64ec559%27,panelIndex:%2710%27,type:visualization,version:%276.5.1%27),(embeddableConfig:(mapCenter:!(42.76051428451744,-75.81802368164064),mapZoom:7),gridData:(h:31,i:%2711%27,w:30,x:18,y:88),id:%2736c32920-11c5-11e9-ae98-0145f64ec559%27,panelIndex:%2711%27,type:visualization,version:%276.5.1%27),(embeddableConfig:(),gridData:(h:11,i:%2712%27,w:18,x:0,y:108),id:%2741ae00f0-65fb-11e9-83cd-eb261fec9269%27,panelIndex:%2712%27,type:visualization,version:%276.7.1%27)),query:(language:lucene,query:%27%27),timeRestore:!t,title:Deepdive,viewMode:view)'

the next step is that MARK visual using this generated field:
"marks": [
{
"type": "shape",
"name": "USstateOVERVIEW",
"from": {"data": "StateVISgroup"},
"encode": {
"enter": {"opacity": {"value": 0.5}},
"update": {
"fill": {"scale": "color", "field": {"signal": "KPIs"}},
"tooltip": [{"field": {"signal": "KPIs"}}],
"stroke": {"value": "white"},
"strokeWidth": {"value": 2},
"href": {"field": "dash_LINK"}
},
"hover": {"fill": {"value": "black"}}
},
"transform": [{"type": "geoshape", "projection": "projection"}]
}
]

the idea was that user is able to click on the state and be redirected to the new dashboard with more relevant details.

any ideas to try how we could modify the HREF?

thanks,
David

5

I can see an example here

https://vega.github.io/vega-lite/examples/point_href.html"transform":
[{
"calculate": "'https://www.google.com/search?q=' + datum.Name", "as": "url"
}],

And I wonder if it would work if you'd provided a relative URL instead of an absolute one

6

Yes, this will work to my understanding only if the vega.enableExternalURL: true.
something that is not allowed with running Kibana on Elastic Cloud.

Now this is OK for us not to push the URL to external site. like the example with Google.com
But is there than a change somehow to link the URL to internal dashboard, make it understand this is "internal" link so we don't need to change vega.enableExternalURL.

thanks,
David

7

I'd try using a relative link , so without domain, if the dashboard is in the same kibana, or am I missing something about your use case, the dashboard url is stored in a ES record, or am I assuming wrong? thx!

8

Hi,

this was also my idea. But I am not sure how to put the link without the domain.

I have tried the following, but no success so far. Do you know what I am doing wrong?
same url works fine in markdown visualisation.

  "marks": [
    {
      "type": "shape",
      "name": "USstateOVERVIEW",
      "from": {"data": "StateVISgroup"},
      "encode": {
        "enter": {"opacity": {"value": 0.5}},
        "update": {
          "fill": {"scale": "color", "field": {"signal": "KPIs"}},
          "tooltip": [{"field": {"signal": "KPIs"}}],
          "stroke": {"value": "white"},
          "strokeWidth": {"value": 2},
          "href": {"value": "'/s/tf---overview/app/kibana#/dashboard/c5c16940-fedb-11e8-8590-a90f3cbae37e'"}
        },
        "hover": {"fill": {"value": "black"}}
      },
      "transform": [{"type": "geoshape", "projection": "projection"}]
    }
  ]

I am always getting the error:
Uncaught Error: External URLs are not enabled. Add vega.enableExternalUrls: true to kibana.yml
at Object.loader.sanitize (commons.bundle.js:3)
at CanvasHandler.prototype$G.handleHref (vendors.bundle.dll.js:486)
at CanvasHandler.prototype$I.fire (vendors.bundle.dll.js:486)
at CanvasHandler.prototype$I.click (vendors.bundle.dll.js:486)
at HTMLCanvasElement. (vendors.bundle.dll.js:486)

thanks,
David

2 Likes
9

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.