How to decode the encoded text in front end from Grafana 8 backend?

Grafana
,
#1

We are migrating a plugin from grafana 7 to 8
The front end still uses Angular.

Now
After the change in

The front end is receiving an encoded text.

{"results":{"A":{"refId":"A","series":null,"tables":null,"dataframes":["QVJST1cxAAD/////WAEAABAAAAAAAAoADgAMAAsABAAKAAAAFAAAAAAAAAEDAAoADAAAAAgABAAKAAAACAAAAFAAAAACAAAAKAAAAAQAAAAs////CAAAAAwAAAABAAAAQQAAAAUAAAByZWZJZAAAAEz///8IAAAADAAAAAEAAABBAAAABAAAAG5hbWUAAAAAAgAAAHAAAAAEAAAAqv///xQAAAA8AAAAPAAAAAAAAAU4AAAAAQAAAAQAAACY////CAAAABAAAAAEAAAAdGV4dAAAAAAEAAAAbmFtZQAAAAAAAAAAkP///wQAAAB0ZXh0AAASABgAFAAAABMADAAAAAgABAASAAAAFAAAAEQAAABIAAAAAAAABUQAAAABAAAADAAAAAgADAAIAAQACAAAAAgAAAAQAAAABAAAAHRleHQAAAAABAAAAG5hbWUAAAAAAAAAAAQABAAEAAAABAAAAHRleHQAAAAA/////9gAAAAUAAAAAAAAAAwAFgAUABMADAAEAAwAAAAADgAAAAAAABQAAAAAAAADAwAKABgADAAIAAQACgAAABQAAAB4AAAAIwAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJAAAAAAAAAAkAAAAAAAAACIAQAAAAAAABgCAAAAAAAAAAAAAAAAAAAYAgAAAAAAAJAAAAAAAAAAqAIAAAAAAABYCwAAAAAAAAAAAAACAAAAIwAAAAAAAAAAAAAAAAAAACMAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAoAAAAQAAAAJAAAADEAAABGAAAATwAAAFEAAABtAAAAhgAAAIoAAACOAAAAkQAAAJkAAACtAAAAsgAAALkAAADNAAAA2QAAAOkAAADsAAAA9gAAAA4BAAASAQAAIQEAACwBAAAzAQAARAEAAEsBAABWAQAAXgEAAGcBAABsAQAAcQEAAIIBAAByd3NwaW50ZXN0dWl0ZXN0dWl0ZXN0XzJfRE9OT1RSRU1PVkVhbm90aGVyRGVsZXRlbm9uLWFkbWluLWNvbXBhcnRtZW50bWF0dC10ZXN0dmthbG9uZ2NvbXBhcnRtZW50bmFtZWZvcnRlc3RzTWFuYWdlZENvbXBhcnRtZW50Rm9yUGFhU2RkZGRkaW1hZGl4YXlhcm1vbGVjaGVja0xvZ0RlZmF1bHRHcm91cEVtcHR5ZW1wdHlWS2thdGhzdGV3LU9iamVjdFN0b3JlbG9nZ2luZy10ZXN0cm9vdCBjb21wYXJ0bWVudEUyRXBvbGljeXRlc3RzdW1hbnRzLXRlc3QtY29tcGFydG1lbnR0ZXN0dGVzdHN0cmVhbXBvb2xzYUN1c3RvbUxvZ3NHcmFmYW5hSm9uYXRoYW4tbG9nLXRlc3RuZXdsb2dzc3JpLXRlc3Rpbmd0b2RlbGV0ZWRldmVsb3BlcmVtcHR5YXRodWxXaW5kb3dzLUluc3RhbmNlcwAAAAAAAAAAAABTAAAApgAAAPkAAABMAQAAnwEAAPIBAABFAgAAmAIAAOsCAAA+AwAAkQMAAOQDAAA3BAAAigQAAN0EAAAwBQAAgwUAANYFAAApBgAAeAYAAMsGAAAeBwAAcQcAAMQHAAAXCAAAaggAAL0IAAAQCQAAYwkAALYJAAAJCgAAXAoAAK8KAAACCwAAVQsAAG9jaWQxLmNvbXBhcnRtZW50Lm9jMS4uYWFhYWFhYWFvbGpwYWdoaWR6MnNpY3Nzeml5cWJ4dnhpNzc1c2toYzV1NmtrdjN1cjdkM203MzJzc3Vxb2NpZDEuY29tcGFydG1lbnQub2MxLi5hYWFhYWFhYWpibnpsNnRtaXhldGV0MnFreGkzZWw3Y21sNzJtMmd2eHhuZmhvaTZjdnRjdHBmbzZicmFvY2lkMS5jb21wYXJ0bWVudC5vYzEuLmFhYWFhYWFhZWppbHl3b3E0dWU0emJiamh6azZlaWZhd29lNWJuNnVxZmdkM29vdWRnbGhtc3VtN3Y2cW9jaWQxLmNvbXBhcnRtZW50Lm9jMS4uYWFhYWFhYWFsenhueW5lY2xhZGFrZ3ZwaGhtZWhkMjJkdmxxaGxsN2hxeW1yb3F6cXNpNm1xdW5ucnZxb2NpZDEuY29tcGFydG1lbnQub2MxLi5hYWFhYWFhYXRuNTNma3N6cXZwbHA0YXpodGR3eXM2ZmduZ2RmY2dyN3U2NmxxZm94azdxYnZiYXI3dWFvY2lkMS5jb21wYXJ0bWVudC5vYzEuLmFhYWFhYWFhanBvNmp4MnF1b3VxdXhwbWZjdHd6M3lhdGZ1bWxmeWdpcHhhaGFvazYydzZ4eWJvd3F0cW9jaWQxLmNvbXBhcnRtZW50Lm9jMS4uYWFhYWFhYWFrd3BwcG5peWhmc2tvY2pqenF6Z2w3eXcyeGx2eHlzdGY1b21zbXc0c3dwbXN1Z3M0YjNxb2NpZDEuY29tcGFydG1lbnQub2MxLi5hYWFhYWFhYWh3ang2NjRic3F3cjRkMnVtem15aXM0eW5sN3ZxaGdsZ2tpaHR6aXltbHo1eDZta3FuY3FvY2lkMS5jb21wYXJ0bWVudC5vYzEuLmFhYWFhYWFhbXRhM3phM2Y0dnhyd3hoa2NudzJ3aGF1cXJlb2hmN3M2ZXhwdGNianA3bHZ1c3dvMmRycW9jaWQxLmNvbXBhcnRtZW50Lm9jMS4uYWFhYWFhYWF2b2FudjVsd2JtMnRuejVpcGI1ZXk0eWpzdDJ5anF1eTVrdzZ3b3YyZjJ3aGFjMmpyY3Jhb2NpZDEuY29tcGFydG1lbnQub2MxLi5hYWFhYWFhYW52dG8yN2dpZDdub2Jvc2x1YmdleTd0cHRmY3phc21pcXg3bWh0eWJ6aXZpdmxqMmlqZmFvY2lkMS5jb21wYXJ0bWVudC5vYzEuLmFhYWFhYWFhbzduZWpyYXlzaGdlcnQyZG5jb3VzNTIzcDViZnMzaTNjYTN0cG5zejJvZ3pxeWNyMjM1YW9jaWQxLmNvbXBhcnRtZW50Lm9jMS4uYWFhYWFhYWFyZDVkcml6eGRuenM1ejdtdHJiY3l4Y29kbXh6dGNqdnJpZXhlem5yY3NweTd1eWVlb3Bxb2NpZDEuY29tcGFydG1lbnQub2MxLi5hYWFhYWFhYXp2ZmMza29pZnVneDVzNTdxNzd0dXpqbG92YW94bG9tYTQ1cGdwdWE3a3pvbmgycWRnNmFvY2lkMS5jb21wYXJ0bWVudC5vYzEuLmFhYWFhYWFhbDRjcnVwZmptaGJnMnQzcGltbnZtMmhkbHh3b2V4dDNvbXB1YWdmc2U2cmR6dW00b2hkYW9jaWQxLmNvbXBhcnRtZW50Lm9jMS4uYWFhYWFhYWF4YmtuaGZ3YXlkbWY1bWFmd3c3ZWh5ajV0Z3F3dWFjdTRjNHoycHhqbDdibGx0ZDNrZnRhb2NpZDEuY29tcGFydG1lbnQub2MxLi5hYWFhYWFhYTdlNDdtNjJzZnRveTRxYmFnb3Z4cGQ1cWRsa25oZjI3ZHMzZ3djNjRnc2JxcXBsNmhteHFvY2lkMS5jb21wYXJ0bWVudC5vYzEuLmFhYWFhYWFhN3RjNG1zbWdiYXB4eHR4a3hyYmxkcGNucGplZW00N3Bwd2x0eHM2aXhsc3BvM2hkZnc3cW9jaWQxLmNvbXBhcnRtZW50Lm9jMS4uYWFhYWFhYWE2amphYndlbzRmeHhuMjUzY25idmJ0cmhtZ25kZzdqNGQ0eHlydWx0bWZjZTRqaGt3ajJhb2NpZDEudGVuYW5jeS5vYzEuLmFhYWFhYWFhejJzb3Rpb3NiMnh3bm94dWFpcHh6aXNlNm0yM2txcWxtYTdyc2JwZDZ5aWJubHRxZWQyYW9jaWQxLmNvbXBhcnRtZW50Lm9jMS4uYWFhYWFhYWFoaDNueXF2ejdzZmFhaHo0cHlkYXd6NXNlbmlkdG96aHd6YXk2aWVsYzdqajdjcWFxNWpxb2NpZDEuY29tcGFydG1lbnQub2MxLi5hYWFhYWFhYWhzNXRiYWVsdzM1cnZoMmZsYmFoc243dTJoa3ZyZnh4Y29weGFpZmIyYW56MmZya2gyZGFvY2lkMS5jb21wYXJ0bWVudC5vYzEuLmFhYWFhYWFhaWJoM25td2QzaW13M2t0NnJkaXYzemVwYjZnZHJiaGtnams3NW5wbXhhczNqb3djbzNjcW9jaWQxLmNvbXBhcnRtZW50Lm9jMS4uYWFhYWFhYWFkdnN5cGN5cXp4Mmdkb3lveWNiaTV2eDI1anA0aDJyM3RyaG9zNWFpcnc1ZWp6c2JsMm5xb2NpZDEuY29tcGFydG1lbnQub2MxLi5hYWFhYWFhYXZ4dDd1ZGpvczQ0NGYzcmI2NTJvdzNiN3hlZXJiYWVxcmt4NzdkbndneG5oZW94dmlrN3FvY2lkMS5jb21wYXJ0bWVudC5vYzEuLmFhYWFhYWFhcjJnNHBsdHA0ZjZ5bGs0cGF6emNjbHR4a29qYW9uM2t5c25wdjdpYWU3cXZqZDI0YWdvcW9jaWQxLmNvbXBhcnRtZW50Lm9jMS4uYWFhYWFhYWFuc3d2dDZxbDJkM282aHJ0c3JkamdpY21yYnd1YXpmbWpmdDdlazU1bnNnanF4Ym95NDdhb2NpZDEuY29tcGFydG1lbnQub2MxLi5hYWFhYWFhYTUzMjVlZWozaGt5aGNqbHZ1aTdmbHp2Zng1b3M0dnRjbTY3dWZqYmN1c2dlNjY0bWt4dGFvY2lkMS5jb21wYXJ0bWVudC5vYzEuLmFhYWFhYWFhZmptN3NqcnQyaDUyc3ZsdGw0ejJ5aTU2dDV1cmFsNTJkcWluYnV3NjZnY3d6d2JnM3FkcW9jaWQxLmNvbXBhcnRtZW50Lm9jMS4uYWFhYWFhYWFxZm1kZ3FxYml2em5idGVsYzVkZmducXp5eXJ0NHE2bGZjZjQzN3llamZlbnh2MzRkeXNxb2NpZDEuY29tcGFydG1lbnQub2MxLi5hYWFhYWFhYWthaTRxdTR3NmRveHdsZGp5aHA2bHZqZXFxdGt1eWxxdWhwdWZ4czYyaW02bGVrZjZmMnFvY2lkMS5jb21wYXJ0bWVudC5vYzEuLmFhYWFhYWFhdnVicTU0bGYzM2ltN2lnZ2wzNDY0dnBpZW10NHpxbmRydTNlbmsyZm9obmc3eHplbW9qcW9jaWQxLmNvbXBhcnRtZW50Lm9jMS4uYWFhYWFhYWF1d3RveHpidDJtbzZjZnBuaGxjdzR2bXFvdnVsZHp4eGVjaG9vcW15cWE0YzZtc29uNDZhb2NpZDEuY29tcGFydG1lbnQub2MxLi5hYWFhYWFhYW8yejUzajRmd2M3ZmlyZXQzZ2xxbnVienZjdTJld2VvaHllbnFlZHVtY2JkbHNqZ2E1M3FvY2lkMS5jb21wYXJ0bWVudC5vYzEuLmFhYWFhYWFhYTZsMzYyZDRpb2JyN2J1cW01cWdxM3AyZGMzNnhlZWtteGx5ZWNseTY0aXV0emw1NmxqcQAAABAAAAAMABQAEgAMAAgABAAMAAAAEAAAACwAAAA8AAAAAAADAAEAAABoAQAAAAAAAOAAAAAAAAAAAA4AAAAAAAAAAAAAAAAAAAAAAAAAAAoADAAAAAgABAAKAAAACAAAAFAAAAACAAAAKAAAAAQAAAAs////CAAAAAwAAAABAAAAQQAAAAUAAAByZWZJZAAAAEz///8IAAAADAAAAAEAAABBAAAABAAAAG5hbWUAAAAAAgAAAHAAAAAEAAAAqv///xQAAAA8AAAAPAAAAAAAAAU4AAAAAQAAAAQAAACY////CAAAABAAAAAEAAAAdGV4dAAAAAAEAAAAbmFtZQAAAAAAAAAAkP///wQAAAB0ZXh0AAASABgAFAAAABMADAAAAAgABAASAAAAFAAAAEQAAABIAAAAAAAABUQAAAABAAAADAAAAAgADAAIAAQACAAAAAgAAAAQAAAABAAAAHRleHQAAAAABAAAAG5hbWUAAAAAAAAAAAQABAAEAAAABAAAAHRleHQAAAAAiAEAAEFSUk9XMQ=="]}}}
The migration guide doesn’t talk about how to decode the response received though

How to handle this ?

The migration guide suggests to use toDataFrame(), but it doesn’t look like a function that decodes the text received

#2

I’d also be interesting in more details on this. In the meantime, in case you hadn’t seen it, this is a description of what you’re seeing: Data frames | Grafana Labs. These are Apache Arrow data frames, so might be worth trying to deserialize them using the respective libraries.

#3

Thanks for the response :smile:
But, there are some issues here.

  • Our code is in js but the data frames are in ts
  • Even we go past the above , the function that decodes this will be needed. Can you please point to the right function if possible ?

Also, I have created a repl with the arrow data

Question
Is this an issue ?

#4

That change was first included in v8.0.0-beta1. It changes the response from Grafana backend from base64 encoded arrow data to json. It’s suggested that you extend DataSourceWithBackend class as can be seen here: grafana-starter-datasource-backend/datasource.ts at b4c14a4d7ea17df7db930bb74cdb474decf8a380 · grafana/grafana-starter-datasource-backend · GitHub. Doing so Grafana will query and parse the response/data for you automatically.

Some additional information here: Build a data source backend plugin | Grafana Labs. That create a new plugin using GitHub - grafana/grafana-starter-datasource-backend: A starter for Grafana data source plugins with a backend as template.

Here’s a more advanced extension of the DataSourceWithBackend class and there are more data source examples in the grafana repository: grafana/datasource.ts at main · grafana/grafana · GitHub

1 Like
#5

Hello Marcus,

Thanks for your response and quick turn around.

Here is the problem we are not using typescript and our goal here is deliver to our customer with minimal changes before next weekend

Is there any javascript function that we can use to decode temporarily until we move to typescript ?

Our current file

Can you please suggest anything ?

#6

Please checkout the DataSourceWithBackend implementation. As you can see you should be able to use the toDataQueryResponse function to parse the response. I do believe that you should be able to import these from JavaScript.

#7

Sure. Thanks a ton

Will check it out @mefraimsson

#8

This topic was automatically closed after 365 days. New replies are no longer allowed.