Skip to content

Commit af3a170

Browse files
committed
Translate widget.tsx
1 parent 3187bcf commit af3a170

File tree

3 files changed

+55
-42
lines changed

3 files changed

+55
-42
lines changed

packages/labextension/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const extension: JupyterFrontEndPlugin<void> = {
5757
panel = new KernelUsagePanel({
5858
widgetAdded: notebookTracker.widgetAdded,
5959
currentNotebookChanged: notebookTracker.currentChanged,
60+
trans: trans,
6061
});
6162
shell.add(panel, 'right', { rank: 200 });
6263
}

packages/labextension/src/panel.ts

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import { Message } from '@lumino/messaging';
22
import { ISignal } from '@lumino/signaling';
3-
import {
4-
nullTranslator,
5-
ITranslator,
6-
TranslationBundle,
7-
} from '@jupyterlab/translation';
3+
import { TranslationBundle } from '@jupyterlab/translation';
84
import { StackedPanel } from '@lumino/widgets';
95
import { LabIcon } from '@jupyterlab/ui-components';
106
import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
@@ -14,19 +10,15 @@ import tachometer from '../style/tachometer.svg';
1410
const PANEL_CLASS = 'jp-KernelUsage-view';
1511

1612
export class KernelUsagePanel extends StackedPanel {
17-
constructor(
18-
props: {
19-
widgetAdded: ISignal<INotebookTracker, NotebookPanel | null>;
20-
currentNotebookChanged: ISignal<INotebookTracker, NotebookPanel | null>;
21-
},
22-
translator?: ITranslator
23-
) {
13+
constructor(props: {
14+
widgetAdded: ISignal<INotebookTracker, NotebookPanel | null>;
15+
currentNotebookChanged: ISignal<INotebookTracker, NotebookPanel | null>;
16+
trans: TranslationBundle;
17+
}) {
2418
super();
25-
this.translator = translator || nullTranslator;
26-
this._trans = this.translator.load('jupyterlab');
2719
this.addClass(PANEL_CLASS);
2820
this.id = 'kernelusage-panel-id';
29-
this.title.caption = this._trans.__('Kernel Usage');
21+
this.title.caption = props.trans.__('Kernel Usage');
3022
this.title.icon = new LabIcon({
3123
name: 'jupyterlab-kernel-usage:icon',
3224
svgstr: tachometer,
@@ -36,6 +28,7 @@ export class KernelUsagePanel extends StackedPanel {
3628
widgetAdded: props.widgetAdded,
3729
currentNotebookChanged: props.currentNotebookChanged,
3830
panel: this,
31+
trans: props.trans,
3932
});
4033
this.addWidget(widget);
4134
}
@@ -48,7 +41,4 @@ export class KernelUsagePanel extends StackedPanel {
4841
super.onCloseRequest(msg);
4942
this.dispose();
5043
}
51-
52-
protected translator: ITranslator;
53-
private _trans: TranslationBundle;
5444
}

packages/labextension/src/widget.tsx

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ISignal } from '@lumino/signaling';
33
import { ReactWidget, ISessionContext } from '@jupyterlab/apputils';
44
import { IChangedArgs } from '@jupyterlab/coreutils';
55
import { Kernel } from '@jupyterlab/services';
6+
import { TranslationBundle } from '@jupyterlab/translation';
67
import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
78
import { requestAPI } from './handler';
89
import { KernelUsagePanel } from './panel';
@@ -49,6 +50,7 @@ const KernelUsage = (props: {
4950
widgetAdded: ISignal<INotebookTracker, NotebookPanel | null>;
5051
currentNotebookChanged: ISignal<INotebookTracker, NotebookPanel | null>;
5152
panel: KernelUsagePanel;
53+
trans: TranslationBundle;
5254
}) => {
5355
const { panel } = props;
5456
const [kernelId, setKernelId] = useState<string>();
@@ -144,75 +146,91 @@ const KernelUsage = (props: {
144146
return !usage.hostname ? (
145147
<>
146148
<h3 className="jp-KernelUsage-section-separator">
147-
Kernel usage details are not available
149+
props.trans.__('Kernel usage details are not available')
148150
</h3>
149151
<div className="jp-KernelUsage-section-separator">
150-
Please check with your system administrator that you running
151-
IPyKernel version 6.10.0 or above.
152+
props.trans.__('Please check with your system administrator that you
153+
running IPyKernel version 6.10.0 or above.')
152154
</div>
153155
</>
154156
) : (
155157
<>
156-
<h3 className="jp-KernelUsage-section-separator">Kernel usage</h3>
158+
<h3 className="jp-KernelUsage-section-separator">
159+
props.trans.__('Kernel usage')
160+
</h3>
161+
<div className="jp-KernelUsage-separator">
162+
props.trans.__('Kernel Host'): {usage.hostname}
163+
</div>
157164
<div className="jp-KernelUsage-separator">
158-
Kernel Host: {usage.hostname}
165+
props.trans.__('Notebook'): {path}
159166
</div>
160-
<div className="jp-KernelUsage-separator">Notebook: {path}</div>
161-
<div className="jp-KernelUsage-separator">Kernel ID: {kernelId}</div>
162167
<div className="jp-KernelUsage-separator">
163-
Timestamp: {usage.timestamp?.toLocaleString()}
168+
props.trans.__('Kernel ID'): {kernelId}
164169
</div>
165170
<div className="jp-KernelUsage-separator">
166-
Process ID: {usage.pid}
171+
props.trans.__('Timestamp'): {usage.timestamp?.toLocaleString()}
167172
</div>
168173
<div className="jp-KernelUsage-separator">
169-
CPU: {usage.kernel_cpu}% used
174+
props.trans.__('Process ID'): {usage.pid}
170175
</div>
171176
<div className="jp-KernelUsage-separator">
172-
Memory: {formatForDisplay(usage.kernel_memory)}
177+
props.trans.__('CPU'): {usage.kernel_cpu}% used
178+
</div>
179+
<div className="jp-KernelUsage-separator">
180+
props.trans.__('Memory'): {formatForDisplay(usage.kernel_memory)}
173181
</div>
174182
<hr className="jp-KernelUsage-section-separator"></hr>
175-
<h4 className="jp-KernelUsage-section-separator">Host CPU</h4>
183+
<h4 className="jp-KernelUsage-section-separator">
184+
props.trans.__('Host CPU')
185+
</h4>
176186
{usage.host_cpu_percent && (
177187
<div className="jp-KernelUsage-separator">
178-
{usage.host_cpu_percent.toFixed(1)}% used on {usage.cpu_count}{' '}
179-
CPUs
188+
{usage.host_cpu_percent.toFixed(1)}% props.trans.__('used on'){' '}
189+
{usage.cpu_count} CPUs
180190
</div>
181191
)}
182192
<h4 className="jp-KernelUsage-section-separator">
183-
Host Virtual Memory
193+
props.trans.__('Host Virtual Memory')
184194
</h4>
185195
<div className="jp-KernelUsage-separator">
186-
Active: {formatForDisplay(usage.host_virtual_memory.active)}
196+
props.trans.__('Active'):{' '}
197+
{formatForDisplay(usage.host_virtual_memory.active)}
187198
</div>
188199
<div className="jp-KernelUsage-separator">
189-
Available: {formatForDisplay(usage.host_virtual_memory.available)}
200+
props.trans.__('Available'):{' '}
201+
{formatForDisplay(usage.host_virtual_memory.available)}
190202
</div>
191203
<div className="jp-KernelUsage-separator">
192-
Free: {formatForDisplay(usage.host_virtual_memory.free)}
204+
props.trans.__('Free'):{' '}
205+
{formatForDisplay(usage.host_virtual_memory.free)}
193206
</div>
194207
<div className="jp-KernelUsage-separator">
195-
Inactive: {formatForDisplay(usage.host_virtual_memory.inactive)}
208+
props.trans.__('Inactive'):{' '}
209+
{formatForDisplay(usage.host_virtual_memory.inactive)}
196210
</div>
197211
{usage.host_virtual_memory.percent && (
198212
<div className="jp-KernelUsage-separator">
199-
Percent used: {usage.host_virtual_memory.percent.toFixed(1)}%
213+
props.trans.__('Percent used'):{' '}
214+
{usage.host_virtual_memory.percent.toFixed(1)}%
200215
</div>
201216
)}
202217
<div className="jp-KernelUsage-separator">
203-
Total: {formatForDisplay(usage.host_virtual_memory.total)}
218+
props.trans.__('Total'):{' '}
219+
{formatForDisplay(usage.host_virtual_memory.total)}
204220
</div>
205221
<div className="jp-KernelUsage-separator">
206-
Used: {formatForDisplay(usage.host_virtual_memory.used)}
222+
props.trans.__('Used'):{' '}
223+
{formatForDisplay(usage.host_virtual_memory.used)}
207224
</div>
208225
<div className="jp-KernelUsage-separator">
209-
Wired: {formatForDisplay(usage.host_virtual_memory.wired)}
226+
props.trans.__('Wired'):{' '}
227+
{formatForDisplay(usage.host_virtual_memory.wired)}
210228
</div>
211229
</>
212230
);
213231
}
214232
}
215-
return <h3>Kernel usage is not available</h3>;
233+
return <h3>props.trans.__('Kernel usage is not available')</h3>;
216234
};
217235

218236
export class KernelUsageWidget extends ReactWidget {
@@ -222,15 +240,18 @@ export class KernelUsageWidget extends ReactWidget {
222240
NotebookPanel | null
223241
>;
224242
private _panel: KernelUsagePanel;
243+
private _trans: TranslationBundle;
225244
constructor(props: {
226245
widgetAdded: ISignal<INotebookTracker, NotebookPanel | null>;
227246
currentNotebookChanged: ISignal<INotebookTracker, NotebookPanel | null>;
228247
panel: KernelUsagePanel;
248+
trans: TranslationBundle;
229249
}) {
230250
super();
231251
this._widgetAdded = props.widgetAdded;
232252
this._currentNotebookChanged = props.currentNotebookChanged;
233253
this._panel = props.panel;
254+
this._trans = props.trans;
234255
}
235256

236257
protected render(): React.ReactElement<any> {
@@ -239,6 +260,7 @@ export class KernelUsageWidget extends ReactWidget {
239260
widgetAdded={this._widgetAdded}
240261
currentNotebookChanged={this._currentNotebookChanged}
241262
panel={this._panel}
263+
trans={this._trans}
242264
/>
243265
);
244266
}

0 commit comments

Comments
 (0)