Integrate jupyterlab-system-monitor extension (#202)

* Use a unified model for memory and cpu metrics

* Add components from jupyterlab system monitor

Minor modifications to make linter happy

Add system monitor plugin into @jupyter-server/resource-usage:topbar-item.

Disable topbar panels by default and make it configurable via
settings file.

* Add necessary npm packages for topbar panels

Pin @types/react to avoid duplicates

* Remove executable perms

* More perms cleanup

Author: mahendrapaipuri

package.json

@@ -41,6 +41,9 @@
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2"
   },
+  "resolutions": {
+    "@types/react": "18.2.16"
+  },
   "eslintIgnore": [
     "**/*.d.ts",
     "dist",

packages/labextension/package.json

@@ -51,10 +51,12 @@
     "@jupyterlab/statusbar": "^4.0.0",
     "@jupyterlab/translation": "^4.0.0",
     "@lumino/polling": "^2.1.1",
+    "react-sparklines": "^1.7.0",
     "typestyle": "^2.4.0"
   },
   "devDependencies": {
     "@jupyterlab/builder": "^4.0.0",
+    "@types/react-sparklines": "^1.7.0",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
     "eslint": "^7.14.0",
@@ -86,6 +88,7 @@
       }
     },
     "extension": true,
+    "schemaDir": "schema",
     "outputDir": "../../jupyter_resource_usage/labextension"
   }
 }

packages/labextension/schema/topbar-item.json

@@ -0,0 +1,48 @@
+{
+  "title": "Resource Usage Menu Bar",
+  "description": "Resource Usage Menu Bar settings.",
+  "jupyter.lab.toolbars": {
+    "TopBar": [
+      {
+        "name": "cpu",
+        "rank": 120
+      },
+      {
+        "name": "memory",
+        "rank": 130
+      }
+    ]
+  },
+  "properties": {
+    "enable": {
+      "title": "Enable resource usage panels",
+      "description": "Whether to enable resource usage panels on topbar",
+      "default": false,
+      "type": "boolean"
+    },
+    "refreshRate": {
+      "title": "Refresh Rate (ms)",
+      "description": "Refresh Rate to sync metrics data",
+      "default": 5000,
+      "type": "number"
+    },
+    "memory": {
+      "title": "Memory Settings",
+      "description": "Settings for the memory indicator",
+      "default": {
+        "label": "Mem: "
+      },
+      "type": "object"
+    },
+    "cpu": {
+      "title": "CPU Settings",
+      "description": "Settings for the CPU indicator",
+      "default": {
+        "label": "CPU: "
+      },
+      "type": "object"
+    }
+  },
+  "additionalProperties": false,
+  "type": "object"
+}

packages/labextension/src/cpuView.tsx

@@ -0,0 +1,66 @@
+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<number[]>([]);
+
+  const update = (): void => {
+    const { cpuLimit, currentCpuPercent } = model;
+    const newValues = model.values.map((value) =>
+      Math.min(1, value.cpuPercent / (cpuLimit || 1))
+    );
+    const newText = `${(currentCpuPercent * 100).toFixed(0)}%`;
+    setText(newText);
+    setValues(newValues);
+  };
+
+  useEffect(() => {
+    model.stateChanged.connect(update);
+    return (): void => {
+      model.stateChanged.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/labextension/src/index.ts

@@ -3,29 +3,75 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin,
 } from '@jupyterlab/application';
+
+import { IToolbarWidgetRegistry } from '@jupyterlab/apputils';
+
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+
 import { INotebookTracker } from '@jupyterlab/notebook';
+
 import { LabIcon } from '@jupyterlab/ui-components';
+
 import { ICommandPalette } from '@jupyterlab/apputils';
+
 import { IConsoleTracker } from '@jupyterlab/console';
-import { KernelUsagePanel } from './panel';
-import tachometer from '../style/tachometer.svg';
 
 import { IStatusBar } from '@jupyterlab/statusbar';
 
 import { ITranslator } from '@jupyterlab/translation';
 
-import { MemoryUsage } from './memoryUsage';
+import { JSONObject } from '@lumino/coreutils';
+
+import { KernelUsagePanel } from './panel';
+
+import tachometer from '../style/tachometer.svg';
+
+import { ResourceUsage } from './model';
+
+import { ResourceUsageStatus } from './resourceUsage';
+
 import { KernelWidgetTracker } from './tracker';
 
+import { CpuView } from './cpuView';
+
+import { MemoryView } from './memoryView';
+
+/**
+ * Disable system monitor panels by default.
+ */
+const DEFAULT_ENABLE_SYSTEM_MONITOR = false;
+
+/**
+ * The default refresh rate.
+ */
+const DEFAULT_REFRESH_RATE = 5000;
+
+/**
+ * The default memory label.
+ */
+const DEFAULT_MEMORY_LABEL = 'Mem: ';
+
+/**
+ * The default CPU label.
+ */
+const DEFAULT_CPU_LABEL = 'CPU: ';
+
+/**
+ * An interface for resource settings.
+ */
+interface IResourceSettings extends JSONObject {
+  label: string;
+}
+
 namespace CommandIDs {
   export const getKernelUsage = 'kernel-usage:get';
 }
 
 /**
  * Initialization data for the jupyter-resource-usage extension.
  */
-const memoryStatusPlugin: JupyterFrontEndPlugin<void> = {
-  id: '@jupyter-server/resource-usage:memory-status-item',
+const resourceStatusPlugin: JupyterFrontEndPlugin<void> = {
+  id: '@jupyter-server/resource-usage:status-item',
   autoStart: true,
   requires: [IStatusBar, ITranslator],
   activate: (
@@ -34,9 +80,9 @@ const memoryStatusPlugin: JupyterFrontEndPlugin<void> = {
     translator: ITranslator
   ) => {
     const trans = translator.load('jupyter-resource-usage');
-    const item = new MemoryUsage(trans);
+    const item = new ResourceUsageStatus(trans);
 
-    statusBar.registerStatusItem(memoryStatusPlugin.id, {
+    statusBar.registerStatusItem(resourceStatusPlugin.id, {
       item,
       align: 'left',
       rank: 2,
@@ -46,6 +92,54 @@ const memoryStatusPlugin: JupyterFrontEndPlugin<void> = {
   },
 };
 
+/**
+ * Initialization data for the jupyterlab-system-monitor extension.
+ */
+const systemMonitorPlugin: JupyterFrontEndPlugin<void> = {
+  id: '@jupyter-server/resource-usage:topbar-item',
+  autoStart: true,
+  requires: [IToolbarWidgetRegistry],
+  optional: [ISettingRegistry],
+  activate: async (
+    app: JupyterFrontEnd,
+    toolbarRegistry: IToolbarWidgetRegistry,
+    settingRegistry: ISettingRegistry
+  ) => {
+    let enablePlugin = DEFAULT_ENABLE_SYSTEM_MONITOR;
+    let refreshRate = DEFAULT_REFRESH_RATE;
+    let cpuLabel = DEFAULT_CPU_LABEL;
+    let memoryLabel = DEFAULT_MEMORY_LABEL;
+
+    if (settingRegistry) {
+      const settings = await settingRegistry.load(systemMonitorPlugin.id);
+      enablePlugin = settings.get('enable').composite as boolean;
+      refreshRate = settings.get('refreshRate').composite as number;
+      const cpuSettings = settings.get('cpu').composite as IResourceSettings;
+      cpuLabel = cpuSettings.label;
+      const memorySettings = settings.get('memory')
+        .composite as IResourceSettings;
+      memoryLabel = memorySettings.label;
+    }
+
+    const model = new ResourceUsage.Model({ refreshRate });
+    await model.refresh();
+
+    if (enablePlugin && model.cpuAvailable) {
+      toolbarRegistry.addFactory('TopBar', 'cpu', () => {
+        const cpu = CpuView.createCpuView(model, cpuLabel);
+        return cpu;
+      });
+    }
+
+    if (enablePlugin && model.memoryAvailable) {
+      toolbarRegistry.addFactory('TopBar', 'memory', () => {
+        const memory = MemoryView.createMemoryView(model, memoryLabel);
+        return memory;
+      });
+    }
+  },
+};
+
 const kernelUsagePlugin: JupyterFrontEndPlugin<void> = {
   id: '@jupyter-server/resource-usage:kernel-panel-item',
   autoStart: true,
@@ -101,7 +195,8 @@ const kernelUsagePlugin: JupyterFrontEndPlugin<void> = {
 };
 
 const plugins: JupyterFrontEndPlugin<any>[] = [
-  memoryStatusPlugin,
+  resourceStatusPlugin,
+  systemMonitorPlugin,
   kernelUsagePlugin,
 ];
 export default plugins;