Product Information
ALM Tutorial: How to build SAP UI5 applications for ALM analytics
In this blog, you will find step-by-step instructions to create a SAP UI5 ALM application in the SAP Cloud Platform. The goal of this blog, is to explain how to create an interactive ALM analytics application accessing the metrics collected by SAP Solution Manager through the OData Metrics API of Focused Insights.
This ALM tutorial serie is dedicated on creating value-added app extensions on top of SAP Solution Manager, Focused RUN and/or SAP Cloud ALM. Thanks again for reading. |
Goal
Our specific goal in this application is:
- to create a heat-map containing the values of the system resources utilisation (CPUs, ..) of each hour during the last week,
- 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:
Parameter | Type | Description |
Start_Time | String | The start timestamp of the requested timeframe, in UTC |
End_Time | String | The end timestamp of the requested timeframe, in UTC. |
TimeZone | Int | Offset in seconds to be applied on the timeframe |
Resolution | String | Data aggregation applied to the data points |
Query | JSON | A JSON string containing the data source with dimensions and filter |
Query parameters details
Parameter | Type | Description |
Data_Provider | String | Data provider to identify data sources |
Filter | [key, Value] | Table of key/value pairs for the parameters used by the data providers. |
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.
QuerySet? $filter=Parameters eq ‘{ “Key_Figures”:[“AVG”],”Start_Time”:””, “End_Time”:””, “TimeZone”:”60″, “Query”:{“Data_Provider”:”/STDF/DP_SYSMON”, “Filter”:[ {“K”:”Metric_Names”,”V”:[“CPU_UTILIZATION_5MIN”]}]}, |
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.