Dashboards: ID collisions causes undefined behavior when rendering

[cvasseng]

Expected behaviour

Using the same ID for grid columns should work fine across Dashboards instances.

Actual behavior

I noticed that when instantiating several dashboards on the same page where there are colliding ID's between cells and/or layouts between them, it will render severally garbled.

Presumably this is due to using getElementById instead of keeping references to created nodes around, but that's just a hunch..

My use-case is probably not that strange - this is for an app that cycles various dashboards, and they mostly have a 3x2 layout, so I was initially re-using the layout config object across multiple dashboards. In my case, the boards where quite large, and froze the page for a couple of minutes when loading.

Live demo with steps to reproduce

https://jsfiddle.net/y7c4a6k8/

Product version

Affected browser(s)

Latest Firefox and Chrome on Linux

[TorsteinHonsi]

Internal note

We have fixed similar isssues in Highcharts previously by prefixing id's with a unique key for each chart instance. Search for uniqueKey throughout the source code for inspiration.

[stitot]

Another approach to accomplish the same is by having multiple layouts in the same Dashboards instance, and toggle display by targeting layout id:

gui: {
    layouts: [{
        id: 'layout-1',
        rows: [{
            cells: [{
                id: 'dashboard-col-0'
            }, {
                id: 'dashboard-col-1'
            }]
        }]
    },
    {
        id: 'layout-2',
        rows: [{
            cells: [{
                id: 'dashboard-col-0'
            }, {
                id: 'dashboard-col-1'
            }]
        }]
    }]
}

I guess the danger of repetition is the same here, and prefixing with unique key for each dashboards instance won't do the trick in this use case.