added dashboard hashrate info

tools/web_monitor/app.py

@@ -44,15 +44,14 @@ async def dashboard_websocket(websocket: WebSocket):
                 data_point = await all_data
                 all_miner_data.append(data_point)
             all_miner_data.sort(key=lambda x: x["ip"])
-            try:
+            await websocket.send_json({"datetime": datetime.datetime.now().isoformat(),
-                await websocket.send_json({"datetime": datetime.datetime.now().isoformat(),
+                                       "miners": all_miner_data})
-                                           "miners": all_miner_data})
-            except websockets.exceptions.ConnectionClosedOK:
-                print("disconnected")
             await asyncio.sleep(5)
     except WebSocketDisconnect:
         print("Websocket disconnected.")
         pass
+    except websockets.exceptions.ConnectionClosedOK:
+        pass
 
 
 async def get_miner_data_dashboard(miner_ip):
@@ -167,9 +166,11 @@ async def miner_websocket(websocket: WebSocket, miner_ip):
                 await asyncio.sleep(.5)
     except WebSocketDisconnect:
         print("Websocket disconnected.")
+    except websockets.exceptions.ConnectionClosedOK:
         pass
 
 
+
 @app.get("/miner/{miner_ip}")
 def get_miner(request: Request, miner_ip):
     return templates.TemplateResponse("miner.html", {
@@ -219,6 +220,7 @@ async def websocket_scan(websocket: WebSocket):
                 cur_task = None
     except WebSocketDisconnect:
         print("Websocket disconnected.")
+    except websockets.exceptions.ConnectionClosedOK:
         pass
 
 

tools/web_monitor/templates/index.html

@@ -1,14 +1,9 @@
 {% extends 'navbar.html'%}
 {% block content %}
-<div id="data"></div>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
-<div class="col" id="errors">
+<canvas id="line-chart" class="grad-border mt-3 mb-4" width="600" height="360"></canvas>
-
+<div id="errors"></div>
-
-
-
-</div>
-
 
 <script>
 var ws = new WebSocket("ws://localhost:80/dashboard/ws");
@@ -16,33 +11,96 @@ let all_data = []
 let all_labels = []
 ws.onmessage = function(event) {
     var new_data = JSON.parse(event.data)
-    if (new_data.hasOwnProperty("error")) {
+    total_hashrate = parseFloat(0)
-        var err_container = document.getElementById("errorContainer")
+    errors = document.getElementById("errors")
-        var err_code = document.getElementById("errorCode")
+    for (i = 0; i< new_data["miners"].length; i++) {
-        err_code.innerHTML = new_data['error']
+        if (new_data["miners"][i].hasOwnProperty("error")) {
-        err_container.classList.remove("invisible")
+            if (!document.getElementById(new_data["miners"][i]["ip"] + "_error")) {
-    } else {
+                errors.innerHTML += "<div id='" + new_data["miners"][i]["ip"] + "_error" +
-        div = document.getElementById("data")
+                "' class='d-flex align-items-center p-1 mb-1 ms-4 alert alert-danger'><strong class='p-0 m-0'>" +
-        errors = document.getElementById("errors")
+                new_data["miners"][i]["ip"] + ": " +
-        div.innerHTML = ""
+                new_data["miners"][i]["error"] +
-        for (i = 0; i< new_data["miners"].length; i++) {
+                "</strong><div class='spinner-border spinner-border-sm ms-auto'></div></div>"
-            if (new_data["miners"][i].hasOwnProperty("error")) {
+            }
-                if (!document.getElementById(new_data["miners"][i]["ip"] + "_error")) {
+        } else {
-                    errors.innerHTML += "<div id='" + new_data["miners"][i]["ip"] + "_error" +
+            if (document.getElementById(new_data["miners"][i]["ip"] + "_error")) {
-                    "' class='d-flex align-items-center p-1 alert alert-danger'><strong class='p-0 m-0'>" +
+                document.getElementById(new_data["miners"][i]["ip"] + "_error").remove()
-                    new_data["miners"][i]["ip"] + ": " +
+            }
-                    new_data["miners"][i]["error"] +
+            total_hashrate += parseFloat(new_data["miners"][i]["hashrate"])
-                    "</strong><div class='spinner-border spinner-border-sm ms-auto'></div></div>"
+            console.log(total_hashrate)
-                }
+        }
-            } else {
+    };
-                if (document.getElementById(new_data["miners"][i]["ip"] + "_error")) {
+    var chart = document.getElementById("line-chart")
-                    document.getElementById(new_data["miners"][i]["ip"] + "_error").remove()
+    datetime = luxon.DateTime.fromISO(new_data["datetime"]).toLocal();
-                }
+    if (minerDataChart.data.labels.length > 50) minerDataChart.data.labels.shift();
-                div.innerHTML += new_data["miners"][i]["ip"] + ": " + new_data["miners"][i]["hashrate"] + "\n"
+    if (minerDataChart.data.datasets[0].data.length > 50) minerDataChart.data.datasets[0].data.shift();
+    minerDataChart.data.labels.push(datetime.toLocaleString(luxon.DateTime.TIME_WITH_SECONDS));
+    minerDataChart.data.datasets[0].data.push(total_hashrate);
+    minerDataChart.update();
+};
+
+var ctx = document.getElementById("line-chart").getContext("2d");
+var width = document.getElementById("line-chart").width;
+var chartGradient = ctx.createLinearGradient(0, 0, width, 0)
+chartGradient.addColorStop(0, '#D0368A');
+chartGradient.addColorStop(1, '#708AD4');
+
+const chartAreaBorder = {
+  id: 'chartAreaBorder',
+  beforeDraw(chart, args, options) {
+    const {ctx, chartArea: {left, top, width, height}} = chart;
+    ctx.save();
+    ctx.strokeStyle = options.borderColor;
+    ctx.lineWidth = options.borderWidth;
+    ctx.strokeRect(left, top, width, height);
+    ctx.restore();
+  }
+};
+
+var minerDataChart = new Chart(document.getElementById("line-chart"), {
+  type: 'line',
+  data: {
+    labels: [
+    ],
+    datasets: [{
+          label: "Hashrate",
+          borderColor: chartGradient,
+          pointBorderColor: chartGradient,
+          pointBackgroundColor: chartGradient,
+          pointHoverBackgroundColor: chartGradient,
+          pointHoverBorderColor: chartGradient,
+        data: [
+        ],
+      }
+    ]
+  },
+  plugins: [chartAreaBorder],
+  options: {
+      animation: {
+        easing: 'easeInSine',
+        duration: 250
+      },
+      plugins: {
+        chartAreaBorder: {
+          borderColor: chartGradient,
+          borderWidth: 1
+        },
+      },
+    scales: {
+        y: {
+            min: 0, // minimum value
+            suggestedMax: 100,
+            stepSize: 10
+        },
+        x: {
+            ticks: {
+                maxTicksLimit: 6,
+                maxRotation: 0
             }
         }
+    }
+  }
+});
 
-    };
-};
 </script>
 {% endblock content %}