karipoulsen / opendcim-drawpath

Cable path drawing for openDCIM

DRAWPATH - openDCIM 4.3.1 cable path extension

This package extends openDCIM functionality so it can display cable paths on drawings, including network installation endpoints for client computers.

Have a look at openDCIM

I can be reached at [email protected]

This package requires just one simple modification in one file in openDCIM. The system plugs into openDCIM on the client side.(javascript and jquery)

We haven't tested the 4.4 and 4.2 releases yet, but we expect no major issues.

These are the files:

• README.html This file.
• dpcore.php Base server logic.
• drawpath.php Serves AJAX requests from the client.
• drawpath.js Javascript to be included in openDCIM.
• dpeditor.phpThe layout editor.

Features

• Display cabling info on Data Center images, together with cabinet placements and other info.
• Render cable paths on several container images.
• Built-in cable layout editor.
• Custom coloring and rendering per cable bundle.
• Very simple installation.
• Minimal openDCIM intrusion - should be easy to follow upgrade cycle.
• Relies on openDCIM functionality, using custom attributes to store it's data.
• No extra tables, only a few entries in the config table.
• Easy to remove.

Installation

Note: The installation assumes a 'standard' openDCIM installation, such as default directory names for scripts, drawings and such. You may need to update these references manually if they are different.

• Copy the package contents into a new directory directly in the main openDCIM installation directory, drawpath is the default directory name.
• Create a new custom attribute for devices.
• Enable this attribute for the device templates you want, remember to update corresponding devices.
• Modify the header.inc.php: Insert a new line

  <script type="text/javascript" src="drawpath/drawpath.js"></script>

  just before the first <div>. The last part of the file should look like:

  echo '
  <script type="text/javascript" src="drawpath/drawpath.js"></script>
  <div id="header">
  	<span id="header1">',$header,'</span>
  	<span id="header2">',$subheader,'</span>
  	<span id="version">',$person->UserID,'/',$version,'</span>
  </div>
  ';
  

  Alternativeliy, if you don't like the drawpath stuff to be incluced in every page, you could just modify a few files directly: Include the script reference in the
  • configuration.php
  • dc_stats.php
  • container_stats.php
  • devices.php
  files in the header section instead of modifying header.inc.php.
• If you've used a different installation directory name, you must modify the corresponding variables in drawpath.js These are all located at the top of the file. While you're there you also might want to modify caption strings and other settings.
• Crank up openDCIM, go to the configuration page. There should now be a tab called 'DrawPath'.
  • Select the custom attribute to use for DrawPath
  • Define a set of custom colors to use. A few are pre-installed - modify or delete.
• You're good to go. Go to a device for which you'd like to add a path.. click the 'Edit Path..' button next to the selected custom attribute.
  Have a look at the Editor section below..

Note: On a Windows installation, you might have to change some parameters to backslash for file-related functions in dpcore.php ..

Uninstall

Basically the reverse of the installation:

• Remove the

  <script type="text/javascript" src="drawpath/drawpath.js"></script>

  in header.inc.php (or the files mentioned under installation if you opted for that installation alternative).
• Delete the installation directory.
• Possibly, remove the custom attribute.
• Delete the entries in the configuration page.
  Note: Some of the DrawPath settings in the fac_Config table have to be deleted from SQL. All entries that relate to DrawPath start with a DP.. prefix.
  You could just leave them.. they don't interfere with the rest.

Operation

The concept is that network installation endpoints are defined as patch-panel devices in openDCIM. Since devices are meant to be installed in cabinets that are located in datacenters we have to make a datacenter with a cabinet to hold the devices. While not very elegant, we still get to use openDCIM connection facilitities as well as the patching diagrams.

The usual way is to define a 'virtual' datacenter and have a cabinet for each main section to describe, such as a building, or a floor layout of a building

Usually, network entpoints are grouped in sets of two or more ports, so we define a patch panel for each bundle, with appropriate number of ports that can be connected the usual way.

The devices that are to have cable paths attached to them must have a custom attribute defined - the one defined in installation.

'Regular' patch panels can also have cable paths attached, just enable the custom attribute for those you want.

Select a patch panel for editing in openDCIM, and now there should be an 'Edit' button attached to the custom attribute. Click and define your paths. Remember to update the device.

The Path Editor

When on the editing page of a device, press the 'Edit Path' button next to the configured custom attrbiute. This brings up the Editor Dialog.

At the top you have a status bar of sorts, listing all drawings that are attached to this device, a color selector, and a button to activate the Drawing Dialog.

The first drawing in the list is always the master, i.e. the base drawing to define the cable path. Clicking on individual drawings brings the corresponding image on display.

Defining a path - when the master drawing is selected

• Shift-click on the image to add a point. Points are always added to the end of the path. The first point is always the location of the device, i.e. always work from the position of the device towards the main patch panel.
• Ctrl-click on a path point to delete it.
• The blue-ish rectangle defines the extent of the whole path, i.e. it encloses all the points.
  You can drag the rectangle around.
• The red dot on the lower-right corner of the rectangle is a resize handle.

Defining a path - when any other drawing is selected

• Note that the individual point handles are not available here.. point editing is done on the master drawing only.
• Drag the rectangle to the position you want.
• Resize as needed.

Note that the resize handle differs from the master and the rest: when moving the handle, the path itself is resized, while on the other drawings, the path is scaled, and always with the same aspect ratio - it only responds to left-right movements.

The Drawings Dialog

When activated for the first time on a device, and additional dialog shows up, prompting you to select one or more drawing to place the device path on.

This dialog lists all drawings for DataCenters and Containers. Any/all of these can have device paths attached to them.

Select a master. Each device path must have a master drawing where the actual path layout is defined. All other drawings that you have selected for this device use the same path, withi adjustments for offset and scale.

This means: All drawings for a given device are assumed to have the same orientation, and all drawings should have the same aspect ratio.

Once you're done, press the OK button on the main dialog. This closes the dialog, and inserts the path parameters into the custom attibute for this device.

Important:You still have to save the changes made to the device with the 'update' button on the device edit page!!.

Hint: Use the custom attribute as any other field, such as copying paths to other devices, etc.

Troubleshooting

We've only tested this with Chrome and Firefox. Can't be bothered with some old IE version.

If something breaks, or appears weird, always look first in the console window of the browser. openDCIM generates plenty of errors of its own, so you have to look around for a bit.

The extension revolves around JS client-side logic, and chains to the openDCIM DOM. Problems might arise if updates in openDCIM alter css classes and/or DOM hierarchy. Errors of this sort should all originate from drawpath.js. Have a look and modify.

Contact me if you're not up to have a look yourself.

And, by the way, please drop a note if you find some problem, workarounds, suggestions, etc.