...
Table of Contents | ||
---|---|---|
|
...
Anchor | ||||
---|---|---|---|---|
|
Panel | ||||
---|---|---|---|---|
| ||||
The following applies to XperienCentral versions R24.1 and higher. |
In the wm-addon-monitoring
Git repository you can find sample code that shows how to develop your own dashboard plugin. This demo code is located in the wmaxmfdashboardplugindemo
folder. This code (mainly written in Angular Typescript) will, when deployed,show up as a separate tab in the Monitoring Dashboard. You can use this project to get started creating your own plugin(s).
- The main
pom.xml
of the bunde contains all the logic needed to build the Angular code for your plugin. It is a variant on the code that can be found in other bundles that use Angular-based code.
The code in the bundle is split into separate Java and an Angular parts:
- The Java part that implements the
XMFDashboardPluginsProvider
interface via the OSGI Activator. - The Angular part that implements an Angular library that can be loaded at runtime.
Java XMFDashboardPluginsProvider
This class implements the getDashboardPlugins()
method that is called to by the monitoring framework on bundle load to determine which dashboard plugin(s) are contained within the bundle and how to load them correctly. The following information about the dashboard plugin has to be supplied here:
jsresource
— The full filename (including path) of the Angular library Javascript resource that is built.exportedModule
— The module name that this library exports as a bootstrap (case-sensitive).routedpath
— The path under which the the Angular router should add the dashboard plugin in the main menu of the Monitoring Dashboard. Note that no conflicting paths are allowed so be sure to use an exclusive name for your plugin.translationPath
— The path where i18n JSON files for the ngx-translate mechanism are located. These translation files can be used for static translations in the tab you add.menuNames
— A set of names for your dashboard plugins, one for each locale you support (typicallyen_US
, andnl_NL
).menuIcon
— The icon to display in the main menu of the Monitoring Dashboard. It is the technical name of the Google material icon to use.
Angular Library
The project for the Angular library that makes up the visual part of the plugin is a standard Angular library that can be created via the Angular CLI (see https://angular.io/guide/creating-libraries).
It consists of
- One module that ensures static translations via ngx-translate can be accessed (in the demo:
demoplugin.module.ts
). - One main component that is rendered by Angular as the content of your added tab in the dashboard (the demoplugin.component in the example).
In the main component you can add new custom indicators.
Generic code for the Monitoring Dashboard is located in the xmfdashboardframework
package (version 1.0.1) which is installed via npm (the package is published on our local Nexus server). When changes in the generic code are required, this should be done in the xmfdashboardframework
package and the build result should be published to NPM with a new version number. Normally this should not be required in order to create a plugin for the Monitoring Dashboard.
Two indicators are added by the example (http-backend-request-multinode-card and clusterinfo-card) which shows you how you could create indicator cards.
All the indicator cards are developed in the Angular Material style for the cards themselves, Angular Flex layout is used to place them on the canvas (see https://material.angular.io/ and https://github.com/angular/flex-layout). Please note since you are developing in an Angular library that is loaded at run-time by the main Monitoring Dashboard panel, you do not have the freedom to import anything from the npm. The main dashboard must be able to resolve the imports required. The following are supported:
'@angular/core' '@angular/common' '@angular/router' '@angular/flex-layout' '@angular/material' '@ngx-translate/core' '@angular/cdk/overlay' '@angular/common/http' 'ngx-cookie-service' 'rxjs' 'rxjs/operators' 'chart.js' 'ng2-charts' '@ngx-translate/http-loader'
'xmfdashboardframework'
Translation files for ngx-translate should be added under the assets folder (in the demo found under project/demoplugin/assets
).
REST Services
The following REST services are offered by the xmfdashboardframework
:
ClusterEventRestService
— Retrieves the available cluster nodes in the installation.IndicatorSetRestService
— Retrieves indicator sets and the measured values in these sets as offered by thexmfframework
.IndicatorSetConfigurationRestService
— Retrieves and updates the configuration parameters of indicator sets as offered by thexmfframework
.LocaleRestService
— Retrieves the current locale in the edit environment.WebsitesRestService
— Retrieves the available websites in the installation.
Components
The following Angular/web-components are offered by the xmfdashboardframework
:
AbstractMultiValueCard
— The base-class that implements a basic pattern for handling indicator dataDoughnutGraphComponent (xmf-doughnut-graph
) — Used to draw a doughnut graphPieGraphComponent
(xmf-pie-graph
) — Used to draw a pie graphIndicatorCardContentComponent (xmf-indicatorcard-content
) —Used as a wrapper for the actual card content with a conforming height and look-and-feelIndicatorCardHeaderComponent
(xmf-indicatorcard-header
) —Used as the default header for a card showing settings and refresh iconsMultiValueCardComponent (xmf-multivalue-card
) — Used to display a default styled card with a row or column of indicatorsMultiValueContentComponent (xmf-multivalue-content
) —Used to display a row or column of indicatorsSingleValueContentComponent
(xmf-singlevalue-content
) —Used to display a single indicators
When developing a new card the following pattern can be followed. This is a class that implements the data layer of the indicator set to be visualized and it extends AbstractMultiValueCard:
<mat-card>
<xmf-indicatorcard-header></xmf-indicatorcard-header>
<xmf-indicatorcard-content>
<Specific content of the card>
</xmf-indicatorcard-content>
</mat-card>
In the wmaxmfdashboard
main dashboard, several examples can be found on how to use the xmfdashboardframework
.
Developing Your Own Indicators
The explanation above only describes how to create a Monitoring Dashboard plugin but does not cover how to develop your own indicator set(s). That is done entirely in Java. See the wmaxmfindicators
bundle for an example of how to create your own custom indicators. As a starting point you should implement an XMFIndicatorProvider
that enables the registration of your custom indicators. See the file DefaultIndicatorsServiceImpl.java
in wmaxmfindicators
. Refer to the Javadoc for wmaxmfapi
in the wm-addon-monitoring
package for the interfaces offered by the framework.
...
Custom Media Items and the Is Used in Widget
Anchor | ||||
---|---|---|---|---|
|
...