PIP-OS-WebAPP

Hello everyone,

In this blog we are going to see how we can integrate JavaScript with technologies and can build something great.

PIP-OS is a WebAPP where user can work on Docker, Kubernetes and much more technologies in the future.

Technologies that PIP-OS support till now:

• Docker
• Kubernetes

Prerequisite:

• knowledge of HTML/CSS/JavaScript
• Linux
• Webserver Configured in Linux
• Docker installed in Linux
• kubernetes configured

So now let's start with Docker

Docker

Docker WebAPP can run the Docker commands in browser and you can see the output on your screen.

Use case that is solves:

• User don't have to configure the Docker in their system

Tech Stack used:

• HTML
• CSS
• JavaScript
• Python

For the front end part the main component created is input box that will take the docker command as an input.

Below is the HTML and CSS code for creating an input box.

 <div class="center-docker">
        <div class="d-flex justify-content-center">
          <div class="searchbar text-white">
            [root @localhost~]# <input id="inp" class="search_input text-white" type="text" name="" placeholder="Enter the command">
        <a onclick="lw()" class="search_icon">
            <i class="fas fa-arrow-right" aria-hidden="true"></i>
        </a>
      </div>
        </div>
    </div>

Here we can see the input id = "inp" which is associated with the JavaScript code that will get the value with the following id from the Input box.

<script>
    function lw() {

    var i = document.getElementById("inp").value

    var xhr = new XMLHttpRequest();


    xhr.open("GET","http://localhostIP/cgi-bin/PIPOS/docker.py?x="+i,true);
    xhr.send();

    xhr.onload = function() {
        var output = xhr.responseText;
        document.getElementById("d1").innerHTML = output;
        }
    }

</script>

here this part of code takes the input from the user through input box and send the input to the python script which is present in the cgi-bin directory.

what is CGI?

Common Gateway interface(CGI) is a way of running the program from the webserver. For Detail

import cgi
import subprocess
import time 

print("context-type: text/html")
print()
#print("let's build something new Nitesh")#here now if now I change anything it will change in page without refreshing

#time.sleep(10) #this holds program for 10 seconds and then run the prog auto
f=cgi.FieldStorage()
cmd=f.getvalue("x")
#print(cmd)

o = subprocess.getoutput("sudo " +cmd)

print(o)

So this cgi program will get the input from the server and run the command in the browser.

Subprocess is a library that is used to run the new application or program through the python code by creating the process.

so now start the server and open the webpage in the browser and run the docker commands in the browser.

Kubernetes

Kubernetes WebAPP can run kubernetes command in the browser, it takes input as a language like we normally talk not commands and then it process that query and shows output accordingly.

Use case that it solves"

• User don't need to know the kubernetes commands
• User don't need to configure the kubernetes in their system

Tech stack Used:

• HTML
• CSS
• JavaScript
• Python

For front end the main part is input box that will take the input as a query from the user.

To create the input box used HTML and CSS.

    <div class="center-docker">
        <div class="d-flex justify-content-center">
          <div class="searchbar text-white">
            [root @localhost~]# <input class="search_input text-white" id="inp1" type="text" name="" placeholder="Enter the command">
            <a onclick="lw()" class="search_icon">
            <i class="fa fa-arrow-right" aria-hidden="true"></i>
        </a>
          </div>
        </div>
    </div>

here we can see the id associated with input box and function associated with the button. so as soon as user will input query and click in the button than function will get triggered that is associated with JavaScript code that will take input and sends that input to the cgi program that will process the input and shows output in the browser.

import cgi
import subprocess as sp
import time

print("context-type: text/html")
print()
#print("let's build something new Nitesh")#here now if now I change anything it will change in page without refreshing

#time.sleep(10) #this holds program for 10 seconds and then run the prog auto
f=cgi.FieldStorage()
#print(cmd)
#cmd = f.getvalue("x")

#o = subprocess.getoutput(cmd + " --kubeconfig admin.conf")

#print(o)

query = f.getvalue("x")

if "show pods" in query:
    cmd = "kubectl get pods --kubeconfig admin.conf"
    o=sp.getoutput(cmd)
    print(o)

elif "show deployment" in query:
    cmd = "kubectl get deployments --kubeconfig admin.conf"
    o = sp.getoutput(cmd)
    print(o)

here is a program that will process input and show output in the browser as discussed above.

Here admin.conf file is a configuration file of kubernetes that will help to run the kubernetes in the Linux.

To watch the Demo video 👇