Deep Dive into the Virtual Network lab’s Web Development Framework

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

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.
​The original blog agenda for this entry is a deep dive into my lab configuration for web development framework, including:
a.     Model
i.       Flask
ii.     Python
b.     View
i.       nginx
ii.     wsgi
c.     Controller
i.       Angularjs
A typical web automation application with a web portal front-end will be composed of four essential web interface components. The virtual lab that I configured only uses two of these components because of the lab’s reduced scaling requirements.
The typical front-end components include:
1)    Web server and reverse proxy: Multiple options are available, and Nginx stands out as an excellent, flexible web server and reverse proxy for offloading inbound restful requests to the web application.
2)    wsgi: The Web Server Gateway Interface is compatible with both Nginx and Python web applications.
3)    Flask: This web server framework is one of several (including Django) that allow different url references to initiate unique blocks of executable Python web application code.
4)    Python: Python supports wsgi, Flask, NoSQL with the necessary plug-ins so as to enable Python to function as an excellent code foundation for web based applications.
The lab that I constructed embeds the web client in the same virtual server as the web application, so a web proxy (Nginx) and a wsgi between the web server and the web application wasn’t necessary. Regardless; the interoperation between the web server, wsgi and Flask is normally an integral part of production systems, so I have described  the interoperation of Nginx, wsgi, Flask and Python below.  Since Angularjs is central in linking the portal HTML with a Flask python url decorator, Angularjs is included in the illustrations. Bear in mind that the portal components in my lab configuration include only the HTML, Flask, Angular and Python.
Refer to the diagram and the comments below:
Stage 1:          Inbound Requests
Restful requests arrive at the Nginx reverse proxy.  The reverse proxy unloads the burden of inbound requests from the simple Flask server. The requests are handed down to the Flask Port via the wsgi.
Stage 2:           Index Page url
The @app.route(“/”) occurrence like the one from my lab configuration below is a Flask decorator for the Python function below it. The method is used to route traffic for a specific URL to the Python function directly underneath.  The url will be referenced upon the initial (or reloaded) access to the Flask port and root url.
@app.route(“/”)
def main():
    return render_template(‘sandbox4beta.html’)
 
Stage 3:  Index Page – to – Angularjs – to – Flask Entry Points
As the user selects buttons or actions on the Index page, Angularjs directives may make calls to further Flask entry point urls. These urls will point to specific blocks of Python code for execution. Normally, the Python code blocks will handle data such as standard I/O or DB calls. Refer to the excerpts from the Angularjs and Python code Flask decorator and function below (from my lab configuration), which executes a NoSQL DB document insert:
Angularjs Code:
$scope.AnnouncePrefix = function () {
            $http({
                method: ‘POST’,
                url: ‘/AnnouncePrefix’,
                data: {
                    info: $scope.info
                }
PYTHON Code
@app.route(“/AnnouncePrefix“,methods=[‘POST’])
def AnnouncePrefix():
    try:
        json_data = request.json[‘info’]
        prefix = json_data[‘prefix’]
        neighbor = json_data[‘neighbor’]
        nexthop = json_data[‘nexthop’]
        aspath = json_data[‘aspath’]
        localpref = json_data[‘localpref’]
        opnotes = json_data[‘opnotes’]
        db.prefixinfo2.insert_one({
            ‘prefix’:prefix,’neighbor’:neighbor,’nexthop’:nexthop,’aspath’:aspath,’localpref’:localpref, ‘opnotes’:opnotes
            })
From the diagram and illustrations above; one can visualize all the components of Model-View-Controller (MVC).  The view includes the entire HTML DOM and index page. The controller includes the Angular Directives that point to a Model’s url and code block.  The Model includes all the examples of Python I/O code such as above.
This concludes the description of the application of MVC in my lab configuration. Be aware that a much greater explanation of all of the lab HTML, Angularjs, Python/Flask and MongoDB code will follow in a subsequent entry.