Modifying the Port Bringup Report

The LANforge Port Bringup plugin produces a highly detailed and verbose report including all the wifi events from the stations involved. This plugin can be used to record performance of station association and captive portal logins. When you save the Graphical Report screen, it saves an HTML document with pictures to a directory on your machine.

pbu-01

pbu-02

pbu-03

We see the report files created by saving the report below:

pbu-04

This report can be reformatted, and the log messages at the bottom of the output are a useful resource to recreate graphs of interest. With some accessory JavaScript, we can create a completely different report. I start off by writing a shell script that backs up the original index.html file of the report and concatenates it to the end of a new title block.

Example shell script below:
(please excuse my lazy [] brackets, because  &-lt; &-gt; takes longer to type)

#!/bin/bash
if [ ! -f orig.html ]; then
   mv -v index.html orig.html
   dos2unix orig.html
fi
cp -v "~/report-1s.js"      report.js
cp -v "~/chartist.min.css"  .
cp -v "~/chartist.min.js"   .
cp -v "~/moment.js"         .
cp -v "~/images/header.png" .
# now create a new header
cat ▶ 00-report.html ◀◀ EOF
[html]
   [head]
     [title]Customized Report[/title]
     [link rel='stylesheet' type='text/css' href='chartist.min.css']
     [script src='moment.js'][/script]
     [script src='chartist.min.js'][/script]
     [script src='report.js'][/script]
   [/head]
   [body]
     [h1]Station Latency Report[/h1]
     [img src='header.png' /]
     [div id="new_chart"][/div]
     [h2]Station event latency[/h2]
     [div class="ct-chart lf_chart" id="link_1"][/div]
     [pre id='log_messages' style='display:none;']
EOF
# and append old report like so:
cat orig.html ▶▶ 00-report.html
echo "please edit 00-report.html"

I have example update_report.sh and report.js examples posted for you to download and use.

The basis of the reformatting is to move the contents at the top of orig.html into the new report header. Delete content that you don’t want, but leave the Log Messages section, because it will be parsed by the javascript. The style tag keeps it from showing on the page. The first column of the messages is in Unix epoch seconds and milliseconds.

[pre id='log_messages' style='display:none;']
1499751346.692  Starting loop number: 1
1499751346.697  #[1] Bringing all selected ports down.
1499751346.841  #[1] Bringing up selected ports in batches of 100
1499751346.845  set_port 1 1 7 NA NA NA NA 0 NA NA NA NA 8388610
1499751346.854  set_port 1 1 8 NA NA NA NA 0 NA NA NA NA 8388610
1499751346.854  set_port 1 1 9 NA NA NA NA 0 NA NA NA NA 8388610

Data is collected in the report.js javascript by parsing each line for important events, using regular expressions:

matches = line.match(/^(\d+\.\d+) EVENT: .*? eventType:Link-Up details:Port (sta\d+) is Link UP.$/) || [];

Bar charts are created with the create_bar() function.

Line and point charts are created with the Chartist javascript library. Point charts are line charts with lines turned off. The moment.js library allows the Chartist library to process domain data on a time axis.

Below is an example of what a resulting report looks like:pbu-05