Customize OverTime’s output

Suppose you’d like to completely customize your OverTime HTML pages – add your company logo, company background colors or configure your own layout then OverTime version 2.0 is for you. OverTime can be configured to generate output pages to your specifications. Customizing the output pages by placing your own company logo and colors can give it that extra personal touch.

 

Featuring in the new OverTime version 2 are ‘z tags’. ‘z tags’ are a pseudo HTML tag that can introduce powerful features into HTML. These tags, placed within a standard HTML page, are used by OverTime to replace and replicate sections of HTML to produce the final HTML page specific to each device. The ‘z tags’ are searched for by OverTime in a template HTML page and the tags are then used to either replicate sections of HTML or replace the z tag with a specific HTML value produced by OverTime. The rest of the HTML is left untouched.

 

Each of the OverTime HTML producing CGI applications (overtime, devmst and devdtl) come with their own output HTML template. Each of the three produce a list of z tags that can be replaced into the HTML.

 

‘z tags’ come in 3 basic forms as explained below.

 

Replacement tags: Have the form <z:name>.

When the page is generated for display, the <z:name> is completely replaced by a value that the CGI has produced as identified by ‘name’. These tags have NO closing tag (</z:name>).

 

Content Optional tags: Have the form <z=+name> or <z=-name>.

These tags have closing tags (</z=+name> or </z=-name>). The enclosed section of HTML between the opening and closing tags is either included (+) or excluded (-) depending on if the name is defined during output. The tags are removed in the output.

 

Repetition tags: Have the form <z#id>. These tags have closing tags (</z#name>). The enclosed section of HTML between the tags is replicated. You can optionally specify the maximum repetitions to produce. If you don’t, then OverTime will repeat the section for each item to be displayed. Repetition tags can be nested to produce tables. The tags are removed in the output.

 

‘name’ in the tag is a case sensitive name from a group of names defined for each of the three CGI applications (overtime, devmst and devdtl). ‘name’ can be optionally followed by a ‘:#’ which will be substituted for the current instance being displayed. I.E. if there are 20 interfaces that devdtl needs to display then the title for the first could have a z tag of title:1. The title for the second third and fourth would be title:2, title:3 and title:4.

 

‘id’ is simply a unique case sensitive string/name and can be followed by an optional repetition indicator. If no indicator is defined or if the indicator is ‘:’ or ‘:0’ then the HTML section will be repeated for each instance being drawn. If the repetition indicator is a ‘:’ followed by an integer, then the HTML section is repeated that many times. I.E. <z#column:3> would indicate that the HTML should be repeated up to 3 times (provided there are at least 3 more instances to display). The closing tag id must be identical to the opening id, including the repetition indicator.

 

 

Example:

To understand a little bit more what these tags do and how they work, let’s look at them in more detail with this example.

 

This is the overtime.htm file used by overtime.exe:

 

<html>

<head>

<title><z:Company> OVER TIME Traffic Analysis</title>

</head>

<body bgcolor="#ECECB0">

<center><h1><z:Company> OVER TIME Traffic Analysis </h1>

</center>

<center>

<table border="0" summary="Devices monitored" width="100%" cellspacing="0" cellpadding="0">

<tr valign="top">

<td align="center"><FONT face="Arial,Helvetica" size="2">

<z#devices>

<z=+Group:#><b>Group <z:Group:#></b><br><br>

</z=+Group:#>

<A HREF="<z:DeviceUrl:#>"><z:DeviceAlias:#></A><br>

</z#devices>

</FONT>

</td></tr>

</table>

</center><br>

OverTime version <z:Version> is monitoring <z:Instances> instances from a license of <z:License><br>

produced at <z:Date><br>

<z=+Interactive><form action="<z:HomeUrl>Logout" method="POST"><input type="submit" value="Logout"></form>

</z=+Interactive>

</body>

</html>

 

As you can see, the majority of the text (in black) is normal HTML

Replacement z tags are highlighted in green.

Content optional tag pairs are in blue.

Repetition tag pairs are in orange.

 


The first lines up the <z#devices:> make up the heading of each page.

The last lines after the </z#devices:> make up the footer of each page.

The text in between <z#devices:> and </z#devices:> is the HTML that will be repeated for each device in the list of devices that OverTime is monitoring.

 

The heading is fixed (apart from filling in the company name) and the footer is also fixed except that we allow the date, OverTime version, OverTime license limit and the number of instances to be inserted by using replacement tags. When pages are displayed on a web browser (interactively) we’d like to include the HTML to allow for a ‘logout’ button. We don’t want this button to be shown if the page is exported to another server (non-interactive) so the HTML is enclosed within optional tags. The ‘Interactive’ value has to be available from overtime.exe to include this section of HTML. Note that within the optional tags section there is another replacement z tag. This is valid.

 

The main area of the HTML page will be to list the devices being monitored by OverTime. This section of HTML is enclosed within repetition tags (<z#devices:>). The ‘devices’ id was chosen to remind us that we’re actually repeating this section for each device. We could have used any name for the id provided it’s not a name that the CGI will produce for a replacement tag. As long as there is a matching closing tag then the repetition will work. You might also notice that some tags within the repetition section have a name ending in ‘:#’. As this section of HTML is repeated for each device, the ‘#’ part of the tag is replaced by the current iteration number. You could think of the number as the ordinal position of this device in the list of devices.

 

Nesting Repetitions.

Nested repetitions can be used to draw tables within the HTML.

To illustrate this, lets use the following simplified snipet:

<z#devices>

   Row

   <z#columns:3>

      Cell

   </z#columns:3>

   End of Row

</z#devices>

 

During display, ‘Row’ will appear in the output followed by up to 3 ‘Cell’s which will then be followed by ‘End of Row’. It’s 3 cells because of the ‘:3’.

This complete sequence will be repeated till there are no more devices.

Any name:# that might appear in the ‘Row’ section will be for devices 1, 4, 7, 10 etc

Any name:# in the Cell section will be used by EVERY device.

Any name:# in the ‘End of Row’ section will be for devices 3, 6, 9, 12 etc


To draw a table then a section of the template HTML might look like this in its simplest form:

 

<table>

<z#devices>

   <tr>

   <z#columns:3>

      <td><z:something:#></td>

   </z#columns:3>

   </tr>

</z#devices>

</table>

 

If there were 5 devices then the HTML produced would be:

<table>

<tr>

<td><z:something:1></td><td><z:something:2></td><td><z:something:3></td>

</tr>

<tr>

<td><z:something:4></td><td><z:something:5></td></td>

</tr>

</table>