Fix Canvas already in use error in the UI console

Fix enum conflicts with python3.10 vs 3.11 Maintain aspect ratio in monitoring charts
thevickypedia · Dec 1, 2024 · 36615e9 · 36615e9
1 parent 4f84c9c
commit 36615e9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/pyninja/monitor/authenticator.py b/pyninja/monitor/authenticator.py
@@ -113,7 +113,7 @@ async def generate_cookie(auth_payload: dict) -> Dict[str, str | bool | int]:
     encoded_payload = str(auth_payload).encode("ascii")
     client_token = base64.b64encode(encoded_payload).decode("ascii")
     return dict(
-        key=enums.Cookies.session_token,
+        key=enums.Cookies.session_token.value,
         value=client_token,
         samesite="strict",
         path="/",

diff --git a/pyninja/monitor/routes.py b/pyninja/monitor/routes.py
@@ -48,7 +48,7 @@ async def logout_endpoint(request: Request) -> HTMLResponse:
         HTMLResponse:
         Redirects to login page.
     """
-    session_token = request.cookies.get(enums.Cookies.session_token)
+    session_token = request.cookies.get(enums.Cookies.session_token.value)
     try:
         await monitor.authenticator.validate_session(request.client.host, session_token)
     except exceptions.SessionError as error:
@@ -131,22 +131,22 @@ async def monitor_endpoint(
                     request, await monitor.authenticator.session_error(request, error)
                 )
         if not models.env.disk_report:
-            render = enums.Cookies.monitor
+            render = enums.Cookies.monitor.value
         if not render:
             # no_auth mode supports render option via query params
             # Example: http://0.0.0.0:8080/monitor?render=drive
             if qparam := request.query_params.get("render"):
                 LOGGER.info("Render value received via query params - '%s'", qparam)
                 render = qparam
-        if render == enums.Cookies.monitor:
+        if render == enums.Cookies.monitor.value:
             ctx = monitor.resources.landing_page()
             ctx["request"] = request
             ctx["version"] = version.__version__
             LOGGER.info("Rendering initial context for monitoring page!")
             return monitor.config.templates.TemplateResponse(
                 name=enums.Templates.main.value, context=ctx
             )
-        elif render == enums.Cookies.drive:
+        elif render == enums.Cookies.drive.value:
             if models.env.disk_report:
                 LOGGER.info("Rendering disk report!")
                 try:

diff --git a/pyninja/monitor/templates/main.html b/pyninja/monitor/templates/main.html
@@ -370,7 +370,7 @@ <h3>CPU Usage</h3>
             <!-- CPU Usage will be dynamically added here -->
         </div>
     </div>
-    <!-- Box to display Memory, Swap and Disk usage along with CPU load avg -->
+    <!-- Box to display Memory, Swap (progress bars) and CPU load avg (2D graph) -->
     <div class="box">
         <h3>Memory Usage</h3>
         <div class="progress">
@@ -390,7 +390,7 @@ <h3>CPU Load Averages</h3>
             <canvas class="graph-canvas" id="loadChart" width="400" height="200"></canvas>
         </div>
     </div>
-    <!-- Box to display Memory, Swap and Disk usage as Pie charts -->
+    <!-- Box to display Memory, and Swap usage as Pie charts -->
     <div class="box">
         <h3>Memory Usage</h3>
         <h5 id="memoryTotal"></h5>
@@ -405,10 +405,11 @@ <h5 id="swapTotal"></h5>
         </div>
         {% endif %}
     </div>
+    <!-- Box to display Disks' usage as Pie charts -->
     <div class="box">
         <h3>Disk Usage</h3>
         <div id="diskChartsContainer">
-            <!-- Charts will be dynamically appended here -->
+            <!-- Charts will be dynamically appended here based on # of disks -->
         </div>
     </div>
 </div>
@@ -465,9 +466,11 @@ <h3>PyUdisk Stats</h3>
             return 0;
         };
 
+        // Instantiate all charts' instances at the top-level
         let memoryChartInstance = null;
         let swapChartInstance = null;
         let loadChartInstance = null;
+        let diskChartInstances = {};  // Disk chart should be an object since it is generated dynamically
 
         ws.onmessage = function (event) {
             let data;
@@ -669,6 +672,7 @@ <h3>PyUdisk Stats</h3>
                     },
                     options: {
                         responsive: true,
+                        maintainAspectRatio: true,
                         plugins: {
                             tooltip: {
                                 callbacks: {
@@ -719,7 +723,6 @@ <h3>PyUdisk Stats</h3>
 
             // Disk Chart
             const diskInfoList = data.disk_info;
-            const diskChartInstances = {};
             const container = document.getElementById("diskChartsContainer");
             // Iterate over the list of disk info
             diskInfoList.forEach((diskInfo, index) => {