diff --git a/src/panel.ts b/src/panel.ts
index f645872..1db501c 100644
--- a/src/panel.ts
+++ b/src/panel.ts
@@ -6,7 +6,7 @@ import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
import { KernelUsageWidget } from './widget';
import tachometer from '../style/tachometer.svg';
-const PANEL_CLASS = 'jp-kernelusage-view';
+const PANEL_CLASS = 'jp-KernelUsage-view';
export class KernelUsagePanel extends StackedPanel {
constructor(props: {
diff --git a/src/widget.tsx b/src/widget.tsx
index 109e94e..a2e1641 100644
--- a/src/widget.tsx
+++ b/src/widget.tsx
@@ -135,55 +135,57 @@ const KernelUsage = (props: {
if (kernelPoll) {
return (
<>
-
Kernel Usage
-
+
Kernel Usage
+
Kernel Host: {kernelPoll.usage?.hostname}
-
+
Notebook: {kernelPoll.path}
-
Kernel ID: {kernelId}
-
+
Kernel ID: {kernelId}
+
Timestamp: {kernelPoll.usage?.timestamp?.toLocaleString()}
-
+
CPU: {kernelPoll.usage?.kernel_cpu}
-
+
Memory: {formatForDisplay(kernelPoll.usage?.kernel_memory)}
-
-
Host CPU
-
+
+
Host CPU
+
Percentage {kernelPoll.usage?.host_cpu_percent.toFixed(1)}
-
Host Virtual Memory
-
+
+ Host Virtual Memory
+
+
Active:{' '}
{formatForDisplay(kernelPoll.usage?.host_virtual_memory.active)}
-
+
Available:{' '}
{formatForDisplay(kernelPoll.usage?.host_virtual_memory.available)}
-
+
Free: {formatForDisplay(kernelPoll.usage?.host_virtual_memory.free)}
-
+
Inactive:{' '}
{formatForDisplay(kernelPoll.usage?.host_virtual_memory.inactive)}
-
+
Percent: {kernelPoll.usage?.host_virtual_memory.percent.toFixed(1)}
-
+
Total:{' '}
{formatForDisplay(kernelPoll.usage?.host_virtual_memory.total)}
-
+
Used: {formatForDisplay(kernelPoll.usage?.host_virtual_memory.used)}
-
+
Wired:{' '}
{formatForDisplay(kernelPoll.usage?.host_virtual_memory.wired)}
diff --git a/style/base.css b/style/base.css
index 1f04800..1f26dd8 100644
--- a/style/base.css
+++ b/style/base.css
@@ -1,16 +1,21 @@
-.jp-kernelusage-view {
+.jp-KernelUsage-view {
overflow: scroll !important;
padding: 10px;
background-color: white;
min-width: 250px !important;
}
-.jp-kernelusage-separator {
+.jp-KernelUsage-section-separator {
margin-top: 20px;
margin-bottom: 20px;
}
-.jp-kernelusage-button {
+.jp-KernelUsage-separator {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+.jp-KernelUsage-button {
background-color: green;
border-radius: 12px;
border: none;