Creating the "BSM Dashboard" using Custom Canvas Technology - BSM Solution Development Series and Demo Development
dmcclure 0600011K8N Visits (10934)
We’re now at a point where we can begin to bring the “BSM Dashboard” to life using TBSM’s real time state, status, metrics and KPIs. In this blog post we’ll walk through the steps required to turn our “BSM Dashboard” mockup into an actual “BSM Dashboard” template that will be loaded into TBSM and the process to use state driven icons to represent status in a more appealing manner than generic TBSM status shapes.
Open the BSM Dashboard Mockup Visio package I previously provided and remove the mockup placeholders from the areas circled below. Save the updated mockup as a PNG, JPG or GIF and prepare to upload to the TBSM Dashboard server.
The dashboard template must be uploaded to the directory location is shown below. I’ve created a sub-directory for the purposes of organizing the images used in this demo. Creating a sub-directory can also be very useful in being able to identify content for backup, export and import from one environment or system to another.
From within the Service Navigation topology, navigate to the Online Sales Application instance and click on it. This will refresh the Service Editor panel on the right side placing you in the “Edit Service” tab. Click on the “View Service” tab to display the structure model and menus.
At this point we’re going to create a new custom canvas that will be “anchored” to the Online Sales Application instance. It’s important to note that by default this custom canvas dashboard will be only available to the user who created it. In this case ‘tbsmadmin’ will be the only user who can see it. This is controlled first by the roles assigned to the user and the user’s preferences. There are two options – “Save Canvas as User” and “Save Canvas as Group” (group name). If you are designing a dashboard that will be for a group of users, you need to be a member of that group when creating the dashboard. If you aren’t, then you’ll have to move files around in the artifact repository so those group members can see the dashboard.
To begin creating the custom canvas dashboard, click on the “Create Custom Canvas” icon. When in the custom canvas edit mode the screen will update with a new panel containing various elements that can be placed on a custom canvas dashboard as shown below.
Upon entering the custom canvas edit mode a snapshot of the structure model is taken. Since we’ll be using a dashboard template as the key element of the “BSM Dashboard” we need to delete all of the structure model elements. To quickly delete these instances, select one towards the top of the model and navigate to “Edit” and select “Delete” or just simply hit the “Delete” key. Repeat this process until all of the instances are gone.
With a blank canvas to work with we can lay down the dashboard template uploaded previously. Navigate to the “Decorations” tab within the left side panel. You may need to expand this section to reveal the “Decorations” tab. Locate the IBM logo representing a “Basic Image” decoration. Click, drag and drop on the blank canvas to the right.
The “Basic Image” decoration must now be configured to point to the dashboard template image. This is accomplished through the use of the Inspector. To launch the Inspector, select “View” and click on “Inspector”. When the Inspector is launched it will likely be blank. This is due to some Java / windowing weirdness where it appears that the context of what was selected to show in the Inspector is lost.
To regain context for the “Basic Image” in the Inspector, move back to the canvas window and click on the IBM logo to select. Now, alt-tab back to the Inspector window which should be populated with the “Basic Image’s” configuration properties.
The key properties to configure are the path to the dashboard template image and to delete the display name and tool tip for the basic image decoration. There isn’t a save button here so simply clicking in another property cell in the Inspector will set the changes and you can manually close the Inspector window.
Upon closing the Inspector you should now see the dashboard template within the canvas window. The last step before saving is to send the dashboard image to the back so we don’t lose any indicators behind the image. With the dashboard image selected, navigate to the “Edit” menu option and click on “Send to Back”. Click the save icon so save the canvas.
With our “BSM Dashboard” template in place we can now add the dynamic indicators to the canvas. One of the unique (undocumented) techniques we will be using will be custom SVG icons in the place of the default status shapes available with TBSM. The beauty of the “SVG Image” indicator’s status rendering capability is that it allows for virtually any visualization to be used to reflect the state, status or other context needed within the “BSM Dashboard”. There are a number of SVG icons within TBSM that can be used or you can simply upload any SVG you have and use that. In our demo we’ll use the standard Tivoli status icon shapes that are available within the TBSM SVG icons directory. (see picture below)
Within TBSM there are only three unique states to represent the status of something – Critical/Red/”5”, Marginal/Yellow/”3” and Normal/Green/”0”. You can use custom formula policies internal to TBSM to generate other state and status levels for a specific rule associated with an instance and then simply use the SVG Image to map in a different visualization indicator to reflect that status, severity, scope, impact or similar.
I recommend using directional arrows such as these examples below to provide a simple means for an end user to interpret a metric or KPI’s point in time value. This is very useful to help them understand the current real time metric or KPI and then gain the context that things are “getting better” or “getting worse” without needing to show a graph or chart over time. Another technique is to use weather icons or similar (smiley faces -> angry faces) to show the transitional phases of state or status for something.
The magic with this special SVG Image feature comes from a custom CSS configuration that overrides the visual representation properties of the “SVG Image” decoration based on changes in the Over
With the additions in place and the TBSM Dashboard server back online we can begin the process of adding our custom indicators to the dashboard template. We need to go back into the edit mode for the canvas by clicking the edit icon labeled “Pallette”.
Navigate back to the Decorations tab and find the “SVG Image” indicator. Click, drag and drop the indicator on the canvas in the general area of the Web Tier technology group under the NA column.
After placing the decoration on the canvas a pop up window will appear which is used to configure the indicator. The first step in the configuration is to select the specific service instance that this indicator will be used with. We’re starting with the indicator representing the Web Tier within the North American (NA) datacenter. Expand the service tree and click on the Online Sales Web Servers instance within the USA Datacenter. Click “Next” to advance.
After selecting the service instance we need to complete the
configuration for the indicator. To allow for this configuration we need to set
the SVG Image’s “Render as” option to use be controlled based upon the state
Generally the indicator won’t show up until the canvas is saved. You may need to save and come back into the edit mode to see the actual shape. The next steps are to resize the icon as needed to fit the dashboard template design. The icon has various properties available via the Inspector we used in our first steps above. Open the Inspector for the SVG Image indicator and make the appropriate configurations as shown below.
Repeat this process for the remaining indicators associated with the Technology section of our “BSM Dashboard”.
Repeat the process for the Online Order Performance indicators representing the six geographic regions in our “BSM Dashboard”.
Save the canvas and review the overall layout, look and feel. Make any adjustments needed.
We’ve now completed one of the key fundamental “BSM Dashboard” development activities. This process can be repeated for all of the other status indicators, metrics and KPIs as you desire. The processes are nearly the same while each indicator has slightly different properties available for customizing. Unfortunately the documentation for these indicators is not the greatest so some trial and error or asking in our TBSM community may be best.
Over the next few posts I will describe the process for designing and implementing the following key components of the BSM Solution and the "BSM Dashboard".