- 0 minutes to read

What is the Dashboard?

The Dashboard is an area where you can share important statistics and KPIs with your business. This is also usually the first page end-users access when visiting the Nodinite Web Client.

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 are individually refreshed based on user-defined thresholds to provide near real-time data
Customizable layout - Design the layout of the Dashboard as you like and what fits your business

Out of the box	Customized example

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

Tip
Make sure to put content on the Dashboard that makes your end-users want to frequently visit it!

What data can I put on the Dashboard?

Statistics and KPI data may stem from many different sources and below you will find many helpful links for further reading to further work with the data.

The Metrics data may be presented in any of the following supported formats

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

There are mandatory Built in Dashboard items and optionally Custom Dashboard items on the Dashboard.

Built in Dashboard items

Information from Monitor Views available for 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 on any part of the pie chart to open the list of matching Monitor Views.

Click the Customize button to present a modal with the option to view the current state from resources from chosen Monitor View.

2. Offline internal core services

If any of the built-in internal core services Monitoring Service or the Logging Service are offline/not available/stopped all users are notified on top of the dashboard that there is a problem that needs to be addressed by an Administrator.

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).

5. Statistics for Integrations

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

Statistics about the creation of Endpoints from within 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 type 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.

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.

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

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 us helpful for rendering simple number from ANY REST api. Use a jsonpath to extract value to be presented from the result.

Internal API

In this example, we will display the number of Log 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:

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!