TBSM + JazzSM UI Services (DASH) Integration: Creating a Dashboard

Transcription

1 TBSM + JazzSM UI Services (DASH) Integration: Creating a Dashboard Version 1.1 September 13, 2013 Notices References in content to IBM products, software, programs, services or associated technologies do not imply that they will be available in all countries in which IBM operates. Content, including any plans contained in content, may change at any time at IBM's sole discretion, based on market opportunities or other factors, and is not intended to be a commitment to future content, including product or feature availability, in any way. Statements regarding IBM's future direction or intent are subject to change or withdrawal without notice and represent goals and objectives only. Please refer to the developerworks terms of use for more information.

2 Document Roadmap TBSM + JazzSM UI Services (DASH) Integration: Creating a Dashboard 1 Introduction IBM Jazz for Service Management (JazzSM) Reference Material Document Change History Dashboard Creation Overview Scenario and Goals Scenario Dashboard Desktop Browser Mobile ( ipad ) TBSM Service Model: edaytrader Data Templates Data Fetcher Sample Data Template Rules DASH: Where the Dashboard is Created and Viewed Scorecard Visualization Widgets Accessing the TBSM Service Model Data Dashboard Creation Process Folder Creation Eventual Result Page Creation Page Layout Page Editing Add the List Widget Configure the List Widget Dataset Selection Required Settings Configuration Optional Settings Configuration Add the Volume Bars Configure the Volume Bars Dataset Selection Required Settings Configuration Optional Settings Configuration Skin the Volume Bar Widget Transparent...34 Version 1.1 Page 2 of 47 9/15/2013

3 3.8 Add the Value Status Gauges Configure the Value Status Gauges Dataset Selection Required Settings Configuration Optional Settings Configuration Desktop Browser Support Check out the Page Interactions Mobile Device Support Make the Dashboard Available to Mobile Devices Test the Dashboard on Mobile Devices...47 Document Figures Figure 1 Our Goal: the edaytrader dashboard on a desktop browser...6 Figure 2 Same dashboard viewed on an ipad...7 Figure 3 - TBSM Service Model: AEDayTrader Template...9 Figure 4- EDayTraderData data fetcher...10 Figure 5- edaytrader sample data...10 Figure 6- Buy rule...11 Figure 7- AEdayTrader_ActiveUsersQuotes template...12 Figure 8- AEDayTrader_BuyAndSell Template...12 Version 1.1 Page 3 of 47 9/15/2013

4 1 Introduction This document provides step by step instructions for creating a high-level dashboard to visualize Tivoli Business Service Manager (TBSM) data using the dashboarding capabilities of JazzSM s UI Services (DASH). It is assumed that the reader has a working knowledge of TBSM including the process of building and maintaining a service model. A companion document, Creating a Drilldown Dashboard, shows how to enable a drilldown dashboard that displays additional relevant data. 1.1 IBM Jazz for Service Management (JazzSM) TBSM became a participant in a new deployment pattern and mechanism for providing shared components: Jazz for Service Management (JazzSM). It provides these independently deployable, shared services: UI Services (DASH) Reporting Services (Tivoli Common Reporting (TCR) ) Security Services (ESS for Single Sign-On Support for non-websphere applications) Registry Services (Provider and Resource Registries supporting OSLC / linked data) Administration Services (Configuration and Health Checking) JazzSM deploys the services used by TBSM. For TBSM 6.1.1, this is primarily the UI (for advanced dashboarding) and Registry Services (for Rich Hover data display). The Reporting and Security services are available for use as needed. TBSM reports may be deployed into the new TCR. The ESS component may be used for Single Sign-On support for non-websphere applications such as IBM Director. In order to meet client demand for UI enhancements as quickly as possible and to avoid requiring clients to migrate, TBSM continues to run its own dashboard (UI) server on the TIP 2.2 platform. The new custom dashboard capability is provided by adding a custom dashboard server based on UI Services. This custom dashboard server enables clients to create dashboards from reusable widgets connected to UI data providers from TBSM and Impact. Installation and use of the custom dashboard server is optional. This is a component architecture view of the deployment: The screen captures and widgets described in this document are based on UI Services They should be considered as representative and may not match your implementation (and are subject to change). Version 1.1 Page 4 of 47 9/15/2013

5 1.2 Reference Material The following links provide relevant background information. JazzSM Additional material is available on developerworks. An IBM ID is required to sign in UI Services (DASH) uid=26d4aa47-4fd6-460d-a93b-3ee d6 TBSM me.htm 2. See the Advanced Topics page on developerworks for more dashboard coverage including an Introduction to the TBSM UI Data Provider. ervice%20manager1/page/advanced%20topics 1.3 Document Change History Version Date Changes 1.1 9/13/2013 Update to reflect TBSM IF0003 and JazzSM 1.1 Fix Pack Original document generated during TBSM beta Version 1.1 Page 5 of 47 9/15/2013

6 2 Dashboard Creation Overview Building effective dashboards requires three important planning activities before beginning the mechanical process of building a dashboard. First, you must understand the user community the dashboard is targeted for and establish goals for what you want to convey to them through this dashboard. Second, you must understand the service data model that will be visualized on your dashboard and how it meets the goals you have established. Lastly, you must think about what types of visualizations (gauge, table, etc) are required and how they are organized on a page to effectively and efficiently communicate the goals. 2.1 Scenario and Goals For our purposes, we will be building a high-level dashboard for a line of business owner that visualizes the current status of the edaytrader application. This is a trading application hosted at five data centers across the United States: New York, Chicago, Dallas, Seattle, and Los Angeles. A dashboard will be built that gives the line of business owner a quick view of the overall status of the application in each data center along with some supporting key performance indicators (KPIs) to indicate the health of the different aspects of the application. The dashboard also needs to be viewable on a mobile tablet. 2.2 Scenario Dashboard Desktop Browser Figure 1 Our Goal: the edaytrader dashboard on a desktop browser Version 1.1 Page 6 of 47 9/15/2013

7 2.2.2 Mobile ( ipad ) Figure 2 Same dashboard viewed on an ipad Version 1.1 Page 7 of 47 9/15/2013

8 2.3 TBSM Service Model: edaytrader Data The data visualized on this dashboard comes from a small service model where each service represents the eday- Trader application at each of the data centers. A series of templates have been constructed in TBSM to surface the key performance indicators for each aspect of the service model. They are the following: AEDayTrader defines the overall status for the edaytrader service instance. The template also defines availability KPIs for the sub elements of the web application: Buy, Sell, Quote, Homepage, Login service, and Portfolio interface. The availability of these services determines the overall status of the application. AEDayTrader_ActiveUsersAndQuotes defines KPIs that show the active quotes in the system for VIP and all users. AEDayTrader_BuyAndSell defines KPIs that show the number of buy and sell transactions currently in the system for VIP and all users. AEDayTrader_Revenue defines KPIs that show the total and lost trade revenue for VIP and all users. AEDayTrader_TradePlatformPerf defines KPIs that show the latency of trades on the buy and sell queues for VIP and all users. The user of this document may either emulate the data described in this document or may substitute their own service model and metrics. The configuration of the service model and any metric data is done on the TBSM Dashboard Server. Version 1.1 Page 8 of 47 9/15/2013

9 2.3.1 Templates The following figure shows the service model as represented in the TBSM Service Tree (left) along with the primary AEDayTrader template definition (right). Figure 3 - TBSM Service Model: AEDayTrader Template Each data center service has been tagged with each of the templates shown above. The template rules are configured with data fetchers that read metric data from a DB2 database. This yields the KPIs for each location. From DASH, a TBSM dataset will be available for each template. Each dataset contains columns for each KPI defined by the template. These metrics are used in the widget configuration steps covered later in this document and eventually seen by the user of our dashboard. Version 1.1 Page 9 of 47 9/15/2013

10 2.3.2 Data Fetcher The following figure shows the EDayTraderData data fetcher. Figure 4- EDayTraderData data fetcher Sample Data The following figure shows the sample database for the dataset used in these examples. It is accessed by the EDay- TraderData data fetcher. Figure 5- edaytrader sample data Version 1.1 Page 10 of 47 9/15/2013

11 2.3.4 Template Rules The following figure shows the Buy rule which utilizes the EDayTraderData data fetcher. Figure 6- Buy rule Version 1.1 Page 11 of 47 9/15/2013

12 And here are two of the other templates. Figure 7- AEdayTrader_ActiveUsersQuotes template Figure 8- AEDayTrader_BuyAndSell Template Version 1.1 Page 12 of 47 9/15/2013

13 2.4 DASH: Where the Dashboard is Created and Viewed Scorecard Visualization Widgets We ll use these widgets to visualize data on our dashboard: List used to display the overall status of the data centers from the AEDayTrader dataset. When a row is selected, the widget sends a NodeClickedOn event to the other page widgets so that they can display the configured metric for the selected data center. Volume Bar used to display the availability metrics from the AEDayTrader dataset. Value Status Gauge used to display the remaining dashboard metrics. It visualizes a metric value along with a dynamic status shape and color based on configured thresholds. The dashboard is created when logged into the DASH server Accessing the TBSM Service Model Data Before we start creating the dashboard, we need to define a connection to the TBSM Service Model. This procedure is covered in the Using TBSM Service Model Data document found on the Advanced Topics page on developerworks. Version 1.1 Page 13 of 47 9/15/2013

14 3 Dashboard Creation Process TBSM + JazzSM UI Services (DASH) Integration: Creating a Dashboard 3.1 Folder Creation This optional step creates a custom page folder on the Navigation Bar to hold our page so that it is readily available. A folder is created with the following steps: Select the Console Settings task and choose Pages Version 1.1 Page 14 of 47 9/15/2013

15 Select the New Folder button Version 1.1 Page 15 of 47 9/15/2013

16 Create the folder by specifying a name, location, and folder icon then clicking Save. Note that the folder icon will not be present in the Navigation Bar until the folder contains a page Eventual Result After the following sections are completed, the Navigation Bar will include our folder and page: Version 1.1 Page 16 of 47 9/15/2013

17 3.2 Page Creation The next step is to create the page where the widgets will be assembled to create the dashboard. The Welcome page contains a large icon that can be used to begin the page creation process or the + icon can be clicked in the page bar. Version 1.1 Page 17 of 47 9/15/2013

18 The first step in page creation is to configure the Page Settings. Enter the name of the page. It does not need to be unique. Click the Location button to set the page s location to the folder created above. Use the Next and Previous Folder buttons to properly place the page in the destination folder Page Layout One of the most important decisions for any dashboard is which Page Layout should be used: Proportional this layout will scale the widgets up and down depending on the size of the rendering area (widgets will essentially occupy the same percentage of space assigned during the building process). It is important to make use of all the space on the page as any whitespace left during the building process will always be displayed. This type of layout is good for desktop since the resultant page will look the same relationally on different resolutions and browser sizes. It can also be effective for some mobile tablet applications if the widget density is not too large. Free Form this layout is pixel based. All widgets will occupy the same number of pixels and be located at the exact location that is assigned during the creation process. There is no scaling so the page will not change size as the screen resolution and browser size changes (this normally yields scrollbars on coarser screen resolutions). This layout is not recommended for mobile except where the dashboard size is built to match exactly the number of pixels on the intended device in a single orientation. Fluid this layout will tile the widgets on the page. As less horizontal space is available in the workspace, the widgets will be shifted down and to the left. This is a good layout for mobile (especially phones where space is at a premium). To avoid empty space in the fluid layout, it is recommended to give all the widgets the same height. The Proportional layout will be used for this dashboard since the widget density is small to medium and the page will be viewed on desktops and a tablet. The remaining page settings are optional and allow for the assignment of roles for users that have access to this page. Once, the settings are complete, click OK to begin page creation. Version 1.1 Page 18 of 47 9/15/2013

19 3.3 Page Editing Once the page settings are completed, the page opens in edit mode. You ll see the palette and layout grid. The palette is organized into catalogs and is searchable. The Dashboard Widgets catalog contains all of the widgets we ll be using for this dashboard; however many other widgets are available such as the Image, Charting, and Web widgets. When widgets are placed and sized they will snap to the grid making the layout easier. The grid by default is setup for five percent increments, but is configurable for 1, 5, or 10 percent values on the Layout pull down menu. The smaller values allow for finer widget positioning when overlaying widgets or placing them over a background image. Layout grid size adjustment Palette Widget catalogs Layout Grid Version 1.1 Page 19 of 47 9/15/2013

20 3.4 Add the List Widget The first widget placed on the page will be the list that will show the status of the edaytrader application at all of the different data centers. Double click Dashboard Widgets to display the contents of the catalog and drag the List widget on to the upper left corner of the page (the drag gesture will turn green when an acceptable drop location is hovered over). Version 1.1 Page 20 of 47 9/15/2013

21 The list will render with default size and data. Version 1.1 Page 21 of 47 9/15/2013

22 Click the widget border to enter resize/move mode so you can place and size the widget to the desired dimensions. Version 1.1 Page 22 of 47 9/15/2013

23 3.5 Configure the List Widget Once the List widget has been properly sized, it needs to be configured to display the status data for each data center. The List is configured by selecting Edit from the pull down menu on the widget title bar. Note that the same options are also available from the Widget pull down menu above the catalog. You ll need to use this if the widget title bar is hidden. This will launch the List configuration wizard. Version 1.1 Page 23 of 47 9/15/2013

24 3.5.1 Dataset Selection The first panel of the List configuration wizard is the dataset selection screen allowing the user to search for any dataset known to the system. Our dashboard requires the dataset corresponding to the AEDayTrader template. Enter AEDayTrader into the search field and click on Search. This will display the set of all matching datasets. The datasets may be listed multiple times since TBSM will surface a given template as a dataset under both the TBSM Primary Templates data source and the TBSM Templates data source the primary template dataset would only contain services where this template is the primary and would contain the superset of columns for secondary datasets. All services in the edaytrader dashboard sample are tagged by the same templates and all have the same primary template. The primary template dataset could be used to obtain all metrics (this is not indicative of production service models) or the template datasets could be used individually for each respective metric. This example will use the primary template dataset for the List, but the template datasets for all other widgets (for demonstration purposes and to be more closely aligned with a production environment). Select the AEDayTrader dataset from the TBSM Primary Templates data source. This will advance the wizard to the Visualization Settings configuration panel. Version 1.1 Page 24 of 47 9/15/2013

25 3.5.2 Required Settings Configuration The required settings will be automatically expanded and allow the configuration of the dataset columns that are assigned to each aspect of the List. Use the pull-downs to configure the settings as follows: Label required: select the Display Name column (service instance display name) Status required: select the TBSM Status column (service instance overall status) Description optional: select the Description column (service instance description) Timestamp required: leave as None since there are no time values in the TBSM service model Version 1.1 Page 25 of 47 9/15/2013

26 3.5.3 Optional Settings Configuration Click on Optional Settings to expand that section. Enter a title in the entry field; select TBSM Status for the Sort By Attribute, and select descending for the Sort Order (this will place all Critical services at the top of the list). Since all services in the dataset should be displayed, the optional dataset parameters are left blank. This ensures that the list contains all of the data centers. Click OK to save the configuration. Version 1.1 Page 26 of 47 9/15/2013

27 The List now renders with the configured data and visualization options. Version 1.1 Page 27 of 47 9/15/2013

28 3.6 Add the Volume Bars The next step is to add and configure the volume bars to represent the availability metrics from the AEDayTrader template. Use the same drag and drop process used for the List widget and size the Volume Bar widgets accordingly. When complete, the six Volume Bar widgets (one for each metric) will be laid out in two columns each containing 3 widgets. Version 1.1 Page 28 of 47 9/15/2013

29 3.7 Configure the Volume Bars Once the Volume Bar widget has been properly sized, it needs to be configured to use the edaytrader dataset from the UI Data Provider to show the availability metrics for a data center. Launch the Volume Bar configuration wizard by selecting Edit from the pull down menu on the widget title bar Dataset Selection Enter AEDayTrader into the search field and click on Search. For the remainder of widget configurations, the datasets from the TBSM Templates data source will be used. Select the AEDayTrader dataset. This will advance the wizard to the Visualization Settings configuration panel. Version 1.1 Page 29 of 47 9/15/2013

30 3.7.2 Required Settings Configuration Use the pull down to assign the Homepage metric to the Value attribute Version 1.1 Page 30 of 47 9/15/2013

31 3.7.3 Optional Settings Configuration Click on Optional Settings to expand that section. Enter Homepage as the title in the entry field. The Labels are not used for this configuration. The defaults will be taken for all the rendering characteristics (minimum and maximum values, etc). Customization of the minimum and maximum values may be required depending upon the range of the metric being visualized, but since the Homepage metric is a percentage the default values are OK. Version 1.1 Page 31 of 47 9/15/2013

32 The widget will be configured with thresholds so that the bar changes color depending upon the availability metric value. Since availability metric status is considered worse as the value declines, the thresholds will be configured such that higher values are normal and lower values are critical (this is opposite from metrics like CPU or disk space). Additionally, the entire value spectrum must be covered so that the entire range of 0 to 100 percent can be assigned a status. Configure the thresholds as follows: Normal 98 (98-100) Minor 95 (95-98) Critical 0 (0-95) Check the Show Threshold Strip so that the above ranges are actually displayed on the widget. Version 1.1 Page 32 of 47 9/15/2013

33 The Volume Bar will render empty initially unless it is configured with a specific service context. The dashboard will be configured to initially show the values for the New York service when the page is opened. The TBSM datasets support parameters that allow for the selection of a particular service in a dataset by service instance name (not the display name). Enter New York in the TBSM Service entry field under the Configure Optional Dataset Parameters section. Be careful, this is case sensitive! Click OK to save the configuration. Version 1.1 Page 33 of 47 9/15/2013

34 The Volume Bar widget now renders with the value of the New York service Skin the Volume Bar Widget Transparent A transparent look is desired for the volume bar so the widget will be configured to use a transparent skin. Select Skin -> Transparent from the pull down menu on the widget title bar. This option hides the widget s border and yields a cleaner look. The same options are available here too. They must be used when skinned for no title Version 1.1 Page 34 of 47 9/15/2013

35 Repeat the Volume Bar configuration process for the other 5 availability metrics of the AEDayTrader template: Buy, Login, Sell, Quote, and Portfolio. Version 1.1 Page 35 of 47 9/15/2013

36 3.8 Add the Value Status Gauges The next step is to add and configure the Value Status Gauges to visualize the remaining KPIs for the service. Use the same drag and drop process used for the previous widgets and size the Value Status Gauges accordingly. When complete, the eight Value Status Gauge Bar widgets (one for each metric) will be laid out across the bottom of the dashboard in two rows. 3.9 Configure the Value Status Gauges Once the Value Status Gauge widget has been properly sized, it needs to be configured to use the eday- Trader_BuyAndSell dataset from the UI Data Provider to show these particular metrics for a data center. The remaining visualized KPIs will come from the remaining templates that compute different performance metrics about the edaytrader service. Launch the Value Status Gauge configuration wizard by selecting Edit from the pull down menu on the widget title bar. Version 1.1 Page 36 of 47 9/15/2013

37 3.9.1 Dataset Selection Enter AEDayTrader_buy into the search field and click on Search. Select the AEDayTrader_BuyAndSell dataset from the TBSM Templates datasource. This will advance the wizard to the Visualization Settings configuration panel. Version 1.1 Page 37 of 47 9/15/2013

38 3.9.2 Required Settings Configuration Use the pull down to configure the Value attribute to display the AllBuy metric. Version 1.1 Page 38 of 47 9/15/2013

39 3.9.3 Optional Settings Configuration Click on Optional Settings to expand that section. Enter Buy Orders in the Title entry field. The widget will be configured with thresholds so that the shape and color of the gauge change depending upon the current metric value. Configure the thresholds as follows: Normal 0 Minor 75 Critical 100 Version 1.1 Page 39 of 47 9/15/2013

40 The Value Status Gauge will render empty unless it is configured with a service context. As before, we ll configure these widgets to show the value for the New York service when the page opens. Enter New York in the TBSM Service entry field under the Configure Optional Dataset Parameters section. Click OK to save the configuration. Version 1.1 Page 40 of 47 9/15/2013

41 The Value Status Gauge widget now renders with the values for the New York service. Skin the Value Status Gauge to transparent using the same steps used for the Volume Bar. Repeat the Value Status Gauge configuration process for the following metrics to complete the dashboard: AEDayTrader_BuyAndSell dataset AllSell metric AEDayTrader_ActiveUsersQuotes dataset AllActive and AllQuotes metrics AEDayTrader_TradePlatformPerf dataset BuyQueue and SellQueue metrics AEDayTrader_Revenue dataset ClientTotal and ClientLost metrics The revenue metrics should stand out, so their thresholds are configured differently than the other metrics. The ClientTotal metric gauge is configured to have an Informational threshold of zero (no other thresholds were set) which hard codes the gauge with an informational (blue) rendering. Likewise, the ClientLost metric gauge is configured to have a Critical threshold of zero to hard code this gauge with a critical (red) rendering (since all lost revenue is considered bad ). Version 1.1 Page 41 of 47 9/15/2013

42 3.10 Desktop Browser Support Check out the Page Interactions While the page is being built, DASH automatically maintains the NodeClickedOn event wiring between its widgets. The List widget is setup to publish NodeClickedOn events All of the Volume Bar and Status Value Gauge widgets are setup to subscribe to NodeClickedOn events This means that when a service in the List widget is clicked, all of the other widgets on the page automatically update to show the values for the clicked service. This default behavior is just what we want! Remember how we set all of the scalar widgets to display the current value for the New York site during widget configuration? This means that when the scorecard opens, all of the scalar widgets display New York s value. If we click on Los Angeles, all of the widgets update to display its value. Version 1.1 Page 42 of 47 9/15/2013

43 3.11 Mobile Device Support Make the Dashboard Available to Mobile Devices Now that the dashboard is complete, the last step is to make it available for mobile access. This is done by creating a View that is marked as a mobile view and adding the dashboard page as a member of the view. Click Views on the Console Settings menu to launch the Views task. Version 1.1 Page 43 of 47 9/15/2013

44 Click the New button to begin the process of creating a new view. Version 1.1 Page 44 of 47 9/15/2013

45 Enter the view name and check the Enable for Mobile check box. Make sure that the proper roles are assigned to the view. Expand the Roles with Access to This View section and add roles as required for the users that should have access to the view. Version 1.1 Page 45 of 47 9/15/2013

46 Expand the Pages in This View section. Click the Add button to show the Available Pages list. Version 1.1 Page 46 of 47 9/15/2013

47 Locate our dashboard page (expand the edaytrader Dashboards folder). Select it by clicking the Select column and click Add. The folder can be added as well, however when new pages are added to the folder they must still be added to the view by returning to this screen. Click the Save button. The dashboard will now be available on the task list of mobile devices that access the DASH server. The same URL is used to access the server from both desktop and mobile browsers. DASH will detect a mobile device and will present the mobile version of the Welcome page and task list Test the Dashboard on Mobile Devices Try the dashboard page on intended target mobile device(s). Verify the widget sizes, layout, etc. Adjust size and/or re-position as needed Does clicking on a service in the List widget update the content of the other page widgets? Change the page orientation. Does it render OK in both vertical and horizontal mode? Version 1.1 Page 47 of 47 9/15/2013