added socket-io impl

amithkoujalgi · Oct 19, 2023 · 069db6a · 069db6a
1 parent 625c79a
commit 069db6a
Show file tree

Hide file tree

Showing 8 changed files with 444 additions and 7 deletions.
diff --git a/sys_stats/api/stats.py b/sys_stats/api/stats.py
@@ -84,12 +84,12 @@ def __list_open_ports_with_lsof():
     open_ports = []
     try:
         cmd = ['lsof', '-i', '-n', '-P']
-        print(f'running: {" ".join(cmd)}')
+        # print(f'running: {" ".join(cmd)}')
         output = subprocess.check_output(cmd, universal_newlines=True)
         lines = output.split('\n')
         for line in lines[1:]:
             parts = line.split()
-            if '(LISTEN)' in parts and 'IPv4' in parts:
+            if '(LISTEN)' in parts and ('IPv4' in parts or 'IPv6' in parts):
                 pid = int(parts[1])
                 process_name = ''
                 process_owner = ''
@@ -103,7 +103,7 @@ def __list_open_ports_with_lsof():
                     fd='NA',
                     family='NA',
                     type='NA',
-                    laddr=dict(ip=parts[8].split(':')[0], port=parts[8].split(':')[1]),
+                    laddr = dict(ip=parts[8].rsplit(':', 1)[0], port=parts[8].rsplit(':', 1)[1]),
                     raddr='NA',
                     status='LISTEN',
                     pid=pid,

diff --git a/sys_stats/socketio_impl/main.py b/sys_stats/socketio_impl/main.py
@@ -9,8 +9,7 @@
 
 static_path = os.path.join(Path(sys_stats.__file__).parent, 'socketio_impl', 'static')
 
-print(static_path)
-sio = socketio.Server()
+sio = socketio.Server(cors_allowed_origins='*')
 app = socketio.WSGIApp(sio, static_files={
     '/': f"{static_path}/",
 })
@@ -27,6 +26,18 @@ def list_processes(sid, data):
     print('Received message:', data)
 
 
+@sio.on('list_ports')
+def list_ports(sid, data):
+    sio.emit("port-list", stats.net_connections())
+    print('Received message:', data)
+
+
+@sio.on('resource_usage')
+def resource_usage(sid, data):
+    sio.emit("resource-usage", stats.resource_usage())
+    print('Received message:', data)
+
+
 @sio.event
 def disconnect(sid):
     print('Client disconnected:', sid)

diff --git a/sys_stats/socketio_impl/static/favicon.ico b/sys_stats/socketio_impl/static/favicon.ico
diff --git a/sys_stats/socketio_impl/static/index.html b/sys_stats/socketio_impl/static/index.html
@@ -21,6 +21,7 @@
 <link href="/style.css" rel="stylesheet">
 <head>
     <title>Sys Stats</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
 <body>
@@ -41,13 +42,13 @@
                         </a>
                     </li>
                     <li>
-                        <a href="/ports" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
+                        <a href="/ports/" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
                            data-bs-placement="right" data-bs-original-title="Ports">
                             <i class="bi-wifi fs-1"></i>
                         </a>
                     </li>
                     <li>
-                        <a href="/stats" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
+                        <a href="/stats/" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
                            data-bs-placement="right" data-bs-original-title="Resources">
                             <i class="bi-speedometer2 fs-1"></i>
                         </a>

diff --git a/sys_stats/socketio_impl/static/ports/index.html b/sys_stats/socketio_impl/static/ports/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--suppress ALL -->
+<html lang="">
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<link rel="Icon" type="image/ico" href="#"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+      integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"
+        integrity="sha512-zoJXRvW2gC8Z0Xo3lBbao5+AS3g6YWr5ztKqaicua11xHo+AvE1b0lT9ODgrHTmNUxeCw0Ry4BGRYZfXu70weg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="/ports/ports.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+<link href="/style.css" rel="stylesheet">
+<head>
+    <title>Sys Stats: Ports</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+</head>
+
+<body>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-auto bg-light sticky-top">
+            <div class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top">
+                <a href="#" class="d-block p-3 link-dark text-decoration-none" title="" data-bs-toggle="tooltip"
+                   data-bs-placement="right" data-bs-original-title="Sys Stats"
+                   style="padding-top: 30px !important; padding-bottom: 30px !important;">
+                    <i class="bi-clipboard-heart fs-1"></i>
+                </a>
+                <ul class="nav nav-pills nav-flush flex-sm-column flex-row flex-nowrap mb-auto mx-auto text-center justify-content-between w-100 px-3 align-items-center">
+                    <li class="nav-item">
+                        <a href="/" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
+                           data-bs-placement="right" data-bs-original-title="Processes">
+                            <i class="bi-list-nested fs-1"></i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
+                           data-bs-placement="right" data-bs-original-title="Ports">
+                            <i class="bi-wifi fs-1"></i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="/stats/" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
+                           data-bs-placement="right" data-bs-original-title="Resources">
+                            <i class="bi-speedometer2 fs-1"></i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
+                           data-bs-placement="right" data-bs-original-title="Settings">
+                            <i class="bi-gear-wide-connected fs-1"></i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
+                           data-bs-placement="right" data-bs-original-title="Help">
+                            <i class="bi-info-lg fs-1"></i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://github.com/amithkoujalgi/sys-stats/issues" class="nav-link py-3 px-2" title=""
+                           data-bs-toggle="tooltip"
+                           data-bs-placement="right" data-bs-original-title="Report issues" target="_blank">
+                            <i class="bi-exclamation-triangle fs-1"></i>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="col-sm  p-3 min-vh-100">
+            <div class="row">
+                <div class="col-md-6 d-flex align-items-center">
+                    <h2>Sys Stats</h2>
+                </div>
+                <div class="col-md-6">
+                    <a href="https://github.com/amithkoujalgi/sys-stats" class="nav-link py-3 px-2 gh-link" title=""
+                       data-bs-toggle="tooltip"
+                       data-bs-placement="right" data-bs-original-title="Project on GitHub" target="_blank">
+                        <i class="bi-github fs-1"></i>
+                    </a>
+                </div>
+            </div>
+            <h5>Ports</h5>
+            <div class="input-group search-bar">
+                <input type="search" class="form-control rounded"
+                       placeholder="Search by PID or bind port or process name or command"
+                       aria-label="Search"
+                       aria-describedby="search-addon" id="proc-search"/>
+                <button type="button" class="btn btn-outline-primary" id="proc-search-btn">Search</button>
+            </div>
+            <table class="port-list table w-auto small"></table>
+        </div>
+    </div>
+</div>
+</body>
+
+</html>
diff --git a/sys_stats/socketio_impl/static/ports/ports.js b/sys_stats/socketio_impl/static/ports/ports.js
@@ -0,0 +1,69 @@
+// noinspection JSUnresolvedReference
+
+
+let socket = io("ws://0.0.0.0:8070");
+
+$(document).ready(function () {
+    let url = window.location.href;
+
+    $(function () {
+        $('[data-bs-toggle="tooltip"]').tooltip();
+    });
+
+    console.log('Loaded socketio script');
+    socket.on('connect', () => {
+        console.log('Connected to server!');
+    });
+
+    setInterval(function () {
+        socket.emit('list_ports', {search_keyword: ''});
+    }, 1000);
+
+    socket.on("port-list", data => {
+        // console.log("prc: " + JSON.stringify(data))
+        let portsList = data;
+        let tableBody = $('.port-list');
+
+        let rows = "";
+        for (let process of portsList) {
+            let row = `
+                <tr>
+                    <td style="font-family: monospace">${process.pid}</td>
+                    <td style="font-family: monospace">${process.laddr.port}</td>
+                    <td style="font-family: monospace">${process.laddr.ip}</td>
+                    <td class="process-status-container" style="font-family: monospace">${process.process_owner}</td>
+                    <td style="font-family: monospace">${process.process_name}</td>
+                    <td style="font-family: monospace">${process.process_cmd}</td>
+                </tr>
+            `;
+            rows = rows + row;
+        }
+        let head = `
+                <thead>
+                   <tr>
+                        <th scope="col">PID</th>
+                        <th scope="col">Bind Port</th>
+                        <th scope="col">Bind Host</th>
+                        <th scope="col">User</th>
+                        <th scope="col">Process</th>
+                        <th scope="col">Command</th>
+                    </tr>
+                </thead>
+        `;
+        tableBody.html(head + "<tbody>" + rows + "</tbody>");
+    });
+});
+
+$(document).on('click', '#send', function () {
+    console.log('clicked...')
+});
+
+$(document).on('click', '.expandable-cell', function () {
+    let $cell = $(this);
+    let isExpanded = $cell.hasClass('expanded');
+    if (isExpanded) {
+        $cell.removeClass('expanded');
+    } else {
+        $cell.addClass('expanded');
+    }
+});
diff --git a/sys_stats/socketio_impl/static/stats/index.html b/sys_stats/socketio_impl/static/stats/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--suppress ALL -->
+<html lang="">
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<link rel="Icon" type="image/ico" href="#"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+      integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"
+        integrity="sha512-zoJXRvW2gC8Z0Xo3lBbao5+AS3g6YWr5ztKqaicua11xHo+AvE1b0lT9ODgrHTmNUxeCw0Ry4BGRYZfXu70weg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.plot.ly/plotly-2.26.0.min.js" charset="utf-8"></script>
+<script src="/stats/stats.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+<link href="/style.css" rel="stylesheet">
+<head>
+    <title>Sys Stats: Stats</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+</head>
+
+<body>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-sm-auto bg-light sticky-top">
+            <div class="d-flex flex-sm-column flex-row flex-nowrap bg-light align-items-center sticky-top">
+                <a href="#" class="d-block p-3 link-dark text-decoration-none" title="" data-bs-toggle="tooltip"
+                   data-bs-placement="right" data-bs-original-title="Sys Stats"
+                   style="padding-top: 30px !important; padding-bottom: 30px !important;">
+                    <i class="bi-clipboard-heart fs-1"></i>
+                </a>
+                <ul class="nav nav-pills nav-flush flex-sm-column flex-row flex-nowrap mb-auto mx-auto text-center justify-content-between w-100 px-3 align-items-center">
+                    <li class="nav-item">
+                        <a href="/" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
+                           data-bs-placement="right" data-bs-original-title="Processes">
+                            <i class="bi-list-nested fs-1"></i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="/ports/" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
+                           data-bs-placement="right" data-bs-original-title="Ports">
+                            <i class="bi-wifi fs-1"></i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
+                           data-bs-placement="right" data-bs-original-title="Resources">
+                            <i class="bi-speedometer2 fs-1"></i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
+                           data-bs-placement="right" data-bs-original-title="Settings">
+                            <i class="bi-gear-wide-connected fs-1"></i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#" class="nav-link py-3 px-2" title="" data-bs-toggle="tooltip"
+                           data-bs-placement="right" data-bs-original-title="Help">
+                            <i class="bi-info-lg fs-1"></i>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://github.com/amithkoujalgi/sys-stats/issues" class="nav-link py-3 px-2" title=""
+                           data-bs-toggle="tooltip"
+                           data-bs-placement="right" data-bs-original-title="Report issues" target="_blank">
+                            <i class="bi-exclamation-triangle fs-1"></i>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="col-sm p-3 min-vh-100">
+            <div class="row">
+                <div class="col-md-6 d-flex align-items-center">
+                    <h2>Sys Stats</h2>
+                </div>
+                <div class="col-md-6">
+                    <a href="https://github.com/amithkoujalgi/sys-stats" class="nav-link py-3 px-2 gh-link" title=""
+                       data-bs-toggle="tooltip"
+                       data-bs-placement="right" data-bs-original-title="Project on GitHub" target="_blank">
+                        <i class="bi-github fs-1"></i>
+                    </a>
+                </div>
+            </div>
+            <h5>Resource Usage</h5>
+
+            <div class="row">
+                <div class="col-md-6">
+                    <div id="memory-usage-chart" style="justify-content: center; display: flex"></div>
+                </div>
+                <div class="col-md-6">
+                    <div id="memory-usage-chart1" style="justify-content: center; display: flex"></div>
+                </div>
+            </div>
+
+            <div>
+                <h6>CPU Usage: Per Core</h6>
+                <table class="cpu-list table"></table>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+
+</html>