Create Your Own JavaScript Network Configuration Program (Part 2) - WAN Circuits and IP SLA

In first post, we have created very simple HTML page, which prepares config for management loopback and hostname. Today I add option to add one or two WAN circuits. Based on a choice, not only WAN config is generated, but also IP SLA will. I am saving BGP configuration for next post, as it is very complex. Also, we have here first JavaScript fancy feature – enable / disable readonly option on inputs and change color on them.

WAN Circuits

You have option to add primary WAN circuit, or secondary, or both. Of course, none is an option too. You specify interface in the input, only if you have checked that you want to use that WAN circuit. It means, you first check a checkbox and then you can edit interface name and IP. IP address is always /30. There is no other option. I am not checking input, if it is valid or not. I hope that you can subnet We can come back to this later on in optimization phase and add subnet stupidity check

<h3>WAN Circuits</h3>
	<input id="wan_pri_check" type="checkbox" name="wan_pri_check" />Interface for Primary circuit: <input id="wan_pri_int" class="ro" type="text" readonly="readonly" value="Serial0/0" name="wan_pri_int" />
<div class="tab">IP address of Primary circuit: <input id="wan_pri_ip" class="ro" type="text" readonly="readonly" value="10.0.0.2" name="wan_pri_ip" /> 255.255.255.252</div>

	<input id="wan_sec_check" type="checkbox" name="wan_sec_check" />Interface for Secondary circuit: <input id="wan_sec_int" class="ro" type="text" readonly="readonly" value="Serial0/1" name="wan_sec_int" />
<div class="tab">IP address of Secondary circuit: <input id="wan_sec_ip" class="ro" type="text" readonly="readonly" value="10.0.1.2" name="wan_sec_ip" /> 255.255.255.252</div>

<hr />

New Inputs

Div with class tab just “tabulates” output by moving it 20 pixels to the right, so interface and IP looks like a pair. Checkboxes have onchange event. It calls JavaScript function, which will be implemented in a moment. What it does is that it enables interface and IP address inputs or disables them. This is implemented right after management part. I am providing full HTML config at the end of the post. Check onchange event.

CSS

Because I have introduced new classes, we need to update our CSS styles

div.tab { margin-left: 20px;}
.ro {background: #555}
.rw {background: #003}

Dot ro applies to all tags with class ro. It changes background color on it. The same for rw. Ro is applied on these new inputs, which also behave as read-only. Try it, you cannot edit them. You will be able to edit them, after you check the checkbox and after we finish our JavaScript code here.

JavaScript

First, implement new function for testing, if element is or is not read-only. If particular checkbox is checked, make element or more elements writable and change background. If checkbox is unchecked, turn element or elements into readonly mode, so user cannot edit it and change background.

Function is called from HTML by onchange event. Function has two parameters, ID element of checkbox used for testing condition (element itself) and element, which has to be changed to read-only or read-write. Check HTML code at the end of post. I change class name to either rw or ro. Those are defined in CSS. It changes background color only. Next I set readonly parameter of element to true or false.

function f_ro_rw(check, elm) {
	if (document.getElementById(check).checked) {
		document.getElementById(elm).className="rw"
		document.getElementById(elm).readOnly=false
	}
	else {
		document.getElementById(elm).className="ro"
		document.getElementById(elm).readOnly=true
	}
}

Code should be self-explanatory. Time for snapshot.

Checked Secondary Interface

I have enabled Secondary circuit option and I have changed interface name and IP.

WAN Output

Now, time to update our main f_do() function. First, add simple WAN configuration, which is again basically just adding inputs with some additional text to output.

	//WAN
	if (document.getElementById("wan_pri_check").checked)
		out+="interface "+document.getElementById('wan_pri_int').value+"\n description ***** Primary WAN Circuit *****\n ip address "+document.getElementById('wan_pri_ip').value+" 255.255.255.252\n no shutdown\n"
	if (document.getElementById("wan_sec_check").checked)
		out+="interface "+document.getElementById('wan_sec_int').value+"\n description ***** Secondary WAN Circuit *****\n ip address "+document.getElementById('wan_sec_ip').value+" 255.255.255.252\n no shutdown\n"

It adds interface text + input from user + description + ip address keyword + input from user regarding to IP + subnet mask of /30 + enable interface. But only, if option is enabled; corresponding checkbox is checked.

Output with WAN

IP SLA

A little bit more adding for today. We want to have two IP SLA probes per activated WAN circuit. Probes 10 and 11, if Primary circuit is activated and 20 and 21, if Secondary is activated. It is again template, where only source IP address is changed based on input from user. For more IP SLA stuff, read my series on IP SLA.

	//IP SLA
	if (document.getElementById("wan_pri_check").checked) {
		out+="!\nip sla 10\n icmp-echo 192.168.100.57 source-ip "+document.getElementById("wan_pri_ip").value+"\n frequency 60\n threshold 150\nip sla schedule 10 life forever start-time now\n"
		out+="ip sla 11\n icmp-echo 192.168.100.61 source-ip "+document.getElementById("wan_pri_ip").value+"\n frequency 60\n threshold 150\nip sla schedule 11 life forever start-time now\n"
	}
	if (document.getElementById("wan_sec_check").checked) {
		out+="!\nip sla 20\n icmp-echo 192.168.200.57 source-ip "+document.getElementById("wan_sec_ip").value+"\n frequency 60\n threshold 150\nip sla schedule 20 life forever start-time now\n"
		out+="ip sla 21\n icmp-echo 192.168.200.61 source-ip "+document.getElementById("wan_sec_ip").value+"\n frequency 60\n threshold 150\nip sla schedule 21 life forever start-time now\n"
	}

That could be added also to the previous testing condition, but I am keeping it separated. Here is final image.

Final Output with IP SLA

Looks like textarea is too short already.

Final Code

And final codes.

index.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta name="keywords" content="rekrowteN, Networker" />
	<meta name="description" content="Simple JavaScript program from rekrowteN | Networker blog series: Create Your Own JavaScript Network Configuration Program" />
	<script language="javascript1.2" src="functions.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<title>rekrowteN | Networker Config Maker</title>
</head>
<body>

<div class="container">
	<h1>rekrowteN | Networker Config Maker</h1>

	<h3>Management</h3>
	Hostname: <input id="hostname" name="hostname" type="text" value="R???" /><br />
	Management Interface Loopback0 IP: <input id="mgt_ip" name="mgt_ip" type="text" value="192.168.255.???" /> 255.255.255.255<br />
	<hr />

	<h3>WAN Circuits</h3>
	<input id="wan_pri_check" name="wan_pri_check" type="checkbox" onchange="f_ro_rw(this.id, 'wan_pri_int'); f_ro_rw(this.id, 'wan_pri_ip')" />Interface for Primary circuit: <input id="wan_pri_int" name="wan_pri_int" type="text" value="Serial0/0" class="ro" readonly="readonly" /><br />
	<div class="tab">IP address of Primary circuit: <input id="wan_pri_ip" name="wan_pri_ip" type="text" value="10.0.0.2" class="ro" readonly="readonly" /> 255.255.255.252</div>
	<input id="wan_sec_check" name="wan_sec_check" type="checkbox" onchange="f_ro_rw(this.id, 'wan_sec_int'); f_ro_rw(this.id, 'wan_sec_ip')" />Interface for Secondary circuit: <input id="wan_sec_int" name="wan_sec_int" type="text" value="Serial0/1" class="ro" readonly="readonly" /><br />
	<div class="tab">IP address of Secondary circuit: <input id="wan_sec_ip" name="wan_sec_ip" type="text" value="10.0.1.2" class="ro" readonly="readonly" /> 255.255.255.252</div>
	<hr />

	<br />

	<div class="container">
		<button type="button" name="do" id="do" class="out" onclick="f_do(0)">Create Full Config</button>
		<br />
		<textarea name="out" id="out" rows="20" cols="80" class="out"></textarea><br />
	</div>

</div>

</body>
</html>

style.css

html {height: 100%;}
body {position: relative; margin-left: 7px; background: #000; color: #af0; height: 100%; font-weight: bold}
h1 {text-align: center;}
h3 {color: #a7f}
hr {color: #00f;}
input, textarea, select {background: #003; color: #0f0; font-weight: bold;}
textarea.out {background: #020;}
button {background: #aaa; color: #000; font-weight: bold;}
div.container {float: left; margin-bottom: 15px;}
div.tab { margin-left: 20px;}
.ro {background: #555}
.rw {background: #003}

functions.js

function f_ro_rw(check, elm) {
	if (document.getElementById(check).checked) {
		document.getElementById(elm).className="rw"
		document.getElementById(elm).readOnly=false
	}
	else {
		document.getElementById(elm).className="ro"
		document.getElementById(elm).readOnly=true
	}
}

function f_do(para) {
	out="!###############################!\n"
	out+="!####### OUTPUT FOR "+document.getElementById("hostname").value+" #######!\n"
	out+="!###############################!\n"

	//Management
	out+="interface Loopback0\n description ***** Used for Management *****\n ip address "+document.getElementById('mgt_ip').value+" 255.255.255.255\n"

	//WAN
	if (document.getElementById("wan_pri_check").checked)
		out+="interface "+document.getElementById('wan_pri_int').value+"\n description ***** Primary WAN Circuit *****\n ip address "+document.getElementById('wan_pri_ip').value+" 255.255.255.252\n no shutdown\n"
	if (document.getElementById("wan_sec_check").checked)
		out+="interface "+document.getElementById('wan_sec_int').value+"\n description ***** Secondary WAN Circuit *****\n ip address "+document.getElementById('wan_sec_ip').value+" 255.255.255.252\n no shutdown\n"

	//IP SLA
	if (document.getElementById("wan_pri_check").checked) {
		out+="!\nip sla 10\n icmp-echo 192.168.100.57 source-ip "+document.getElementById("wan_pri_ip").value+"\n frequency 60\n threshold 150\nip sla schedule 10 life forever start-time now\n"
		out+="ip sla 11\n icmp-echo 192.168.100.61 source-ip "+document.getElementById("wan_pri_ip").value+"\n frequency 60\n threshold 150\nip sla schedule 11 life forever start-time now\n"
	}
	if (document.getElementById("wan_sec_check").checked) {
		out+="!\nip sla 20\n icmp-echo 192.168.200.57 source-ip "+document.getElementById("wan_sec_ip").value+"\n frequency 60\n threshold 150\nip sla schedule 20 life forever start-time now\n"
		out+="ip sla 21\n icmp-echo 192.168.200.61 source-ip "+document.getElementById("wan_sec_ip").value+"\n frequency 60\n threshold 150\nip sla schedule 21 life forever start-time now\n"
	}

	document.getElementById("out").value=out
}

Next, I implement BGP. There is a catch. Neighbor IP address must be determined based on WAN IP (it is not the same IP). Then, I want to advertise networks with correct subnet mask, which will result in another helping JavaScript function. So next time, lot of JavaScript coding. Hope you enjoying code so far.

Want more? Check post from series:

Create Your Own JavaScript Network Configuration Program (Part 1) – The Beginning (2013/01/16)
Create Your Own JavaScript Network Configuration Program (Part 2) – WAN Circuits and IP SLA (2013/01/23)
Create Your Own JavaScript Network Configuration Program (Part 3) – BGP (2013/01/30)
Create Your Own JavaScript Network Configuration Program (Part 4) – Route Maps (2013/02/06)
Create Your Own JavaScript Network Configuration Program (Part 5) – Encryption and Fading (2013/02/13)
Create Your Own JavaScript Network Configuration Program (Part 6) – Prefix Lists (2013/02/20)
Create Your Own JavaScript Network Configuration Program (Part 7) – LAN (2013/02/27)
Create Your Own JavaScript Network Configuration Program (Part 8) – HSRP, VRRP, GLBP (2013/03/06)
Create Your Own JavaScript Network Configuration Program (Part 9) – ACL (2013/03/13)
Create Your Own JavaScript Network Configuration Program (Part 10) – NAT and QoS (2013/03/20)
Create Your Own JavaScript Network Configuration Program (Part 11) – Static Routing and RIPv2 (2013/03/27)

About these ads