Repeat panel render problem under certain screen sizes

[baur]

What happened:

Repeat panel render problem, fixes only with scroll or resizing

same problem #40211 #38805 fixed by #39991

What you expected to happen:

How to reproduce it (as minimally and precisely as possible):

Anything else we need to know?:

Environment:

• Grafana version: v8.2.2 (6232fe0)
• Data source type & version: MSSQL
• OS Grafana is installed on: Window10
• User OS & Browser: Chrome
• Grafana plugins: Timepicker Buttons Panel for Grafana (the only one not core plugin installed on production)
• Others:

[zuchka]

Thanks for creating this new issue on the advice of @hugohaggmark, @baur. As always, really appreciate your feedback 👍

[hugohaggmark]

Thank you @baur can you please share your dashboard (removing any sensitive data)?

Click the Share Dashboard Icon

Click on Export, and Click on Export for sharing externally

Click View JSON and then Copy to Clipboard

[grafanabot]

Thanks for creating this issue! We think it's missing some basic information.

Follow the issue template and add additional information that will help us replicate the problem. For data visualization issues:

• Query results from the inspect drawer (data tab & query inspector)
• Panel settings can be extracted in the panel inspect drawer JSON tab

For dashboard related issues:

• Dashboard JSON can be found in the dashboard settings JSON model view

For authentication, provisioning and alerting issues, Grafana server logs are useful.

Happy graphing!

[baur]

JSON

[baur]

@hugohaggmark pls, confirm recive and I'will delete

[hugohaggmark]

@baur confirmed, and thank you!

[hugohaggmark]

@baur if you have time can you DM with me (hugoh) on our public slack https://grafana.slack.com, because I'm having a hard time reproducing the issue using the dashboard you provided. Thank you!

[baur]

Yes, I think it is hard to reproduce without real DS, I'll try to reproduce it without DS

[hugohaggmark]

Try to replace all variable queries with Testdata or use a custom variable to simulate values if possible

[baur]

[baur]

reproduced without iFrame

[baur]

{ "inputs": [ { "name": "DS_MICROSOFT_SQL SERVER", "label": "Microsoft SQL Server", "description": "", "type": "datasource", "pluginId": "mssql", "pluginName": "Microsoft SQL Server" } ], "requires": [ { "type": "grafana", "id": "grafana", "name": "Grafana", "version": "8.2.2" }, { "type": "datasource", "id": "mssql", "name": "Microsoft SQL Server", "version": "1.0.0" }, { "type": "panel", "id": "stat", "name": "Stat", "version": "" } ], "annotations": { "list": [ { "builtIn": 1, "datasource": "-- Grafana --", "enable": true, "hide": true, "iconColor": "rgba(0, 211, 255, 1)", "name": "Annotations & Alerts", "target": { "limit": 100, "matchAny": false, "tags": [], "type": "dashboard" }, "type": "dashboard" } ] }, "editable": true, "fiscalYearStartMonth": 0, "gnetId": null, "graphTooltip": 0, "id": null, "iteration": 1635499768628, "links": [], "liveNow": false, "panels": [ { "datasource": null, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "links": [ { "title": "title", "url": "d/F9-R5NFnk?var-query1=${data.fields.value}&kiosk" } ], "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 4, "w": 24, "x": 0, "y": 0 }, "id": 36, "options": { "colorMode": "value", "graphMode": "area", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "", "values": true }, "text": {}, "textMode": "auto" }, "pluginVersion": "8.2.2", "targets": [ { "alias": "", "format": "table", "rawSql": "select 1 as value, 'value1' text union all\r\nselect 2 as value, 'value2' text union all\r\nselect 3 as value, 'value3' text union all\r\nselect 4 as value, 'value4' text union all\r\nselect 5 as value, 'value5' text union all\r\nselect 6 as value, 'value6' text ", "refId": "A" } ], "title": "Panel Title", "type": "stat" }, { "datasource": null, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 4, "w": 4, "x": 0, "y": 4 }, "id": 2, "maxPerRow": 8, "options": { "colorMode": "background", "graphMode": "area", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "/./", "values": false }, "text": {}, "textMode": "value" }, "pluginVersion": "8.2.2", "repeat": "query0", "repeatDirection": "h", "targets": [ { "alias": "", "format": "table", "rawSql": "SELECT '${query0:text}' as value", "refId": "A" } ], "title": "Panel Title", "type": "stat" }, { "datasource": null, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 4, "w": 4, "x": 0, "y": 12 }, "id": 8, "maxPerRow": 8, "options": { "colorMode": "background", "graphMode": "area", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "/./", "values": false }, "text": {}, "textMode": "value" }, "pluginVersion": "8.2.2", "repeat": "query0", "repeatDirection": "h", "targets": [ { "alias": "", "format": "table", "rawSql": "SELECT '${query0:text}' as value", "refId": "A" } ], "title": "Panel Title", "type": "stat" }, { "datasource": null, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 4, "w": 4, "x": 0, "y": 20 }, "id": 19, "maxPerRow": 8, "options": { "colorMode": "background", "graphMode": "area", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "/.*/", "values": false }, "text": {}, "textMode": "value" }, "pluginVersion": "8.2.2", "repeat": "query0", "repeatDirection": "h", "targets": [ { "alias": "", "format": "table", "rawSql": "SELECT '${query0:text}' as value", "refId": "A" } ], "title": "Panel Title", "type": "stat" } ], "refresh": "", "schemaVersion": 31, "style": "dark", "tags": [], "templating": { "list": [ { "allValue": null, "current": {}, "datasource": "${DS_MICROSOFT_SQL SERVER}", "definition": "select 1 as value, 'value1' text union all\nselect 2 as value, 'value2' text union all\nselect 3 as value, 'value3' text union all\nselect 4 as value, 'value4' text union all\nselect 5 as value, 'value5' text union all\nselect 6 as value, 'value6' text ", "description": null, "error": null, "hide": 0, "includeAll": true, "label": null, "multi": true, "name": "query0", "options": [], "query": "select 1 as value, 'value1' text union all\nselect 2 as value, 'value2' text union all\nselect 3 as value, 'value3' text union all\nselect 4 as value, 'value4' text union all\nselect 5 as value, 'value5' text union all\nselect 6 as value, 'value6' text ", "refresh": 1, "regex": "", "skipUrlSync": false, "sort": 0, "type": "query" }, { "allValue": null, "current": {}, "datasource": "${DS_MICROSOFT_SQL SERVER}", "definition": "select 1 as value, 'value1' text union all\nselect 2 as value, 'value2' text union all\nselect 3 as value, 'value3' text union all\nselect 4 as value, 'value4' text union all\nselect 5 as value, 'value5' text union all\nselect 6 as value, 'value6' text ", "description": null, "error": null, "hide": 0, "includeAll": true, "label": null, "multi": true, "name": "query1", "options": [], "query": "select 1 as value, 'value1' text union all\nselect 2 as value, 'value2' text union all\nselect 3 as value, 'value3' text union all\nselect 4 as value, 'value4' text union all\nselect 5 as value, 'value5' text union all\nselect 6 as value, 'value6' text ", "refresh": 1, "regex": "", "skipUrlSync": false, "sort": 0, "type": "query" } ] }, "time": { "from": "now-6h", "to": "now" }, "timepicker": {}, "timezone": "", "title": "repeat", "uid": "F9-R5NFnk", "version": 20 }

[baur]

I think it's related with

• Data Links
• Kiosk mode
• Lazy loading

because error only on the last panel

maybe viewport height on kiosk and iframe calculates wrong way?

[baur]

Here is extra Height with I frame and less Height with kiosk mode

[baur]

Same error with Iframe

It depends on Iframe height and screen size

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <iframe width='100%' height="600px" src='http://localhost:3000/d/F9-R5NFnk/repeat?orgId=1&var-query0=All&kiosk'
        frameborder='0' allowFullScreen='true'></iframe></div>
</body>

</html>

[baur]

In my case 14" screen with next params

I can organize TeamViewer access

[hugohaggmark]

@baur I've had a look at the new dashboard.json you shared. I have a couple of thoughts:

• In the link you're not providing the whole path, you're missing /repeat? in d/F9-R5NFnk?var-query1=${__data.fields.__value}&kiosk so the working link should look like d/F9-R5NFnk/repeat?var-query1=${__data.fields.__value}&kiosk. At least when I change the link I can't reproduce the issue any longer.
• Secondly you're not passing any value for the query0 variable in the URL which can have some undesired consequences if you don't have a reasonable default stored for that variable

Thank you again for taking the time to narrow down one of issues.

Let me know if changing the link to the correct url solves the issue for you. 🙏

[baur]

{ "inputs": [ { "name": "DS_MICROSOFT_SQL SERVER", "label": "Microsoft SQL Server", "description": "", "type": "datasource", "pluginId": "mssql", "pluginName": "Microsoft SQL Server" } ], "requires": [ { "type": "grafana", "id": "grafana", "name": "Grafana", "version": "8.2.2" }, { "type": "datasource", "id": "mssql", "name": "Microsoft SQL Server", "version": "1.0.0" }, { "type": "panel", "id": "stat", "name": "Stat", "version": "" } ], "annotations": { "list": [ { "builtIn": 1, "datasource": "-- Grafana --", "enable": true, "hide": true, "iconColor": "rgba(0, 211, 255, 1)", "name": "Annotations & Alerts", "target": { "limit": 100, "matchAny": false, "tags": [], "type": "dashboard" }, "type": "dashboard" } ] }, "editable": true, "fiscalYearStartMonth": 0, "gnetId": null, "graphTooltip": 0, "id": null, "iteration": 1635515286100, "links": [], "liveNow": false, "panels": [ { "datasource": null, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "links": [ { "title": "title", "url": "d/F9-R5NFnk/repeat?var-query0=All&var-query1=${data.fields.value}&kiosk" } ], "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 4, "w": 24, "x": 0, "y": 0 }, "id": 36, "options": { "colorMode": "value", "graphMode": "area", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "", "values": true }, "text": {}, "textMode": "auto" }, "pluginVersion": "8.2.2", "targets": [ { "alias": "", "format": "table", "rawSql": "select 1 as value, 'value1' text union all\r\nselect 2 as value, 'value2' text union all\r\nselect 3 as value, 'value3' text union all\r\nselect 4 as value, 'value4' text union all\r\nselect 5 as value, 'value5' text union all\r\nselect 6 as value, 'value6' text ", "refId": "A" } ], "title": "Panel Title", "type": "stat" }, { "datasource": null, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 4, "w": 4, "x": 0, "y": 4 }, "id": 2, "maxPerRow": 8, "options": { "colorMode": "background", "graphMode": "area", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "/./", "values": false }, "text": {}, "textMode": "value" }, "pluginVersion": "8.2.2", "repeat": "query0", "repeatDirection": "h", "targets": [ { "alias": "", "format": "table", "rawSql": "SELECT '${query0:text}' as value", "refId": "A" } ], "title": "Panel Title", "type": "stat" }, { "datasource": null, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 4, "w": 4, "x": 0, "y": 8 }, "id": 8, "maxPerRow": 8, "options": { "colorMode": "background", "graphMode": "area", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "/./", "values": false }, "text": {}, "textMode": "value" }, "pluginVersion": "8.2.2", "repeat": "query0", "repeatDirection": "h", "targets": [ { "alias": "", "format": "table", "rawSql": "SELECT '${query0:text}' as value", "refId": "A" } ], "title": "Panel Title", "type": "stat" }, { "datasource": null, "fieldConfig": { "defaults": { "color": { "mode": "thresholds" }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 4, "w": 4, "x": 0, "y": 12 }, "id": 19, "maxPerRow": 8, "options": { "colorMode": "background", "graphMode": "area", "justifyMode": "auto", "orientation": "auto", "reduceOptions": { "calcs": [ "lastNotNull" ], "fields": "/.*/", "values": false }, "text": {}, "textMode": "value" }, "pluginVersion": "8.2.2", "repeat": "query0", "repeatDirection": "h", "targets": [ { "alias": "", "format": "table", "rawSql": "SELECT '${query0:text}' as value", "refId": "A" } ], "title": "Panel Title", "type": "stat" } ], "refresh": "", "schemaVersion": 31, "style": "dark", "tags": [], "templating": { "list": [ { "allValue": null, "current": {}, "datasource": "${DS_MICROSOFT_SQL SERVER}", "definition": "select 1 as value, 'value1' text union all\nselect 2 as value, 'value2' text union all\nselect 3 as value, 'value3' text union all\nselect 4 as value, 'value4' text union all\nselect 5 as value, 'value5' text union all\nselect 6 as value, 'value6' text ", "description": null, "error": null, "hide": 0, "includeAll": true, "label": null, "multi": true, "name": "query0", "options": [], "query": "select 1 as value, 'value1' text union all\nselect 2 as value, 'value2' text union all\nselect 3 as value, 'value3' text union all\nselect 4 as value, 'value4' text union all\nselect 5 as value, 'value5' text union all\nselect 6 as value, 'value6' text ", "refresh": 1, "regex": "", "skipUrlSync": false, "sort": 0, "type": "query" }, { "allValue": null, "current": {}, "datasource": "${DS_MICROSOFT_SQL SERVER}", "definition": "select 1 as value, 'value1' text union all\nselect 2 as value, 'value2' text union all\nselect 3 as value, 'value3' text union all\nselect 4 as value, 'value4' text union all\nselect 5 as value, 'value5' text union all\nselect 6 as value, 'value6' text ", "description": null, "error": null, "hide": 0, "includeAll": true, "label": null, "multi": true, "name": "query1", "options": [], "query": "select 1 as value, 'value1' text union all\nselect 2 as value, 'value2' text union all\nselect 3 as value, 'value3' text union all\nselect 4 as value, 'value4' text union all\nselect 5 as value, 'value5' text union all\nselect 6 as value, 'value6' text ", "refresh": 1, "regex": "", "skipUrlSync": false, "sort": 0, "type": "query" } ] }, "time": { "from": "now-6h", "to": "now" }, "timepicker": {}, "timezone": "", "title": "repeat", "uid": "F9-R5NFnk", "version": 26 }

[baur]

[hugohaggmark]

I see now @baur it's a screen size thing, what screen size are you using. I can reproduce it now but I had to make my browser really small (1287x737):

https://user-images.githubusercontent.com/562238/139625249-048b71a8-3737-42b7-98ae-7a4afe59d9d3.mp4

If I use my browser in full screen I don't see this issue:

https://user-images.githubusercontent.com/562238/139625296-7ac5caf1-4ffa-4ae4-824a-e55474826e91.mp4

I'm going to add this to our to be prioritised column for now and await more feedback from the community.

Thank you for taking the time to help out identify this, we really appreciate it 🙏

[baur]

@hugohaggmark

But in my case this error in 23" Display with 1920x1080 screen size, this is most popular screen params I think it not depends screen size, it depends on distance of last element to bottom

[natellium]

Thank you for raising this. We'll look into it as part of #52484