Bug: Video Player does not use the correct value for repeated variable

[iwysiu]

What happened:
When the Video Player Panel is used with a Dashboard Variable, and has the Panel in a Row that repeats by Variable, the Row Name is correct, however the Panel seems to use the "All" Variable and shows all values from the Variable, rather than the individual Variable for that row.

note that even though the titles, set as ${System}_CAM1 are correct, the video player interpolation of the value is not:

From my initial investigation, the issue seems to be that the video player panel is not getting the correct value to use for $System.

What you expected to happen:
Its expected that the Repeat Variable should be correctly used in the Video Player like it is in the Title and Row.

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

{
  "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,
  "graphTooltip": 0,
  "id": 433,
  "iteration": 1678290630082,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "collapsed": false,
      "gridPos": {
        "h": 1,
        "w": 24,
        "x": 0,
        "y": 0
      },
      "id": 2,
      "panels": [],
      "title": "$System Cameras",
      "type": "row"
    },
    {
      "gridPos": {
        "h": 10,
        "w": 4.8,
        "x": 0,
        "y": 1
      },
      "id": 4,
      "maxPerRow": 6,
      "options": {
        "componentName": "",
        "datasource": "",
        "entityId": "",
        "kvsStreamName": "$System"
      },
      "repeat": "System",
      "repeatDirection": "h",
      "title": "${System}_CAM1",
      "type": "grafana-iot-twinmaker-videoplayer-panel"
    }
  ],
  "schemaVersion": 35,
  "style": "dark",
  "tags": [],
  "templating": {
    "list": [
      {
        "current": {
          "selected": false,
          "text": "All",
          "value": "$__all"
        },
        "hide": 0,
        "includeAll": true,
        "multi": false,
        "name": "System",
        "options": [
          {
            "selected": true,
            "text": "All",
            "value": "$__all"
          },
          {
            "selected": false,
            "text": "demo",
            "value": "demo"
          },
          {
            "selected": false,
            "text": "test",
            "value": "test"
          },
          {
            "selected": false,
            "text": "example",
            "value": "example"
          },
          {
            "selected": false,
            "text": "new",
            "value": "new"
          },
          {
            "selected": false,
            "text": "old",
            "value": "old"
          }
        ],
        "query": "demo,test,example,new,old",
        "queryValue": "",
        "skipUrlSync": false,
        "type": "custom"
      }
    ]
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "All Cameras",
  "uid": "zkpk9ahVk",
  "version": 2,
  "weekStart": ""
}

Anything else we need to know?:

Environment:

• Grafana version: v8.4.7
• Plugin version: 8.5.21

[mckn]

This should work out of the box. Have you tried to change the kvsStreamName to $System? Please see an attached example show casing that this works as expected.

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": 1,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "datasource": {
        "type": "testdata",
        "uid": "dd8d7fa4-67e3-4507-b42b-47250d7e76ca"
      },
      "description": "",
      "gridPos": {
        "h": 8,
        "w": 6,
        "x": 0,
        "y": 0
      },
      "id": 2,
      "options": {
        "code": {
          "language": "plaintext",
          "showLineNumbers": false,
          "showMiniMap": false
        },
        "content": "## $value",
        "mode": "markdown"
      },
      "pluginVersion": "10.0.0-pre",
      "repeat": "value",
      "repeatDirection": "h",
      "title": "Panel $value",
      "type": "text"
    }
  ],
  "refresh": "",
  "schemaVersion": 38,
  "style": "dark",
  "tags": [],
  "templating": {
    "list": [
      {
        "allValue": "0",
        "current": {
          "selected": false,
          "text": "All",
          "value": "$__all"
        },
        "hide": 0,
        "includeAll": true,
        "label": "Value",
        "multi": false,
        "name": "value",
        "options": [
          {
            "selected": true,
            "text": "All",
            "value": "$__all"
          },
          {
            "selected": false,
            "text": "1",
            "value": "1"
          },
          {
            "selected": false,
            "text": "2",
            "value": "2"
          },
          {
            "selected": false,
            "text": "3",
            "value": "3"
          },
          {
            "selected": false,
            "text": "4",
            "value": "4"
          }
        ],
        "query": "1,2,3,4",
        "queryValue": "",
        "skipUrlSync": false,
        "type": "custom"
      }
    ]
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "Testing",
  "uid": "a9cca03a-8647-44f6-af62-b370815c178a",
  "version": 6,
  "weekStart": ""
}

[iwysiu]

Unfortunately, it still has the same issue:

[iwysiu]

After investigating, I found out that panel plugins should be using props.replaceVariables to make sure the variables are correctly scoped. I tried it out on this branch and I think it worked, but I'd prefer if someone with a more fully set up twinmaker datasource confirmed.

[hwandersman]

I was able to verify that this branch works.

You can see in the images below that with a multi-value variable the Video Player panel is duplicated, and each value of the template variable is used to input the stream name. The error message shows that each stream name (demo, test, example, new, old) is used, but my datasource doesn't have access to it because I didn't set up the streams or permissions.