New SCOM Web Console – Blog series (Post 3/5): The new HTML5 Widgets
Published Feb 16 2019 04:37 AM 4,932 Views
First published on TECHNET on Feb 12, 2018

About


This blog aims at introducing the all new HTML5 based widgets added as part of the new dashboards with  . For details on implementation and other parameters please refer to the detailed documentation .
After going through this blog a user would:

  • Understand what are all the new widgets

  • Learn about the different widget actions


It is highly recommended to read the previous blog in this series for better understanding.

The new HTML5 Widgets


There are a total of 6 widgets that are shipped with SCOM 1801 :

  • Alert Widget

  • State Widget

  • Performance Widget

  • Topology Widget

  • Tile Widget

  • Custom Widget


These widgets are designed to be fast and robust. It's quick to load, unlike Silverlight. The widgets support a high level of customization to ensure that they can be used effectively by one and all.
One important thing to note is that the data refresh for these widgets happens in the background at the defined interval (or you can do a force refresh). This way you always have some data to work on while the new chunk is being fetched in the background. Thus, the widgets and the dashboard in general feels a lot more responsive.

Widgets are stored in the management packs as views. Below is a snippet from a management pack containing a "Tile widget"



Note the TypeID. This is a new TypeID introduced for HTML widgets.

Types of Widgets


Alert Widget


This widget displays the list of alerts for a given criteria. Refer to the authoring parameters section below to learn more about the customizations that can be done.

Authoring Parameters


When you start off with the authoring for alert widgets you’d see something like this:


As clear from above there are 4 sections at high level:
Scope
In this section you can define the groups/objects to which this widget is to be targeted. For ex. If you enter “All Windows Computers” then this widget would show the alerts targeted to “All Windows Computers”.
Criteria


Here you can filter alerts based on their severity, priority, resolution state and age.
Take note of the age parameter. At times you might get better performance out of this widget if you select a suitable value for the age parameter.
Display


Here you can select what all columns you wish to see in the widget. Additionally you may select a column with which you wish to group the alerts.
Completion


Finally you give the widget a name and description and you’re done!

Optionally you may specify the refresh interval (minimum value 1 minute) in which the widget would refresh its data.

Actions


Alert widget supports the following actions:


Setting resolution state
You can select one or more alerts and select this action. Once selected it’d open the right pane where you set the state and give an optional comment.


Exporting to Excel
The data shown in the widget can be exported in excel format. This helps when you wish to do any custom analysis on the data by leveraging the power of Excel.
Personalization
Widgets can be personalized for each user. Each user can select the column they wish to see and the grouping they wish to apply. In other words “Personalization” is like the “Display” section shown in authoring.
Note: The selection made in “Personalization” would always overwrite the selection made in the “Display” section. Also note that personalization data is stored in the browser in the current system and thus if you switch browsers or machine
then you’d have to re-personalize the widgets.


Edit & Delete Widget
As the name suggests you can edit and delete this widget from a dashboard. Note: This action is permanent and all the users having access to these dashboards would be affected by it.

State Widget


The state widget displays the health state information about the targeted entities satisfying a particular criterion. Refer to the authoring parameters section below to learn more about the customizations that can be done on this widget.

Authoring Parameters


When you start off with the authoring for state widgets you’d see something like this:


As clear from above there are 4 sections at high level:
Scope
In this section you can define the groups/objects to which this widget is to be targeted. For ex. If you enter “All Windows Computers” then this widget would show the health state information targeted to “All Windows Computers”.
There is another required parameter, class.
You also have the option here to get the health state of the group or the entities contained in that group which are the individual objects.
Criteria


Here you can set the filter to see the entities only in particular health states.
Display & Completion
Display and completion section of the state widget is similar to that of Alert Widget except for one difference. The display columns for the state widget are defined as per the “class” selected in the Scope section whereas the alert widget has fixed display columns.

Actions


State widget supports the following actions:



All of these are exactly similar to what has been defined for alert widget above.

Performance Widget


The performance widget displays the information about the different counters associated with the entity. Refer to the authoring parameters section below to learn more about the customizations that can be done on this widget.

Authoring Parameters


When you start off with the authoring for performance widgets you’d see something like this:


As clear from above there are 5 sections at high level:
Scope
In this section you can define the groups/objects to which this widget is to be targeted. For ex. If you enter “All Windows Computers” then this widget would show the health state information targeted to “All Windows Computers”.
Metrics
Here you can select the object, counter and instance triplet whose data would be displayed in the widget.


Criteria
Here you can specify the age of data that you are interested in.


Display


This section is important. If you wish to visualize the widget with a graph then the above act as legend columns. If you wish to only see these columns then you can check “Visualize objects by performance”. Then you’d only see the table without the graph.
Completion
This section is similar to Alert widget.

Actions


Performance widget supports the following actions:



All of these are exactly similar to what has been defined for alert widget above except for “Set Vertical Axis”. With this action you can specify a range and the graph is scoped to that. This is useful when you are trying to drilldown on particular events. This is how it looks like:


Topology Widget


Have a Visio or other image of your IT topology? Wish there was a way to map the health states to these entities? Then topology widget is what you are looking for. Refer to the authoring parameters section below to learn more about the customizations that can be done on this widget.

Authoring Parameters



As clear from above there are 3 sections at high level:
Scope
This is exactly similar as State Widget.
Display
This is the section where you upload and select your IT topology image:


Completion
Similar to State Widget.

Actions


When a topology widget is created, you’d see all the health icons placed at the top left corner. Drag the icons and place them at relevant places on the image and hit save once you are done. Below image shows an example of how  it works.



Apart from this, the topology widget supports the standard edit and delete widget actions.

Tile Widget


Need a quick way to investigate the health of an entity and the current alerts generated on it? Tile widget is the answer for you. This is the smallest widget (size wise) in the dashboard. Below is a sample tile widget:



As can be seen clearly, the current health state of “All Windows Computers” group is Warning state. This is because the availability monitor is in warning state resulting in the health rollup.

Authoring Parameters


The authoring for tile widget is very straightforward and is like a subset of “Alert Widget” as can be seen in the image below:


Actions


Apart from edit and delete widget the user can launch the health explorer for the target entity from topology widget. Isn’t that cool? :smiling_face_with_smiling_eyes:



Use the health explorer to dig down further on the health state of the entity and its monitors

Custom Widget


SCOM 1801 release marks the inception of REST based APIs to fetch SCOM data thus giving birth to custom widget. With custom widget, you could bring in any custom html code and it’d get rendered as a widget which could then reside with other widgets in the dashboard. This brings in a whole new strength to the dashboards since the power to manipulate and render the data is completely up to you. For sample scripts to talk to REST APIs, please visit the official documentation here .

Below is a diagram to show how custom widget works:



For details about SCOM REST APIs visit here <<Insert link to SCOM REST APIs>>. Below is a screenshot showing custom widget in action:

Authoring Parameters


The authoring of custom widget is straightforward and requires just an HTML source code. Note if you have any JavaScript (which you most probably would have) you’ll have to insert it inline with the HTML code. Below is a screenshot taken while authoring custom widget with a basic HTML code:


Below is an image taken from the detailed documentation :




Can you figure out which are the custom widgets above? If your answer is no, then that’s exactly how we intended it to be! The custom widget simply blends with other widgets in the dashboard and once created acts no differently from the other widgets. Well, if your answer was yes then we’ve got to give it to you, you are really insightful :smiling_face_with_smiling_eyes:

Actions


Custom widget supports the basic edit and delete widget actions. But this in no way limits you to innovate! You can define and design custom actions for your custom widgets which could then reside in the widget container. The limit here is just your imagination!

Recommended Next: New SCOM Web Console – Blog series (Post 4/5): The all new Drilldown experience

1 Comment
Copper Contributor

Can we create a Geographical Map widget using the topology widget? 

Version history
Last update:
‎Mar 11 2019 10:37 AM
Updated by: