From d3e0f6f2bf57f8c668095004299f9d283b048fb5 Mon Sep 17 00:00:00 2001
From: stevenstetzler <steven.stetzler@gmail.com>
Date: Thu, 22 Jul 2021 20:03:06 -0400
Subject: [PATCH 1/2] Add CPU display to extension

---
 jupyter_resource_usage/static/main.js | 35 +++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/jupyter_resource_usage/static/main.js b/jupyter_resource_usage/static/main.js
index 00d2352..69a4dae 100644
--- a/jupyter_resource_usage/static/main.js
+++ b/jupyter_resource_usage/static/main.js
@@ -14,6 +14,16 @@ define([
                     .attr('title', 'Actively used Memory (updates every 5s)')
             )
         );
+        $('#maintoolbar-container').append(
+            $('<div>').attr('id', 'jupyter-resource-usage-display-cpu')
+                .addClass('btn-group')
+                .addClass('pull-right').append(
+                    $('<strong>').text(' CPU: ')
+                ).append(
+                    $('<span>').attr('id', 'jupyter-resource-usage-cpu')
+                        .attr('title', 'Actively used CPU (updates every 5s)')
+            )
+        );
         // FIXME: Do something cleaner to get styles in here?
         $('head').append(
             $('<style>').html('.jupyter-resource-usage-warn { background-color: #FFD2D2; color: #D8000C; }')
@@ -21,6 +31,9 @@ define([
         $('head').append(
             $('<style>').html('#jupyter-resource-usage-display { padding: 2px 8px; }')
         );
+        $('head').append(
+            $('<style>').html('#jupyter-resource-usage-display-cpu { padding: 2px 8px; }')
+        );
     }
 
     function humanFileSize(size) {
@@ -56,6 +69,28 @@ 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');
+                    }
+                }
+
+                $('#jupyter-resource-usage-cpu').text(display);
+            }
+        });
     };
 
     var load_ipython_extension = function () {

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 2/2] 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);
             }
         });
     };