From d16501a9b053e7a7d183458b91dab47ce145f1c1 Mon Sep 17 00:00:00 2001
From: stevenstetzler <steven.stetzler@gmail.com>
Date: Fri, 23 Jul 2021 19:20:17 -0400
Subject: [PATCH] handle track_cpu_percent option

---
 jupyter_resource_usage/static/main.js | 43 +++++++++++++++------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/jupyter_resource_usage/static/main.js b/jupyter_resource_usage/static/main.js
index 69a4dae..0a1e6f5 100644
--- a/jupyter_resource_usage/static/main.js
+++ b/jupyter_resource_usage/static/main.js
@@ -17,6 +17,7 @@ define([
         $('#maintoolbar-container').append(
             $('<div>').attr('id', 'jupyter-resource-usage-display-cpu')
                 .addClass('btn-group')
+                .addClass('jupyter-resource-usage-hide')
                 .addClass('pull-right').append(
                     $('<strong>').text(' CPU: ')
                 ).append(
@@ -28,6 +29,9 @@ define([
         $('head').append(
             $('<style>').html('.jupyter-resource-usage-warn { background-color: #FFD2D2; color: #D8000C; }')
         );
+        $('head').append(
+            $('<style>').html('.jupyter-resource-usage-hide { display: none; }')
+        );
         $('head').append(
             $('<style>').html('#jupyter-resource-usage-display { padding: 2px 8px; }')
         );
@@ -67,28 +71,29 @@ define([
                 }
 
                 $('#jupyter-resource-usage-mem').text(display);
-            }
-        });
-        $.getJSON({
-            url: utils.get_body_data('baseUrl') + 'api/metrics/v1',
-            success: function (data) {
-                var cpuPercent = data['cpu_percent'];
-                var maxCpu = data['cpu_count'];
-                var limits = data['limits'];
-                var display = parseFloat(cpuPercent).toFixed(0) + "% (";
 
-                if (limits['cpu']) {
-                    if (limits['cpu']['cpu']) {
-                        display += (Math.round(parseFloat(cpuPercent) / 100)).toString() + " / " + maxCpu + ")";
-                    }
-                    if (limits['cpu']['warn']) {
-                        $('#jupyter-resource-usage-display-cpu').addClass('jupyter-resource-usage-warn');
-                    } else {
-                        $('#jupyter-resource-usage-display-cpu').removeClass('jupyter-resource-usage-warn');
+                // Handle CPU display
+                var cpuPercent = data['cpu_percent'];
+                if (cpuPercent) {
+                    // Remove hide CSS class if the metrics API gives us a CPU percent to display
+                    $('#jupyter-resource-usage-display-cpu').removeClass('jupyter-resource-usage-hide');
+                    var maxCpu = data['cpu_count'];
+                    var limits = data['limits'];
+                    // Display CPU usage as "{percent}% ({usedCpu} / {maxCPU})" e.g. "123% (1 / 8)"
+                    var percentString = parseFloat(cpuPercent).toFixed(0);
+                    var usedCpu = Math.round(parseFloat(cpuPercent) / 100).toString();
+                    var display = `${percentString}% (${usedCpu} / ${maxCpu})`;
+                    // Handle limit warning
+                    if (limits['cpu']) {
+                        if (limits['cpu']['warn']) {
+                            $('#jupyter-resource-usage-display-cpu').addClass('jupyter-resource-usage-warn');
+                        } else {
+                            $('#jupyter-resource-usage-display-cpu').removeClass('jupyter-resource-usage-warn');
+                        }
                     }
+    
+                    $('#jupyter-resource-usage-cpu').text(display);    
                 }
-
-                $('#jupyter-resource-usage-cpu').text(display);
             }
         });
     };