I'm working on transitioning some 20 dashboard tabs to uibuilder and I wonder whether someone has figured out a decent way to mix the two, specifically, it would be great if I could convert one tab at a time and somehow mix the two dashboards.
One option is to use the iframe feature in the std dashboard to replace an existing dashboard tab by a uibuilder page, presumably w/out top-level tab nav since that continues to be provided by the std dashboard. Unfortunately what this means is that initially there's very little performance gain from the conversion 'cause the majority of the old dashboard is still being loaded. Are there better options?
Hi, I think that doing the conversion piecemeal is probably more effort than you would gain. I would simply take the time to do the conversion and then switch once you are ready.
Having said that, it may be possible - though likely harder if you are using https/http2 with CORS. uibuilder should render OK in an iFrame as long as your browser doesn't decide it doesn't like it.
But also, don't forget that Dashboard is a single-page app (and many uibuilder apps are as well though they don't have to be). Which means that if you were to embed Dashboard as an iFrame in a uibuilder page, you'd get the whole thing, you can't just have a single tab because in reality everything is just one enormous page, just with bits cleverly hidden).
If you did want to embed uibuilder pages into Dashboard until you were ready, and if you are using something like VueJS, I would look to create each "page" as a component so that you could start with them being displayed on a separate uibuilder html page but later combined into a single-page app. That is relatively easy to do with Vue though it takes a little more thought up-front. Vue also lets you unload component instances dynamically if you need to save resources but still keep the advantages of an SPA.
A Dashboard (singular) should, I think, generally be on 1 page, a tabbed or similar interface can still be useful though. The point being that the data should be already at hand and not to make the user have to wait for it. That can often make dashboard pages quite hefty. Having a single dashboard split between pages can be a very frustrating user experience.
Grafana is a good example. Each separate Dashboard is a page but all with a shared "Chrome" - e.g. a common page layout and visuals. But even that is frustrating when having to switch between dashboards to get all the information you need. It would be really nice to have the option of a tabbed interface on a dashboard in Grafana so that you could keep the visual page to a manageable size while still allowing rapid switching between charts.
That kind of thing is certainly easy to achieve with uibuilder and a framework like Vue/Bootstrap. Best of both worlds.
I guess it really depends on how distinct the use-cases between the tabs/pages are. You're talking about flipping back and forth between two tabs to compare charts, so really both tabs are used in the same use-case. In contrast, I have a tab for home heating and another tab for greenhouse controls. You may go from one to the next when doing a "round" to check that everything is OK, but won't really be flipping back and forth.
Problem with SPA is that I'm a chart addict (and use grafana too) and having the data load for all charts on all tabs doesn't scale. Which is most likely why grafana doesn't do that. Last time I looked was a few years ago and there weren't many JS charting packages that used SVG polylines for each line as opposed to a series of SVG line and circle objects, annd that makes a huge difference in terms of performance and memory...
