topic UI Modifications in Software Defined Networking

UI Modifications

MatthewHart — Mon, 13 Oct 2014 07:17:52 GMT

Hi Team,

I am trying to update the charts that are generated by default when you run the App Generator. I want the charts to have my data in them, instead of the default data that they currently have.

How do I go about this? The Programmers Guide is very unclear about this and I've read up on SKI but that hasn't helped either.

For example, when I recieve a FlowRemoved message, I want to plot how many bytes were in that flow on the chart (so update the new chart with the datapoint).

Help Please :)

Re: UI Modifications

cmaxwell — Thu, 16 Oct 2014 22:25:14 GMT

Hi Matthew,

Have you looked at the .js files in the src/main/webapp/app directory for your application? For an app named 'foo', the full directory path is sdn-foo/foo-ui/src/main/webapp/app.

I'll see what I can do to get some additional details.

Re: UI Modifications

MatthewHart — Thu, 16 Oct 2014 23:20:39 GMT

Hi cmaxwell,

I've got that open - yes.

I guess to clarify, I want to be able to update the graphs with data that is (currently) stored within my app (in arrays and other data structures).

Is there an easy way of doing this?

Re: UI Modifications

sdnindia — Fri, 17 Oct 2014 05:52:45 GMT

Hello Matthew,

App generator creates two charts by default with some data.The two charts are getting populated from the values present in java script file sdn-hm/hm-ui/src/main/webapp/app/hmChart.js (the functions mkchart1 and mkchart2)

You can try to code java script files under the directory sdn-hm/hm-ui/src/main/webapp/ , this will help you to create/modify the charts. Also please refer to the SDN Programming guide 2.3 page 197 onwards[Creating a GUI]

Please let us know if this helps or still you face some problem.

Thanks,

HP SDN Team

Re: UI Modifications

MatthewHart — Sat, 18 Oct 2014 03:18:12 GMT

My question is more revolving around - How do I get the data from the Java code that controls my app, into the javascript code in sdn-hm/hm-ui/src/main/webapp/app/hmChart.js

I've read the programming guide.

Re: UI Modifications

cmaxwell — Tue, 21 Oct 2014 16:47:00 GMT

Hi Matthew,

Please go to the lib/util directory inside the hp-sdn-sdk directory. In there you will find hp-util-ski-ui-6.33.0.war, which is a reference implementation for the UI using SKI. This war file can be deployed on a tomcat server using the tomcat manager app and can be used for reference implementation for the chart as well.

More information can be found in the SDN Programming Guide under the section "SKI Framework - Live Reference Application." Here's a link to the Programming Guide:

http://h20628.www2.hp.com/km-ext/kmcsdirect/emr_na-c04383851-2.pdf

Good luck!