Automation Portal Developers’ Tools

 I advise that “first viewers” of this technical blog series begin with the initial posting at url: Automation Portal

As initially stated:  …..each new post will describe configuring a subsequent step(s) in the (initially stated)agenda. I expect to be adding new posts for this series semi-weekly.
This will be the final instructive blog entry for this topic.  The last set of blog entries will just be addendum with code source for the Model (python/Flask), View (HTML), Controller (Angularjs) and ExaBGP’s ini.
The advantages of user efficiency with Developer Tools cannot be overstated.  For development of my Virtual Network Lab, I chose to use
1)     Microsoft “Code”
2)     Google Chrome and therefore Chrome Developer Tools.

Microsoft Code

Microsoft Code is a free code editor and code debugger graphical utility. The basic advantages are:
1)     For js code: syntax error notification
2)     For HTML: a most excellent visual code logic verification assistance tool
Refer to the screen capture below
Without a graphical representation of code grouping structures  within group elements such as <div>,  maintaining logical code boundaries becomes unnecessarily tedious. Advantage of Code are:
1)     graphically illustrates code groupings
2)     graphically horizontally realigns code lines, as Code believes code alignment should be
3)     suggests autofill of element terminators (</div>, </span>, </fieldset> …..) in instances where such a terminator should logically occur.
The above description only touches on the advantages of MS Code towards facilitating the timely creation of production code.

Google Chrome Developer Tools

Google Developer Tools provides efficient run-time verification tools for js code. The following is an example of how the use of Google Developer Tools and the use of runtime breakpoints assists js troubleshooting.
In the screen below, prior to js launch by the HTML View, I set up both breakpoints and Watcheson particular properties that would change as I  exercised the application. Code lines with breakpoints include blue markers. Properties with Watches set are identified in the lower right window of the GUI.
The View has yet to execute js code, so there are no hits on breakpoints and no properties are associated with any values
 Below; “Repush” had been selected via the GUI. js application code execution has stopped at the breakpoint within the function named $scope.Repush. Now, current scope property values within the js are identified. Note, in the Watch list at the bottom right: $scope.repushed = “true”

Below, the “Repush” of prefixes has completed.  The application’s js is not executing. Properties now have no value

The graphic below illustrates that the View has returned to the initial state and the js is not executing. Watch properties have no values

 

 The graphic below illustrates that 1) whereas “Database Search” has been selected (via the above View), 2) the dependent, imported js script (“app-ip” that qualifies the user’s ipv4 prefix text) has executed; the main application’s js (in the Tools window) is not executing and the Watch Properties still have no value

The graphic below illustrates that the user clicked “Select” in the GUi and the application’s js is executing, with execution paused by the breakpoint. “Watch” Properties have values, including that a DB repush is not occurring with this pass and the user’s ipv4 prefix text has a value.

The graphic below illustrates that “Database Search” is completed.  The user may choose to add this new prefix to the DB and advertise it to BGP listeners, but at present the application’s js is not executing.  No Properties have values.

The following graphic illustrates that “Add Entry” was selected.  The application’s js executing and paused. Property values exist including the requested prefix, plus the state of condition values

 The graphic bellow illustrates that while the user may provide black hole prefix parameters, the application’s js is not executing.  Properties have no values.

Below, the user has input values, but not yet clicked “Announce the Prefix”.  The application’s js is not executing. No properties have values.

Below, the user clicked “Announce the Prefix”.  The application’s main  js is executing and paused at the breakpoint. Properties in the lower right have values, including info.prefix, info.neighbor and info.nexthop

Below; the application’s js completed execution. No parameters have values.

Conclusion

Developer Tools and MS Code have many features for trouble-shooting HTML and js not illustrated here. I hope that this entry will illustrate some basic capabilities of available free tools.