Fix a bug that blocked monitor page due to missing docker containers

Update UI styling to include a button to view password

docs/genindex.html

@@ -149,6 +149,8 @@ <h2 id="C">C</h2>
       <li><a href="index.html#pyninja.modules.models.Payload.command">command (pyninja.modules.models.Payload attribute)</a>
 </li>
       <li><a href="index.html#pyninja.modules.models.complexity_checker">complexity_checker() (in module pyninja.modules.models)</a>
+</li>
+      <li><a href="index.html#pyninja.monitor.resources.containers">containers() (in module pyninja.monitor.resources)</a>
 </li>
       <li><a href="index.html#pyninja.modules.models.Database.create_table">create_table() (pyninja.modules.models.Database method)</a>
 </li>

docs/index.html

@@ -2189,6 +2189,12 @@ <h1>PyNinja - Monitor<a class="headerlink" href="#pyninja-monitor" title="Permal
 </dl>
 </dd></dl>
 
+<dl class="py function">
+<dt class="sig sig-object py" id="pyninja.monitor.resources.containers">
+<span class="sig-prename descclassname"><span class="pre">pyninja.monitor.resources.</span></span><span class="sig-name descname"><span class="pre">containers</span></span><span class="sig-paren">(</span><span class="sig-paren">)</span> <span class="sig-return"><span class="sig-return-icon">&#x2192;</span> <span class="sig-return-typehint"><span class="pre">bool</span></span></span><a class="headerlink" href="#pyninja.monitor.resources.containers" title="Permalink to this definition">¶</a></dt>
+<dd><p>Check if any Docker containers are running.</p>
+</dd></dl>
+
 <dl class="py function">
 <dt class="sig sig-object py" id="pyninja.monitor.resources.get_docker_stats">
 <em class="property"><span class="k"><span class="pre">async</span></span><span class="w"> </span></em><span class="sig-prename descclassname"><span class="pre">pyninja.monitor.resources.</span></span><span class="sig-name descname"><span class="pre">get_docker_stats</span></span><span class="sig-paren">(</span><span class="sig-paren">)</span> <span class="sig-return"><span class="sig-return-icon">&#x2192;</span> <span class="sig-return-typehint"><span class="pre">List</span><span class="p"><span class="pre">[</span></span><span class="pre">Dict</span><span class="p"><span class="pre">[</span></span><span class="pre">str</span><span class="p"><span class="pre">,</span></span><span class="w"> </span><span class="pre">str</span><span class="p"><span class="pre">]</span></span><span class="p"><span class="pre">]</span></span></span></span><a class="headerlink" href="#pyninja.monitor.resources.get_docker_stats" title="Permalink to this definition">¶</a></dt>

pyninja/monitor/resources.py

@@ -2,6 +2,7 @@
 import json
 import logging
 import os
+import subprocess
 from typing import Dict, List
 
 import psutil
@@ -46,13 +47,30 @@ def get_cpu_percent(cpu_interval: int) -> List[float]:
     return psutil.cpu_percent(interval=cpu_interval, percpu=True)
 
 
+def containers() -> bool:
+    """Check if any Docker containers are running."""
+    docker_ps = subprocess.run(
+        "docker ps -q",
+        stdout=asyncio.subprocess.PIPE,
+        stderr=asyncio.subprocess.PIPE,
+        shell=True,
+    )
+    if docker_ps.stderr:
+        LOGGER.debug(docker_ps.stderr.decode().strip())
+        return False
+    if docker_ps.stdout.decode().strip().splitlines():
+        return True
+
+
 async def get_docker_stats() -> List[Dict[str, str]]:
     """Run the docker stats command asynchronously and parse the output.
 
     Returns:
         List[Dict[str, str]]:
         Returns a list of key-value pairs with the container stat and value.
     """
+    if not containers():
+        return []
     process = await asyncio.create_subprocess_shell(
         'docker stats --no-stream --format "{{json .}}"',
         stdout=asyncio.subprocess.PIPE,

pyninja/monitor/templates/index.html

@@ -10,11 +10,14 @@
     <meta content="width=device-width, initial-scale=1" name="viewport">
     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
+    <!-- Favicon.ico and Apple Touch Icon -->
     <link property="og:image" rel="icon" href="https://thevickypedia.github.io/open-source/images/logo/pyninja.ico">
     <link property="og:image" rel="apple-touch-icon"
           href="https://thevickypedia.github.io/open-source/images/logo/pyninja.png">
     <!-- Font Awesome icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/fontawesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/solid.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/regular.min.css">
     <style>
         body {
             font-family: 'Arial', sans-serif;
@@ -89,7 +92,27 @@
             font-family: 'Courier New', monospace;
             font-size: small;
         }
+    </style>
+    <style>
+        .password-container {
+            position: relative;
+        }
 
+        .password-container input[type="password"],
+        .password-container input[type="text"]{
+            width: 100%;
+            padding: 12px 36px 12px 12px;
+            box-sizing: border-box;
+        }
+
+        .fa-eye, .fa-eye-slash {
+            position: absolute;
+            top: 40%;
+            right: 4%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            color: lightgray;
+        }
     </style>
     <noscript>
         <style>
@@ -114,25 +137,30 @@ <h2 style="margin-top:5%">This page requires JavaScript
 <body>
 <div class="container">
     <div class="header">
-        <i class="fa fa-user"></i>
+        <i class="fa-solid fa-user"></i>
     </div>
     <div class="content">
         <!-- <form action="{ url_for('signin') }" method="post"> -->
         <form>
             <label for="username">Username:</label>
             <input type="text" id="username" name="username" required>
             <label for="password">Password:</label>
-            <input type="password" id="password" name="password" required>
+            <div class="password-container">
+                <input type="password" id="password" name="password" required>
+                <i class="fa-regular fa-eye" id="eye"></i>
+            </div>
             <button type="submit" onclick="submitToAPI(event)">Sign In</button>
         </form>
     </div>
 </div>
 </body>
 <!-- control the behavior of the browser's navigation without triggering a full page reload -->
 <script>
-    history.pushState(null, document.title, location.href);
-    window.addEventListener('popstate', function (event) {
+    document.addEventListener('DOMContentLoaded', function() {
         history.pushState(null, document.title, location.href);
+        window.addEventListener('popstate', function (event) {
+            history.pushState(null, document.title, location.href);
+        });
     });
 </script>
 <!-- handle authentication from login page -->
@@ -197,7 +225,7 @@ <h2 style="margin-top:5%">This page requires JavaScript
                     console.log(data);
                 }
             },
-            error: function (jqXHR, textStatus, errorThrown) {
+            error: function(jqXHR, textStatus, errorThrown) {
                 console.error(`Status: ${textStatus}, Error: ${errorThrown}`);
                 if (jqXHR.hasOwnProperty("responseJSON")) {
                     alert(jqXHR.responseJSON.detail);
@@ -215,4 +243,17 @@ <h2 style="margin-top:5%">This page requires JavaScript
         <a href="https://github.com/thevickypedia/PyNinja">https://github.com/thevickypedia/PyNinja</a>
     </div>
 </footer>
+<script>
+    const passwordInput = document.querySelector("#password")
+    const eye = document.querySelector("#eye")
+    eye.addEventListener("click", function() {
+        if (passwordInput.type === "password") {
+            passwordInput.type = "text";
+            eye.className = "fa-regular fa-eye-slash"
+        } else {
+            passwordInput.type = "password";
+            eye.className = "fa-regular fa-eye"
+        }
+    });
+</script>
 </html>

pyninja/monitor/templates/main.html

@@ -190,11 +190,12 @@
         }
 
         footer {
+            bottom: 20px;
             width: 100%;
             text-align: center;
+            font-family: 'Courier New', monospace;
             align-content: center;
-            font-size: 14px;
-            font-style: italic;
+            font-size: small;
         }
 
         .corner {
@@ -749,7 +750,10 @@ <h3>Process Stats</h3>
     }
 </script>
 <footer>
-    Generated by <a href="https://github.com/thevickypedia/PyNinja/releases/tag/v{{ version }}">PyNinja - v{{ version }}</a>
+    <div class="footer">
+        PyNinja - {{ version }}<br>
+        <a href="https://github.com/thevickypedia/PyNinja">https://github.com/thevickypedia/PyNinja</a>
+    </div>
 </footer>
 </body>
 </html>