Architecture (middle tier)
- Tuxboard uses Entity Framework Core
- With Entity Framework Core, we attach application-specific data access methods to the DbContext using extension methods.
- Asynchronous and Synchronous calls are available.
Each portion of Tuxboard uses ViewComponents for everything HTML. Depending on the ViewComponent, each one can cascade down to other related ViewComponents. For example, the Tuxboard ViewComponent calls the LayoutTemplate and the LayoutTemplate calls multiple WidgetTemplates.
The following components use ViewComponents (located in /ViewComponents):
- Tuxboard - HTML Template for a Tuxboard dashboard.
- LayoutTemplate - HTML Template for the layout of the dashboard (called from Tuxboard ViewComponent)
- WidgetTemplate - HTML Template for each Widget on the dashboard (called from the LayoutTemplate ViewComponent)
- WidgetSettings - HTML Template for a Widget's Settings
- Tuxbar - HTML Template for the Layout and Add Widget button
- Widget - Widget Traffic Cop to load and render the widget's content
The core Views (HTML) are located in the /Features/Shared/Components.
Open each Default.cshtml and notice the model passed in to understand what you can use in each ViewComponent. This gives you the ability to structure any component to match your dashboard needs.
There is also a WidgetViewComponent. This is used to render the widget's contents located in /Widgets/<WidgetName>/Default.cshtml.
Tuxboard doesn't include Microsoft Identity, but can be included with minimal effort.
It's not included out of the box because of two reasons:
- Not everyone uses Identity and may have rolled their own Authorization/Authentication scheme.
- Users may not want a user-centric dashboard; Simply display a static dashboard w/ widgets.
At the very beginning, the intent was to integrate MS Identity, but as development progressed, the draw to make Tuxboard more personalized became more prevalent since more developers were building customized dashboards as opposed to creating a static dashboard for no one.
Tuxboard was refactored numerous times to include a simple way to create user-defined, personalized dashboards.
The Dashboard object contains a simple UserId (varchar w/ length of 36).
In the DashboardService.cs (Tux.Core/Infrastructure/Services), we check to see if there is an existing dashboard available for a user.
If the user doesn't have one, it creates a default dashboard based on the user's plan.
If no plan is attached to a user, it will use the first one in the DasboardDefault table and create a dashboard based on that dashboard structure.
If no default dashboard is available, it won't display a dashboard.
Matching table: Dashboard
Contains one Dashboard per user and contains a single Tab.
Matching table: DashboardDefault
When a new person signs in and they don't have a dashboard, this table takes a pre-defined dashboard structure and copies the corresponding records into a new dashboard.
The LayoutId in the DashboardDefault table points to a single record in Layout which contains LayoutRows and LayoutTypes.
Think of the DashboardDefault and DashboardDefaultWidget tables as blueprints for future dashboard templates for different types of users.
Matching table: DashboardDefaultWidget
The complement table to DashboardDefault that points to widgets related to the Layout and the placement of the widget in the layout.
On initial setup of a user, these widgets are copied into the WidgetPlacement table for new users.
Matching table: DashboardTab
Contains one tab per dashboard.
Note: Tuxboard is currently limited to one Tab, but the structure can accommodate multiple tabs.
Matching table: Layout
Considered a header in a Master/detail relationship w/ LayoutRow.
IMPORTANT: If a Layout record doesn't have a TabId filled in (where TabId = null) associated with it, the layout is considered a dashboard (default) template. This allows the DashboardDefault to simply point to Layouts for templates.
The Layout table is a 1-to-1 relationship with a DashboardTab (translation: a DashboardTab contains one Layout with multiple LayoutRows)
Matching table: LayoutRow
Stores a list of rows.
Each row is defined by a LayoutType.
Matching table: LayoutType
A list of CSS classes to define the columns for each row. This may vary between each CSS Framework you use. Currently, Tuxboard uses Bootstrap 4.x.
Matching table: Plan
A simple way to include widgets based on a user's plan.
This was included as merely an example of extending out Tuxboard to use personalized dashboards based on a user's role (using Microsoft Identity) or subscription plan (for product-based dashboards).
Matching table: Widget
Contains a list of available widgets used in Tuxboard.
Matching table: WidgetDefault
Contains a list of default settings for a specific widget.
Matching table: WidgetDefaultOption
If a dropdown is used, this is the table storing the options in the Select dropdown.
Matching table: WidgetPlacement
Widget placement entities contain the row and column placement and settings of widgets.
Matching table: WidgetPlan
The widget plan was included as an example of extending out widgets based on a particular user criteria.
The WidgetPlan entity associates a Widget with a Plan.
Another possibility would be to create a WidgetRole entity/table to associate a widget to a particular role in Microsoft Identity.
Matching table: WidgetSetting
For each WidgetPlacement, there is a list of WidgetSettings. These widget settings are created/defaulted through the WidgetDefault entity/table.
This collection of WidgetSettings are displayed in the Settings dialog.
Dashboard
+-- Dashboard Tab(s)
| +-- Layout(s)
| +-- LayoutRow(s)
| +-- LayoutType
| +-- WidgetPlacements
| +-- WidgetSetting
| +-- Widgets
| +-- WidgetDefault
+-- Dashboard Default
+-- Dashboard Default Widgets