I am trying to figure out how to use Vaadin 7 for a new project and I have some questions. Any suggestions from the community would be valuable.
The project requirements look something like this (just the display requirements, which is where my current problems are):
Top level display is a world map with active icons representing data centers scattered around the globe. Bi-directional Links connecting the data centers need to be displayed as well.
Clicking on a data center dives into that center and brings up a display showing all the switches, routers, firewalls etc. along with the links connecting them.
Clicking on a switch dives another level deeper, showing the hosts (and switches, routers etc.) connected to each port on the switch.
At any level, clicking on a link brings up a chart showing the traffic bandwidth usage for that link.
These charts can be created using the Timeline object (I’ve done that successfully in a different charting program I’ve written already).
My questions relate to the following:
a) How can I display a map with active icons on it? I saw a Map addon, but it has not been ported to Vaadin 7 yet.
b) How can I display the links on the map and make them clickable?
c) Once I get into a data center, how can I automatically lay out the directed graph of the switches/links in a way that is both automatic, and humanly readable?
A library like graphViz might be able to do this, but can I incorporate that into a Vaadin display or is there another library that will do that?
There may be dozens, more likely hundreds of devices in a given data center…
d) As with the map, how can I make the links between data center objects (or between a switch and it’s connected hosts) into active (clickable) objects?
e) Does the Vaadin Charts package have anything that will let me draw directed graphs with active icons?
I have access to all the required data, including the bandwidth info from a couple of databases.
Any suggestions or pointers to libraries that I could use would be most helpful.
Looks like
V-Leaflet is the only published v7 Addon that can display maps. If you look at the demo, it has active icons (i.e. click a component pops up) - and I guess you could “drill down” from that click too. I don’t think it supports clickable edges/links between icons, though - I’ve not seen a map API that does, although I’ve not played with map stuff at all.
There’s nothing in Vaadin Directory for displaying directed graphs. I would think wrapping a library like
d3.js would be the way to go. There are javascript versions of graphviz (e.g.
CanVis ) that will allow you render an graphviz directed graph - but (after a very quick look) don’t seem to have any way of binding events to edges/nodes => no drill down. This
SO Question might be worth investigating too.
Not as far as I know.
Highcharts - the js library that Vaadin Charts uses - does allow you to to do general drawing but
a) Not directed graphs
b) I don’t think that graph type is exposed by Vaadin Charts.
Leaflet is currently my favourite slippy map implementation, but especially its Vaadin wrapper don’t yet have all bells and whistles of OpenLayers. It is smaller and “feels better”. Simple stuff like drawing vectors and adding click listener to them should however work fine.
The OpenLayers project also has V7 compatible branch and most essential stuff works, but I haven’t been actively developing it lately. More its V6 compatible version actually (all my map related hobby projects use V6-OpenLayers combo at this point).
Several customers have been asking about V7 upgrade for OpenLayers Wrapper, but as far as I know, nobody has yet been willing to sponsor its upgrade.
We created an app that displays a stylized Google map with moving aircraft icons on top of the map which update every second. We did this by creating and compiling a custom vaadin widget for the map. We also used addons (dontpush-addon-ozonelayer, atmosphere-gwt-*) to push the aircraft state updates to the map .
However, because we use Vaadin 6.8.10 this may not be the exact way go for Vaadin 7.
The icon updates were handled as follows:
For each aircraft, the server sends a marker to the client widget. Each marker contains the URL to the icon servlet, along with parameters needed to generate the icon. Class AircraftIconServlet is responsible for responding to GET requests (doGet) by rendering an icon and returning the icon’s URL.
When the client displays the marker, it loads the URL. In our case the URL points to the servlet and will thus trigger the AircraftIconServlet.doGet method to generate the icon. This is only done if the client browser hasn’t already loaded the exact same URL earlier - in that case the same icon is reused.