From 037758accbae8253d3df7178b41f5107af9d1fb1 Mon Sep 17 00:00:00 2001
From: Andrew <mcdeweykp@gmail.com>
Date: Mon, 22 Aug 2022 20:04:40 -0400
Subject: [PATCH] Working live graph

---
 app/classes/shared/server.py                  |   1 +
 app/frontend/templates/base.html              |   6 +-
 .../panel/parts/m_server_controls_list.html   |   2 +-
 .../panel/parts/server_controls_list.html     |   2 +-
 .../templates/panel/server_metrics.html       | 104 +++++++++++++++---
 app/translations/en_EN.json                   |   8 +-
 6 files changed, 99 insertions(+), 24 deletions(-)

diff --git a/app/classes/shared/server.py b/app/classes/shared/server.py
index 499a0080..74e93ba7 100644
--- a/app/classes/shared/server.py
+++ b/app/classes/shared/server.py
@@ -1223,6 +1223,7 @@ class ServerInstance:
                     "version": raw_ping_result.get("version"),
                     "icon": raw_ping_result.get("icon"),
                     "crashed": self.is_crashed,
+                    "created": datetime.datetime.now().strftime("%Y/%m/%d, %H:%M:%S"),
                 },
             )
         total_players += int(raw_ping_result.get("online"))
diff --git a/app/frontend/templates/base.html b/app/frontend/templates/base.html
index 543d3c71..1ab50da8 100755
--- a/app/frontend/templates/base.html
+++ b/app/frontend/templates/base.html
@@ -40,12 +40,12 @@
   <!-- Bootstrap Toggle -->
   <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
   <script defer src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
-    integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g=="
-    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"
     integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
+    integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js"
     integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
diff --git a/app/frontend/templates/panel/parts/m_server_controls_list.html b/app/frontend/templates/panel/parts/m_server_controls_list.html
index dba3802a..52f3d04d 100644
--- a/app/frontend/templates/panel/parts/m_server_controls_list.html
+++ b/app/frontend/templates/panel/parts/m_server_controls_list.html
@@ -30,7 +30,7 @@
             {% if data['permissions']['Players'] in data['user_permissions'] and data['server_data']['type'] != 'minecraft-bedrock' %}
             <a class="dropdown-item {% if data['active_link'] == 'admin_controls' %}active{% end %}" href="/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=admin_controls" role="tab" aria-selected="true"><i class="fas fa-users"></i> {{ translate('serverDetails', 'playerControls', data['lang']) }}</a>
             {% end %}
-            <a class="dropdown-item {% if data['active_link'] == 'metrics' %}active{% end %}" href="/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=metrics" role="tab" aria-selected="true"><i class='fas fa-chart-area'></i>Metrics</a>
+            <a class="dropdown-item {% if data['active_link'] == 'metrics' %}active{% end %}" href="/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=metrics" role="tab" aria-selected="true"><i class='fas fa-chart-area'></i>{{ translate('serverDetails', 'metrics', data['lang']) }}</a>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/app/frontend/templates/panel/parts/server_controls_list.html b/app/frontend/templates/panel/parts/server_controls_list.html
index 17fa1b74..4212bde6 100644
--- a/app/frontend/templates/panel/parts/server_controls_list.html
+++ b/app/frontend/templates/panel/parts/server_controls_list.html
@@ -51,6 +51,6 @@
     {% end %}
     <li class="nav-item term-nav-item">
         <a class="nav-link {% if data['active_link'] == 'metrics' %}active{% end %}" href="/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=metrics" role="tab" aria-selected="true">
-        <i class='fas fa-chart-area'></i>Metrics</a>
+        <i class='fas fa-chart-area'></i>{{ translate('serverDetails', 'metrics', data['lang']) }}</a>
     </li>
 </ul>
\ No newline at end of file
diff --git a/app/frontend/templates/panel/server_metrics.html b/app/frontend/templates/panel/server_metrics.html
index 3b65e9d7..01456c61 100644
--- a/app/frontend/templates/panel/server_metrics.html
+++ b/app/frontend/templates/panel/server_metrics.html
@@ -38,8 +38,14 @@
           <span class="d-block d-sm-none">
             {% include "parts/m_server_controls_list.html %}
           </span>
-
-
+          <button style="float: right; visibility: hidden;" class="btn btn-outline-success reset-button"
+            id="reset-button"><i class="fas fa-undo"></i>&nbsp;{{ translate('serverMetrics', 'resetZoom', data['lang'])
+            }}</button>
+          {% if data['user_data']['hints'] %}
+          <span data-html="true" class="hints text-center" title="Did you know?" , data-content="To zoom on the schedule hold your shift key then use your scroll wheel to zoom.<br><br>
+            Alternatively hold the shift key then click and drag the area you'd like to zoom in on." ,
+            data-placement="top"></span>
+          {% end %}
           <canvas id="lineChart"></canvas>
 
         </div>
@@ -50,7 +56,14 @@
 
 
 </div>
+<style>
+  .popover-body {
+    color: white !important;
+    ;
+  }
+</style>
 <script type="text/javascript">
+  var zoomed = false;
   //line
   var ctxL = document.getElementById("lineChart").getContext('2d');
   const players = []
@@ -61,11 +74,10 @@
   {% if 'minecraft-java' in data['server_stats']['server_type'] %}
   players.push("{{ item.online }}");
   {% end %}
-  dates.push("{{ item.created }}");
+  dates.push("{{ item.created.strftime('%Y/%m/%d, %H:%M:%S') }}");
   ram.push("{{ item.mem_percent }}")
   cpu.push("{{ item.cpu }}")
   {% end %}
-  max_nums = [Math.max.apply(this, players), Math.max.apply(this, ram), Math.max.apply(this, cpu)]
   var hist_chart = new Chart(ctxL, {
     type: 'line',
     data: {
@@ -77,7 +89,7 @@
           'rgba(136, 98, 224, .5)',
         ],
         borderWidth: 2,
-        tension: 0
+        lineTension: 0,
       },
       {
         label: "MEM",
@@ -86,7 +98,7 @@
           'rgba(33, 150, 243, .5)',
         ],
         borderWidth: 2,
-        tension: 0
+        lineTension: 0,
       },
       {
         label: "CPU",
@@ -95,7 +107,7 @@
           'rgba(255, 175, 0, .5)',
         ],
         borderWidth: 2,
-        tension: 0
+        lineTension: 0,
       },
       ]
     },
@@ -103,8 +115,14 @@
       plugins: {
         zoom: {
           zoom: {
+            onZoom({ hist_chart }) {
+              console.log("zooming");
+              document.getElementById("reset-button").style.visibility = "visible";
+              zoomed = true;
+            },
             wheel: {
               enabled: true,
+              modifierKey: 'shift',
             },
             drag: {
               enabled: true,
@@ -114,20 +132,13 @@
               enabled: true
             },
             mode: 'x',
-            modifierKey: 'shift',
           },
-        },
-        pan: {
-          enabled: true,
-          mode: "xy",
-          threshhold: 1,
           pan: {
             enabled: true,
-            mode: "xy",
+            mode: "x",
             threshhold: 1,
           }
-
-        }
+        },
       },
       fill: false,
       lineTension: 5,
@@ -138,11 +149,70 @@
         },
         x: {
           position: 'right',
-          min: -500,
+          min: dates.length - 200,
         }
       }
     }
   });
+  $(window).ready(function () {
+    $('body').click(function () {
+      $('.hints').popover("hide");
+    });
+  });
+  $(document).ready(function () {
+    if ($(window).width() > 1000) {
+      $('[data-toggle="popover"]').popover();
+      $('.hints').popover("show");
+    }
+    webSocket.on('update_server_details', function (data) {
+      dates.push(data.created);
+      players.push(data.online);
+      cpu.push(data.cpu)
+      ram.push(data.mem_percent)
+      data = {
+        labels: dates,
+        datasets: [{
+          label: "Players",
+          data: players,
+          borderColor: [
+            'rgba(136, 98, 224, .5)',
+          ],
+          borderWidth: 2,
+          lineTension: 0,
+        },
+        {
+          label: "MEM",
+          data: ram,
+          borderColor: [
+            'rgba(33, 150, 243, .5)',
+          ],
+          borderWidth: 2,
+          lineTension: 0,
+        },
+        {
+          label: "CPU",
+          data: cpu,
+          borderColor: [
+            'rgba(255, 175, 0, .5)',
+          ],
+          borderWidth: 2,
+          lineTension: 0,
+        },
+        ]
+      }
+      if (!zoomed) {
+        hist_chart.options.scales.x.min = dates.length - 200;
+      }
+      hist_chart.update(data)
+    });
+
+    $(".reset-button").click(function () {
+      console.log("resetting zoom");
+      zoomed = false;
+      hist_chart.resetZoom();
+      document.getElementById("reset-button").style.visibility = "hidden";
+    });
+  });
 </script>
 
 {% end %}
\ No newline at end of file
diff --git a/app/translations/en_EN.json b/app/translations/en_EN.json
index f398ccf5..cd3620d0 100644
--- a/app/translations/en_EN.json
+++ b/app/translations/en_EN.json
@@ -351,7 +351,8 @@
         "playerControls": "Player Management",
         "schedule": "Schedule",
         "serverDetails": "Server Details",
-        "terminal": "Terminal"
+        "terminal": "Terminal",
+        "metrics": "Metrics"
     },
     "serverFiles": {
         "clickUpload": "Click here to select your files",
@@ -472,6 +473,9 @@
         "stopScroll": "Stop Auto Scrolling",
         "updating": "Updating..."
     },
+    "serverMetrics": {
+        "resetZoom": "Reset Zoom"
+    },
     "serverWizard": {
         "absoluteServerPath": "Absolute path to your server",
         "absoluteZipPath": "Absolute path to your server",
@@ -558,4 +562,4 @@
         "userSettings": "User Settings",
         "uses": "Number of uses allowed (-1==No Limit)"
     }
-}
+}
\ No newline at end of file