Dud Dashboard [WIP] - Scaffolding module

Mine is not a “show-off” of dashboard specifically, but more of methodology.

I created DudDashboard, a small scaffolding module for Universal Dashboard.

The idead was to autoloads

  • UDPages contained in individual files located in a specific subfolder
  • UDEndpoint contained in individual files located in a specific subfolder
  • Have some files automatically loaded if found such as
    • Login.ps1 - return New-UDLogin
    • Navigation.ps1 & Footer.ps1 - return the corresponding elements
  • Functions
    • To have a folder where I could put all functions that I wanted loaded inside UD environment
  • Data
    • A way to be able to switch between one or more datasource to allow an easy separation of concerns and publishing a demo version of a specific dashboard for the community without having to scrub it from any production data. Also to get UD-pages stripped down to their layout while the actual data of these pages was loaded from another file.
  • JS scripts and CSS styles
    • easily load js and CSS into the dashboard without touching the endpoint initialization.

I did all of that to be able to develop more efficiently / quickly with UD and on a personal level, this scaffolding module achieve that.

A special Start-Watch.ps1 file (see tiny documentation below) start a filesystem watcher which either update the dashboard or restart the apppool (configured in the HotReload appsettings.json file) depending on the file path. This allow me to create page and endpoints very easily.

I hope to get a V1 soon, have the occasion to test on Azure, windows service, and with .net core more to ensure it work properly there too, get some proper documentation, etc…

To be honest, I am probably a bit too early to talk about it due to the lack of a complete documentation and lack of testing other than the condition described below but hopefully, making it public today will give me the drive to push this forward and develop something beautiful and more importantly, accessible.

Feel free to take a look, read the documentation below and let me know if you get the base dashboard working.


DuDDashboard is a scaffolding module for Universal Dashboards.

Alpha stage

Please note that at current time, it is only tested on :

  • Windows
  • IIS
  • Windows Powershell 5.1

This is not to say that it won’t work using Windows Service, Azure or .net core, just that in the current state, it is still untested on these mediums.

Documentation below is only a tiny introduction and I plan to create a much more detailed documentation in the next few weeks.

Meanwhile, if you have any questions, you can ask them on my thread on the Universal Dashboard forum - Link here

Objectives.

The objective of this module is to provide a scaffolding framework to develop quickly your dashboards.

Structure

DUDDashboard skeleton looks like this

  • Root folder (where sit Dashboard.ps1, UD files and src folder. )
  • Root/src folder - Except the configuration file, everything else reside in the src subfolder.

Root files

  • Dashboard.ps1
    • Contains Start-DUDDashboard, a wrapper for Start-UDDashboard that initialize DudDashboard
  • Appsettings.json - Contains some settings you would normally pass to Start-UDDashboard, authentication settings used by the login (if defined) and some parameters tied to the DUD-HotReload component.
  • Start-Watch.ps1 (Requires appsettings.json Hotreload section configuration) - When developping, if you execute Start-Watch.ps1, it will start monitoring Files and either update the dashboard (Through Update-UDDashboard) or restart the IIS application pool. For this reason, this file need to be executed as an administrator. When the dashboard update itself, page will refresh automatically. When app pool is recycled, you will need to refresh manually the page yourself. Based on the changed element, Universal Dashboard requires to restart the IIS. Items and behaviors :
    • Endpoints - Restart
    • Page, Scripts and Styles - Update
    • Dashboard.ps1 - Restart
    • Root.ps1 - update
    • Data - update
    • Navigation & Footer - Restart

Src subfolder content

Files

When using the Publish-DUDDashboard command, you will notice that some of these files starts by an underscore. They won’t be used until you remove the underscore (Ex: _Login.ps1 will be ignored. To use it, rename to Login.ps1)

All these files are command (some optionals) part of a normal UDDashboard.

  • Footer - return a New-UDFooter
  • Login - Must return New-UDLogin
  • Navigation - Must return New-SideNav
  • root - Return New-DuDDashboard (Wrapper for New-UDDashboard)
  • Theme - Must return New-UDTheme

Folders

  • Data
    • Tied to Datasource appsettings.json . Files from the selected datasource subfolder are loaded into memory. Intended usage is to separate data from main datasource and a demo / dev source. You could therefore use the demo datasource for documenting or share the dashboard with peace of mind by having the demo datasource in place just by removing the production datasource, which might contains proprietary code. $Cache:DudData.MyPage can be referenced in your pages. (Better documentation to come)
  • Endpoints
    • All files within this folder must return New-UDEndpoint and will be imported automatically.
  • Functions
    • All files within this folder are functions to be imported and made available within Universal Dashboard.
  • Pages
    • All files within this folder must return New-UDPage and will be imported automaticaly
  • Scripts
    • All Javascript from this folder will be copied into the Root/Client/Scripts folder when app start and be added automatically in UD.
  • Styles
    • All CSS scripts from this folder will be copied into the Root/Client/Styles folder when app start and applied to your dashboard.

How to install

Install-Module DUDDashboard

  • Create a folder on your hard drive
  • Create a new IIS website
  • Configure the apppool with a user that can run Universal Dashboard
  • Run Publish-DUDDashboard -Path ‘Path_To_Your_New_Folder’ -License ‘Path of your License.lic file if you have one’
4 Likes

I have been setting up a more basic version of this for my own dashboard, splitting the individual pages into their own scripts, same with theme, etc. What you have done here is way better. I plan to put your stuff to practice for my site.

Cool, thanks for the feedback @dcherry88.

I will add an initial documentation on the Gitbook I created to this effect during the weekend but if you have any questions in the meantime, let me know.

Documentation will be located at:
https://app.gitbook.com/@itfranck/s/duddashboard/

Now on the marketplace.
https://marketplace.universaldashboard.io/Dashboard/DudDashboard

I will upload a video soon to allow anybody to get started.

In that new version, I

  • reworked Set-DudSettingsCache so it could be used to preload $Cache:dud in the dev. environment so you will now get intellisense for the $Cache:dud namespace
  • Added 2 new sections in the appsettings
  1. PublishedFolders: Allows to defined published folders in the Appsettings directly.
"PublishedFolders": [
{"/docs":"c:\\PathTo\\Doc"}
]
  1. My: A user namespace automatically loaded with the other settings.

"My": {}

  • Added APISigningKey in the UDConfig section that is used by the Login.ps1 and will create an API authentication method based on that signing key if defined.

What I plan to do next

  • Update the documentation (oops)
  • Create a video to demonstrate the ease of use with duddashboard
  • Leverage Protect-cms to add a credentials vault in appsettings (so you can put encrypted credentials in the appsettings.json and later use them in your dashboard to perform what is needed)
  • Rework the “data” system that optionally seggregate layout and data so you can quickly switch from production to demo.
  • Find a way to get a way to test in Azure / Linux in a non painful way to ensure compatibility not just on IIS.
1 Like

Very cool project! I had been thinking about this myself but hadn’t gotten very far. I have a dashboard I’m working on where I did a similar thing so that I can easily add pages, endpoints, and authorization policies, but I haven’t really abstracted it away from that project yet.

This approach is fascinating to me as it sort of resembles the approach taken by a lot of static blog frameworks where you can start from a template and then just plug in posts to that.

1 Like

Thanks for the feedback :smiley:
I like that comparison.
That really is the gist of it.

Coincidentally, I got interested in static sites generator around the same time I started developing this, many moons ago.

But yeah, just like a static site generator, the file structure determines what the module expects and how it will handle it.

I’ll upload a video in the weekend or before to demonstrate the core concepts.
This should complement nicely the current documentation, which I feel is lacking on some levels.

1 Like