- 10 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

Example of the 'out of the box' and customized Dashboard

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

  1. Information from Monitor Views available for currently logged on User
  2. Offline internal core services
  3. License issues
  4. Log Events per day
  5. Statistics for Integrations in the Repository Model
  6. Statistics for Endpoints in the Repository Model

1. Monitor Views

Current state of available Monitor Views are presented in a pie chart. Click on any part of the pie chart to open the list of accordingly filtered Monitor Views.
monitorviews

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

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 will be notified on top in the dashboard that there is a problem that needs to be addressed by an Administrator.
offlineservices

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

5. Statistics for Integrations

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

6. Statistics for End Points

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

Custom Dashboard items

  1. Embedded Power BI Reports
  2. Metrics charts from Monitoring Agents
  3. Any embedded HTML Monitoring Agent Configuration

The following Metrics and type of graphs are available

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

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

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)

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

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

CPU Metrics Example below taken from the Windows Service Monitoring Agent metricshtml

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

External API

    <div class="card mb-3" ng-controller="customJsonCountController" ng-init="init('',{'title':'Karlstad (temp)',progressbar:true, refreshInterval:30, call:{ externalapi: 'http://temperatur.cider.cc/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 easily 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:

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

Dashboard on Monitor Views

  1. The HTML file must be named with the ID of the [Monitor View][Monitor Vies]

Next Step

Reports
Monitor Views

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