Add an offline circle icon for disconnected or unknown kernel state

packages/apputils/src/toolbar.tsx

@@ -8,6 +8,7 @@ import {
   circleIcon,
   classes,
   LabIcon,
+  offlineBoltIcon,
   refreshIcon,
   stopIcon
 } from '@jupyterlab/ui-components';
@@ -789,28 +790,24 @@ namespace Private {
       };
 
       // set the icon
-      if (this._isBusy(status)) {
-        LabIcon.remove(this.node);
-        circleIcon.element(circleIconProps);
-      } else {
-        LabIcon.remove(this.node);
-        circleEmptyIcon.element(circleIconProps);
-      }
-    }
-
-    /**
-     * Check if status should be shown as busy.
-     */
-    private _isBusy(status: ISessionContext.KernelDisplayStatus): boolean {
-      return (
+      LabIcon.remove(this.node);
+      if (
         status === 'busy' ||
         status === 'starting' ||
         status === 'terminating' ||
         status === 'restarting' ||
-        status === 'initializing' ||
+        status === 'initializing'
+      ) {
+        circleIcon.element(circleIconProps);
+      } else if (
         status === 'connecting' ||
+        status === 'disconnected' ||
         status === 'unknown'
-      );
+      ) {
+        offlineBoltIcon.element(circleIconProps);
+      } else {
+        circleEmptyIcon.element(circleIconProps);
+      }
     }
 
     protected translator: ITranslator;

packages/ui-components/src/icon/iconimports.ts

@@ -56,6 +56,7 @@ import newFolderSvgstr from '../../style/icons/toolbar/new-folder.svg';
 import notTrustedSvgstr from '../../style/icons/statusbar/not-trusted.svg';
 import notebookSvgstr from '../../style/icons/filetype/notebook.svg';
 import numberingSvgstr from '../../style/icons/toolbar/numbering.svg';
+import offlineBoltSvgstr from '../../style/icons/toolbar/offline-bolt.svg';
 import paletteSvgstr from '../../style/icons/sidebar/palette.svg';
 import pasteSvgstr from '../../style/icons/toolbar/paste.svg';
 import pdfSvgstr from '../../style/icons/filetype/pdf.svg';
@@ -131,6 +132,7 @@ export const newFolderIcon = new LabIcon({ name: 'ui-components:new-folder', svg
 export const notTrustedIcon = new LabIcon({ name: 'ui-components:not-trusted', svgstr: notTrustedSvgstr });
 export const notebookIcon = new LabIcon({ name: 'ui-components:notebook', svgstr: notebookSvgstr });
 export const numberingIcon = new LabIcon({ name: 'ui-components:numbering', svgstr: numberingSvgstr });
+export const offlineBoltIcon = new LabIcon({ name: 'ui-components:offline-bolt', svgstr: offlineBoltSvgstr });
 export const paletteIcon = new LabIcon({ name: 'ui-components:palette', svgstr: paletteSvgstr });
 export const pasteIcon = new LabIcon({ name: 'ui-components:paste', svgstr: pasteSvgstr });
 export const pdfIcon = new LabIcon({ name: 'ui-components:pdf', svgstr: pdfSvgstr });

packages/ui-components/style/deprecated.css

@@ -60,6 +60,7 @@
   --jp-icon-not-trusted: url('icons/statusbar/not-trusted.svg');
   --jp-icon-notebook: url('icons/filetype/notebook.svg');
   --jp-icon-numbering: url('icons/toolbar/numbering.svg');
+  --jp-icon-offline-bolt: url('icons/toolbar/offline-bolt.svg');
   --jp-icon-palette: url('icons/sidebar/palette.svg');
   --jp-icon-paste: url('icons/toolbar/paste.svg');
   --jp-icon-pdf: url('icons/filetype/pdf.svg');
@@ -233,6 +234,9 @@
 .jp-NumberingIcon {
   background-image: var(--jp-icon-numbering);
 }
+.jp-OfflineBoltIcon {
+  background-image: var(--jp-icon-offline-bolt);
+}
 .jp-PaletteIcon {
   background-image: var(--jp-icon-palette);
 }

packages/ui-components/style/icons/toolbar/offline-bolt.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16">
+  <g class="jp-icon3" fill="#616161">
+    <path d="M12 2.02c-5.51 0-9.98 4.47-9.98 9.98s4.47 9.98 9.98 9.98 9.98-4.47 9.98-9.98S17.51 2.02 12 2.02zm0 17.96c-4.4 0-7.98-3.58-7.98-7.98S7.6 4.02 12 4.02 19.98 7.6 19.98 12 16.4 19.98 12 19.98zM12.75 5l-4.5 8.5h3.14V19l4.36-8.5h-3z"/>
+  </g>
+</svg>