GUI for running Kubernetes Commands using Python CGI and AJAX

Vibhanshusharma
4 min readJun 30, 2021
K8S GUI

About AJAX

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.

  • Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.
  • Conventional web applications transmit information to and from the sever using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server.
  • With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.
  • XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
  • AJAX is a web browser technology independent of web server software.
  • A user can continue to use the application while the client program requests information from the server in the background.
  • Intuitive and natural user interaction. Clicking is not required, mouse movement is a sufficient event trigger.
  • Data-driven as opposed to page-driven.

Python CGI

Python CGI stands for Common Gateway Interface. An HTTP server invokes a Python CGI script so it can process user input that a user may submit through an HTML

or element. Such a script usually lives in the server’s special cgi-bin directory.
For a request, the server places information about it- the client’s hostname, the requested URL, the query string, and other information- in the script’s shell environment. It executes this script and sends the output back to the client. The input for this script connects to the client, and the server sometimes reads the form data this way.

Other times, it passes form data through a query string, which is a part of the URL. A query string holds data that doesn’t conventionally fit a hierarchical path structure.

Kubernetes

Kubernetes is a portable, extensible, open-source platform for managing containerized workloads and services, that facilitates both declarative configuration and automation. It has a large, rapidly growing ecosystem. Kubernetes services, support, and tools are widely available.

The name Kubernetes originates from Greek, meaning helmsman or pilot. K8s as an abbreviation results from counting the eight letters between the “K” and the “s”. Google open-sourced the Kubernetes project in 2014. Kubernetes combines over 15 years of Google’s experience running production workloads at scale with best-of-breed ideas and practices from the community.

Kubernetes GUI

So we have created an HTML page that will take the input from the user, then from the input, we have used DOM (Document Object Model) to store the value in the JavaScript variable, after which by using AJAX we send the value to the python CGI program of the same server which will execute the commands and give the output.

Then with AJAX only we will show the output into the screen with the help of a modal, without loading the screen.

Here are some of the photos of our Web App

Home Page!
Help Box!
User Entering Command!
Output!
Verified!

This task was completed with the help of

  • Sahil Negi
  • Saurav Rana
  • Devesh Bhardwaj

Thank You

--

--