5.18.4 Customizing Map Client

 



 

Overview

 

Applications built on Web NMS undergo radical changes on the client side in the Rebranding phase of the customization cycle. Map client serves as the window to the entire networking environment and hence it gets customized to the maximum extent. Either the appearance of the maps is altered for aesthetics or the map view itself is altered.

 

Altering the appearance is relatively simpler and it is achieved by means of custom layouts, custom renderers, custom images, and custom toolbars. Altering the map view requires providing some additional features on the map view, by means of writing an ExtendedMapApplet. An example for altering the map view is using flashing symbols on the map, which are not available by default.

Back

 

Customizing Map Layouts

 

Apart from the layouts provided by Web NMS, you can have additional layouts by writing your own custom layout class. The three basic rules your custom layout should adhere to are:

  1. Get the total number of symbols.

  2. Find the position and dimension of different symbols based on the orientation requirement.

  3. Assign these calculated values of position and dimension to the symbols.

Note: If your custom layout class uses windowWidth to calculate the position and dimension then it should also take care of changing the size based on the zoomRatio of the map. Remember, Web NMS does not support negative zooming of maps, i.e., zooming starts at 100%

 

Writing Custom Layout

 

You should write a class implementing the com.adventnet.nms.mapui.AutoLayout interface to create a custom layout. Source code of the layouts provided by Web NMS is available in <Web NMS>/default_impl/map_layouts directory. If you wish to do some minor modifications alone to any of the existing layouts, you can extend them and incorporate the desired change.

 

Integrating Custom Layout with Web NMS

 

Follow the steps given below to integrate your custom layout with Web NMS :

Example Map Layouts

 

A few example layouts bundled with the product are available under <Web NMS Home >/default_impl/map_layouts directory. Refer the README.html file for a brief description on these layouts.

 

Back

Customizing Map Renderers

 

You can have renderers that paint your maps in the manner you desire. Web NMS provides few renderers for symbol rendering and link rendering. You can have additional renderers by writing custom renderer class. The most important thing that you need to keep in mind while writing custom renderer is that

Writing Custom Renderer

 

You should write a class implementing the com.adventnet.nms.mapui.MapSymbolRenderer interface or com.adventnet.nms.mapui.MapLinkRenderer interface. Source code of the renderers provided by Web NMS are available in <Web NMS Home >/default_impl/map_renderers directory. You can make use of these source files while writing your custom renderer. If you wish to have minor changes in any of these renderers, you can extend the same and incorporate only the desired change.

 

Note: In your custom renderer, ensure that you don't paint anything beyond the symbol dimensions fixed by the renderer because repainting of the map is done only for a certain clip based on the size and number of the symbols.


Integrating Custom Renderer with Web NMS

 

Follow the steps below to integrate the custom renderer with Web NMS :

Once you have done the above steps, you can specify the renderer name when you add maps. You can specify the renderers for web client and java clients within the "html" and "java" clients respectively. For example - if you are adding maps using map filters, then the code snippet for specifying the map renderers will be as shown below :

    1. Code Snippet for Specifying Map Renderers in Filters


      p.put("mapSymbolRenderer", "{\"html\"=\"routerbridge\",\"java\"=\"com.adventnet.nms.mapui.MapSymbolRendererImpl\"}");
      p.put("mapLinkRenderer", "{\"html\"=\"arrow\",\"java\"=\"com.adventnet.nms.mapui.MapLinkRendererImpl\"}");

 

Example Map Renderers

 

A few example renderers bundled with the product are available under <Web NMS Home >/default_impl/map_renderers directory. Refer the README.html file for a brief description on these renderers.

Integrating Customized Map Tooltip

 

The default map tooltip on mouse over the map symbol displays the name of the MO. This can be customized to display the properties of the MO.

Step 1: Configuring in mapSymbolProps.xml

The properties to be displayed can be configured in the <WebNMS Home>/conf/mapSymbolProps.xml file. The properties to be displayed should be grouped based on the type of the MO.

  1. Sample entry in mapSymbolProps.xml file


    <MAP_SYMBOL_TOOLTIP_PROPS>

    <DEVICE type="Node">

    <PROP name="name" label="Name"/>

    <PROP name="objName" label="MO Name"/>

    <PROP name="status" label="Status"/>

    <PROP name="isRouter" label="isRouter"/>

    </DEVICE>

     

    <DEVICE type="Switch">

    <PROP name="name" label="Name"/>

    <PROP name="objName" label="MO Name"/>

    <PROP name="status" label="status"/>

    <PROP name="numPorts" label="Number of Ports"/>

    </DEVICE>

    ...

    ...

    </MAP_SYMBOL_TOOLTIP_PROPS>

Step 2: Associate the tooltip with the Map Symbol in the Map Filter

 

The tooltip properties must be associated with the map symbol as a user property. The user property name is "tooltip", and the value will be the set of properties to be viewed defined as a JSONObject.

 

  1. Sample code snippet for associating the tooltip properties to a Network map symbol


    String obj=(String) userprops.get("tooltip");

    if(obj!=null)

    tooltip = new JSONObject();

    Network net =(Network)mo;

    tooltip.put("ipAddress",net.getIpAddress());

    tooltip.put("netmask",net.getNetmask());

    tooltip.put("discoveryStatus",net.getDiscoveryStringStatus());

    Properties toolprops = new Properties();

    toolprops.put("tooltip",tooltip.toString());

    mobj.setProperties(toolprops);

 

Note: The tooltip properties have been set by default in the IpnetMapFilter and NetworkMapFilter. Therefore, the tooltip will appear in the Network and Ipnet map.

 

Step 3 : Over-riding the getToolTipText() method in the MapSymbolRenderer

The MapSymbolRenderer interface has a method getToolTipText() that returns a String which is to appear as part of the tooltip. As our requirement is to display a more than one property as tooltip, we need to construct a single HTML string containing all the specified MO properties.  

 

  1. Sample code snippet


    //Construct a HTML string.

    StringBuilder sb = new StringBuilder();

    sb.append("<html><table>");

    Hashtable tooltipprops = NmsClientUtil.mapSymbolTooltipReader.getTooltipPropsTable();

     

    //Fetch the tooltip props specified in the conf file

    Vector v = (Vector) tooltipprops.get(type);

     

    //Fetch the tooltip props Vector for the desired device type.

    String tooltip = symb.getUserProperty("tooltip");

     

    //Fetch the tooltip string for the desired map symbol.

    JSONObject jsontooltip = new JSONObject(tooltip); Convert tooltip string to JSON

    for(int i=0;i<=v.size()-1;i++)

    {

    //Iterate and fetch the label and value for each tooltip.

    Properties props = (Properties) v.elementAt(i);

    String prop = (String) props.get("name");

     

    //Fetch the actual value for the user property

    String val = json.getString(prop);

    sb.append(<tr><td>props.get("label")</td>);

     

    //Append the label and value to the HTML string. Add each prop as a HTML table row.

    sb.append(<td>val</td></tr>);

    }

    sb.append("</table></html>");

     

    //Return the final HTML string containing the tooltip properties.

    return sb.toString();

Note: The default implementation is available in <WebNMS Home>/default_impl/map_renderers/MapSymbolRendererImpl_5.java and <WebNMS Home>/default_impl/map_renderers/EthernetMapSymbolRenderer.java files.



 

 

Enabling Alert based Map Symbol Flash

 

Whenever a new alert is raised against a managed object,  the map symbol with the LED at the top left corner can be made to flash in the color code corresponding to the severity of the alert. e.g. when a critical alert is received, a red LED will flash indicating this alert on the map. This will help the administrators to identify that a new alert is raised for this MO and can take corrective action accordingly.

 

Map Symbols can be made to flash in the map view by configuring the "flash" and "mapSymbolRenderer" parameters of the map. On enabling flash, the map symbols will flash whenever there is status change.

 

Configuring in Map Filter

 

When adding the map using the MapFilter, the flash functionality in map can be configured by setting the following properties.

 

1. Set the "flash" property of the map to true.

2. Set the mapSymbolRenderer class name as "com.adventnet.nms.mapui.MapSymbolRendererImpl_4"

 

The flash count and the interval is by default set as 1000 (milliseconds) and 120. This can be modified by providing the parameter entry in the <Web NMS Home>/conf/clientparameters.conf file and assigning the required value.

 

Example:  

 

MAP_FLASH_COUNT="120"

MAP_FLASH_INTERVAL="1"

 

In the above case, the map symbol will flash for 120 times @ interval of 2 sec. i.e. it will flash for 2 mins when its status changes.

 

 

Note: For a default map in the client UI, double-click on the map to invoke the Map Property form. Click on the "Others" tab and set the value of flash to true to enable flash.

 

 

 

 

Note: If a map is added by <Web NMS Home>/conf/maps.conf, you can specify the flash parameters in the maps.conf file itself. This requires restart of the server.

 

 

Back

Customizing Map Toolbar

 

A default toolbar is associated with all maps. If you wish to have a different toolbar for your map, then you need to do two things. :

To associate the toolbar with your map, you can rely on map filters or maps.conf, depending on how you add the map.

Code Snippet on Specifying Toolbar File (mymaptoolbar.xml) while Adding Maps via map filters

Properties p = new Properties();

p.put("name",ipnetmap);

p.put("label","ipnet");

p.put("imageName","world2"+NmsUtil.getImageType());

p.put("treeIconFileName","images/ipnet_small"+NmsUtil.getImageType());

p.put("mapToolBar","mymaptoolbar"); //syntax is important

Sample on specifying toolbar file (mymaptoolbar.xml) while adding maps via maps.conf

<map

mapname="test.netmap"

topology="grid(width=5;height=7;gapX=13;gapY=15;scroll=vertical;isPercentage=true),star,ring,flow"

mapSymbolRenderer="{&quot;html&quot;=&quot;symbol_normal&quot;,&quot;java&quot;=&quot;com.adventnet.nms.mapui.MapSymbolRendererImpl_3&quot;}"

mapToolBar="mymaptoolbar">

</map>

 

Adding New Toolbar Buttons and Actions

 

You can add new toolbar buttons and specify the action they have to perform on mouse click. The steps involved in adding a new toolbar button are :

  1.  

RI on Adding New Toolbar Buttons and Actions

 

The two steps mentioned earlier for adding a custom toolbar button and action are followed in this reference implementation. In this RI, we have two parts - one is the modified maptoolbar.xml file and the other is the class that extends the MapApplet class. This RI adds a button by name "Select All" and it selects all the symbols in the map on execution.

 

Find below the entry in maptoolbar.xml, which adds a new button with name as Select All.

    1. Sample Entry in the maptoolbar.xml

      <TOOLBAR-BUTTON tooltip="Select All" action_command="Select All" enabledimage="../images/select.png" disabledimage="../images/select.png" />

The following are the code snippets of MyExtendedMapApplet class, which extends the MapApplet. Here in this class, we have got the instance of the editable map and specified the listener (MyListener) in the addActionListener() method.

    1. Code Snippet of MyExtendedMapApplet class

      public class MyExtendedMapApplet extends MapApplet

      {

      public void constructUI(EditableMap emap)

      {

      emap.addActionListener(new MyListener());

      super.constructUI(emap);

      }

      public class MyListener implements ActionListener

      {

      public MyListener()

      {

      }

      public void actionPerformed(ActionEvent ae)

      {

      String actionComm=ae.getActionCommand();

      if(actionComm.equals("Select All"))

      {

      String mapName=NmsUiAPI.getCurrentNodeId();

      MapClientAPI mapclientapi = MapClientAPI.getInstance();

      DefaultMapModel defaultmapmodel = mapclientapi.getMapModel(mapName);

      java.util.Vector vector = defaultmapmodel.getSymbols();

      defaultmapmodel.setSelectedSymbols(vector);

      }

      }

      }

      }

 

The entry for the Filter icon to be displayed in the map toolbar is provided in the maptoolbar.xml file in <Web NMS Home>/users/username directory. The properties to be displayed as the criteria in the "Map Symbols Filter Dialog" can be configured for the filterprops property in this file. The properties provided here will be displayed in the criteria drop down list in the filter UI.

 

 

 

Note: The filter icon can be removed from the map toolbar by removing the following entry from the maptoolbar.xml file found in <Web NMS Home>/users/username directory.

 

<FILTERED-VIEW action_command="filter symbols" disabledimage="filtersymbol.png" enabledimage="../images/filtersymbol.png"

filterprops="name,managed,status,type,isContainer,isGroup" tooltip="Filter symbols">

 

 

 

Back

Extending MapApplet for Map Client Customization

 

Many a time you will be extending the MapApplet class for customizing map client. This class is a container for the map view. It provides the map view with the facilities provided by the client framework such as menus. You need to follow the steps given below while extending the MapApplet :

  1. Write a class extending the MapApplet class - ensure that the key() method is not overridden

  2. Update the NmsPanels.conf file with the entry for custom class.

By default, the NmsPanels.conf file will have the entry as shown below :

 

< className="com.adventnet.nms.mapui.MapApplet" PANEL-KEY="MapApplet"/> Change this as

< className="com.adventnet.nms.mapui.MyExtendedMapApplet" PANEL-KEY="MapApplet" />

 

ConnectMap - RI on ExtendedMapApplet

 

This is an example class that extends the MapApplet. It records the source and destination symbols on mouse clicks and connects them with a Map Link. The connection is triggered by a hot key "ALT". If you run this example, you will be able to connect two symbols on a map by just clicking on the source symbol and the destination symbol with your ALT key pressed down.

 

The flow of actions when you click on a source symbol and destination symbol with your ALT key pressed down are

Code Snippet on the Reference Implementation - Connect Map (an ExtendedMapApplet)

public class ConnectMap extends com.adventnet.nms.mapui.MapApplet

{

MapSymbolRendererInterface renderer;

MapClientAPI mcapi;

Vector symbols;

MapSymbolComponent source;

MapSymbolComponent dest;

boolean connectMode = false;

boolean firstTime = true;

Point startPoint;

BasicMap bmap;

public void constructUI(EditableMap emap)

{

super.constructUI(emap);

MouseInputHandler mh = new MouseInputHandler();

bmap = emap.basicMap;

bmap.addMouseListener(mh);

bmap.addMouseMotionListener(mh);

}

class MouseInputHandler implements MouseInputListener

{

public void mouseClicked(MouseEvent me)

{

/*

if(firstTime)

{

model= getModel();

renderer = model.mapSymbolRenderer;

firstTime = false;

}

*/

// ALT is the HOT KEY for connection

if(me.isAltDown())

{

symbols = model.getSymbols();

int len = symbols.size();

for(int i=0;i<len;i++)

{

MapSymbolComponent sym = model.getSymbol(i);

if(model.mapSymbolRenderer.downInObject(me.getX(),me.getY(),sym))

{

if(source == null)

{

source = sym;

startPoint = getCenterPoint(sym);

connectMode = true;

setCursor(new Cursor(Cursor.HAND_CURSOR));

return;

}

else if((source != null) && (dest == null))

{

dest = sym;

connect(source,dest);

source = null;

dest = null;

connectMode = false;

me.consume();

setCursor(new Cursor(Cursor.DEFAULT_CURSOR));

}

else

{

connectMode = false;

setCursor(new Cursor(Cursor.DEFAULT_CURSOR));

if(source != null) source = null;

}

}

}

}

else

{

connectMode = false;

setCursor(new Cursor(Cursor.DEFAULT_CURSOR));

if(source != null) source = null;

}

if(connectMode) connectMode = false;

setCursor(new Cursor(Cursor.DEFAULT_CURSOR));

source = null; dest = null;

}

public void mouseMoved(MouseEvent me) {

if(connectMode)

{

repaint();

// paint a line on the BasicMap

Graphics2D g2 = (Graphics2D)bmap.getGraphics();

g2.setStroke(new BasicStroke(2.0f));

g2.drawLine(startPoint.x,startPoint.y, me.getX(), me.getY());

//repaint();

}

}

public void mouseDragged(MouseEvent me)

{

//do nothing here

}

public void mouseEntered(MouseEvent me) {}

public void mouseReleased(MouseEvent me ){}

public void mousePressed(MouseEvent me ){}

public void mouseExited(MouseEvent me ){}

}

void connect(MapSymbolComponent source,MapSymbolComponent dest)

{

MapLinkComponent link = new MapLinkComponent();

String sName = source.getName();

String dName = dest.getName();

String linkName = sName+"---"+dName;

// for adding > 1 links between same src and dest.

if(model.getLinkByName(linkName)!=null)

{

linkName += model.getLinkCount() + 1;

}

link.setName(linkName);

link.setMapName(model.getName());

link.setSource(sName);

link.setDest(dName);

link.setSourceObj(source);

link.setDestObj(dest);

//Temporary addition, save manually

model.addLink(link);

}

// for getting the center point of a map symbol

Point getCenterPoint(MapSymbolComponent sym)

{

return new Point(sym.getX()+ (sym.getWidth()/2), sym.getY() + (sym.getHeight()/2));

}

}

 

Back

 

 

 

 

 

 

 


Copyright © 2013, ZOHO Corp. All Rights Reserved.