added socket-io impl

amithkoujalgi · Oct 25, 2023 · e60b702 · e60b702
1 parent 882e752
commit e60b702
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 15 deletions.
diff --git a/sys_stats/socketio_impl/main.py b/sys_stats/socketio_impl/main.py
@@ -22,7 +22,9 @@ def connect(sid, environ):
 
 @sio.on('list_processes')
 def list_processes(sid, data):
-    sio.emit("process-list", stats.processes(search_keyword=''))
+    search_keyword = data['search_keyword']
+    print(search_keyword)
+    sio.emit("process-list", stats.processes(search_keyword=search_keyword))
     print('Received message:', data)
 
 
@@ -38,6 +40,16 @@ def resource_usage(sid, data):
     print('Received message:', data)
 
 
+@sio.on('kill_process')
+def kill_process(sid, data):
+    _pid_to_kill = int(data['process_id'])
+    print('Received message:', data)
+    sio.emit("process-kill-status", {
+        "status": stats.kill_process_by_pid(_pid_to_kill),
+        "pid": _pid_to_kill
+    })
+
+
 @sio.event
 def disconnect(sid):
     print('Client disconnected:', sid)

diff --git a/sys_stats/socketio_impl/static/index.html b/sys_stats/socketio_impl/static/index.html
@@ -93,10 +93,22 @@ <h5>Processes</h5>
                 <input type="search" class="form-control rounded" placeholder="Search by PID 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>
+<!--                <button type="button" class="btn btn-outline-primary" id="proc-search-btn">Search</button>-->
             </div>
             <table class="process-list table w-auto small"></table>
         </div>
+
+        <div class="position-fixed bottom-0 end-0 p-3">
+            <div id="toast" class="toast" style="float:right;" role="alert" aria-live="assertive" aria-atomic="true"
+                 data-delay="3000">
+                <div class="toast-header">
+                    <strong class="me-auto">Alert</strong>
+                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+                </div>
+                <div class="toast-body">
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 </body>

diff --git a/sys_stats/socketio_impl/static/index.js b/sys_stats/socketio_impl/static/index.js
@@ -16,10 +16,16 @@ $(document).ready(function () {
         // socket.emit('list_processes', {data: 'foo!', id: 123});
     });
 
+    socket.emit('list_processes', {search_keyword: ''});
     setInterval(function () {
-        socket.emit('list_processes', {search_keyword: ''});
+        socket.emit('list_processes', {search_keyword: $('#proc-search').val()});
     }, 1000);
 
+    socket.on("process-kill-status", data => {
+        $('.toast-body').html(`Process ${data.pid} killed.`);
+        $('#toast').toast('show');
+    });
+
     socket.on("process-list", data => {
         // console.log("prc: " + JSON.stringify(data))
         let processList = data;
@@ -39,7 +45,7 @@ $(document).ready(function () {
                         style="font-family: monospace" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title=${process.cmdline}>${process.cmdline}</td>
                     <td style="font-family: monospace">${process.memory_usage}</td>
                     <td style="font-family: monospace">${process.cpu_usage}</td>
-                    <td style="font-family: monospace">Kill</td>
+                    <td style="font-family: monospace" class="kill-prc prc-${process.pid}">Kill</td>
                 </tr>
             `;
             rows = rows + row;
@@ -64,8 +70,12 @@ $(document).ready(function () {
     });
 });
 
-$(document).on('click', '#send', function () {
-    console.log('clicked...')
+$(document).on('click', '.kill-prc', function () {
+    let pid = $(this).attr('class').replace('kill-prc', '').replace('prc-', '').trim();
+    const result = window.confirm(`Are you sure you want to kill this process (PID: ${pid})?`);
+    if (result) {
+        socket.emit('kill_process', {process_id: pid});
+    }
 });
 
 $(document).on('click', '.expandable-cell', function () {

diff --git a/sys_stats/socketio_impl/static/stats/stats.js b/sys_stats/socketio_impl/static/stats/stats.js
@@ -1,6 +1,4 @@
 // noinspection JSUnresolvedReference
-
-
 let socket = io("ws://0.0.0.0:8070");
 
 function plotMemoryChart(percentage, total, used) {
@@ -30,8 +28,8 @@ function plotMemoryChart(percentage, total, used) {
     ];
     let config = {displayModeBar: false};
     let layout = {
-        width: 600,
-        height: 500,
+        width: 500,
+        height: 400,
         margin: {t: 0, b: 0}
     };
     Plotly.newPlot('memory-usage-chart', data, layout, config);
@@ -64,8 +62,8 @@ function plotCPUChart(percentage) {
     ];
     let config = {displayModeBar: false};
     let layout = {
-        width: 600,
-        height: 500,
+        width: 500,
+        height: 400,
         margin: {t: 0, b: 0}
     };
     Plotly.newPlot('memory-usage-chart1', data, layout, config);
@@ -85,12 +83,15 @@ function plotCPUCoresChart(percentageArray) {
 
     var layout = {
         yaxis: {
-            range: [0, 100]
+            range: [0, 100],
+            title: 'CPU Cores Usage (%)'
         },
         xaxis: {
             categoryorder: 'category ascending',
-            tickmode: 'linear'
-        }
+            tickmode: 'linear',
+            title: 'CPU Cores' // Set x-axis label
+        },
+        height: 350
     };
     let config = {displayModeBar: false};