DEV Community

loading...
Cover image for PIP-OS-WebAPP

PIP-OS-WebAPP

Nitesh Thapliyal
I'm an Information technology student. I'm passionate about current and emerging technologies. I have always been fascinated by how things work, functionality, and problem-solving.
Updated on ・4 min read

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_logo

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>

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

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.

Docker

Kubernetes

Kubernetes_logo

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>
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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.

Kubernetes

To watch the Demo video 👇

Discussion (0)