Migration to dashboard D2

[bartbutenaers]

Hi @kevinGodell,

I am trying to migrate all my ui nodes from the old AngularJs dashboard to the new VueJs dashboard. Easier said than done...

Do you have any plans of migrating this ui node to the new dashboard? Please say yes, otherwise I have a really big issue ;-)

Thanks! Bart

[bartbutenaers]

I am not sure whether you already had a look at dashboard D2... Below you can find some information, to give you a rough idea of what such a migration might look like. This might help you to decide whether you might start this journey or not...

• They have created an example ui node. You need clone that repo and to loop through the files and change the names and id's for your own node.
• Your frontend code (html, js, css) now needs to be placed in the vue file. Luckily @joepavitt has already created a tutorial of how to build a video player for the new dashboard. The tutorial is about creating a ui-template, but a custom ui node will be much alike...
• Instead of downloading hls.js from your own endpoint, you need to add it as a dependency to your package.json file.
  • Then do an npm install in your node folder to download it
  • Import hls.js in your vue file
  • When you do npm run build Vite will build your code: it will see - via the import - that you need that library in your frontend, so it will minify it (as an es module) and include it in your bundle file together with everything from your vue file. That bundle file will be automatically loaded by the dashboard, containing everything you need.
• Dashboard D2 has its own socket channel, but I am not sure how that matches your setup.

Hope that helps...

[kevinGodell]

Hi @bartbutenaers. Well, I was planning on making a video player library and wrapping it as a custom element that could be dropped into any web page, including dashboard 1 or 2 template node. And at that point, I would share the code/flows/etc. Alas, progress stalled due to my lack of a functioning development device to use for quite a long time. But the good news is that I finally have the new laptop and I will be making something soon, with the plans to make it work in db2.

I did play with their example code early on, but it was not mature enough yet for me to make any progress. Seems like it has come a long way. I will take a fresh look soon after I can figure out how to use this windows device and get acquainted with vscode.

[bartbutenaers]

@kevinGodell,

Nice to hear that you find a development machine. And of course that you interested to spend some of your free time to migrate to D2!

Ah yes a library seems to be a good idea. Vite will include in your builded bundle file, so you can use it automatically in your frontend. Note that you can use the same commonjs file both in frontend and backend, if that is something you would like: see here.

Please keep us updated of your progress!