Merge pull request #105 from stevenstetzler/master

Add CPU display to extension

Author: jtpio

jupyter_resource_usage/static/main.js

@@ -14,13 +14,30 @@ define([
                     .attr('title', 'Actively used Memory (updates every 5s)')
             )
         );
+        $('#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(
+                    $('<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; }')
         );
+        $('head').append(
+            $('<style>').html('.jupyter-resource-usage-hide { display: none; }')
+        );
         $('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) {
@@ -54,6 +71,29 @@ define([
                 }
 
                 $('#jupyter-resource-usage-mem').text(display);
+
+                // 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);    
+                }
             }
         });
     };