- 12 minutes to read

What is the Dashboard?

The Nodinite Dashboard empowers you to visualize, share, and act on business-critical statistics and KPIs—all in one place. As the first page end-users see in the Nodinite Web Client, the Dashboard is designed to maximize engagement and deliver actionable insights.

With the Nodinite Dashboard, you can:

✅Share real-time statistics and KPIs with your business and stakeholders ✅Integrate data from both Nodinite and external REST-based APIs ✅Customize the layout and content to fit your unique business needs ✅Encourage frequent visits with dynamic, relevant content

Nodinite provides options to help you maximize the end-user experience:

Sharing is caring – Provide valuable content for end-users based on all available data, not only from within Nodinite but also from external REST-based APIs.
Configurable content – Data in the widgets is individually refreshed based on user-defined thresholds to provide near real-time data.
Customizable layout – Design the layout of the Dashboard as you like, to fit your business.

Out of the box	Customized example

Here's an example of the 'out of the box' and a customized Dashboard.

Tip
Be sure to add content to the Dashboard that encourages your end-users to visit it frequently!

What data can I put on the Dashboard?

The Dashboard supports a wide range of data sources, allowing you to present statistics and KPIs from Nodinite and beyond. You can visualize metrics in multiple formats:

Pie charts
Tables
Metrics chart: Bar charts
Line charts
Lists
Text and numbers

The Dashboard features both mandatory built-in Dashboard items and optional custom Dashboard items.

Built-in Dashboard items

Information from Monitor Views available for the currently logged-on User
Offline internal core services
- Logging Service
- Monitor Views
License issues
Log Events per day (numeric data from Log Views).
Statistics for Integrations in the Repository Model.
Statistics for Endpoints in the Repository Model.

1. Monitor Views

A pie chart displays the current state of available Monitor Views. Click any part of the pie chart to open the list of matching Monitor Views.

Pie chart showing the state of Monitor Views. Click to drill down for details.

Click the Customize button to open a modal with the option to view the current state of resources from selected Monitor View.

Modal for customizing which Monitor Views are displayed.

2. Offline internal core services

If any of the built-in internal core services, such as the Monitoring Service or the Logging Service, are offline, unavailable, or stopped, all users are notified at the top of the dashboard that there is a problem that needs to be addressed by an Administrator.

Notification for offline internal core services.

3. License issues

If there is a problem with the license key (most often expiration date is nearing) information about this is available on top in the dashboard. This is a problem that needs to be addressed by an Administrator.

4. Log Events per day

The number of archived transactions per day (filter may be applied to compare the last 4 weeks).

Bar chart showing log events per day.

5. Statistics for Integrations

Statistics about the creation of Integrations from within the Repository Model.

Statistics for Integrations in the Repository Model.

Statistics about the creation of Endpoints from within the Repository Model.

Statistics for Endpoints in the Repository Model.

Custom Dashboard items

Embedded Power BI Reports
Metrics chart: Metrics charts from Monitoring Agents
Any embedded HTML Monitoring Agent Configuration

The following Metrics and types of graphs are available:

Windows Server Monitoring Agent
CPU (and individual cores)
Memory
Disk
Network
IIS Performance Counters
BizTalk Server Monitoring Agent
Throttling in BizTalk (global and individual hosts)
- Spool table(s)
- TrackingData table(s)
- Group information (aggregated current state)
Web Service Monitoring Agent
Response-time for Web Services
Dynamics 365 Monitoring Agent
Logon hours statistics
Logon history (last logon)

1. Embedded Power BI Reports

All information within Nodinite may be consumed from within Power BI using the REST-based Web API. The following example is using Embedded HTML from the Power BI platform with data from the Web API.

Embedded Power BI report in the Dashboard.

Metrics chart: 2. Metrics charts from Monitoring Agents

Using Metrics from any of the supported Monitoring Agents an Administrator can add, and organize information on the Dashboard.

Metrics chart from Monitoring Agents in the Dashboard.

Edit HTML

Follow the steps to add Metrics graphs to the Dashboard (you need RDP to the IIS server hosting the Web Client and administrative privileges to perform the steps):

Create an html file in the C:\Program Files\Nodinite\Dev\Nodinite Core Services\WebClient\Plugins

Note
The specific folder may vary depending on your installation (usually the Dev | Test | Prod part...)

Copy the HTML content from the Metrics modal (Resource in Monitor View where Actions are allowed and Metrics are available)

CPU Metrics Example below taken from the Windows Service Monitoring Agent
Example of HTML for CPU metrics.

Reload Dashboard page

The following template may be used to create a single framed box hosting 4 metrics graphs in a 2*2 table. Replace the card-header with your appropriate title and replace the comments with the code to embed from metrics enabled resources.

<div class="row">
	<div class="col-12 col-md-6 mb-3">
		<div class="card">
			<div class="card-header">Your Title Goes Here</div>
			<div class="card-body p-2">
				<div class="row">
					<!-- Replace me -->
					<!-- Replace me-->
				</div>
				<div class="row">
					<!-- Replace me-->
					<!-- Replace me-->
				</div>
			</div>
		</div>
	</div>
</div>

Number from any REST API

The customJsonCountController widget is helpful for rendering a simple number from ANY REST API. Use a jsonpath to extract the value to be presented from the result.

Internal API

In this example, we will display the number of Log Events today.

Widget showing the number of logged events today.

This example can be used on the Dashboard for any logged on user

    <div class="card mb-3" ng-controller="customJsonCountController" ng-init="init('',{'title':'Events today',progressbar:true, refreshInterval:15, call:{ webapi: webApiUrl + 'api/LogEvents/LogEventsPerDay?fromDate=$from$&toDate=$to$&numberOfPeriodsToCompare=0',jsonPath:'Collection.Items[0].Data[0]','replace':[{'find':'$from$', 'eval':'encodeURIComponent(moment().startOf(\'day\').format(variables.dateFormat))'},{'find':'$to$', 'eval':'encodeURIComponent(moment().endOf(\'day\').format(variables.dateFormat))'}]}})">
        <div ng-show="gui.loading" class="card-header"><span><i class="fa fa-spinner fa-spin"></i> Loading...</span></div>
        <div ng-show="!gui.loading" class="card-header ng-hide"><i ng-if="gui.titleIcon" class="fa" ng-class="gui.titleIcon"></i> <span class="ng-hide" ng-show="gui.title">{{gui.title}}</span></div>
        <div class="card-body p-1">
            <div style="font-size:100px; text-align:center;" ng-style="{'color':gui.count == 0?'#FF3F2C':'#3d9970'}">
                <div class="ng-hide" ng-show="!gui.loading">{{gui.count}}</div>
                <div ng-show="gui.loading">&nbsp;</div>
            </div>
            <div style="font-size:8px; padding-right:4px;" class="text-gray pull-right ng-hide" ng-show="!gui.loading">Last updated: {{gui.lastupdated}}</div>
            <div class="clearfix"></div>
            <div class="widget-progressbar">
                <div ng-if="gui.progressbar.enabled" ng-class="{'notransition':gui.progressbar.value==0}" class="progress" ng-style="{'width':gui.progressbar.value + '%'}"></div>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

External API

    <div class="card mb-3" ng-controller="customJsonCountController" ng-init="init('',{'title':'Karlstad (temp)',progressbar:true, refreshInterval:30, call:{ externalapi: 'http://temperatur.johndoe.nu/api.php',jsonPath:'value'}})">
        <div ng-show="gui.loading" class="card-header"><span><i class="fa fa-spinner fa-spin"></i> Loading...</span></div>
        <div ng-show="!gui.loading" class="card-header ng-hide"><i ng-if="gui.titleIcon" class="fa" ng-class="gui.titleIcon"></i> <span class="ng-hide" ng-show="gui.title">{{gui.title}}</span></div>
        <div class="card-body p-1">
            <div style="font-size:100px; text-align:center;" ng-style="{'color':gui.count < 0?'#0082ca':'#FF3F2C'}">
                <div class="ng-hide" ng-show="!gui.loading">{{gui.count| number:1}}&deg;C</div>
                <div ng-show="gui.loading">&nbsp;</div>
            </div>
            <div style="font-size:8px; padding-right:4px;" class="text-gray pull-right ng-hide" ng-show="!gui.loading">Last updated: {{gui.lastupdated}}</div>
            <div class="clearfix"></div>
            <div class="widget-progressbar">
                <div ng-if="gui.progressbar.enabled" ng-class="{'notransition':gui.progressbar.value==0}" class="progress" ng-style="{'width':gui.progressbar.value + '%'}"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

Log View example

Using any of the user-defined Log Views the returned number of events can be rendered. Use simple javascript commands to replace params as exemplified below.

    <div class="card mb-3" ng-controller="customJsonCountController" ng-init="init('',{'title':'Orders today',progressbar:true, refreshInterval:30, call:{ webapi: webApiUrl + 'api/Search/FlowSearch?logViewId=17&searchJson=%7B%22FilterGroups%22%3A%5B%5D,%22NumberOfItems%22%3A0,%22Page%22%3A1,%22From%22%3A%22$from$%22,%22To%22%3A%22$to$%22,%22DataSource%22%3A%7B%7D%7D',jsonPath:'Collection.Pagination.TotalNumberOfItemsAvailable','replace':[{'find':'$from$', 'eval':'encodeURIComponent(moment().startOf(\'day\').format(variables.dateTimeFormat))'},{'find':'$to$', 'eval':'encodeURIComponent(moment().endOf(\'day\').format(variables.dateTimeFormat))'}]}})">
        <div ng-show="gui.loading" class="card-header"><span><i class="fa fa-spinner fa-spin"></i> Loading...</span></div>
        <div ng-show="!gui.loading" class="card-header ng-hide"><i ng-if="gui.titleIcon" class="fa" ng-class="gui.titleIcon"></i> <span class="ng-hide" ng-show="gui.title">{{gui.title}}</span></div>
        <div class="card-body p-1">
            <div style="font-size:100px; text-align:center;" ng-style="{'color':gui.count == 0?'#FF3F2C':'#3d9970'}">
                <div class="ng-hide" ng-show="!gui.loading">{{gui.count}}</div>
                <div ng-show="gui.loading">&nbsp;</div>
            </div>
            <div style="font-size:8px; padding-right:4px;" class="text-gray pull-right ng-hide" ng-show="!gui.loading">Last updated: {{gui.lastupdated}}</div>
            <div class="clearfix"></div>
            <div class="widget-progressbar">
                <div ng-if="gui.progressbar.enabled" ng-class="{'notransition':gui.progressbar.value==0}" class="progress" ng-style="{'width':gui.progressbar.value + '%'}"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

Replace api/Search/FlowSearch?logViewId=17& with the id of your Log View (17 in this example).

Repository Example

Nodinite has built-in ever lasting statistics and for example quickly provides the datetime of the last event of a given Message Type.

<div class="card mb-3" ng-controller="customJsonDateController" ng-init="init('',{'dateType':'last','title':'INT001 Last Order received',progressbar:true, refreshInterval:15, call:{ webapi: webApiUrl + 'api/MessageTypes/2',jsonPath:'Collection.Items[*].Data.EventLastSeen'}})">
        <div ng-show="gui.loading" class="card-header"><span><i class="fa fa-spinner fa-spin"></i> Loading...</span></div>
        <div ng-show="!gui.loading" class="card-header ng-hide"><i ng-if="gui.titleIcon" class="fa" ng-class="gui.titleIcon"></i> <span class="ng-hide" ng-show="gui.title">{{gui.title}}</span></div>
        <div class="card-body p-1">
            <div style="font-size:24px; text-align:center; line-height:142px;" title="{{gui.fulldate}}">
                <div class="ng-hide" ng-show="!gui.loading">{{gui.date}}</div>
                <div ng-show="gui.loading">&nbsp;</div>
            </div>
            <div style="font-size:8px; padding-right:4px;" class="text-gray pull-right ng-hide" ng-show="!gui.loading">Last updated: {{gui.lastupdated}}</div>
            <div class="clearfix"></div>
            <div class="widget-progressbar">
                <div ng-if="gui.progressbar.enabled" ng-class="{'notransition':gui.progressbar.value==0}" class="progress" ng-style="{'width':gui.progressbar.value + '%'}"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

Replace api/MessageTypes/2 with the message type you would like to see when it was last recorded (needs to be processed)

Any embedded valid HTML

Using the technique in the previous steps, any code of your own liking may be added for display in the Dashboard of Nodinite.

Tip
If you have other custom Dashboards you can include them on the Nodinite Dashboard.

<iframe src="https://vecka.nu"></iframe>

Dashboard Widgets in Monitor Views

You can opt to include the Widgets in selected Monitor Views. In order to include any of the Widgets above, you must perform the steps outlined below:

How to include Dashboard widgets in Monitor Views.

You must have a folder named MonitorViews in the folder for the Web Client. Example default path for a Dev environment:

C:\Program Files\Nodinite\Dev\Nodinite Core Services\WebClient\Plugins\MonitorViews

The HTML file must be named with the ID (numeric) of the Monitor View.

Next Step

Monitor Views
Reports

Administration
Endpoints
Logging Service
Monitoring Agents
Monitoring Service
Repository Model
Users
Web API
Web Client

Explore Nodinite for 30 days – completely free

See how Nodinite resolves your technical issues, in a

LIVE Demo!