Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Xavier
Product and Topic Expert
Product and Topic Expert









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:

  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:

































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.