Add CPU indicator to the top bar

README.md

@@ -13,7 +13,6 @@ This extension was originally developed as part of the [jupyterlab-topbar](https
 
 ## TODO
 
-- Add CPU usage
 - Add Network I/O
 - Expose more settings
 
@@ -40,7 +39,7 @@ conda install -c conda-forge nbresuse
 
 ### Graphic Display
 
-You can set the memory limit (but not enforce it) to display the indicator in the top bar.
+You can set the memory and cpu limits (but not enforce it) to display the indicator in the top bar.
 
 For more info, check the [memory limit](https://github.com/yuvipanda/nbresuse#memory-limit) in the [nbresuse](https://github.com/yuvipanda/nbresuse) repository.
 
@@ -49,14 +48,28 @@ Edit `~/.jupyter/jupyter_notebook_config.py`:
 ```python
 c = get_config()
 
-c.NotebookApp.ResourceUseDisplay.mem_limit = Size_of_GB *1024*1024*1024
+# memory
+c.NotebookApp.ResourceUseDisplay.mem_limit = <size_in_GB> *1024*1024*1024
+
+# cpu
+c.NotebookApp.ResourceUseDisplay.track_cpu_percent = True
+c.NotebookApp.ResourceUseDisplay.cpu_limit = <number_of_cpus>
+```
+
+For example:
+
+```python
+c.NotebookApp.ResourceUseDisplay.mem_limit = 4294967296
+c.NotebookApp.ResourceUseDisplay.track_cpu_percent = True
+c.NotebookApp.ResourceUseDisplay.cpu_limit = 2
 ```
 
 Or use the command line option:
 
 ```bash
 # POSIX shell
-jupyter lab --NotebookApp.ResourceUseDisplay.mem_limit=$(( Size_of_GB *1024*1024*1024))
+jupyter lab --NotebookApp.ResourceUseDisplay.mem_limit=$(( size_in_GB *1024*1024*1024)) \
+            --NotebookApp.ResourceUseDisplay.cpu_limit=$(( number_of_cpus ))
 ```
 
 ### Advanced Settings

packages/system-monitor-base/src/cpuView.tsx

@@ -0,0 +1,64 @@
+import { ReactWidget } from '@jupyterlab/apputils';
+
+import React, { useEffect, useState, ReactElement } from 'react';
+
+import { IndicatorComponent } from './indicator';
+
+import { ResourceUsage } from './model';
+
+/**
+ * A CpuView component to display CPU usage.
+ */
+const CpuViewComponent = ({
+  model,
+  label,
+}: {
+  model: ResourceUsage.Model;
+  label: string;
+}): ReactElement => {
+  const [text, setText] = useState('');
+  const [values, setValues] = useState([]);
+
+  const update = (): void => {
+    const { currentCpuPercent } = model;
+    const newValues = model.values.map((value) => value.cpuPercent);
+    const newText = `${(currentCpuPercent * 100).toFixed(0)}%`;
+    setText(newText);
+    setValues(newValues);
+  };
+
+  useEffect(() => {
+    model.changed.connect(update);
+    return (): void => {
+      model.changed.disconnect(update);
+    };
+  }, [model]);
+
+  return (
+    <IndicatorComponent
+      enabled={model.cpuAvailable}
+      values={values}
+      label={label}
+      color={'#0072B3'}
+      text={text}
+    />
+  );
+};
+
+/**
+ * A namespace for CpuView statics.
+ */
+export namespace CpuView {
+  /**
+   * Create a new CpuView React Widget.
+   *
+   * @param model The resource usage model.
+   * @param label The label next to the component.
+   */
+  export const createCpuView = (
+    model: ResourceUsage.Model,
+    label: string
+  ): ReactWidget => {
+    return ReactWidget.create(<CpuViewComponent model={model} label={label} />);
+  };
+}

packages/system-monitor-base/src/index.ts

@@ -1 +1,3 @@
+export * from './cpuView';
 export * from './memoryView';
+export * from './model';

packages/system-monitor-base/src/indicator.tsx

@@ -0,0 +1,110 @@
+import React, { useState, ReactElement } from 'react';
+
+import { Sparklines, SparklinesLine, SparklinesSpots } from 'react-sparklines';
+
+/**
+ * A indicator fill component.
+ */
+const IndicatorFiller = ({
+  percentage,
+  color,
+}: {
+  percentage: number;
+  color: string;
+}): ReactElement => {
+  return (
+    <div
+      className="jp-IndicatorFiller"
+      style={{
+        width: `${percentage * 100}%`,
+        background: `${color}`,
+      }}
+    />
+  );
+};
+
+/**
+ * An indicator bar component.
+ */
+const IndicatorBar = ({
+  values,
+  percentage,
+  baseColor,
+}: {
+  values: number[];
+  percentage: number;
+  baseColor: string;
+}): ReactElement => {
+  const [isSparklines, setIsSparklines] = useState(false);
+
+  const toggleSparklines = (): void => {
+    setIsSparklines(!isSparklines);
+  };
+
+  const color =
+    percentage > 0.5 ? (percentage > 0.8 ? 'red' : 'orange') : baseColor;
+
+  return (
+    <div className="jp-IndicatorBar" onClick={(): void => toggleSparklines()}>
+      {isSparklines && (
+        <Sparklines
+          data={values}
+          min={0.0}
+          max={1.0}
+          limit={values.length}
+          margin={0}
+        >
+          <SparklinesLine
+            style={{
+              stroke: color,
+              strokeWidth: 4,
+              fill: color,
+              fillOpacity: 1,
+            }}
+          />
+          <SparklinesSpots />
+        </Sparklines>
+      )}
+      {!isSparklines && (
+        <IndicatorFiller percentage={percentage} color={color} />
+      )}
+    </div>
+  );
+};
+
+/**
+ * An incicator component for displaying resource usage.
+ *
+ */
+export const IndicatorComponent = ({
+  enabled,
+  values,
+  label,
+  color,
+  text,
+}: {
+  enabled: boolean;
+  values: number[];
+  label: string;
+  color: string;
+  text: string;
+}): ReactElement => {
+  const percentage = values[values.length - 1];
+  return (
+    enabled && (
+      <div className="jp-IndicatorContainer">
+        <div className="jp-IndicatorText">{label}</div>
+        {percentage !== null && (
+          <div className="jp-IndicatorWrapper">
+            <IndicatorBar
+              values={values}
+              percentage={percentage}
+              baseColor={color}
+            />
+          </div>
+        )}
+        <div className="jp-IndicatorText">{text}</div>
+      </div>
+    )
+  );
+};