Creating a web front-end with Flask and Python for Network Automation

So you’ve been using python to automate and generate network configuration for a while now and have become pretty good with it. But what about the rest of your team or new engineers who may not be as fluent in network automation yet? Wouldn’t it be great if you could use your skills to build an easy to use application for others? One drawback of python is that it does require some knowledge on installing python its self and required packages for an application to run. Sometimes you can run into version issues with packages as well. This can make it difficult for others to use the tools you have created, especially when they are not familiar with python. To fix this, we can create a web front-end with Flask for network automation tools. Flask is an easy to use python web framework that can be used create a web front-end for your python automation tools.

While this post is not intended as how-to guide for Flask, I wanted to go over some basic components to demonstrate what can be done with it. For the most part Flask is python and a little bit of HTML. If you aren’t too familiar with writing HTML, don’t worry, you don’t need to know much to get started. Honestly, 95% of the HTML I have used in my Flask projects came from bootstrap and the other 5% from googling until I found an example of what I needed to do. I will touch on bootstrap a little later though.

Flask

The first component to creating a web page for your network automation front end is the Flask module its self. As previously mentioned Flask provides a pythonic framework to handle serving up web pages. Flask uses something called ‘routes’ to handle each individual page you create, think of this like the last part of a url, such as “www.network.com/buildinterface”. The “/buildinterface” would be one of the many routes in your Flask application. Along with this route, a python method is created to handle the logic of building and serving the webpage to a user. This can be as simple as returning some plain text that is displayed in the users browser or something more complex as presenting the user with a form for input. Heres an example of a simple route as well as a link to the official Flask documentation for a further look into getting started with the basics.

@app.route(‘/buildinterface’)
def BuildInterface():
    return ’This page could be used to present plain text or a form for user input!’

https://flask.palletsprojects.com/en/1.1.x/quickstart/

WTForms

 Speaking of forms, the next component I wanted to talk about is WTForms. Network configurations often require unique variables such as IP addresses, VLAN IDs, or descriptions. You can use WTForms to make building forms for user input simple. You can then take the user input variables and combine them with a jinja template to give the user a full configuration to paste into a network device or even something more advanced such as kick off an ansible job to automatically apply the configuration as well. See the below example of creating a form with WTForms as well as a link to documentation with more information.

class buildinterface_form(Form):
    interface_name = StringField('Interface Name', [validators.InputRequired()])
    description = StringField('Description')
    vlan = IntegerField('VLAN', [validators.InputRequired()])
    ip_address = StringField('IP Address', [validators.InputRequired()])


https://flask-wtf.readthedocs.io/en/stable/quickstart.html#creating-forms

Jinja2

Now that that you have a form you can take the information from the user and make use of it. A simple example would be to use jinja to generate a network configuration based on the input. See the below example of a simple jinja template as well as a link for more information on creating network configurations with jinja.

interface {{ variables.interface_name }}
 description {{ variables.description }}
 encapsulation dot1q {{ variables.vlan }}
 ip address {{ variables.ip_address }} 255.255.255.0
 service-policy output voice_qos
 ip access-group keep_out in

https://routebythescript.com/creating-network-configurations-with-jinja/

Bootstrap

The final piece I want to mention is bootstrap. Bootstrap is a framework for HTML, CSS and JavaScript. It can help you skip most of work involved in creating a decent looking web page. You can find examples of things you you need to make a webpage such as navigation bars, buttons, menus etc. most of which you can copy and paste with little or no modification. Check out the link below for a tutorial that helps bring all of this together to create a webpage with flask.

https://pythonprogramming.net/practical-flask-introduction/

The final thing I would like to leave you with is a simple but functional example of a flask application with a tool that generates a basic network configuration. Check out the github page below. Feel free to clone and run the code yourself.

https://github.com/sethbeauchamp/FlaskExample

If you enjoyed this post you may also like my post on Modularizing Jinja Templates for Network Automation where I talk about some more advanced jinja methods that can be used in conjunction with a flask web gui!