Convert nested json log to html table panel

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": ""
}
]
}

welcome

please provide sample json?

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": ""
}
]
}
1 Like

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.

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 ?

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