Merge pull request jupyter-server#12 from Quansight/fix/panel-layout

Tune the panel layout

Author: echarles

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: {

src/widget.tsx

@@ -135,55 +135,57 @@ const KernelUsage = (props: {
     if (kernelPoll) {
       return (
         <>
-          <h3 className="jp-kernelusage-separator">Kernel Usage</h3>
-          <div className="jp-kernelusage-separator">
+          <h3 className="jp-KernelUsage-section-separator">Kernel Usage</h3>
+          <div className="jp-KernelUsage-separator">
             Kernel Host: {kernelPoll.usage?.hostname}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Notebook: {kernelPoll.path}
           </div>
-          <div className="jp-kernelusage-separator">Kernel ID: {kernelId}</div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">Kernel ID: {kernelId}</div>
+          <div className="jp-KernelUsage-separator">
             Timestamp: {kernelPoll.usage?.timestamp?.toLocaleString()}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             CPU: {kernelPoll.usage?.kernel_cpu}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Memory: {formatForDisplay(kernelPoll.usage?.kernel_memory)}
           </div>
-          <hr></hr>
-          <h4 className="jp-kernelusage-separator">Host CPU</h4>
-          <div className="jp-kernelusage-separator">
+          <hr className="jp-KernelUsage-section-separator"></hr>
+          <h4 className="jp-KernelUsage-section-separator">Host CPU</h4>
+          <div className="jp-KernelUsage-separator">
             Percentage {kernelPoll.usage?.host_cpu_percent.toFixed(1)}
           </div>
-          <h4 className="jp-kernelusage-separator">Host Virtual Memory</h4>
-          <div className="jp-kernelusage-separator">
+          <h4 className="jp-KernelUsage-section-separator">
+            Host Virtual Memory
+          </h4>
+          <div className="jp-KernelUsage-separator">
             Active:{' '}
             {formatForDisplay(kernelPoll.usage?.host_virtual_memory.active)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Available:{' '}
             {formatForDisplay(kernelPoll.usage?.host_virtual_memory.available)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Free: {formatForDisplay(kernelPoll.usage?.host_virtual_memory.free)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Inactive:{' '}
             {formatForDisplay(kernelPoll.usage?.host_virtual_memory.inactive)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Percent: {kernelPoll.usage?.host_virtual_memory.percent.toFixed(1)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Total:{' '}
             {formatForDisplay(kernelPoll.usage?.host_virtual_memory.total)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Used: {formatForDisplay(kernelPoll.usage?.host_virtual_memory.used)}
           </div>
-          <div className="jp-kernelusage-separator">
+          <div className="jp-KernelUsage-separator">
             Wired:{' '}
             {formatForDisplay(kernelPoll.usage?.host_virtual_memory.wired)}
           </div>

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;