Docker Automation with Python , JavaScript and CSS

7 min readJun 20, 2021

creating a web page to perform certain tasks related to docker

GOAL:

📌 In this task you have to create a Web Application for Docker (one of the great Containerization Tool which provides the user Platform as a Service (PaaS)) by showing your own creativity and UI/UX designing skills to make the webportal user friendly.

📌 This app will help the user to run all the docker commands like:

👉docker images

👉docker ps

👉docker run

👉docker rm -f

👉docker exec

To get the better understanding of my approach you must know the below mentioned basic concepts and keep reading as I will give some easy edits you would be able to add by yourself at the end of this blog to make the the site more dynamically accurate.

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.[2]

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file which reduces complexity and repetition in the structural content as well as enabling the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.

java script

JS, is a programming language that conforms to the ECMAScript specification.[9] JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web.[10] Over 97% of websites use it client-side for web page behavior,[11] often incorporating third-party libraries.[12] All major web browsers have a dedicated JavaScript engine to execute the code on the user’s device.

As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).

The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O.

Adobe Illustrator

Adobe Illustrator is a vector graphics editor and design program developed and marketed by Adobe Inc. Originally designed for the Apple Macintosh, development of Adobe Illustrator began in 1985. Along with Creative Cloud (Adobe’s shift to monthly or annual subscription service delivered over the Internet), Illustrator CC was released. The latest version, Illustrator CC 2021, was released on October 20, 2020 and is the 25th generation in the product line. Adobe Illustrator was reviewed as the best vector graphics editing program

Apache

The Apache HTTP Server, colloquially called Apache (/əˈpætʃi/ ə-PATCH-ee), is a free and open-source cross-platform web server software, released under the terms of Apache License 2.0. Apache is developed and maintained by an open community of developers under the auspices of the Apache Software Foundation.

The vast majority of Apache HTTP Server instances run on a Linux distribution,[6] but current versions also run on Microsoft Windows,[7] OpenVMS,[8] and a wide variety of Unix-like systems. Past versions also ran on NetWare, OS/2 and other operating systems,[9] including ports to mainframes.[10]

Originally based on the NCSA HTTPd server, development of Apache began in early 1995 after work on the NCSA code stalled. Apache played a key role in the initial growth of the World Wide Web,[11] quickly overtaking NCSA HTTPd as the dominant HTTP server. In 2009, it became the first web server software to serve more than 100 million websites.[12] As of January 2021, Netcraft estimated that Apache served 24.63% of the million busiest websites, while Nginx served 23.21% and Microsoft is in third place at 6.85% (for some of Netcraft’s other stats Nginx is ahead of Apache),[13] while according to W3Techs, Apache is ranked first at 35.0% and Nginx second at 33.0% and Cloudflare Server third at 17.3%.

MY APPROACH

now as we have gone through the basic knowledge about what are the essential software now we will see how to deploy a website made with java and css over the rhel 8 os such that we can use the docker commands without actually writing them over the real command line of our base os for this first we will use a simple ui designing tool and create the layout for the web page .

UI creation

now to use the elements created we have to create the asset folder containing the different elements related to the website

Applying and creating web site

now we will use java and Css to design and arrange the assets over the browser

creating elements and arranging there position

Here i have used the elements I created to make the site for now ignore the functions that are applied on click

I wanted to show some faded change effect over a part of the site when the mouse go over the icon so here I applied the condition over it .The effect looks like this

Applying conditions for docker

now here the use of the onclick elements previously mentioned comes into play i created the buttons to perform six different task of docker over my system and then described my backend and java function to implement them and display over a part of the web site

NOTE: the backend part har to be written on apython file in the location over your server => var/www/cgi-bin

here you can see that i defined an extra execution function in such a way that the web page would return to its original state when clicked anywhere else on the screen

Deploying over the web server

now to deploy the website over the redhat os and then using it we will need to install the apache services over the website by => yum install httpd and then giving this whole folder to the location =.> /var/www/html/