Goal

Our specific goal in this application is:

1. to create a heat-map containing the values of the system resources utilisation (CPUs, ..) of each hour during the last week,
2. and by clicking an individual value, obtain related system characteristics of that specific time, such as the top 5 batch jobs, 5 transactions, …

Here is a related mockup of what we want to create:

Metrics identification

Our first task is to obtain the query containing the data on the CPU utilisation. For that we create a new dashboard by inputting the desired result: (result is accessible here…)

The corresponding metrics are based on the System Monitoring data provider:

By looking to the Focused Insights query string in the expert tab of the Query Settings view, you can find the parameters corresponding to the desired values:

• Data providers: /STDF/DP_SYSMON
• Metric_Names=CPU_USER_UTILIZATION
• SID=A4H
• Method=AVG

Metrics API

The end-point for the metrics API is: sap/opu/odata/STDF/DFL_SERVICE

It supports the following entities:

• Series/SeriesData: Returns data points in series format
• Tables/TableData: Returns data in table format.

Parameters

We need to understand the main parameters of the Metrics API:

Query parameters details

Test the Metrics OData API

You can test the OData service on your SAP Solution Manager system with the following URL

The Key_Figures parameter determines the specific data that we want to get, along with the start_time and end_time, time zone and resolution.

Here is a quick glance of the output of our query in JSON format:

SAPUI5 Application

The next step is to create the SAPUI5 application in the SAP Cloud Platform Web IDE based on 2 charts:

• heat-map
• bar chart

Heat-map

We will create an Model using the data from the query in the Controller file.

The data series returned by the Metrics API return each data points with 2 attributes:

• Category, containing the date in a long format
• Value, containing the specific measure.

In order for us to create our heat-map, we will need to decompose the category attribute in two values: The Date and Hour attributes. Our Date attribute will be our X-axis and the Hour attribute one our Y-axis. To do this, we use the setProperty method available for our OData model.

It has two necessary parameters: the path and the value it will have

So, we manage to create a new path containing the Date and Hour attributes and then we input our values by parsing the Category attribute.

After that we create our heat-map using Vizframe by first defining it in the Controller file, using semantic color with three divisions, where Red represents the highest critical values and Green the normal ones.

Then we write it in the View file with two category axis as described above, and with Value as the measure.

The result for our data is here:

Bar chart

After that, we will need to obtain the data related to the batch jobs completed during the previous week in order to create the interaction between clicking the heat-map and the table or chart.

We will need to define a new function in the Controller file related to selecting data on the heat-map and the response related to it.

First, we obtain in a similar way to above the query related to Jobs completed.

After that, we will need to automatically rewrite the query each time a heat-map cell is clicked. We do this by using the getProperty method of our first oData model, thus obtaining the necessary period.

Then we write the query using that period to obtain the jobs data and load that data to our newly generated oData model. Then we sort the values and select only the top 5 ones.

We recreate a Vizframe bar chart containing our top 5 Jobs ranked by value.