feat: add Plugin Monitor to menu

.eslintignore

@@ -374,6 +374,7 @@ packages/app-desktop/gui/NotyfContext.js
 packages/app-desktop/gui/OneDriveLoginScreen.js
 packages/app-desktop/gui/PasswordInput/PasswordInput.js
 packages/app-desktop/gui/PdfViewer.js
+packages/app-desktop/gui/PluginMonitorScreen.js
 packages/app-desktop/gui/PromptDialog.js
 packages/app-desktop/gui/ResizableLayout/MoveButtons.js
 packages/app-desktop/gui/ResizableLayout/ResizableLayout.js

.gitignore

@@ -353,6 +353,7 @@ packages/app-desktop/gui/NotyfContext.js
 packages/app-desktop/gui/OneDriveLoginScreen.js
 packages/app-desktop/gui/PasswordInput/PasswordInput.js
 packages/app-desktop/gui/PdfViewer.js
+packages/app-desktop/gui/PluginMonitorScreen.js
 packages/app-desktop/gui/PromptDialog.js
 packages/app-desktop/gui/ResizableLayout/MoveButtons.js
 packages/app-desktop/gui/ResizableLayout/ResizableLayout.js

packages/app-desktop/app.reducer.ts

@@ -52,6 +52,7 @@ export interface AppState extends State {
 	mainLayout: LayoutItem;
 	dialogs: AppStateDialog[];
 	isResettingLayout: boolean;
+	isPluginMonitorOpen: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
@@ -76,6 +77,7 @@ export function createAppDefaultState(windowContentSize: any, resourceEditWatche
 		startupPluginsLoaded: false,
 		dialogs: [],
 		isResettingLayout: false,
+		isPluginMonitorOpen: false,
 		...resourceEditWatcherDefaultState,
 	};
 }
@@ -344,6 +346,22 @@ export default function(state: AppState, action: any) {
 			};
 			break;
 
+		case 'PLUGIN_MONITOR_OPEN':
+		case 'PLUGIN_MONITOR_CLOSE':
+			{
+				if (action.type === 'PLUGIN_MONITOR_OPEN') {
+					newState = {
+						...state,
+						isPluginMonitorOpen: true,
+					};
+				} else {
+					newState = {
+						...state,
+						isPluginMonitorOpen: false,
+					};
+				}
+			}
+			break;
 		}
 
 	} catch (error) {

packages/app-desktop/gui/MenuBar.tsx

@@ -553,7 +553,16 @@ function useMenu(props: Props) {
 						});
 					},
 				},
-				separator(),
+				{
+					label: _('Plugin Monitor'),
+					// todo: add accelerator
+					click: () => {
+						props.dispatch({
+							type: 'NAV_GO',
+							routeName: 'PluginMonitor',
+						});
+					},
+				},
 			];
 
 			// the following menu items will be available for all OS under Tools
@@ -574,6 +583,7 @@ function useMenu(props: Props) {
 
 			toolsItems.push(SpellCheckerService.instance().spellCheckerConfigMenuItem(props['spellChecker.languages'], props['spellChecker.enabled']));
 
+
 			function _checkForUpdates() {
 				void checkForUpdates(false, bridge().window(), { includePreReleases: Setting.value('autoUpdate.includePreReleases') });
 			}

packages/app-desktop/gui/Navigator.tsx

@@ -54,6 +54,7 @@ class NavigatorComponent extends React.Component<Props> {
 const Navigator = connect((state: AppState) => {
 	return {
 		route: state.route,
+		isPluginMonitorOpen: state.isPluginMonitorOpen,
 	};
 })(NavigatorComponent);
 

packages/app-desktop/gui/PluginMonitorScreen.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+
+const { connect } = require('react-redux');
+import { PluginResourceData, PluginResourceMonitor } from '../services/plugins/PluginResourceMonitor';
+import { AppState } from '../app.reducer';
+const { themeStyle } = require('@joplin/lib/theme');
+import PluginService from '@joplin/lib/services/plugins/PluginService';
+
+interface Props {
+	themeId: string;
+}
+
+interface PluginData {
+	osPid: number;
+	name: string;
+	memory: number;
+	peakMemory: number;
+	cpu: number;
+	runningStatus: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+class PluginMonitorScreen extends React.Component<any, any> {
+	public constructor(props: Props) {
+		super(props);
+
+		this.state = {
+			pluginData: [],
+		};
+	}
+
+	public async componentDidMount() {
+		PluginResourceMonitor.instance().ResourceMonitorGUIUpdate = this.updatePluginData.bind(this);
+	}
+
+	public updatePluginData(pluginData: PluginResourceData) {
+		const plugins = PluginService.instance().plugins;
+		const data: PluginData[] = [];
+		for (const plugin in plugins) {
+			const osPid = plugins[plugin].osPid;
+			data.push({
+				osPid,
+				name: plugins[plugin].manifest.name,
+				memory: pluginData[osPid].memory,
+				peakMemory: pluginData[osPid].peakMemory,
+				cpu: pluginData[osPid].cpu,
+				runningStatus: plugins[plugin].running,
+			});
+		}
+
+		this.setState({ pluginData: data });
+	}
+
+	public render() {
+		const theme = themeStyle(this.props.themeId);
+
+		return (
+			<div style={{ display: 'flex', flexDirection: 'column', height: '100%', backgroundColor: theme.backgroundColor }}>
+				<div style={{ padding: theme.configScreenPadding, flex: 1, color: theme.color }}>
+					{JSON.stringify(this.state.pluginData)}
+				</div>
+			</div>
+		);
+	}
+}
+
+const mapStateToProps = (state: AppState) => {
+	return {
+		themeId: state.settings.theme,
+	};
+};
+
+export default connect(mapStateToProps)(PluginMonitorScreen);
+

packages/app-desktop/gui/Root.tsx

@@ -29,6 +29,7 @@ const { ResourceScreen } = require('./ResourceScreen.js');
 import Navigator from './Navigator';
 import WelcomeUtils from '@joplin/lib/WelcomeUtils';
 import JoplinCloudLoginScreen from './JoplinCloudLoginScreen';
+import PluginMonitorScreen from './PluginMonitorScreen';
 const { ThemeProvider, StyleSheetManager, createGlobalStyle } = require('styled-components');
 const bridge = require('@electron/remote').require('./bridge').default;
 
@@ -232,6 +233,7 @@ class RootComponent extends React.Component<Props, any> {
 			Config: { screen: ConfigScreen, title: () => _('Options') },
 			Resources: { screen: ResourceScreen, title: () => _('Note attachments') },
 			Status: { screen: StatusScreen, title: () => _('Synchronisation Status') },
+			PluginMonitor: { screen: PluginMonitorScreen, title: () => _('Plugin Monitor') },
 		};
 
 		return (

packages/app-desktop/services/plugins/PluginResourceMonitor.ts

@@ -1,11 +1,15 @@
 import bridge from '../bridge';
 
-export interface ResourceMetric {
+export interface PluginResourceMetric {
 	memory: number;
 	peakMemory: number;
 	cpu: number;
 }
 
+export interface PluginResourceData {
+	[key: string]: PluginResourceMetric;
+}
+
 export class PluginResourceMonitor {
 
 	private static instance_: PluginResourceMonitor = null;
@@ -19,13 +23,15 @@ export class PluginResourceMonitor {
 	}
 
 	private intervalId_: ReturnType<typeof setTimeout>;
-	private resourceMetrics_: { [key: string]: ResourceMetric };
+	private resourceMetrics_: PluginResourceData;
 
 	public constructor() {
 		this.intervalId_ = null;
 		this.resourceMetrics_ = {};
 	}
 
+	public ResourceMonitorGUIUpdate: (resourceMetrics: PluginResourceData)=> void | null = null;
+
 	private startResourceMonitor() {
 		this.intervalId_ = setInterval(() => {
 
@@ -38,6 +44,10 @@ export class PluginResourceMonitor {
 					cpu: metric.cpu.percentCPUUsage,
 				};
 			}
+
+			if (this.ResourceMonitorGUIUpdate) {
+				this.ResourceMonitorGUIUpdate(this.resourceMetrics_);
+			}
 		}, 5000);
 	}
 
@@ -58,4 +68,5 @@ export class PluginResourceMonitor {
 	public async stop() {
 		this.stopResourceMonitor();
 	}
+
 }