Update README and fix settings file (#205)

* Update README

Update outdated screenshots with new ones

Add note about JLab 4 and Notebook 7 support

Add section about how to enable alternative frontend

* Fix json file to properly render in settings

* Make linter happy again!

* Add screenshot of kernel usage

Add a note on how to enable it on notebook 7.x

Author: mahendrapaipuri

README.md

@@ -12,19 +12,40 @@
 [![PyPI](https://img.shields.io/pypi/l/jupyter-resource-usage)](https://pypi.python.org/pypi/jupyter-resource-usage)
 [![GitHub](https://img.shields.io/badge/issue_tracking-github-blue?logo=github)](https://github.com/jupyter-server/jupyter-resource-usage/issues)
 
-![Screenshot with memory limit](screenshot.png)
+![Screenshot with memory limit](./doc/statusbar.png)
 
 Jupyter Resource Usage is an extension for Jupyter Notebooks and JupyterLab that
 displays an indication of how much resources your current notebook server and
 its children (kernels, terminals, etc) are using. This is displayed in the
-main toolbar in the notebook itself, refreshing every 5s.
+status bar in the JupyterLab and notebook, refreshing every 5s.
 
 Kernel resource usage can be displayed in a sidebar for IPython kernels with
 [ipykernel](https://github.com/ipython/ipykernel) >= 6.11.0.
 
+![Screenshot for kernel usage](./doc/kernel-usage.png)
+
+The kernel usage is available for Notebook 7.x too which can be enabled at
+`View -> Right Sidebar -> Show Kernel Usage`. In the case of JupyterLab interface, it is
+enough to click `tachometer` icon on the right sidebar.
+
+The package provides an alternative frontend for the `jupyter-resource-usage` metrics:
+
+![screencast](./doc/topbar.gif)
+
+Previously, this extension used to be distributed with
+[jupyterlab-system-monitor](https://github.com/jtpio/jupyterlab-system-monitor) package.
+Starting from `1.0.0`, the alternative frontend has been integrated into the
+current repository. Check [Alternative frontend](#enable-alternative-frontend) section
+on how to enable and configure this alternative frontend.
+
+**Note** that for JupyterLab 3.x and 2.x, users should install the alternative frontend
+from [jupyterlab-system-monitor](https://github.com/jtpio/jupyterlab-system-monitor).
+
 ## Installation
 
-You can currently install this package from PyPI.
+### JupyterLab 4.x and Notebook 7.x
+
+You should install the latest version `>=1.0.0` for JupyterLab 4 compatability.
 
 ```bash
 pip install jupyter-resource-usage
@@ -36,6 +57,20 @@ Or with `conda`:
 conda install -c conda-forge jupyter-resource-usage
 ```
 
+### JupyterLab 3.x and Notebook 6.x
+
+You should pin the versions to `<1.0.0`
+
+```bash
+pip install 'jupyter-resource-usage<1.0.0'
+```
+
+Or with `conda`:
+
+```bash
+conda install -c conda-forge 'jupyter-resource-usage<1.0.0'
+```
+
 **If your notebook version is < 5.3**, you need to enable the extension manually.
 
 ```
@@ -60,7 +95,7 @@ The limit needs to be set as an integer in Bytes.
 
 ### Memory usage warning threshold
 
-![Screenshot with memory warning](warn-screenshot.png)
+![Screenshot with memory warning](./doc/statusbar-warn.png)
 
 The background of the resource display can be changed to red when the user is near a memory limit.
 The threshold for this warning can be configured as a fraction of the memory limit.
@@ -94,6 +129,11 @@ As a command line argument:
 jupyter notebook --ResourceUseDisplay.track_cpu_percent=True
 ```
 
+When `track_cpu_percent` is set to `True`, status will report CPU utilisation along with
+memory:
+
+![Screenshot with CPU and memory](./doc/statusbar-cpu.png)
+
 ### Disable Prometheus Metrics
 
 There is a [known bug](https://github.com/jupyter-server/jupyter-resource-usage/issues/123) with Prometheus metrics which
@@ -103,6 +143,20 @@ causes "lag"/pauses in the UI. To workaround this you can disable Prometheus met
 --ResourceUseDisplay.enable_prometheus_metrics=False
 ```
 
+## Enable alternative frontend
+
+By default, the alternative frontend is disabled. To enable it, users should go to
+`Settings -> Settings Editor -> Resource Usage Indicator` which will render following
+form
+
+![jupyterlab_setting](./doc/settings.png)
+
+By checking "Enable resource usage indicators" and refreshing the browser tab will
+render the alternative frontend in the topbar.
+
+Users can change the label and refresh rate for the alternative frontend using settings
+editor.
+
 ## Resources Displayed
 
 Currently the server extension only reports memory usage and CPU usage. Other metrics will be added in the future as needed.

doc/kernel-usage.png

@@ -1,6 +1,6 @@
 {
-  "title": "Resource Usage Menu Bar",
-  "description": "Resource Usage Menu Bar settings.",
+  "title": "Resource Usage Indicator",
+  "description": "Resource Usage Indicator settings.",
   "jupyter.lab.toolbars": {
     "TopBar": [
       {
@@ -15,8 +15,8 @@
   },
   "properties": {
     "enable": {
-      "title": "Enable resource usage panels",
-      "description": "Whether to enable resource usage panels on topbar",
+      "title": "Enable resource usage indicators",
+      "description": "Whether to enable resource usage indicators on topbar",
       "default": false,
       "type": "boolean"
     },
@@ -29,20 +29,40 @@
     "memory": {
       "title": "Memory Settings",
       "description": "Settings for the memory indicator",
+      "$ref": "#/definitions/memory",
       "default": {
         "label": "Mem: "
-      },
-      "type": "object"
+      }
     },
     "cpu": {
       "title": "CPU Settings",
       "description": "Settings for the CPU indicator",
+      "$ref": "#/definitions/cpu",
       "default": {
         "label": "CPU: "
-      },
-      "type": "object"
+      }
     }
   },
   "additionalProperties": false,
+  "definitions": {
+    "memory": {
+      "type": "object",
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "Label for the memory indicator"
+        }
+      }
+    },
+    "cpu": {
+      "type": "object",
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "Label for the cpu indicator"
+        }
+      }
+    }
+  },
   "type": "object"
 }