Node Graph: How to render based on Kusto data?

changov commented 10 months ago

What happened?

Trying to get a basic node graph to render based on a Kusto query. This dataset should be conformant with the documented graph data model:

let nodes = datatable(id:string, subtitle:string)
[
    "north",    "mainland",
    "east",     "island",
    "south",    "mainland",
    "west",     "island"
];
let edges = datatable(id:string, source:string, target:string, subtitle:string)
[
       "b1",     "north",    "east",  "bridge",
       "b2",     "north",    "west",  "ped bridge",
       "b3",     "north",    "west",  "bridge",
       "b4",     "east",     "west",  "overpass",
       "b5",     "east",     "south", "bridge",
       "b6",     "west",     "south", "bridge",
       "b7",     "west",     "south", "bridge"
];
nodes | as nodes;
edges | as edges

I get only a stack of nodes rendered:

If I comment out the nodes | as nodes line, I get a graph! This tells me Grafana cannot pick up both result tables from Kusto. (The as operator names each datatable in the result.) Seems like a bug.

What did you expect to happen?

With the Node Graph visualization, I expect a graph. :-)

Did this work before?

N/a

How do we reproduce it?

[above]

Is the bug inside a dashboard panel?

Key	Value
Panel	nodeGraph @ 10.2.1 (533a733e4eda44041e43358c5a51203e9b42c9ea)
Grafana	10.2.1 (533a733e4eda44041e43358c5a51203e9b42c9ea) // Pro

Panel debug snapshot dashboard

```json { "panels": [ { "type": "nodeGraph", "title": "Reproduced with embedded data", "gridPos": { "h": 13, "w": 15, "x": 0, "y": 0 }, "datasource": { "type": "grafana", "uid": "grafana" }, "id": 2, "targets": [ { "refId": "A", "datasource": { "type": "grafana", "uid": "grafana" }, "queryType": "snapshot", "snapshot": [ { "schema": { "refId": "A", "meta": { "typeVersion": [ 0, 0 ], "custom": { "ColumnTypes": [ "string", "string" ] }, "executedQueryString": "let nodes = datatable(id:string, subtitle:string)\r\n[\r\n \"north\", \"mainland\",\r\n \"east\", \"island\",\r\n \"south\", \"mainland\",\r\n \"west\", \"island\"\r\n];\r\nlet edges = datatable(id:string, source:string, target:string, subtitle:string)\r\n[\r\n \"b1\", \"north\", \"east\", \"bridge\",\r\n \"b2\", \"north\", \"west\", \"ped bridge\",\r\n \"b3\", \"north\", \"west\", \"bridge\",\r\n \"b4\", \"east\", \"west\", \"overpass\",\r\n \"b5\", \"east\", \"south\", \"bridge\",\r\n \"b6\", \"west\", \"south\", \"bridge\",\r\n \"b7\", \"west\", \"south\", \"bridge\"\r\n];\r\nnodes | as nodes;\r\nedges | as edges\r\n" }, "fields": [ { "name": "id", "type": "string", "typeInfo": { "frame": "string", "nullable": true }, "config": {} }, { "name": "subtitle", "type": "string", "typeInfo": { "frame": "string", "nullable": true }, "config": {} } ] }, "data": { "values": [ [ "north", "east", "south", "west" ], [ "mainland", "island", "mainland", "island" ] ] } } ] } ] }, { "gridPos": { "h": 7, "w": 9, "x": 15, "y": 0 }, "id": 5, "options": { "content": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Panel	nodeGraph @ 10.2.1 (533a733e4eda44041e43358c5a51203e9b42c9ea)
Queries	A[grafana-azure-data-explorer-datasource]
Data	1 frames, 2 fields, 4 rows
Grafana	10.2.1 (533a733e4eda44041e43358c5a51203e9b42c9ea) // Pro

", "mode": "html" }, "title": "Debug info", "type": "text" }, { "id": 6, "title": "Original Panel JSON", "type": "text", "gridPos": { "h": 13, "w": 9, "x": 15, "y": 7 }, "options": { "content": "{\n \"type\": \"nodeGraph\",\n \"title\": \"Panel Title\",\n \"gridPos\": {\n \"x\": 0,\n \"y\": 26,\n \"w\": 12,\n \"h\": 8\n },\n \"datasource\": {\n \"uid\": \"dc429e7c-4bad-403e-913c-95aed3ee0a16\",\n \"type\": \"grafana-azure-data-explorer-datasource\"\n },\n \"id\": 5,\n \"targets\": [\n {\n \"datasource\": {\n \"type\": \"grafana-azure-data-explorer-datasource\",\n \"uid\": \"dc429e7c-4bad-403e-913c-95aed3ee0a16\"\n },\n \"refId\": \"A\",\n \"resultFormat\": \"table\",\n \"database\": \"logs\",\n \"rawMode\": true,\n \"OpenAI\": false,\n \"query\": \"let nodes = datatable(id:string, subtitle:string)\\r\\n[\\r\\n \\\"north\\\", \\\"mainland\\\",\\r\\n \\\"east\\\", \\\"island\\\",\\r\\n \\\"south\\\", \\\"mainland\\\",\\r\\n \\\"west\\\", \\\"island\\\"\\r\\n];\\r\\nlet edges = datatable(id:string, source:string, target:string, subtitle:string)\\r\\n[\\r\\n \\\"b1\\\", \\\"north\\\", \\\"east\\\", \\\"bridge\\\",\\r\\n \\\"b2\\\", \\\"north\\\", \\\"west\\\", \\\"ped bridge\\\",\\r\\n \\\"b3\\\", \\\"north\\\", \\\"west\\\", \\\"bridge\\\",\\r\\n \\\"b4\\\", \\\"east\\\", \\\"west\\\", \\\"overpass\\\",\\r\\n \\\"b5\\\", \\\"east\\\", \\\"south\\\", \\\"bridge\\\",\\r\\n \\\"b6\\\", \\\"west\\\", \\\"south\\\", \\\"bridge\\\",\\r\\n \\\"b7\\\", \\\"west\\\", \\\"south\\\", \\\"bridge\\\"\\r\\n];\\r\\nnodes | as nodes;\\r\\nedges | as edges\\r\\n\"\n }\n ]\n}", "mode": "code", "code": { "language": "json", "showLineNumbers": true, "showMiniMap": true } } }, { "id": 3, "title": "Data from panel above", "type": "table", "datasource": { "type": "datasource", "uid": "-- Dashboard --" }, "gridPos": { "h": 7, "w": 15, "x": 0, "y": 13 }, "options": { "showTypeIcons": true }, "targets": [ { "datasource": { "type": "datasource", "uid": "-- Dashboard --" }, "panelId": 2, "withTransforms": true, "refId": "A" } ] } ], "schemaVersion": 37, "title": "Debug: Panel Title // 2024-01-21 23:13:12", "tags": [ "debug", "debug-nodeGraph" ], "time": { "from": "2024-01-21T17:13:12.314Z", "to": "2024-01-21T23:13:12.314Z" } } ```

Environment (with versions)?

Grafana: Azure Managed Grafana Browser: Edge

Grafana platform?

Other

Datasource(s)?

Kusto

tonypowa commented 9 months ago

hi @changov Thank you for reporting this issue

Could you include the raw response from the Kusto query? This would help us understand the structure of the data returned from the database.

changov commented 9 months ago

The query inspector shows only 1 result frame. :-( This means there's a problem with the way the query is made via the Kusto plugin. I don't know the details of the API there. The most productive way for you to debug would be to get a free Kusto cluster. The repro above is self-contained, so you need just an empty database in any cluster as a target. See how the Kusto web explorer shows multiple result tables:

grafana / grafana