Build highly effective dashboards with Microsoft System Center 2016 Operations Manager

Objective

The steps that you will walkthrough in this lab area as follows:

1. Create a new dashboard with a State Tiles Widget for specific computers.
2. Add a PowerShell Grid Widget to display health of objects related to the objects in the selected tile.
3. Create a simple web form and display results in PowerShell Web Browser Widget.
4. Modify script in PowerShell Web Browser to display an existing web form listing objects related to object in selected widget.
5. Modify web form to list objects related to object in selected widget, and change script to view new form.
6. Modify web form to display results in a table.
7. Modify web form to display a heat map instead of a table.
8. Modify web form to display object when tile in heat map is selected.
9. Modify web form to display context menu when tile in heat map is selected.

Scenario

Virtual Machines

1. SCOM 2012 R2
2. SCOM Client

Exercise 1 : Create dashboard

You will start by creating the dashboard and adding a State Tiles widget for two computers in the lab.  This is a dashboard called Lab Dashboard with a column layout and a single column.

1. Log on to lab computer
    Log on to SCOMCLIENT with the following credentials:
   
   User: scomuser
   Password:  Pa$$w0rd
2. Open the Operations Console
   Open the Operations Console.
3. Open Visual Studio
   Open Visual Studio.
4. From the Operations Console
   From the Operations Console, right click Monitoring and select New > Dashboard View.
5. Select Column Layout. Click Next
   Select Column Layout.  Click Next.
6. For Name, type Lab Dashboard
   For Name, type Lab Dashboard.  Click Next.
7. For Column Count
   For Column Count, select 1. Click Next.
8. Click Create
   Click Create.

Click Continue to advance to the next exercise.

Exercise 2 : Add State Tiles Widget and PowerShell Grid Widget

You will now add a State Tiles Widget to the dashboard for the two computers in the lab environment and then a PowerShell Grid widget that lists the related objects when a tile is selected.

1. Add State Tiles widget
   Add State Tiles widget.
   
   a.       In the dashboard, click Click to add widget.
   
   b.       In the New Dashboard and Widget Wizard, select the options in the following table:
   
   Please click on the camera icon on the lower left hand side to view the screenshot.
   
2. Add the PowerShell Grid Widget
   Add the PowerShell Grid Widget.
   
   a.       Select the gear icon for the dashboard and select Add Cell.
   
   b.       In the new cell, click Click to add widget.
   
   c.        In the New Dashboard and Widget Wizard, select the options in the following table:
   
   Please click on the camera icon on the lower left hand side to view the screenshot.
   
   
   
3. Select each of the tiles in the Objects
   Select each of the tiles in the Objects and verify that the list of related objects are displayed in the Related Objects cell.

Click Continue to advance to the next exercise.

Exercise 3 : Create Basic Web Project

You will now create a basic web project that displays Hello Web Server to the browser.  After completing the project, you will publish it to the web server where it can be requested from a PowerShell Web Browser Widget and displayed in the Operations Console.  You will later modify this project to provide detail of monitored objects.

Note that you do not have to create a web site to host the project.  A site called Labweb is already created on SCOMSERVER.CONTOSO.COM.

1. Create the project
   Create the project.
   
   a.       In Visual Studio, select File > New > Project.
   
   b.       Select Templates > Visual C# > Web.
   
   c.        Create the project using the following options:
   
   Please click on the camera icon on the lower left hand side to view the screenshot.
   
   d.       When prompted, select Empty template and click OK.
   
2. Open the Solutions Explorer
   Open the Solutions Explorer, select View > Solution Explorer.
3. Create a web form in the project
   Create a web form in the project.
   
   a.       When the project has been created, right click the DashboardView project.   And select Add > Web Form.
   
   b.       Name the form View and click OK.
   
   c.        Within the 
   

    tags, type Hello from web server as shown in C:\Lab\Code\View01.aspx.
   
   d.       Select File > Save View.aspx.
4. Build and publish the project
   Build and publish the project.
   
   a.       Select Build > Build Solution.
   
   b.       Select Build > Publish DashboardView.
   
   c.        Click down arrow and select .
   
   d.       Name the profile SCOM and click OK.
   
   e.       Provide the following information and click Publish.
   
   Please click on the camera icon on the lower left hand side to view the screenshot.
   
5. Test the web form in a browser
   Test the web form in a browser.
   
   a.       Open a web browser and type in the address http://scomserver/labweb/view.aspx.
   
   b.       Verify that Hello from web server is displayed in the browser.

Click Continue to advance to the next exercise.

Exercise 4 : Create PowerShell Web Browser Widget

Now that you have a working form, you will now add a PowerShell Web Browser Widget to the dashboard to display the output of that form in the Operations Console.  The widget will include a script that performs the web request. 

1. Select the gear icon
   In Operations Manager select the gear icon for the dashboard and select Add Cell.
2. In the new cell
   In the new cell, click Click to add widget.
3. In the New Dashboard and Widget Wizard
   In the New Dashboard and Widget Wizard, select the options in the following table:
   
   Please click on the camera icon on the lower left hand side to view the screenshot.
   
4. Verify that Hello from web server is displayed
   Verify that Hello from web server is displayed in the widget.

Click Continue to advance to the next exercise.

Exercise 5 : Change PowerShell Grid Widget to display data from selected object

While this shows that you can display the output of a web page with a widget, the information being displayed isn’t particularly interesting.  You will now change the script in the PowerShell Web Browser Widget to display a list of objects related to an object selected in the dashboard.  This is similar information that is already being displayed in the PowerShell Grid widget, but it is using code from the web server.

The web form that you are using in this step already exists in the lab environment.  If you want to look at the source code for this project, it is available in C:\Lab\SampleWeb.  You will be creating a similar web form in later steps.

1. Select the gear icon
   Select the gear icon for the View cell and select Configure.
2. Click Next
   Click Next.
3. Replace the script
   Replace the script with the contents of C:\Lab\Code\View02.ps1 and click Finish.
4. Select each of the tiles in the Objects
   Select each of the tiles in the Objects and verify that the list of related objects are displayed in the View cell.

Click Continue to advance to the next exercise.

Exercise 6 : Change Web Form to Display Script Results

You will now start modifying the simple web form that you created to display the same information as the completed web form that you just saw.  The first step is to accept data from the script and display a simple result.  This is only an initial step to show that the view can accept data from the script.  You will later modify the view to show details about these objects

The data from the script is sent to the web form is formatted as JSON, and you will need to deserialize it before you can use it.  You will create a class to represent the data once it has been deserialized.

1. Switch to Visual Studio
   Switch to Visual Studio.
2. Add a reference to System.Runtime.Serialization
   Add a reference to System.Runtime.Serialization for JSON serialization.
   
        a.  Right click References and select Add Reference.
   
        b.  Select System.Runtime.Serialization and click OK.
3. Add class to project to represent the object data
   Add class to project to represent the object data.
   
   a.  In Visual Studio, right click the DashboardView project. And select Add > Class.
   
   b.  Name the class Data.cs and click Add.
   
   c.  Add a using statement for System.Runtime.Serialization and the Data Members included in C:\Lab\Code\Data01.cs.
   
   d.  Select File > Save Data.cs.
4. Add code to the View to accept the object data
   Add code to the View to accept the object data from the PowerShell script and serialize it from JSON.
   
   a.  Expand View.aspx and open View.aspx.cs.
   
   b.  Add a using statement for System.Runtime.Serialization.Json and the code included in C:\Lab\Code\View01.aspx.cs.
   
   c.  Select File > Save View.aspx.cs.
5. Change the view to display
   Change the view to display the number of objects returned from the script. This is done using the Length property of the RequestData object that is defined in the code behind the form.
   
   a.  Open View.aspx.
   
   b.  Replace the body of the page with
   

   Related Objects [<%= RequestData.Length %>]

   .  This is shown in C:\Lab\Code\View02.aspx.
   
   c.  Select File > Save View.aspx.
6. Build and publish the project
   Build and publish the project.
   
   a.  Select Build > Build Solution.
   
   b.  Select Build > Publish DashboardView.
   
   c.  Click Publish.
7. Change the script
   Change the script to display the modified View page.
   
   a.  Open the Operations Console.
   
   b.  Click the gear icon next to the View widget and select Configure.
   
   c.  Change the BaseUrl of the Request object in the script from http://scomserver.contoso.com/SampleWeb/Explorer.aspx to http://scomserver.contoso.com/LabWeb/View.aspx.  This is shown in C:\Lab\Code\View03.ps1.
8. Test the modified dashboard
   Test the modified dashboard.
   
   a.  Select one of the tiles in the Objects widget.
   
   b.  Select one of the tiles in the Objects widget.
   
   c.  Verify that Related Objects[#] is displayed in the View widget.  The # will represent the number of objects related to the object represented by the selected tile.

Click Continue to advance to the next exercise.

Exercise 7 : Change Web Form to Display Script Results in a Table

At this point, the dashboard is only displaying the number of objects related to the one that is selected.  You will now change the web form to display detailed data from the script in a table.  This will require changes in the web form to create a Repeater control called DataFormatter thatwill allow you to step through each record in the data and format it into a table row.  You will also need to add code behind the web form to populate the data source for this control with the data from the widget.

1. Add the HTML for the table to the web form
   Add the HTML for the table to the web form.
   
   a.       In Visual Studio, open View.aspx.
   
   b.       Add the HTML for the Repeater control and the table shown in C:\Lab\Code\View03.aspx.
   
   c.        Select File > Save View.aspx.
2. Add code behind the web form
   Add code behind the web form to set the data source for the Repeater control.
   
   a.       Open View.aspx.cs.
   
   b.       Add the two lines of code for DataFormatter in C:\Lab\Code\View02.aspx.cs.
   
   c.        Select File > Save View.aspx.cs.
3. Build and publish the solution
   Build and publish the solution.
   
   a.       Select Build > Build Solution.
   
   b.       Select Build > Publish DashboardView.
   
   c.        Click Publish.
4. Test the new web form
   Test the new web form.
   
   a.       In the Operations Console, select one of the tiles in the Objects widget.
   
   b.       Verify that a table of related objects is displayed in the View widget.

Click Continue to advance to the next exercise.

Exercise 8 : Change Table View to a Heat Map

The table that the web form is displaying is interesting, but it’s similar to the data that is already being displayed with less complexity using the PowerShell Grid widget.  You will now make a changes to the web form to show off the flexibility of using the PowerShell Web Browser Widget.  Instead of displaying a table of related objects, you will change the web form to display a heat map of related objects.  This will display a colored tile for each related object indicating the health state of the object.

1. Add a Color method to the Data class
    Add a Color method to the Data class.  This method inspects a value indicating the state of the object and then sets an appropriate color for the tile.
   
   a.       In Visual Studio, open Data.cs.
   
   b.       Add the Color method shown in C:\Lab\Code\Data02.cs.
   
   c.        Select File > Save Data.cs.
2. Modify the web form to display a grid
   Modify the web form to display a grid for each data record instead of a table row.
   
   a.       Open View.aspx.
   
   b.       Add the HTML for a style for the tiles and replace the table rows with a tile matching the color of each object’s health state as shown in C:\Lab\Code\View04.aspx.
   
   c.        Select File > Save View.aspx.
3. Build and publish the solution
   Build and publish the solution.
   
   a.       Select Build > Build Solution.
   
   b.       Select Build > Publish DashboardView.
   
   c.        Click Publish.
4. Test the new web form
   Test the new web form.
   
   a.       In the Operations Console, select one of the tiles in the Objects widget.
   
   b.       Verify that a set of tiles representing related objects is displayed in the View widget.

Click Continue to advance to the next exercise.

Exercise 9 : Add a link to each tile in the Heat Map

The tiles in the heat map currently have no action if you click on them.  You will now add a link to each that will allow you to click on the tile to display the object in the Related Objects widget.  This link will use console:SetSelectedItems which instructs the Operations Console to set the selected item on the dashboard.

1. Add a link to each tile in the heat map
   Add a link to each tile in the heat map.
   
   a.       In Visual Studio, open View.aspx.
   
   b.       Add the HTML link enclosing the tile in as shown in C:\Lab\Code\View05.aspx.
   
   c.        Select File > Save View.aspx.
2. Build and publish the solution
   Build and publish the solution.
   
   a.       Select Build > Build Solution.
   
   b.       Select Build > Publish DashboardView.
   
   c.        Click Publish.
3. Test the new web form
   Test the new web form.
   
   a.       In the Operations Console, select one of the tiles in the Objects widget.
   
   b.       Hover over one of the tiles representing related objects in the View widget and verify that the Display Name of the object is displayed in a tool tip.
   
   c.        Click on the tile and verify that the object is displayed in the Related Objects widget.

Click Continue to advance to the next exercise.

Exercise 10 : Add a context menu to each tile in the Heat Map

In addition to displaying the object when you click on its tile, you will also now have a context menu display in the Operations Console for the object.  You will need to add a script to the web form and then have that script run by adding the oncontextmenu event to each tile.

1. Add the script to the web form
   Add the script to the web form.
   
   a.       In Visual Studio, open View.aspx.
   
   b.       Add the script shown in C:\Lab\Code\View06.aspx.
   
   c.        Select File > Save View.aspx.
2. Add the context menu event to each tile
   Add the context menu event to each tile.
   
   a.       Add the oncontextmenu event between the div tags shown in C:\Lab\Code\View06.aspx.
   
   b.       Select File > Save View.aspx.
3. Build and publish the solution
   Build and publish the solution.
   
   a.       Select Build > Build Solution.
   
   b.       Select Build > Publish DashboardView.
   
   c.        Click Publish.
4. Test the new web form
   Test the new web form.
   
   a.       In the Operations Console, select one of the tiles in the Objects widget.
   
   b.       Click on one of the tiles representing related objects in the View widget and verify that a context menu is displayed in the Tasks pane.

Click Continue to advance to the next exercise.