Geekly Articles each Day
📜 ⬆️ ⬇️

Generator configurations for network equipment and not only



Many people store network device configuration patterns (plain and not only networked ) in plain text files. And when it comes time to set up new equipment, they take out these files and start changing something in them. Daily routine operational tasks are not an exception, and the battle with these tasks is usually conducted with the help of configuration files. Of course, there are network management applications, but alas, far from all of them use them, because many cannot afford them or hardware configuration tasks are performed quite rarely, and therefore it is very difficult to justify the purchase of such software. I want to offer you a solution for the implementation of the configuration generator based on HTML / JS, as well as a small DIY kit for a quick start.

Some admins write configuration generators in Bash / Python, and then teach the budding tech support guy to use these "self-written devices". Then they transfer all routine and typical tasks to the first support line. The problem here is only that often, the application is a black screen with a flashing cursor and a suggestion to enter data strictly in order and without errors. Accordingly, this data will be used to create a configuration or a set of commands.

The company in which I work is not an exception, and we also have enough routine tasks that we would like to simplify and automate. It was decided to make a Cisco cross-platform configuration generator with a GUI. Naturally, the view fell on web technologies, but the prospect of raising a web server (at least at the initial stage) was not very pleasing. There were smart people who suggested that all this can be implemented locally on the HTML / JS technology stack, which I eventually did. Some parts of the application may not look very elegant (in particular, storing templates), but there are undeniable advantages, HTML and JS know almost everything, and if difficulties arise, they will always be solved by a gigantic community. And so, to the point.
')
Architecturally, the generator is a web page written in HTML. Configuration templates are stored in JS files as text variables. The data is entered into a web form and a configuration is created on their basis. Let's take a look at how this happens with a specific example.

First, let's set the task of creating a set of commands for configuring a VLAN and its IP address. To create a template, I took such a piece of configuration.

interface Vlan555
description === LAN ===
ip nat inside
ip virtual-reassembly in
ip address 10.47.3.1 255.255.255.0
ip tcp adjust-mss 1442
exit

There is a simple web page that contains information input fields generator.html :
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Config generator</title> <!--   --> <script src="config_tempalte.js"></script> </head> <body> <div id="newconf" style="padding:20px;"> <!--  --> <h3> </h3> <label for="text"> VLAN :</label> <input type="text" id="vlan" maxlength="4" placeholder="1234"></br> <label for="text"> VLAN  IP :</label> <input type="text" id="ip" maxlength="15" placeholder="192.168.1.1"> / <input type="text" id="mask" maxlength="15" placeholder="255.255.255.0"></br> <button type="submit" id="confcreate"> </button></br></br> <!----> <h4>  Cisco | <button type="submit" id="download"> </button></br></h4> <div id="config"></div> </div> </body> </html> <script src="actions.js"></script>

Two scripts are connected to the page (in principle, nothing prevents you from writing everything in one file, but I have divided it for clarity):
 //    <script src="actions.js"></script>

Below is the listing of the actions.js script, which generally could be half as much, but I decided to add a download button for the configuration as a file and because of that it swelled. Nevertheless, I think this is an important and necessary function, since configurations are often uploaded via tftp.
 function begin() { confcreate.onclick = function() { var vlan = document.getElementById('vlan'); var ip = document.getElementById('ip'); var mask = document.getElementById('mask'); var config = document.getElementById('config'); var template = config_template; template = template.replace(new RegExp('{{VLAN}}','g'),vlan.value); template = template.replace(new RegExp('{{IP_ADDR}}','g'),ip.value); template = template.replace(new RegExp('{{MASK}}','g'),mask.value); config.innerHTML = template; }; download.onclick = function() { downloadInnerText('cisco_config.txt', 'config','text/plain'); }; function downloadInnerText(filename, elId, mimeType) { var el = document.getElementById(elId); var link = document.createElement('a'); mimeType = mimeType || 'text/plain'; link.setAttribute('download', filename); link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(el.innerText)); link.click(); } }; document.addEventListener("DOMContentLoaded", begin); 

 //   <script src="config_tempalte.js"></script>

The template can be made in different ways, but all the parts of the configuration must be contained in the variables. JavaScript perceives the end of a line as the end of a variable, so you have to escape each line with a backslash. In addition, the HTML tag br is added at the end of each line to display the configuration on the page correctly and the text line end character \ n to export to the test file correctly. To some, such a template may not seem very aesthetic, but despite a bunch of "extra" characters, creating templates and making changes to it is quite simple. Most text editors have the function of adding characters to the end of a line. The {{}} characters in the template are framed places where data will be substituted. Below is a listing of the config_tempalte.js template itself :
 var config_template = "\ !======</br>\n\ conf t</br>\n\ !</br>\n\ interface Vlan{{VLAN}}</br>\n\ description === LAN ===</br>\n\ ip nat inside</br>\n\ ip virtual-reassembly in</br>\n\ ip address {{IP_ADDR}} {{MASK}}</br>\n\ ip tcp adjust-mss 1442</br>\n\ exit</br>\n\ !</br>\n\ wr mem</br>\n\ !</br>\n\ ";

The configuration generator is ready. After creating three files and filling them with the lines I specified, you will receive the following application:


Its main task is to receive data through a web form, insert it into a template, and display the result on the screen. There are 65 lines of code, and we have a small, but very useful application. Creating configuration files is a unique and intimate business for each particular company, so it’s probably impossible to offer a ready-made solution for all occasions. You can use the source to write a configuration generator for your own needs.

Sources can be taken from here: https://github.com/bravoavo/cisco-config-generator

Please note that this is just an example on the basis of which everyone can make an application for themselves. I tried to describe the general approach to solving the problem of generating configurations using the example of Cisco equipment. JavaScript is a very powerful programming language and with a little effort you can customize this configurator to suit your needs. In the application that I use, the validation of the entered information, the generation of passwords, the calculation of the time zone, IP addresses and network masks are implemented. Among other things, I connected Bootstrap to make the application look more modern and jQuery for more dynamics and animation. In my case, it looks like this:

Source: https://habr.com/ru/post/307054/

More articles:


All Articles