I was inspired by this blog to create a real-time dashboard to monitor my laptop Windows 8.1 CPU usage in the SAP HANA Cloud Platform. We will create a simple app in the HANA cloud platform with WebSocket, some Python and VBScript scripts to get the CPU usage and display it in a simple gauge.

Prerequisites

The app will look like this:

/wp-content/uploads/2014/08/ss10_514235.jpg

Create a Web Project in Eclipse

  • Let’s start to create a project in Eclipse. Select New > Dynamic Web Project/wp-content/uploads/2014/08/ss1_514236.jpg
  • Give the project name: rtd. Target runtime is SAP HANA Cloud. Rtd is abbreviation of real-time dashboard.
    /wp-content/uploads/2014/08/ss2_514237.jpg
  • Create a Java package: rtd
    /wp-content/uploads/2014/08/ss3_514250.jpg
  • Create a java class: RTD
    /wp-content/uploads/2014/08/ss4_514251.jpg
  • Copy the following code into RTD.java:
    package rtd;
    import java.io.IOException;
    import java.util.Collections;
    import java.util.HashSet;
    import java.util.Set;
    import javax.websocket.OnClose;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.ServerEndpoint;
    @ServerEndpoint("/rtd")
    public class RTD  {
      private static final Set<Session> peers = Collections
      .synchronizedSet(new HashSet<Session>());
      @OnMessage
      public void onMessage(final String message) {
      for (final Session peer : peers) {
      try {
      peer.getBasicRemote().sendText(message);
      } catch (final IOException e) {
      e.printStackTrace();
      }
      }
      }
      @OnOpen
      public void onOpen(final Session peer) {
      peers.add(peer);
      }
      @OnClose
      public void onClose(final Session peer) {
      peers.remove(peer);
      }
    }
    
    
    
    
    
  • And also create the index.html under folder WebContent and copy d3 and gauges folder under the same folder. I have stored the complete source-code in the Github: https://github.com/ferrygun/RTD

    Below is the snippet of the JavaScript in the index.html:

    
    <script>
      //var wsUri = "ws://localhost:8080/rtd/rtd";
      var wsUri = "wss://rtdp057134trial.hanatrial.ondemand.com/rtd/rtd";
            function init() {
                output = document.getElementById("output");
            }
            function send_message() {
                websocket = new WebSocket(wsUri);
                websocket.onopen = function(evt) {
                    onOpen(evt)
                };
                websocket.onmessage = function(evt) {
                    onMessage(evt)
                };
                websocket.onerror = function(evt) {
                    onError(evt)
                };
            }
            function onOpen(evt) {
                console.log("Connected to rtd!");
                doSend(0);
            }
            function onMessage(evt) {
                console.log(evt.data);
                updateGauges(evt.data)
          
            }
            function onError(evt) {
                console.log('Error: ' + evt.data);
            }
            function doSend(message) {
                websocket.send(message);
                //websocket.close();
            }
      
      
            window.addEventListener("load", init, false);
      var gauges = [];
      function createGauge(name, label, min, max)
      {
      var config =
      {
      size: 300,
      label: label,
      min: undefined != min ? min : 0,
      max: undefined != max ? max : 100,
      minorTicks: 5
      }
      var range = config.max - config.min;
      config.greenZones = [{ from: config.min, to: config.min + range*0.75 }];
      config.yellowZones = [{ from: config.min + range*0.75, to: config.min + range*0.9 }];
      config.redZones = [{ from: config.min + range*0.9, to: config.max }];
      gauges[name] = new Gauge(name + "GaugeContainer", config);
      gauges[name].render();
      }
      function createGauges()
      {
      createGauge("cpu", "CPU Usage Monitoring");
      }
      function updateGauges(value)
      {
      for (var key in gauges)
      {
      console.log(value);
      gauges[key].redraw(value);
      }
      }
      function initialize()
      {
      createGauges();
      send_message();
      }
    </script>
    
    
    
    
    
  • The final folder structure would be like this:
    /wp-content/uploads/2014/08/ss5_514295.jpg

Deploy to HANA Cloud Platform

After you have created the web project in Eclipse, we will deploy the app in the HANA Cloud Platform.

  • Export the war file to the location where you have installed the Java 6 EE Web Profile: <Java_6_EE_Web_Profile>/tools . Name it as rtd.war.

    /wp-content/uploads/2014/08/ss7_514304.jpg

  • Open your command prompt and cd to the location of <Java_6_EE_Web_Profile>/tools. Execute the following command:
    neo deploy -s rtd.war -b rtd -h hanatrial.ondemand.com –java-version 7 -a <accountname> -u <username>

    Where accountname is your HANA account name, for example: p057134trial and username is your account name without ‘trial’ (i.e., p057134) .
    /wp-content/uploads/2014/08/ss8_514297.jpg
    We are specifying the java-version 7 as the WebSocket implementation requires JRE 7. Please refer to this.
  • Once you have successfully deployed, go the Hana Cloud Platform Cockpit and check the status of the application. Just start the app if it is not started. You will also see the Java EE 6 Web Profile under the Runtime.
    /wp-content/uploads/2014/08/ss9_514305.jpg
  • Click the link under the Application URLs: https://rtdp057134trial.hanatrial.ondemand.com/rtd/
    /wp-content/uploads/2014/08/ss13_514306.jpg
    And you will see the gauge. At the moment we are not sending any data to the WebSocket so you will not see any movement on the gauge.
    /wp-content/uploads/2014/08/ss14_514326.jpg

Send Data to WebSocket

We are going to use the VBScript to get the CPU usage and send the information to WebSocket using Python. Since we are deploying the app in the HANA Cloud platform, the WebSocket URI is:

wss://rtdp057134trial.hanatrial.ondemand.com/rtd/rtd

If you would like to test in the HANA local runtime, change the URI to:

ws://localhost:/8080/rtd/rtd

Below is the snippet Python program to send the information to the WebSocket:


#!/usr/bin/python
import sys
from websocket import create_connection
ws = create_connection("wss://rtdp057134trial.hanatrial.ondemand.com/rtd/rtd")
#ws = create_connection("ws://localhost:8080/rtd/rtd")
arg1 = str(sys.argv[1])
print (arg1)
ws.send(arg1)
result =  ws.recv()
ws.close()





Open your command prompt and type the following: cscript //nologo getCPUUsage.vbs

/wp-content/uploads/2014/08/ss12_514445.jpg

If there is no error, you will see the movement of the pointer in the gauge.

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Patrick Maroney

    I love the gauge and the interesting application.   I used a gauge metaphor in a recent blog post on Big data (Data Driven Decision Making  )

    I recently had the honor at a manufacturing conference to share the stage with leaders from Cisco, Pitney Bowes, LNS research and SAP.  The discussion focused on what top companies are doing to drive INNOVATION around the topics of Big Data, Internet of Things (IoT) and Machine to Machine (M2M).  Your readers may be interested in watching a replay of the presentation and panel discussion here.  

     

    Also, we’ve begun a blog series summarizing this discussion as well as interactions with top companies’ leaders over the past 12+ months:

    Part 1:  Business Trends driving CEOs

    Part 2:  Data Driven Decision Making 

    Part 3:  – coming soon

     

    (0) 

Leave a Reply