From c7d10f53a36f84304190dea2c7154f827b2cf479 Mon Sep 17 00:00:00 2001
From: Hemna <waboring@hemna.com>
Date: Wed, 24 Mar 2021 16:07:09 -0400
Subject: [PATCH] Updated web stats index to show messages and ram usage

This patch updates the main index page to show both the
graph of tx/rx messages as well as peak/current ram usage.
---
 README.rst                     |   3 +
 aprsd/flask.py                 |   7 ++
 aprsd/stats.py                 |  28 ++++-
 aprsd/threads.py               |   2 +
 aprsd/web/templates/index.html | 222 +++++++++++++++++++++++++++++++--
 5 files changed, 254 insertions(+), 8 deletions(-)

diff --git a/README.rst b/README.rst
index 0401272..f7ea08e 100644
--- a/README.rst
+++ b/README.rst
@@ -5,6 +5,9 @@ APRSD
 .. image:: https://badge.fury.io/py/aprsd.svg
     :target: https://badge.fury.io/py/aprsd
 
+.. image:: http://hits.dwyl.com/craigerl/aprsd.svg
+    :target: http://hits.dwyl.com/craigerl/aprsd
+
 .. image:: https://github.com/craigerl/aprsd/workflows/python/badge.svg
     :target: https://github.com/craigerl/aprsd/actions
 
diff --git a/aprsd/flask.py b/aprsd/flask.py
index f0dbf39..e9b51ca 100644
--- a/aprsd/flask.py
+++ b/aprsd/flask.py
@@ -1,5 +1,7 @@
+import datetime
 import json
 import logging
+import tracemalloc
 
 import aprsd
 from aprsd import messaging, plugin, stats
@@ -69,12 +71,17 @@ class APRSDFlask(flask_classful.FlaskView):
     def stats(self):
         stats_obj = stats.APRSDStats()
         track = messaging.MsgTrack()
+        now = datetime.datetime.now()
+        current, peak = tracemalloc.get_traced_memory()
 
         result = {
             "version": aprsd.__version__,
             "uptime": stats_obj.uptime,
             "size_tracker": len(track),
             "stats": stats_obj.stats(),
+            "time": now.strftime("%m-%d-%Y %H:%M:%S"),
+            "memory_current": current,
+            "memory_peak": peak,
         }
         return json.dumps(result)
 
diff --git a/aprsd/stats.py b/aprsd/stats.py
index 30c9f5a..986a795 100644
--- a/aprsd/stats.py
+++ b/aprsd/stats.py
@@ -26,6 +26,9 @@ class APRSDStats:
     _email_tx = 0
     _email_rx = 0
 
+    _mem_current = 0
+    _mem_peak = 0
+
     def __new__(cls, *args, **kwargs):
         if cls._instance is None:
             cls._instance = super().__new__(cls)
@@ -43,6 +46,24 @@ class APRSDStats:
         with self.lock:
             return str(datetime.datetime.now() - self.start_time)
 
+    @property
+    def memory(self):
+        with self.lock:
+            return self._mem_current
+
+    def set_memory(self, memory):
+        with self.lock:
+            self._mem_curent = memory
+
+    @property
+    def memory_peak(self):
+        with self.lock:
+            return self._mem_peak
+
+    def set_memory_peak(self, memory):
+        with self.lock:
+            self._mem_peak = memory
+
     @property
     def msgs_tx(self):
         with self.lock:
@@ -126,6 +147,11 @@ class APRSDStats:
 
     def stats(self):
         now = datetime.datetime.now()
+        if self._email_thread_last_time:
+            last_update = str(now - self._email_thread_last_time)
+        else:
+            last_update = "never"
+
         stats = {
             "messages": {
                 "tracked": self.msgs_tracked,
@@ -138,7 +164,7 @@ class APRSDStats:
             "email": {
                 "sent": self._email_tx,
                 "recieved": self._email_rx,
-                "thread_last_update": str(now - self._email_thread_last_time),
+                "thread_last_update": last_update,
             },
         }
         return stats
diff --git a/aprsd/threads.py b/aprsd/threads.py
index 736a052..03b4fc7 100644
--- a/aprsd/threads.py
+++ b/aprsd/threads.py
@@ -84,6 +84,8 @@ class KeepAliveThread(APRSDThread):
                 email_thread_time = "N/A"
 
             current, peak = tracemalloc.get_traced_memory()
+            stats_obj.set_memory(current)
+            stats_obj.set_memory_peak(peak)
             LOG.debug(
                 "Uptime ({}) Tracker({}) "
                 "Msgs: TX:{} RX:{} EmailThread: {} RAM: Current:{} Peak:{}".format(
diff --git a/aprsd/web/templates/index.html b/aprsd/web/templates/index.html
index d016f1c..68cc58b 100644
--- a/aprsd/web/templates/index.html
+++ b/aprsd/web/templates/index.html
@@ -1,14 +1,133 @@
 <html>
     <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/components/prism-json.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.bundle.js"></script>
 
 
     <script type="text/javascript"">
 
+        var memory_chart = null
+        var message_chart = null
+        var color = Chart.helpers.color;
+
+        window.chartColors = {
+            red: 'rgb(255, 99, 132)',
+            orange: 'rgb(255, 159, 64)',
+            yellow: 'rgb(255, 205, 86)',
+            green: 'rgb(26, 181, 77)',
+            blue: 'rgb(54, 162, 235)',
+            purple: 'rgb(153, 102, 255)',
+            grey: 'rgb(201, 203, 207)'
+        };
+
+        function start_charts() {
+            memory_chart = new Chart($("#memChart"), {
+                label: 'Memory Usage',
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'Peak Ram usage',
+                        borderColor: window.chartColors.red,
+                        data: [],
+                    },
+                    {
+                        label: 'Current Ram usage',
+                        borderColor: window.chartColors.blue,
+                        data: [],
+                    }],
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRation: false,
+                    scales: {
+                        x: {
+                            type: 'timeseries',
+                            offset: true,
+                            ticks: {
+                                major: { enabled: true },
+                                fontStyle: context => context.tick.major ? 'bold' : undefined,
+                                source: 'data',
+                                maxRotation: 0,
+                                autoSkip: true,
+                                autoSkipPadding: 75,
+                            }
+                        }
+                    }
+                }
+            });
+
+            message_chart = new Chart($("#messageChart"), {
+                label: 'Messages',
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'Messages Sent',
+                        borderColor: window.chartColors.green,
+                        data: [],
+                    },
+                    {
+                        label: 'Messages Recieved',
+                        borderColor: window.chartColors.yellow,
+                        data: [],
+                    }],
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRation: false,
+                    scales: {
+                        x: {
+                            type: 'timeseries',
+                            offset: true,
+                            ticks: {
+                                major: { enabled: true },
+                                fontStyle: context => context.tick.major ? 'bold' : undefined,
+                                source: 'data',
+                                maxRotation: 0,
+                                autoSkip: true,
+                                autoSkipPadding: 75,
+                            }
+                        }
+                    }
+                }
+            });
+
+        }
+
+
+        function addData(chart, label, newdata) {
+            chart.data.labels.push(label);
+            chart.data.datasets.forEach((dataset) => {
+                dataset.data.push(newdata);
+            });
+            chart.update();
+        }
+
+        function updateDualData(chart, label, first, second) {
+            chart.data.labels.push(label);
+            chart.data.datasets[0].data.push(first);
+            chart.data.datasets[1].data.push(second);
+            chart.update();
+        }
+
+        function update_stats( data ) {
+            $("#version").text( data["version"] );
+            $("#uptime").text( "uptime: " + data["uptime"] );
+            const html_pretty = Prism.highlight(JSON.stringify(data, null, '\t'), Prism.languages.json, 'json');
+            $("#jsonstats").html(html_pretty);
+            //$("#jsonstats").effect("highlight", {color: "#333333"}, 800);
+            //console.log(data);
+            updateDualData(memory_chart, data["time"], data["memory_peak"], data["memory_current"]);
+            updateDualData(message_chart, data["time"], data["stats"]["messages"]["sent"], data["stats"]["messages"]["recieved"]);
+        }
+
         function start_update() {
 
             (function statsworker() {
@@ -17,12 +136,10 @@
                         type: 'GET',
                         dataType: 'json',
                         success: function(data) {
-                            //data = JSON.parse(response)
-                            const html_pretty = Prism.highlight(JSON.stringify(data, null, '\t'), Prism.languages.json, 'json');
-                            $("#app").html(html_pretty)
+                            update_stats(data);
                         },
                         complete: function() {
-                            setTimeout(statsworker, 60000);
+                            setTimeout(statsworker, 10000);
                         }
                     });
                 })();
@@ -30,15 +147,106 @@
 
 
         $(document).ready(function() {
-            $("#app").text("Starting PEEPIS")
             start_update();
+            start_charts();
+
+            $("#toggleStats").click(function() {
+                $("#jsonstats").fadeToggle(1000);
+            });
         });
     </script>
 
+    <style>
+        body {
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+            background: #eeeeee;
+            margin: 2em;
+            padding: 0;
+            text-align: center;
+            font-family: system-ui, sans-serif;
+            height: 100vh;
+        }
+
+        header {
+            padding: 2rem;
+        }
+
+        main {
+            padding: 0px;
+        }
+
+        footer, .push {
+            padding: 2rem;
+            text-align: center;
+        }
+
+        #messageChart {
+            border: 1px solid #ccc;
+            background: #ddd;
+            height: 10vh;
+        }
+        #memChart {
+            border: 1px solid #ccc;
+            background: #ddd;
+            height: 10vh;
+        }
+
+        #graphs {
+            display: grid;
+            width: 100%;
+            grid-template-columns: 1fr 1fr;
+        }
+        #left {
+            border: 1px solid black;
+            margin: 2px;
+        }
+        #right {
+            border: 1px solid black;
+            margin: 2px;
+        }
+
+        #stats {
+            margin: auto;
+            width: 80%;
+        }
+
+        #jsonstats {
+            display: none;
+        }
+
+        #title {
+            font-size: 4em;
+        }
+        #uptime: {
+            font-size: 4px;
+        }
+
+    </style>
+
     </head>
 
     <body>
-        <pre id="app" class="language-json">{{ stats }}</pre>
-        <canvas id="messsageChart"></canvas>
+        <header>
+          <div id="title">APRSD version <span id="version"></div></div>
+          <div id="uptime"></div>
+        </header>
+
+        <main>
+            <div id="graphs">
+                <div id="left"><canvas id="messageChart"></canvas></div>
+                <div id="right"><canvas class="right" id="memChart"></canvas></div>
+            </div>
+
+            <div id="stats">
+                <button id="toggleStats">Toggle raw json</button>
+                <pre id="jsonstats" class="language-json">{{ stats }}</pre>
+            </div>
+        </main>
+
+        <footer>
+            <a href="https://badge.fury.io/py/aprsd"><img src="https://badge.fury.io/py/aprsd.svg" alt="PyPI version" height="18"></a>
+            <a href="https://github.com/craigerl/aprsd"><img src="https://img.shields.io/badge/Made%20with-Python-1f425f.svg" height="18"></a>
+        </footer>
     </body>
 </html>