@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/processMonitor/components/ListHeader.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { Store, Actions } from "../stores/ProcessMonitorStore";
+/**
+ * This is the "table header" that shows which columns are visible.
+ * Since we aren't using an HTML table, this component exists.
+ * It handles column display and sorting.
+ **/
+export default class ListHeader extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            sort: Store === null || Store === void 0 ? void 0 : Store.getValue({ field: "sort" }),
+        };
+        this.onSortChanged = this.onSortChanged.bind(this);
+    }
+    // When the sort value changes in the store, change it locally, and re-render the direction arrow.
+    onSortChanged(err, response) {
+        let { value } = response;
+        this.setState({
+            sort: value,
+        });
+    }
+    UNSAFE_componentWillMount() {
+        Store === null || Store === void 0 ? void 0 : Store.addListener({ field: "sort" }, this.onSortChanged);
+    }
+    componentWillUnmount() {
+        Store === null || Store === void 0 ? void 0 : Store.removeListener({ field: "sort" }, this.onSortChanged);
+    }
+    render() {
+        //Just a list of the things beneath it. name, CPU, mem, etc. drive from store.
+        return (React.createElement("div", { className: "list-header" },
+            React.createElement("div", { className: "list-header-statistic-label list-header-name", onClick: () => {
+                    Actions.setSort("name");
+                }, tabIndex: 0, role: "button", onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        Actions.setSort("name");
+                    }
+                } },
+                "Name",
+                this.state.sort.field === "name" ? (this.state.sort.direction === "ascending" ? (React.createElement("i", { className: "sort-direction ff-arrow-up" })) : (React.createElement("i", { className: "sort-direction ff-arrow-down" }))) : null),
+            React.createElement("div", { className: "list-header-statistic-labels" },
+                this.props.fields.map((field, i) => (React.createElement("div", { key: i, className: "list-header-statistic-label", onClick: () => {
+                        Actions.setSort(field.value);
+                    }, tabIndex: 0, role: "button", onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            Actions.setSort(field.value);
+                        }
+                    } },
+                    field.label,
+                    this.state.sort.field === field.value ? (this.state.sort.direction === "ascending" ? (React.createElement("i", { className: "sort-direction ff-arrow-up" })) : (React.createElement("i", { className: "sort-direction ff-arrow-down" }))) : null))),
+                React.createElement("div", { className: "list-header-statistic-label" }))));
+    }
+}
+//# sourceMappingURL=ListHeader.js.map

package/react/components/processMonitor/components/ListHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListHeader.js","sourceRoot":"","sources":["../../../../src/components/processMonitor/components/ListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAY/D;;;;IAII;AACJ,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAyB;IACtE,YAAY,KAAa;QACxB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACZ,IAAI,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;SACxC,CAAC;QACF,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC;IAED,kGAAkG;IAClG,aAAa,CAAC,GAAkB,EAAE,QAAmC;QACpE,IAAI,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,QAAQ,CAAC;YACb,IAAI,EAAE,KAAK;SACX,CAAC,CAAC;IACJ,CAAC;IAED,yBAAyB;QACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3D,CAAC;IAED,oBAAoB;QACnB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC9D,CAAC;IAED,MAAM;QACL,8EAA8E;QAC9E,OAAO,CACN,6BAAK,SAAS,EAAC,aAAa;YAE3B,6BACC,SAAS,EAAC,8CAA8C,EACxD,OAAO,EAAE,GAAG,EAAE;oBACb,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;gBACzB,CAAC,EACD,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAsB,EAAE,EAAE;oBACrC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;wBACvC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;qBACxB;gBACF,CAAC;;gBAKA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,CACnC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,KAAK,WAAW,CAAC,CAAC,CAAC,CAC3C,2BAAG,SAAS,EAAC,4BAA4B,GAAK,CAC9C,CAAC,CAAC,CAAC,CACH,2BAAG,SAAS,EAAC,8BAA8B,GAAK,CAChD,CACD,CAAC,CAAC,CAAC,IAAI,CACH;YACN,6BAAK,SAAS,EAAC,8BAA8B;gBAC3C,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACpC,6BACC,GAAG,EAAE,CAAC,EACN,SAAS,EAAC,6BAA6B,EACvC,OAAO,EAAE,GAAG,EAAE;wBACb,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;oBAC9B,CAAC,EACD,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAsB,EAAE,EAAE;wBACrC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;4BACvC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;yBAC7B;oBACF,CAAC;oBAEA,KAAK,CAAC,KAAK;oBAEX,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACxC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,KAAK,WAAW,CAAC,CAAC,CAAC,CAC3C,2BAAG,SAAS,EAAC,4BAA4B,GAAK,CAC9C,CAAC,CAAC,CAAC,CACH,2BAAG,SAAS,EAAC,8BAA8B,GAAK,CAChD,CACD,CAAC,CAAC,CAAC,IAAI,CACH,CACN,CAAC;gBACF,6BAAK,SAAS,EAAC,6BAA6B,GAAO,CAC9C,CACD,CACN,CAAC;IACH,CAAC;CACD","sourcesContent":["import React from \"react\";\nimport { Store, Actions } from \"../stores/ProcessMonitorStore\";\nimport { SortObjectType, ModeStatsType } from \"../ProcessMonitorTypes\";\nimport { StandardError } from \"@finsemble/finsemble-api/types/types\";\n\ninterface IProps {\n\tfields: ModeStatsType[];\n}\n\ninterface IState {\n\tsort: SortObjectType;\n}\n\n/**\n * This is the \"table header\" that shows which columns are visible.\n * Since we aren't using an HTML table, this component exists.\n * It handles column display and sorting.\n **/\nexport default class ListHeader extends React.Component<IProps, IState> {\n\tconstructor(props: IProps) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tsort: Store?.getValue({ field: \"sort\" }),\n\t\t};\n\t\tthis.onSortChanged = this.onSortChanged.bind(this);\n\t}\n\n\t// When the sort value changes in the store, change it locally, and re-render the direction arrow.\n\tonSortChanged(err: StandardError, response: { value: SortObjectType }) {\n\t\tlet { value } = response;\n\t\tthis.setState({\n\t\t\tsort: value,\n\t\t});\n\t}\n\n\tUNSAFE_componentWillMount() {\n\t\tStore?.addListener({ field: \"sort\" }, this.onSortChanged);\n\t}\n\n\tcomponentWillUnmount() {\n\t\tStore?.removeListener({ field: \"sort\" }, this.onSortChanged);\n\t}\n\n\trender() {\n\t\t//Just a list of the things beneath it. name, CPU, mem, etc. drive from store.\n\t\treturn (\n\t\t\t<div className=\"list-header\">\n\t\t\t\t{/* The name is separate because it isn't a statistic, per se. So I split it out. */}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"list-header-statistic-label list-header-name\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tActions.setSort(\"name\");\n\t\t\t\t\t}}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\tonKeyDown={(e: React.KeyboardEvent) => {\n\t\t\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\t\t\tActions.setSort(\"name\");\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tName\n\t\t\t\t\t{/* If this field is the one being sorted, render the direction of the sort. Otherwise return null. */}\n\t\t\t\t\t{/* eslint-disable no-nested-ternary */}\n\t\t\t\t\t{this.state.sort.field === \"name\" ? (\n\t\t\t\t\t\tthis.state.sort.direction === \"ascending\" ? (\n\t\t\t\t\t\t\t<i className=\"sort-direction ff-arrow-up\"></i>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<i className=\"sort-direction ff-arrow-down\"></i>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"list-header-statistic-labels\">\n\t\t\t\t\t{this.props.fields.map((field, i) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\tclassName=\"list-header-statistic-label\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tActions.setSort(field.value);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\tonKeyDown={(e: React.KeyboardEvent) => {\n\t\t\t\t\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\t\t\t\t\tActions.setSort(field.value);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{field.label}\n\t\t\t\t\t\t\t{/* If this field is the one being sorted, render the direction of the sort. Otherwise return null. */}\n\t\t\t\t\t\t\t{this.state.sort.field === field.value ? (\n\t\t\t\t\t\t\t\tthis.state.sort.direction === \"ascending\" ? (\n\t\t\t\t\t\t\t\t\t<i className=\"sort-direction ff-arrow-up\"></i>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<i className=\"sort-direction ff-arrow-down\"></i>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t<div className=\"list-header-statistic-label\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/react/components/processMonitor/components/ProcessStatistics.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ProcessType, ViewModeEnums, ModeStatsType } from "../ProcessMonitorTypes";
+interface IProps {
+    mode: ViewModeEnums;
+    fields: ModeStatsType[];
+    stats: ProcessType["statistics"];
+}
+export default class ProcessStatistics extends React.Component<IProps> {
+    constructor(props: IProps);
+    render(): JSX.Element;
+}
+export {};

package/react/components/processMonitor/components/ProcessStatistics.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { Actions } from "../stores/ProcessMonitorStore";
+import { HIGH_CPU, HIGH_MEMORY_USAGE, MODERATE_CPU_USAGE, MODERATE_MEMORY_USAGE, TO_MB } from "../constants";
+import { bytesToSize, roundDecimalToPrecision } from "../helpers";
+/**
+ * Given a number, will return modifier classes that change the background. High usage === red. Moderate === orange.
+ */
+function getClassesForStat(number, statType) {
+    let classes = "statistic", high_comparison = HIGH_MEMORY_USAGE * TO_MB, moderate_comparison = MODERATE_MEMORY_USAGE * TO_MB;
+    if (typeof number === "undefined") {
+        return classes;
+    }
+    if (statType === "CPU") {
+        (high_comparison = HIGH_CPU), (moderate_comparison = MODERATE_CPU_USAGE);
+    }
+    if (number > high_comparison) {
+        classes = `${classes} high-usage`;
+    }
+    else if (number > moderate_comparison) {
+        classes = `${classes} moderate-usage`;
+    }
+    return classes;
+}
+/**
+ * Outputs something nice. 102423465243 outputs whatever that number is in KB/MB/GB.
+ * 0.35123 will output 0.35% for CPU.
+ */
+function prettyPrint(number, statType) {
+    if (typeof number === "undefined") {
+        return "";
+    }
+    if (statType === "CPU") {
+        //make it a percent.
+        return `${roundDecimalToPrecision(number, 2)}%`;
+    }
+    else if (statType !== "PID") {
+        return bytesToSize(number);
+    }
+    else {
+        return number;
+    }
+}
+export default class ProcessStatistics extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const { processId, webContents } = this.props.stats;
+        const items = Object.values(webContents !== null && webContents !== void 0 ? webContents : {});
+        // In Advanced mode we always display the process name because it includes the pid
+        const displayName = this.props.stats.name; //this.props.mode === ViewModeEnums.SIMPLE ? simpleName : this.props.stats.name;
+        //simple mode: CPU, memory
+        //Advanced mode: add Peak Memory.
+        return (React.createElement("div", { className: "process-row" },
+            React.createElement("div", { className: "process-name" }, displayName),
+            React.createElement("div", { className: "process-statistics" },
+                this.props.fields.map((field, i) => (React.createElement("div", { key: i, className: getClassesForStat(this.props.stats[field.value], field.label) }, prettyPrint(this.props.stats[field.value], field.label)))),
+                React.createElement("div", { className: "statistic process-actions" }, this.props.stats.type === "Tab" && processId ? (React.createElement("div", { className: " terminate fsbl-button-negative process-action", onClick: () => {
+                        Actions.terminateProcess(webContents);
+                    }, tabIndex: 0, role: "button", onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            Actions.terminateProcess(webContents);
+                        }
+                    } }, "Terminate")) : null))));
+    }
+}
+//# sourceMappingURL=ProcessStatistics.js.map

package/react/components/processMonitor/components/ProcessStatistics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessStatistics.js","sourceRoot":"","sources":["../../../../src/components/processMonitor/components/ProcessStatistics.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { Actions } from \"../stores/ProcessMonitorStore\";\nimport { HIGH_CPU, HIGH_MEMORY_USAGE, MODERATE_CPU_USAGE, MODERATE_MEMORY_USAGE, TO_MB } from \"../constants\";\nimport { bytesToSize, roundDecimalToPrecision } from \"../helpers\";\nimport { ProcessType, ViewModeEnums, ModeStatsType } from \"../ProcessMonitorTypes\";\n//Not used right now. Currently using alerts. This is for the future.\n\ninterface IProps {\n\tmode: ViewModeEnums;\n\tfields: ModeStatsType[];\n\tstats: ProcessType[\"statistics\"];\n}\n\n/**\n * Given a number, will return modifier classes that change the background. High usage === red. Moderate === orange.\n */\nfunction getClassesForStat(number: number | undefined, statType: string) {\n\tlet classes = \"statistic\",\n\t\thigh_comparison = HIGH_MEMORY_USAGE * TO_MB,\n\t\tmoderate_comparison = MODERATE_MEMORY_USAGE * TO_MB;\n\n\tif (typeof number === \"undefined\") {\n\t\treturn classes;\n\t}\n\n\tif (statType === \"CPU\") {\n\t\t(high_comparison = HIGH_CPU), (moderate_comparison = MODERATE_CPU_USAGE);\n\t}\n\tif (number > high_comparison) {\n\t\tclasses = `${classes} high-usage`;\n\t} else if (number > moderate_comparison) {\n\t\tclasses = `${classes} moderate-usage`;\n\t}\n\treturn classes;\n}\n\n/**\n * Outputs something nice. 102423465243 outputs whatever that number is in KB/MB/GB.\n * 0.35123 will output 0.35% for CPU.\n */\nfunction prettyPrint(number: number | undefined, statType: string) {\n\tif (typeof number === \"undefined\") {\n\t\treturn \"\";\n\t}\n\n\tif (statType === \"CPU\") {\n\t\t//make it a percent.\n\t\treturn `${roundDecimalToPrecision(number, 2)}%`;\n\t} else if (statType !== \"PID\") {\n\t\treturn bytesToSize(number);\n\t} else {\n\t\treturn number;\n\t}\n}\n\nexport default class ProcessStatistics extends React.Component<IProps> {\n\tconstructor(props: IProps) {\n\t\tsuper(props);\n\t}\n\n\trender() {\n\t\tconst { processId, webContents } = this.props.stats;\n\t\tconst items = Object.values(webContents ?? {});\n\n\t\t// In Advanced mode we always display the process name because it includes the pid\n\t\tconst displayName = this.props.stats.name; //this.props.mode === ViewModeEnums.SIMPLE ? simpleName : this.props.stats.name;\n\t\t//simple mode: CPU, memory\n\t\t//Advanced mode: add Peak Memory.\n\n\t\treturn (\n\t\t\t<div className=\"process-row\">\n\t\t\t\t<div className=\"process-name\">{displayName}</div>\n\t\t\t\t<div className=\"process-statistics\">\n\t\t\t\t\t{this.props.fields.map((field, i) => (\n\t\t\t\t\t\t<div key={i} className={getClassesForStat(this.props.stats[field.value], field.label)}>\n\t\t\t\t\t\t\t{prettyPrint(this.props.stats[field.value], field.label)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t<div className=\"statistic process-actions\">\n\t\t\t\t\t\t{this.props.stats.type === \"Tab\" && processId ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\" terminate fsbl-button-negative process-action\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tActions.terminateProcess(webContents);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\tonKeyDown={(e: React.KeyboardEvent) => {\n\t\t\t\t\t\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\t\t\t\t\t\tActions.terminateProcess(webContents);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tTerminate\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/react/components/processMonitor/constants.d.ts

@@ -0,0 +1,9 @@
+import { ProcessType, ModeStatsType } from "./ProcessMonitorTypes";
+export declare const SIMPLE_MODE_STATISTICS: ModeStatsType[];
+export declare const ADVANCED_MODE_STATISTICS: ModeStatsType[];
+export declare const HIGH_CPU = 10;
+export declare const MODERATE_CPU_USAGE = 5;
+export declare const MODERATE_MEMORY_USAGE = 250;
+export declare const HIGH_MEMORY_USAGE = 400;
+export declare const TO_MB = 1000000;
+export declare const EMPTY_TOTALS: ProcessType;

package/react/components/processMonitor/constants.js

@@ -0,0 +1,30 @@
+// Stats to be displayed in simple mode
+export const SIMPLE_MODE_STATISTICS = [
+    { label: "CPU", value: "cpuUsage" },
+    { label: "Memory", value: "workingSetSize" },
+];
+// Stats to be diesplayed in advanced mode
+export const ADVANCED_MODE_STATISTICS = [
+    { label: "CPU", value: "cpuUsage" },
+    { label: "Memory", value: "workingSetSize" },
+    { label: "Peak Memory", value: "peakWorkingSetSize" },
+    { label: "PID", value: "processId" },
+];
+// These are percentages
+export const HIGH_CPU = 10;
+export const MODERATE_CPU_USAGE = 5;
+// Usage in MB
+export const MODERATE_MEMORY_USAGE = 250;
+export const HIGH_MEMORY_USAGE = 400;
+// Constant to convert megabytes (250) to bytes (250,000,000). Conversion is approximate.
+export const TO_MB = 1000000;
+const emptyTotals = {
+    visible: false,
+    statistics: {},
+};
+// Just an object to hold the UI over until we get real information from the system.
+SIMPLE_MODE_STATISTICS.forEach((stat) => {
+    emptyTotals.statistics[stat.value] = 0;
+});
+export const EMPTY_TOTALS = emptyTotals;
+//# sourceMappingURL=constants.js.map

package/react/components/processMonitor/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/processMonitor/constants.ts"],"names":[],"mappings":"AAEA,uCAAuC;AACvC,MAAM,CAAC,MAAM,sBAAsB,GAAoB;IACtD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE;IACnC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE;CAC5C,CAAC;AAEF,0CAA0C;AAC1C,MAAM,CAAC,MAAM,wBAAwB,GAAoB;IACxD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE;IACnC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,EAAE;IAC5C,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,oBAAoB,EAAE;IACrD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE;CACpC,CAAC;AAEF,wBAAwB;AACxB,MAAM,CAAC,MAAM,QAAQ,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAEpC,cAAc;AACd,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC;AACzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAErC,yFAAyF;AACzF,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAC;AAE7B,MAAM,WAAW,GAAgB;IAChC,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,EAAE;CACd,CAAC;AACF,oFAAoF;AACpF,sBAAsB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;IACvC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACxC,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC","sourcesContent":["import { ProcessType, ModeStatsType } from \"./ProcessMonitorTypes\";\n\n// Stats to be displayed in simple mode\nexport const SIMPLE_MODE_STATISTICS: ModeStatsType[] = [\n\t{ label: \"CPU\", value: \"cpuUsage\" },\n\t{ label: \"Memory\", value: \"workingSetSize\" },\n];\n\n// Stats to be diesplayed in advanced mode\nexport const ADVANCED_MODE_STATISTICS: ModeStatsType[] = [\n\t{ label: \"CPU\", value: \"cpuUsage\" },\n\t{ label: \"Memory\", value: \"workingSetSize\" },\n\t{ label: \"Peak Memory\", value: \"peakWorkingSetSize\" },\n\t{ label: \"PID\", value: \"processId\" },\n];\n\n// These are percentages\nexport const HIGH_CPU = 10;\nexport const MODERATE_CPU_USAGE = 5;\n\n// Usage in MB\nexport const MODERATE_MEMORY_USAGE = 250;\nexport const HIGH_MEMORY_USAGE = 400;\n\n// Constant to convert megabytes (250) to bytes (250,000,000). Conversion is approximate.\nexport const TO_MB = 1000000;\n\nconst emptyTotals: ProcessType = {\n\tvisible: false,\n\tstatistics: {},\n};\n// Just an object to hold the UI over until we get real information from the system.\nSIMPLE_MODE_STATISTICS.forEach((stat) => {\n\temptyTotals.statistics[stat.value] = 0;\n});\n\nexport const EMPTY_TOTALS = emptyTotals;\n"]}

package/react/components/processMonitor/helpers.d.ts

@@ -0,0 +1,18 @@
+import { ProcessType } from "./ProcessMonitorTypes";
+export declare function toProperCase(str: string): string;
+/**
+ * Given a number, will return a nice string, 1,024 will return 1KB, 100 will return 100 Bytes, and so on.
+ *
+ * The result is displayed with 2 decimal points of precision.
+ */
+export declare function bytesToSize(bytes: number): string;
+/**
+ * Handler for Array.reduce. It takes the array of statistics and sums each value.
+ * This outputs an object that has total CPU and memory consumption.
+ */
+export declare const statReducer: (prev: ProcessType, curr: ProcessType) => ProcessType;
+/**
+ * Convenience function for rounding decimals to a given precision
+ * Note that "precision" here means "number of digits to the right of the decimal point"
+ */
+export declare const roundDecimalToPrecision: (number: number, precision: number) => number;

package/react/components/processMonitor/helpers.js

@@ -0,0 +1,56 @@
+import { SIMPLE_MODE_STATISTICS } from "./constants";
+// This Is Proper Case
+export function toProperCase(str) {
+    return (str
+        .replace(/([A-Z])/g, " $1")
+        // uppercase the first character
+        .replace(/^./, (char) => char.toUpperCase()));
+}
+/**
+ * Given a number, will return a nice string, 1,024 will return 1KB, 100 will return 100 Bytes, and so on.
+ *
+ * The result is displayed with 2 decimal points of precision.
+ */
+export function bytesToSize(bytes) {
+    if (bytes === 0)
+        return "0 Bytes";
+    // Size powers, in English
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+    // Determine the size power for the number of bytes
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    // Adjusted down to how many KB, MB, GB, etc...
+    const bytesByScale = bytes / Math.pow(1024, i);
+    // Return the size, rounded, with 2 decimal points of precision
+    return `${Math.round(bytesByScale * 100) / 100} ${sizes[i]}`;
+}
+/**
+ * Handler for Array.reduce. It takes the array of statistics and sums each value.
+ * This outputs an object that has total CPU and memory consumption.
+ */
+export const statReducer = (prev, curr) => {
+    const statistics = {};
+    SIMPLE_MODE_STATISTICS.forEach((stat) => {
+        var _a, _b;
+        if (typeof prev.statistics[stat.value] === "undefined" || typeof curr.statistics[stat.value] === "undefined") {
+            statistics[stat.value] = undefined;
+            return;
+        }
+        statistics[stat.value] = ((_a = prev.statistics[stat.value]) !== null && _a !== void 0 ? _a : 0) + ((_b = curr.statistics[stat.value]) !== null && _b !== void 0 ? _b : 0);
+    });
+    statistics.name = "Totals";
+    return {
+        visible: curr.visible,
+        statistics,
+    };
+};
+/**
+ * Convenience function for rounding decimals to a given precision
+ * Note that "precision" here means "number of digits to the right of the decimal point"
+ */
+export const roundDecimalToPrecision = (number, precision) => {
+    // Example: number = .12345, precision = 2
+    const shiftedNumber = number * Math.pow(10, precision); // example: 12.345
+    const roundedShiftedNumber = Math.round(shiftedNumber); // example: 12
+    return roundedShiftedNumber / Math.pow(10, precision); // example: .12
+};
+//# sourceMappingURL=helpers.js.map

package/react/components/processMonitor/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/processMonitor/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAGrD,sBAAsB;AACtB,MAAM,UAAU,YAAY,CAAC,GAAW;IACvC,OAAO,CACN,GAAG;SACD,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC;QAC3B,gCAAgC;SAC/B,OAAO,CAAC,IAAI,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CACrD,CAAC;AACH,CAAC;AACD;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,KAAa;IACxC,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,SAAS,CAAC;IAElC,0BAA0B;IAC1B,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAEhD,mDAAmD;IACnD,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IAEvD,+CAA+C;IAC/C,MAAM,YAAY,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAE/C,+DAA+D;IAC/D,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;AAC9D,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAiB,EAAE,IAAiB,EAAe,EAAE;IAChF,MAAM,UAAU,GAAwC,EAAE,CAAC;IAC3D,sBAAsB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;;QACvC,IAAI,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,WAAW,IAAI,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,WAAW,EAAE;YAC7G,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;YACnC,OAAO;SACP;QAED,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,mCAAI,CAAC,CAAC,GAAG,CAAC,MAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,mCAAI,CAAC,CAAC,CAAC;IAClG,CAAC,CAAC,CAAC;IAEH,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC;IAE3B,OAAO;QACN,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,UAAU;KACV,CAAC;AACH,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,MAAc,EAAE,SAAiB,EAAU,EAAE;IACpF,0CAA0C;IAC1C,MAAM,aAAa,GAAG,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,kBAAkB;IAC1E,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc;IACtE,OAAO,oBAAoB,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe;AACvE,CAAC,CAAC","sourcesContent":["import { SIMPLE_MODE_STATISTICS } from \"./constants\";\nimport { ProcessStatisticsType, ProcessType } from \"./ProcessMonitorTypes\";\n\n// This Is Proper Case\nexport function toProperCase(str: string) {\n\treturn (\n\t\tstr\n\t\t\t.replace(/([A-Z])/g, \" $1\")\n\t\t\t// uppercase the first character\n\t\t\t.replace(/^./, (char: string) => char.toUpperCase())\n\t);\n}\n/**\n * Given a number, will return a nice string, 1,024 will return 1KB, 100 will return 100 Bytes, and so on.\n *\n * The result is displayed with 2 decimal points of precision.\n */\nexport function bytesToSize(bytes: number) {\n\tif (bytes === 0) return \"0 Bytes\";\n\n\t// Size powers, in English\n\tconst sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\n\n\t// Determine the size power for the number of bytes\n\tconst i = Math.floor(Math.log(bytes) / Math.log(1024));\n\n\t// Adjusted down to how many KB, MB, GB, etc...\n\tconst bytesByScale = bytes / Math.pow(1024, i);\n\n\t// Return the size, rounded, with 2 decimal points of precision\n\treturn `${Math.round(bytesByScale * 100) / 100} ${sizes[i]}`;\n}\n\n/**\n * Handler for Array.reduce. It takes the array of statistics and sums each value.\n * This outputs an object that has total CPU and memory consumption.\n */\nexport const statReducer = (prev: ProcessType, curr: ProcessType): ProcessType => {\n\tconst statistics: ProcessStatisticsType[\"statistics\"] = {};\n\tSIMPLE_MODE_STATISTICS.forEach((stat) => {\n\t\tif (typeof prev.statistics[stat.value] === \"undefined\" || typeof curr.statistics[stat.value] === \"undefined\") {\n\t\t\tstatistics[stat.value] = undefined;\n\t\t\treturn;\n\t\t}\n\n\t\tstatistics[stat.value] = (prev.statistics[stat.value] ?? 0) + (curr.statistics[stat.value] ?? 0);\n\t});\n\n\tstatistics.name = \"Totals\";\n\n\treturn {\n\t\tvisible: curr.visible,\n\t\tstatistics,\n\t};\n};\n\n/**\n * Convenience function for rounding decimals to a given precision\n * Note that \"precision\" here means \"number of digits to the right of the decimal point\"\n */\nexport const roundDecimalToPrecision = (number: number, precision: number): number => {\n\t// Example: number = .12345, precision = 2\n\tconst shiftedNumber = number * Math.pow(10, precision); // example: 12.345\n\tconst roundedShiftedNumber = Math.round(shiftedNumber); // example: 12\n\treturn roundedShiftedNumber / Math.pow(10, precision); // example: .12\n};\n"]}

package/react/components/processMonitor/helpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/processMonitor/helpers.spec.js

@@ -0,0 +1,48 @@
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import { bytesToSize, roundDecimalToPrecision } from "./helpers";
+describe("Process Monitor helpers", () => {
+    it("bytesToSize", () => {
+        [
+            [0, "0 Bytes"],
+            [1, "1 Bytes"],
+            [1023, "1023 Bytes"],
+            [1024, "1 KB"],
+            [1025, "1 KB"],
+            [1024 * 1.4, "1.4 KB"],
+            [1024 * 1.41, "1.41 KB"],
+            [1024 * 1.412, "1.41 KB"],
+            [1024 * 1.415, "1.42 KB"],
+            [1024 * 1.5, "1.5 KB"],
+            [1024 * 1.999, "2 KB"],
+            [1024 * 2, "2 KB"],
+            [1024 * 1000, "1000 KB"],
+            [Math.pow(1024, 2), "1 MB"],
+            [Math.pow(1024, 3), "1 GB"],
+            [Math.pow(1024, 4), "1 TB"],
+        ].forEach(([input, output]) => {
+            expect(bytesToSize(input)).to.be.equal(output);
+        });
+    });
+    it("roundDecimalToPrecision", () => {
+        [
+            [1000, 2, 1000],
+            [1, 2, 1],
+            [0, 1, 0],
+            [1, 0, 1],
+            [0.5, 0, 1],
+            [0.5, 1, 0.5],
+            [0.5, 2, 0.5],
+            [0.12345, 1, 0.1],
+            [0.12345, 2, 0.12],
+            [0.12345, 3, 0.123],
+            [0.12345, 4, 0.1235],
+            [0.12345, 5, 0.12345],
+            [0.12345, 6, 0.12345],
+            [1000.12345, 2, 1000.12],
+        ].forEach(([inputNumber, inputPrecision, output]) => {
+            expect(roundDecimalToPrecision(inputNumber, inputPrecision)).to.be.equal(output);
+        });
+    });
+});
+//# sourceMappingURL=helpers.spec.js.map

package/react/components/processMonitor/helpers.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.spec.js","sourceRoot":"","sources":["../../../src/components/processMonitor/helpers.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC;AAEjE,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACxC,EAAE,CAAC,aAAa,EAAE,GAAG,EAAE;QACtB;YACC,CAAC,CAAC,EAAE,SAAS,CAAC;YACd,CAAC,CAAC,EAAE,SAAS,CAAC;YACd,CAAC,IAAI,EAAE,YAAY,CAAC;YACpB,CAAC,IAAI,EAAE,MAAM,CAAC;YACd,CAAC,IAAI,EAAE,MAAM,CAAC;YACd,CAAC,IAAI,GAAG,GAAG,EAAE,QAAQ,CAAC;YACtB,CAAC,IAAI,GAAG,IAAI,EAAE,SAAS,CAAC;YACxB,CAAC,IAAI,GAAG,KAAK,EAAE,SAAS,CAAC;YACzB,CAAC,IAAI,GAAG,KAAK,EAAE,SAAS,CAAC;YACzB,CAAC,IAAI,GAAG,GAAG,EAAE,QAAQ,CAAC;YACtB,CAAC,IAAI,GAAG,KAAK,EAAE,MAAM,CAAC;YACtB,CAAC,IAAI,GAAG,CAAC,EAAE,MAAM,CAAC;YAClB,CAAC,IAAI,GAAG,IAAI,EAAE,SAAS,CAAC;YACxB,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC;YAC3B,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC;YAC3B,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC;SAC3B,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE;YAC7B,MAAM,CAAC,WAAW,CAAC,KAAe,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QAClC;YACC,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC;YACf,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACT,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACT,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;YACT,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;YACX,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC;YACb,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC;YACb,CAAC,OAAO,EAAE,CAAC,EAAE,GAAG,CAAC;YACjB,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC;YAClB,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC;YACnB,CAAC,OAAO,EAAE,CAAC,EAAE,MAAM,CAAC;YACpB,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC;YACrB,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC;YACrB,CAAC,UAAU,EAAE,CAAC,EAAE,OAAO,CAAC;SACxB,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,EAAE,cAAc,EAAE,MAAM,CAAC,EAAE,EAAE;YACnD,MAAM,CAAC,uBAAuB,CAAC,WAAqB,EAAE,cAAwB,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACtG,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { describe, it } from \"mocha\";\nimport { expect } from \"chai\";\n\nimport { bytesToSize, roundDecimalToPrecision } from \"./helpers\";\n\ndescribe(\"Process Monitor helpers\", () => {\n\tit(\"bytesToSize\", () => {\n\t\t[\n\t\t\t[0, \"0 Bytes\"],\n\t\t\t[1, \"1 Bytes\"],\n\t\t\t[1023, \"1023 Bytes\"],\n\t\t\t[1024, \"1 KB\"],\n\t\t\t[1025, \"1 KB\"],\n\t\t\t[1024 * 1.4, \"1.4 KB\"],\n\t\t\t[1024 * 1.41, \"1.41 KB\"],\n\t\t\t[1024 * 1.412, \"1.41 KB\"],\n\t\t\t[1024 * 1.415, \"1.42 KB\"],\n\t\t\t[1024 * 1.5, \"1.5 KB\"],\n\t\t\t[1024 * 1.999, \"2 KB\"],\n\t\t\t[1024 * 2, \"2 KB\"],\n\t\t\t[1024 * 1000, \"1000 KB\"],\n\t\t\t[Math.pow(1024, 2), \"1 MB\"],\n\t\t\t[Math.pow(1024, 3), \"1 GB\"],\n\t\t\t[Math.pow(1024, 4), \"1 TB\"],\n\t\t].forEach(([input, output]) => {\n\t\t\texpect(bytesToSize(input as number)).to.be.equal(output);\n\t\t});\n\t});\n\n\tit(\"roundDecimalToPrecision\", () => {\n\t\t[\n\t\t\t[1000, 2, 1000],\n\t\t\t[1, 2, 1],\n\t\t\t[0, 1, 0],\n\t\t\t[1, 0, 1],\n\t\t\t[0.5, 0, 1],\n\t\t\t[0.5, 1, 0.5],\n\t\t\t[0.5, 2, 0.5],\n\t\t\t[0.12345, 1, 0.1],\n\t\t\t[0.12345, 2, 0.12],\n\t\t\t[0.12345, 3, 0.123],\n\t\t\t[0.12345, 4, 0.1235],\n\t\t\t[0.12345, 5, 0.12345],\n\t\t\t[0.12345, 6, 0.12345],\n\t\t\t[1000.12345, 2, 1000.12],\n\t\t].forEach(([inputNumber, inputPrecision, output]) => {\n\t\t\texpect(roundDecimalToPrecision(inputNumber as number, inputPrecision as number)).to.be.equal(output);\n\t\t});\n\t});\n});\n"]}

package/react/components/processMonitor/index.d.ts

@@ -0,0 +1 @@
+export { ProcessMonitor } from "./ProcessMonitor";

package/react/components/processMonitor/index.js

@@ -0,0 +1,2 @@
+export { ProcessMonitor } from "./ProcessMonitor";
+//# sourceMappingURL=index.js.map

package/react/components/processMonitor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/processMonitor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { ProcessMonitor } from \"./ProcessMonitor\";\n"]}

package/react/components/processMonitor/stores/ProcessMonitorStore.d.ts

@@ -0,0 +1,62 @@
+import { ChildWindowType, ProcessType } from "../ProcessMonitorTypes";
+import StoreModel from "@finsemble/finsemble-api/types/clients/StoreModel";
+import { StandardCallback, StandardError } from "@finsemble/finsemble-api/types/types";
+import { ProcessInfo } from "@finsemble/finsemble-api/types/FEA";
+declare let ProcessMonitorStore: StoreModel | undefined;
+declare type VoidCallback = () => void;
+export declare let storeWrapper: StoreModel | null | undefined;
+declare const Actions: {
+    /**
+     * Creates the local store, then gets the first cut at stats for the process list.
+     */
+    initialize: (cb: VoidCallback) => void;
+    /**
+     * Gets the process list, pulls the statistics out, and renders the app. Also sets up an interval where we'll retrieve more stats from the system.
+     */
+    getInitialData: () => void;
+    /**
+     * Sets the sort field; if it's the same field as we had previously, we flip the sort direction.
+     */
+    setSort: (field: string) => void;
+    /**
+     * Extracts data from the process list (via the createDataModel function), and then sets the processList value on the store. This causes the UI to re-render.
+     */
+    extractData: (processes: ProcessInfo[]) => void;
+    /**
+     * Converts the system.getProcessList response into something that's easily render-able.
+     */
+    createDataModel: (processes: ProcessInfo[], cb: (procs: ProcessType[]) => void) => void;
+    /**
+     * Sorting function. Handles ascending and descending.
+     */
+    sortProcesses: (procs: ProcessType[]) => ProcessType[];
+    /**
+     * Toggles advanced/simple mode
+     */
+    toggleViewMode: () => void;
+    /**
+     * Gets the current "flashing" state - whether the process monitor is currently flashing a window
+     */
+    getFlashingState: (cb?: StandardCallback<StandardError, any> | undefined) => void;
+    /**
+     * Gets the current "flashing" state for the process monitor
+     */
+    setFlashingState: (value: boolean, cb?: StandardCallback<StandardError, any> | undefined) => void;
+    /**
+     * Make the window flash a couple of times so that the user can identify it.
+     */
+    identifyWindow: (winID: ChildWindowType) => void;
+    /**
+     * Terminates a process group. Containing windows for browser views will be closed.
+     */
+    terminateProcess: (webContents: ProcessType["statistics"]["webContents"]) => void;
+    /**
+     * This function exists to make the UI feel snappy. May take a second or so for the window to close properly and for the change to flow to system.getProcessList. To make that lag go away, we immediately render the change.
+     */
+    removeWindowLocally: (windowName: string) => void;
+    /**
+     * Try to close the window. If that fails, try to force close the window. If that fails, ask if they'd like to terminate the parent process.
+     */
+    closeWindow: (windowName: string, force?: boolean) => void;
+};
+export { ProcessMonitorStore as Store, Actions };