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 |
|---|---|
 |
 |
Example of the 'out of the box' and customized Dashboard
What data can I put on the Dashboard?
Statistics and KPI data may stem from many different sources and below you will find many useful 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
- 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
- License issues
- Log Events per day
- 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.
6. Statistics for End Points
Statistics about the creation of Endpoints from within the Repository Model.
Custom Dashboard items
- Embedded Power BI Reports
- 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)
-
- Response-time for Web Services
-
- 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.
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 useful 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"> </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}}°C</div>
<div ng-show="gui.loading"> </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"> </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"> </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/2with 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
MonitorViewsin 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 of the Monitor View
Next Step
Related
Web Client
Administration
Repository Model
Logging Service
Users
Monitoring Service
Endpoints
Web API
Monitoring Agents