Convert nested json log to html table panel

soundoverlord93 · July 13, 2022, 3:45pm

Hello I am new in Grafana and i need help (code example, instruction) with converting nested json log to html table panel with collapse function in nested table partitions .
My json example:

{
    "Data": "new doc",
    "Date": "2021-06-07T09:32:20",
    "user": "test_usr",
    "comment": null,
    "server": "srv1",
    "Data_rep": "new metadata",
    "MetaRep": "test1",
    "Apprep": null,
    "Eventrep": "Create",
    "Etype": "Create",
    "wsrv": "srv1",
    "status": null,
    "level": "info",
    "chRTZ": [
    {
    "RTZ": "doc.tikonsubcost[autorsv_z]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"B\",0}",
    "NEW_REP": "no"
    },
    {
    "RTZ": "doc.tikonsubcost[autorsv]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"B\",0}",
    "NEW_REP": "no"
    },
    {
    "RTZ": "doc.tikonsubcost[_doccomm]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"U\"}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[ax_pay]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"B\",0}",
    "NEW_REP": "no"
    },
    {
    "RTZ": "doc.tikonsubcost[ax_trgt]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"S\",\"\"}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[cass]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"U\"}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[type]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",231d2248-18e2-4438-8a3d-ccddb354e643,0:00000000000000000000000000000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[doc]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",231d2248-18e2-4438-8a3d-ccddb354e643,0:b497005056ba527811e41c6ab8a3bd26}",
    "NEW_REP": "usd"
    },
    {
    "RTZ": "doc.tikonsubcost[Вinf]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",505c1f38-e3cf-4500-83b2-16ccd418f35d,0:b809005056a5011311ebc54a9fdf1a8b}",
    "NEW_REP": "sal pay org 0000013 frm 31.05.2021 20:00:00"
    },
    {
    "RTZ": "doc.tikonsubcost[test]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",9d480e88-4725-4401-bdf8-835907eaacca,0:00000000000000000000000000000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[test1]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",a5661efa-2941-4c11-b95e-8f2b60b04108,0:00000000000000000000000000000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[ppr]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",2c09b2ab-a20e-4cc9-88bb-9e814679ec68,0:884dd059a08c69ac408f84eec834073a}",
    "NEW_REP": "new val"
    },
    {
    "RTZ": "doc.tikonsubcost[re]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"B\",0}",
    "NEW_REP": "no"
    },
    {
    "RTZ": "doc.tikonsubcost[re1]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"B\",0}",
    "NEW_REP": "no"
    },
    {
    "RTZ": "doc.tikonsubcost[qaz]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"B\",1}",
    "NEW_REP": "yes"
    },
    {
    "RTZ": "doc.tikonsubcost[date]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"D\",20210605101822}",
    "NEW_REP": "05.06.2021 10:18:22"
    },
    {
    "RTZ": "doc.tikonsubcost[date]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"D\",00010101000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[datelast]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"D\",20210605101822}",
    "NEW_REP": "05.06.2021 10:18:22"
    },
    {
    "RTZ": "doc.tikonsubcost[date1]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"D\",20210605000000}",
    "NEW_REP": "05.06.2021"
    },
    {
    "RTZ": "doc.tikonsubcost[datec_doc]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"D\",20210604183732}",
    "NEW_REP": "04.06.2021 18:37:32"
    },
    {
    "RTZ": "doc.tikonsubcost[contrdoc]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",be38acce-2ef6-4196-87d1-a711784d34bc,0:00000000000000000000000000000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[deleg]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",f77d42e4-148c-4450-ad6a-47b092128306,0:00000000000000000000000000000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[doccomm]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"U\"}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[org_doctik]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",726538f4-e866-443e-98d2-5d21c4e4e3c6,0:00000000000000000000000000000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[org_type1]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",1dec52fd-9ee2-4d32-bf13-245265ae5381,0:00000000000000000000000000000000}",
    "NEW_REP": ""
}
]
}

yosiasz · July 13, 2022, 4:46pm

welcome

please provide sample json?

soundoverlord93 · July 13, 2022, 5:25pm

this tool do what i need https://kevincobain2000.github.io/json-to-html-table/. Maybe it helps for understanding

{
    "Data": "new doc",
    "Date": "2021-06-07T09:32:20",
    "user": "test_usr",
    "comment": null,
    "server": "srv1",
    "Data_rep": "new metadata",
    "MetaRep": "test1",
    "Apprep": null,
    "Eventrep": "Create",
    "Etype": "Create",
    "wsrv": "srv1",
    "status": null,
    "level": "info",
    "chRTZ": [
    {
    "RTZ": "doc.tikonsubcost[autorsv_z]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"B\",0}",
    "NEW_REP": "no"
    },
    {
    "RTZ": "doc.tikonsubcost[autorsv]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"B\",0}",
    "NEW_REP": "no"
    },
    {
    "RTZ": "doc.tikonsubcost[_doccomm]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"U\"}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[ax_pay]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"B\",0}",
    "NEW_REP": "no"
    },
    {
    "RTZ": "doc.tikonsubcost[ax_trgt]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"S\",\"\"}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[cass]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"U\"}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[type]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",231d2248-18e2-4438-8a3d-ccddb354e643,0:00000000000000000000000000000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[doc]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",231d2248-18e2-4438-8a3d-ccddb354e643,0:b497005056ba527811e41c6ab8a3bd26}",
    "NEW_REP": "usd"
    },
    {
    "RTZ": "doc.tikonsubcost[Вinf]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",505c1f38-e3cf-4500-83b2-16ccd418f35d,0:b809005056a5011311ebc54a9fdf1a8b}",
    "NEW_REP": "sal pay org 0000013 frm 31.05.2021 20:00:00"
    },
    {
    "RTZ": "doc.tikonsubcost[test]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",9d480e88-4725-4401-bdf8-835907eaacca,0:00000000000000000000000000000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[test1]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",a5661efa-2941-4c11-b95e-8f2b60b04108,0:00000000000000000000000000000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[ppr]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",2c09b2ab-a20e-4cc9-88bb-9e814679ec68,0:884dd059a08c69ac408f84eec834073a}",
    "NEW_REP": "new val"
    },
    {
    "RTZ": "doc.tikonsubcost[re]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"B\",0}",
    "NEW_REP": "no"
    },
    {
    "RTZ": "doc.tikonsubcost[re1]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"B\",0}",
    "NEW_REP": "no"
    },
    {
    "RTZ": "doc.tikonsubcost[qaz]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"B\",1}",
    "NEW_REP": "yes"
    },
    {
    "RTZ": "doc.tikonsubcost[date]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"D\",20210605101822}",
    "NEW_REP": "05.06.2021 10:18:22"
    },
    {
    "RTZ": "doc.tikonsubcost[date]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"D\",00010101000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[datelast]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"D\",20210605101822}",
    "NEW_REP": "05.06.2021 10:18:22"
    },
    {
    "RTZ": "doc.tikonsubcost[date1]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"D\",20210605000000}",
    "NEW_REP": "05.06.2021"
    },
    {
    "RTZ": "doc.tikonsubcost[datec_doc]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"D\",20210604183732}",
    "NEW_REP": "04.06.2021 18:37:32"
    },
    {
    "RTZ": "doc.tikonsubcost[contrdoc]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",be38acce-2ef6-4196-87d1-a711784d34bc,0:00000000000000000000000000000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[deleg]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",f77d42e4-148c-4450-ad6a-47b092128306,0:00000000000000000000000000000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[doccomm]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"U\"}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[org_doctik]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",726538f4-e866-443e-98d2-5d21c4e4e3c6,0:00000000000000000000000000000000}",
    "NEW_REP": ""
    },
    {
    "RTZ": "doc.tikonsubcost[org_type1]",
    "RN": 0,
    "OLD": "",
    "OLD_REP": "",
    "NEW": "{\"#\",1dec52fd-9ee2-4d32-bf13-245265ae5381,0:00000000000000000000000000000000}",
    "NEW_REP": ""
}
]
}

yosiasz · July 13, 2022, 6:18pm

I would go the route of this plugin: html

Then as you can see in the Events section you can capture data coming from your data source to do what you need via javascript.
Then on the html panel using for each loop you can display it as you want. I would copy the template from that web side you posted using your json data in it to get the skeleton of the html.

soundoverlord93 · July 13, 2022, 7:16pm

For me looks some strange… And this json will be have dynamic number of nested elements. Maybe you have real example of realization ?
In which variable stored log message or column for JS ?

yosiasz · July 13, 2022, 7:18pm

disregard the html in the image I posted. I was just playing with it. the data is located here. using console log of Chrome you can see it.
it would be in the ctrl

Topic		Replies	Views
Display hierarchical structure data in Table Panel Grafana Plugin Development	0	1818	February 6, 2019
View json data in table - Grafana Dashboards api , query-help , json-api-datasource , json , infinity-datasource	2	11817	September 12, 2022
Flatten array of arrays json node Dashboards transformations , jsonata	13	561	March 11, 2025
Grafana 6 Table Panel JSON example Grafana	3	1645	December 13, 2020
The table contains one record, but it is displayed as a JSON line instead of a table row Dashboards	2	34	October 9, 2024

Convert nested json log to html table panel

Related topics