npm - @finsemble/finsemble-ui - Versions diffs - 7.0.0 → 7.1.0-beta.2 - Mend

@finsemble/finsemble-ui 7.0.0 → 7.1.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (787) hide show

package/react/components/notifications/components/views/ListView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListView.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/views/ListView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useState, useEffect } from \"react\";\nimport { format, differenceInMilliseconds, parseISO, addSeconds } from \"date-fns\";\n\n// types\nimport { NotificationListViewProps } from \"../../types\";\n\n// Context\nimport { NotificationsContext } from \"../../notificationsContext\";\n\n// Components\nimport IconButton from \"../shared/IconButton\";\nimport NoNotifications from \"../NoNotifications\";\nimport OverflowMenu, { OverflowMenuActions, renderOverflowMenuAction } from \"../shared/OverflowMenu\";\nimport { CheckButton } from \"../shared/CheckButton\";\n\n// Utils\nimport {\n\tgetActiveFilter,\n\tgetMostRecentAction,\n\tisNewNotification,\n\tisReNotification,\n\tsearchNotifications,\n} from \"../../utils\";\n\nimport { NotificationCardHeaderLogo } from \"../shared/notificationCard/NotificationCardHeaderLogo\";\n\n// Constants\nimport { SelectionMode } from \"../../constants\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ErrorBoundary } from \"../../../common/ErrorBoundary\";\n\ntype INotification = services.notification.types.INotification;\ntype IPerformedAction = services.notification.types.IPerformedAction;\n\nconst ListHeaderComponent = () => (\n\t<div className=\"list-header__container\">\n\t\t<div className=\"list-header_cell\">Received</div>\n\t\t<div className=\"list-header_cell\">App</div>\n\t\t<div className=\"list-header_cell\">Content</div>\n\t\t<div className=\"list-header_cell\">{\"\"}</div>\n\t</div>\n);\n\nexport type NotificationListRowPropType = {\n\tnotification: INotification;\n\tnewNotificationHaloPeriodSeconds: number;\n};\n\nexport const NotificationListRowShell: React.FunctionComponent<NotificationListRowPropType> = ({\n\tnotification,\n\tnewNotificationHaloPeriodSeconds,\n\tchildren,\n}: any) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst { setSelectedNotification, muteFilters, selectionMode } = notificationsContext;\n\tconst [overflowMenuOpen, setOverflowMenuOpen] = useState(false);\n\tconst toggleOverflowMenu = () => {\n\t\tsetOverflowMenuOpen(!overflowMenuOpen);\n\t};\n\n\tconst [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\tconst [wokeFromSnooze, setWokeFromSnooze] = useState(\n\t\tisReNotification(notification, newNotificationHaloPeriodSeconds)\n\t);\n\tconst [isMuteFilterApplied, setIsMuteFilterApplied] = useState(\n\t\tmuteFilters\n\t\t\t? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)\n\t\t\t: false\n\t);\n\n\t// effect needed as the newNotificationHaloPeriodSeconds is fecthed asynchronously in the parent component\n\t// and sometimes at the first render, this value is still 0\n\tuseEffect(() => {\n\t\tsetIsNew(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\t}, [newNotificationHaloPeriodSeconds]);\n\n\tuseEffect(() => {\n\t\tlet isNewTimerId: any;\n\t\tif (isNew) {\n\t\t\tif (notification.isRead) {\n\t\t\t\tsetIsNew(false);\n\t\t\t\tclearTimeout(isNewTimerId);\n\t\t\t} else {\n\t\t\t\tisNewTimerId = setTimeout(() => {\n\t\t\t\t\tsetIsNew(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(notification.issuedAt), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isNewTimerId);\n\t\t};\n\t}, [isNew, notification]);\n\n\tuseEffect(() => {\n\t\tlet isRenotificationTimerId: any;\n\t\tif (isReNotification(notification, newNotificationHaloPeriodSeconds)) {\n\t\t\tconst mostRecentAction: IPerformedAction \| null = getMostRecentAction(notification);\n\t\t\tif (mostRecentAction) {\n\t\t\t\tconst { datePerformed } = mostRecentAction;\n\t\t\t\tsetWokeFromSnooze(true);\n\t\t\t\tisRenotificationTimerId = setTimeout(() => {\n\t\t\t\t\tsetWokeFromSnooze(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(datePerformed), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t} else {\n\t\t\tsetWokeFromSnooze(false);\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t};\n\t}, [newNotificationHaloPeriodSeconds, notification]);\n\n\tconst overFlowActions = Object.assign({}, OverflowMenuActions);\n\toverFlowActions.DETAILS.action = (detailNotification: INotification) => {\n\t\tsetSelectedNotification(detailNotification);\n\t};\n\n\tdelete overFlowActions.DISMISS;\n\n\tuseEffect(() => {\n\t\tfunction listenMuteStateChanged(error: any, response: any) {\n\t\t\tif (error) {\n\t\t\t\tconsole.error(\"FinsembleNotificationsMuteStateChannel: \", error);\n\t\t\t} else {\n\t\t\t\tconst { data } = response;\n\t\t\t\tif (notification.source === data.source && notification.type === data.type) {\n\t\t\t\t\tsetIsMuteFilterApplied(data.isMuted);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\t};\n\t}, []);\n\n\tconst menuActions = Object.values(overFlowActions).map((value) =>\n\t\trenderOverflowMenuAction(notification, value, isMuteFilterApplied)\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`list-row__container notification-item ${notification.isRead ? \"is-read\" : \"\"} ${\n\t\t\t\tisNew \|\| wokeFromSnooze ? \"new\" : \"\"\n\t\t\t}\n\t\t\t\t${notification.cssClassName ? notification.cssClassName : \"\"}`}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\t<>\n\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{children}\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"list-row__cell\">{format(Date.parse(notification.issuedAt), \"dd-MM-yyyy HH:mm\")}</div>\n\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<NotificationCardHeaderLogo headerLogo={notification.headerLogo} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"list-row__cell\">{`${notification.title} - ${notification.details}`}</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t<span>\n\t\t\t\t\t<IconButton iconName=\"ff-dots-vert\" tooltip=\"Options\" clickHandler={toggleOverflowMenu}>\n\t\t\t\t\t\t{overflowMenuOpen ? <OverflowMenu closeSelf={setOverflowMenuOpen}>{menuActions}</OverflowMenu> : null}\n\t\t\t\t\t</IconButton>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nconst ListView: React.FunctionComponent<NotificationListViewProps> = ({\n\tnotificationHeaderRow,\n\tnotificationListRow,\n\tnotifications,\n}) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\t// The context will be used to filter the notifications\n\tconst { drawerControlProps, searchString, filteredNotifications, setFilteredNotifications } = notificationsContext;\n\n\tconst activeFilter = getActiveFilter(drawerControlProps);\n\n\tconst [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);\n\n\tconst NotificationHeaderRow = notificationHeaderRow \|\| ListHeaderComponent;\n\tconst NotificationListRow = notificationListRow \|\| NotificationListRowShell;\n\n\t// Sets the current default preference\n\tuseEffect(() => {\n\t\tasync function getNotificationsPreferences() {\n\t\t\treturn await FSBL.Clients.NotificationClient.getPreferences();\n\t\t}\n\n\t\tgetNotificationsPreferences().then((preferences: any) => {\n\t\t\tsetNotificationHaloPeriodSeconds(preferences.newNotificationHaloPeriodSeconds);\n\t\t});\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (searchString === \"\") {\n\t\t\tsetFilteredNotifications(notifications);\n\t\t} else {\n\t\t\tsetFilteredNotifications(searchNotifications(notifications, searchString));\n\t\t}\n\t}, [searchString, notifications]);\n\n\tlet controlFilteredNotifications = activeFilter ? activeFilter.run?.(filteredNotifications) : [];\n\tcontrolFilteredNotifications.sort(\n\t\t(a: INotification, b: INotification) => Date.parse(b.issuedAt) - Date.parse(a.issuedAt)\n\t);\n\n\tcontrolFilteredNotifications = controlFilteredNotifications.filter((notification: INotification) =>\n\t\tactiveFilter.action === \"snoozed\" ? notification.isSnoozed : !notification.isSnoozed\n\t);\n\n\treturn controlFilteredNotifications.length === 0 ? (\n\t\t<NoNotifications />\n\t) : (\n\t\t<>\n\t\t\t<NotificationHeaderRow />\n\t\t\t{controlFilteredNotifications.map((notification: INotification, index: number) => {\n\t\t\t\tconst key = `${index}_${notification.id ? notification.id : notification.issuedAt}`;\n\t\t\t\treturn (\n\t\t\t\t\t<ErrorBoundary key={key}>\n\t\t\t\t\t\t<NotificationListRow\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tnotification={notification}\n\t\t\t\t\t\t\tnewNotificationHaloPeriodSeconds={newNotificationHaloPeriodSeconds}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t);\n\t\t\t})}\n\t\t</>\n\t);\n};\n\nexport default ListView;\n"]}
1	+ {"version":3,"file":"ListView.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/views/ListView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useState, useEffect } from \"react\";\nimport { format, differenceInMilliseconds, parseISO, addSeconds } from \"date-fns\";\n\n// types\nimport { NotificationListViewProps } from \"../../types\";\n\n// Context\nimport { NotificationsContext } from \"../../notificationsContext\";\n\n// Components\nimport IconButton from \"../shared/IconButton\";\nimport NoNotifications from \"../NoNotifications\";\nimport OverflowMenu, { OverflowMenuActions, renderOverflowMenuAction } from \"../shared/OverflowMenu\";\nimport { CheckButton } from \"../shared/CheckButton\";\n\n// Utils\nimport {\n\tgetActiveFilter,\n\tgetMostRecentAction,\n\tisNewNotification,\n\tisReNotification,\n\tsearchNotifications,\n} from \"../../utils\";\n\nimport { NotificationCardHeaderLogo } from \"../shared/notificationCard/NotificationCardHeaderLogo\";\n\n// Constants\nimport { SelectionMode } from \"../../constants\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ErrorBoundary } from \"../../../common/ErrorBoundary\";\n\ntype INotification = services.notification.types.INotification;\ntype IPerformedAction = services.notification.types.IPerformedAction;\n\nconst ListHeaderComponent = () => (\n\t<div className=\"list-header__container\">\n\t\t<div className=\"list-header_cell\">Received</div>\n\t\t<div className=\"list-header_cell\">App</div>\n\t\t<div className=\"list-header_cell\">Content</div>\n\t\t<div className=\"list-header_cell\">{\"\"}</div>\n\t</div>\n);\n\nexport type NotificationListRowPropType = {\n\tnotification: INotification;\n\tnewNotificationHaloPeriodSeconds: number;\n};\n\nexport const NotificationListRowShell: React.FunctionComponent<NotificationListRowPropType> = ({\n\tnotification,\n\tnewNotificationHaloPeriodSeconds,\n\tchildren,\n}: any) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst { setSelectedNotification, muteFilters, selectionMode } = notificationsContext;\n\tconst [overflowMenuOpen, setOverflowMenuOpen] = useState(false);\n\tconst toggleOverflowMenu = () => {\n\t\tsetOverflowMenuOpen(!overflowMenuOpen);\n\t};\n\n\tconst [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\tconst [wokeFromSnooze, setWokeFromSnooze] = useState(\n\t\tisReNotification(notification, newNotificationHaloPeriodSeconds)\n\t);\n\tconst [isMuteFilterApplied, setIsMuteFilterApplied] = useState(\n\t\tmuteFilters\n\t\t\t? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)\n\t\t\t: false\n\t);\n\n\t// effect needed as the newNotificationHaloPeriodSeconds is fecthed asynchronously in the parent component\n\t// and sometimes at the first render, this value is still 0\n\tuseEffect(() => {\n\t\tsetIsNew(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\t}, [newNotificationHaloPeriodSeconds]);\n\n\tuseEffect(() => {\n\t\tlet isNewTimerId: any;\n\t\tif (isNew) {\n\t\t\tif (notification.isRead) {\n\t\t\t\tsetIsNew(false);\n\t\t\t\tclearTimeout(isNewTimerId);\n\t\t\t} else {\n\t\t\t\tisNewTimerId = setTimeout(() => {\n\t\t\t\t\tsetIsNew(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(notification.issuedAt), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isNewTimerId);\n\t\t};\n\t}, [isNew, notification]);\n\n\tuseEffect(() => {\n\t\tlet isRenotificationTimerId: any;\n\t\tif (isReNotification(notification, newNotificationHaloPeriodSeconds)) {\n\t\t\tconst mostRecentAction: IPerformedAction \| null = getMostRecentAction(notification);\n\t\t\tif (mostRecentAction) {\n\t\t\t\tconst { datePerformed } = mostRecentAction;\n\t\t\t\tsetWokeFromSnooze(true);\n\t\t\t\tisRenotificationTimerId = setTimeout(() => {\n\t\t\t\t\tsetWokeFromSnooze(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(datePerformed), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t} else {\n\t\t\tsetWokeFromSnooze(false);\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t};\n\t}, [newNotificationHaloPeriodSeconds, notification]);\n\n\tconst overFlowActions = Object.assign({}, OverflowMenuActions);\n\toverFlowActions.DETAILS.action = (detailNotification: INotification) => {\n\t\tsetSelectedNotification(detailNotification);\n\t};\n\n\tdelete overFlowActions.DISMISS;\n\n\tuseEffect(() => {\n\t\tfunction listenMuteStateChanged(error: any, response: any) {\n\t\t\tif (error) {\n\t\t\t\tconsole.error(\"FinsembleNotificationsMuteStateChannel: \", error);\n\t\t\t} else {\n\t\t\t\tconst { data } = response;\n\t\t\t\tif (notification.source === data.source && notification.type === data.type) {\n\t\t\t\t\tsetIsMuteFilterApplied(data.isMuted);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\t};\n\t}, []);\n\n\tconst menuActions = Object.values(overFlowActions).map((value) =>\n\t\trenderOverflowMenuAction(notification, value, isMuteFilterApplied)\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`list-row__container notification-item ${notification.isRead ? \"is-read\" : \"\"} ${\n\t\t\t\tisNew \|\| wokeFromSnooze ? \"new\" : \"\"\n\t\t\t}\n\t\t\t\t${notification.cssClassName ? notification.cssClassName : \"\"}`}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\t<>\n\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{children}\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"list-row__cell\">{format(Date.parse(notification.issuedAt), \"dd-MM-yyyy HH:mm\")}</div>\n\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<NotificationCardHeaderLogo headerLogo={notification.headerLogo} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"list-row__cell\">{`${notification.title} - ${notification.details}`}</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t<span>\n\t\t\t\t\t<IconButton iconName=\"ff-dots-vert\" tooltip=\"Options\" clickHandler={toggleOverflowMenu}>\n\t\t\t\t\t\t{overflowMenuOpen ? <OverflowMenu closeSelf={setOverflowMenuOpen}>{menuActions}</OverflowMenu> : null}\n\t\t\t\t\t</IconButton>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nconst ListView: React.FunctionComponent<NotificationListViewProps> = ({\n\tnotificationHeaderRow,\n\tnotificationListRow,\n\tnotifications,\n}) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\t// The context will be used to filter the notifications\n\tconst { drawerControlProps, searchString, filteredNotifications, setFilteredNotifications } = notificationsContext;\n\n\tconst activeFilter = getActiveFilter(drawerControlProps);\n\n\tconst [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);\n\n\tconst NotificationHeaderRow = notificationHeaderRow \|\| ListHeaderComponent;\n\tconst NotificationListRow = notificationListRow \|\| NotificationListRowShell;\n\n\t// Sets the current default preference\n\tuseEffect(() => {\n\t\tasync function getNotificationsPreferences() {\n\t\t\treturn await FSBL.Clients.NotificationClient.getPreferences();\n\t\t}\n\n\t\tgetNotificationsPreferences().then((preferences: any) => {\n\t\t\tsetNotificationHaloPeriodSeconds(preferences.newNotificationHaloPeriodSeconds);\n\t\t});\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (searchString === \"\") {\n\t\t\tsetFilteredNotifications(notifications);\n\t\t} else {\n\t\t\tsetFilteredNotifications(searchNotifications(notifications, searchString));\n\t\t}\n\t}, [searchString, notifications]);\n\n\tlet controlFilteredNotifications = activeFilter ? activeFilter.run?.(filteredNotifications) : [];\n\tcontrolFilteredNotifications.sort(\n\t\t(a: INotification, b: INotification) => Date.parse(b.issuedAt) - Date.parse(a.issuedAt)\n\t);\n\n\tcontrolFilteredNotifications = controlFilteredNotifications.filter((notification: INotification) =>\n\t\tactiveFilter.action === \"snoozed\" ? notification.isSnoozed : !notification.isSnoozed\n\t);\n\n\treturn controlFilteredNotifications.length === 0 ? (\n\t\t<NoNotifications />\n\t) : (\n\t\t<>\n\t\t\t<NotificationHeaderRow />\n\t\t\t{controlFilteredNotifications.map((notification: INotification, index: number) => {\n\t\t\t\tconst key = `${index}_${notification.id ? notification.id : notification.issuedAt}`;\n\t\t\t\treturn (\n\t\t\t\t\t<ErrorBoundary key={key}>\n\t\t\t\t\t\t<NotificationListRow\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tnotification={notification}\n\t\t\t\t\t\t\tnewNotificationHaloPeriodSeconds={newNotificationHaloPeriodSeconds}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t);\n\t\t\t})}\n\t\t</>\n\t);\n};\n\nexport default ListView;\n"]}

package/react/components/notifications/notificationsContext.d.ts CHANGED Viewed

@@ -1,3 +1,7 @@
 /// <reference types="react" />
 import { NotificationsContextType } from "./types";
+/**
+ * We initialize our context with an empty object.
+ * The NotificationsCenter will properly initialize our context at runtime (during the first render).
+ */
 export declare const NotificationsContext: import("react").Context<NotificationsContextType>;

package/react/components/notifications/notificationsContext.js CHANGED Viewed

@@ -1,3 +1,7 @@
 import { createContext } from "react";
+/**
+ * We initialize our context with an empty object.
+ * The NotificationsCenter will properly initialize our context at runtime (during the first render).
+ */
 export const NotificationsContext = createContext({});
 //# sourceMappingURL=notificationsContext.js.map

package/react/components/notifications/notificationsContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"notificationsContext.js","sourceRoot":"","sources":["../../../src/components/notifications/notificationsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;~~AAOtC~~,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA2B,EAA8B,CAAC,CAAC","sourcesContent":["import { createContext } from \"react\";\nimport { NotificationsContextType } from \"./types\";\n\n/*\n We initialize our context with an empty object.\n * The NotificationsCenter will properly initialize our context at runtime (during the first render).\n */\nexport const NotificationsContext = createContext<NotificationsContextType>({} as NotificationsContextType);\n"]}
1	+ {"version":3,"file":"notificationsContext.js","sourceRoot":"","sources":["../../../src/components/notifications/notificationsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA2B,EAA8B,CAAC,CAAC","sourcesContent":["import { createContext } from \"react\";\nimport { NotificationsContextType } from \"./types\";\n\n/*\n We initialize our context with an empty object.\n * The NotificationsCenter will properly initialize our context at runtime (during the first render).\n */\nexport const NotificationsContext = createContext<NotificationsContextType>({} as NotificationsContextType);\n"]}

package/react/components/notifications/types.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
+/**
+ * Notification types
+ */
 import React from "react";
 import { ViewMode, SelectionMode } from "./constants";
 import { services } from "@finsemble/finsemble-api";

package/react/components/notifications/utils.d.ts CHANGED Viewed

@@ -3,6 +3,10 @@ import { services } from "@finsemble/finsemble-api";
 declare type INotification = services.notification.types.INotification;
 declare type IMuteFilter = services.notification.types.IMuteFilter;
 declare type IPerformedAction = services.notification.types.IPerformedAction;
+/**
+ * Simplify this function with optional chaining
+return notification?.actionsHistory?.sort((a: IPerformedAction, b: IPerformedAction) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed))?.[0]
+ */
 export declare const getMostRecentAction: (notification: INotification) => IPerformedAction | null;
 export declare const isNewNotification: (notification: INotification, newNotificationHaloPeriodSeconds: number) => boolean;
 export declare const isReNotification: (notification: INotification, newNotificationHaloPeriodSeconds: number) => boolean;

package/react/components/notifications/utils.js CHANGED Viewed

@@ -1,4 +1,8 @@
 import { parseISO, differenceInSeconds } from "date-fns";
+/**
+ * Simplify this function with optional chaining
+return notification?.actionsHistory?.sort((a: IPerformedAction, b: IPerformedAction) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed))?.[0]
+ */
 export const getMostRecentAction = (notification) => {
     if (!notification || !notification.actionsHistory)
         return null;

package/react/components/notifications/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/notifications/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;~~AAczD~~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","sourcesContent":["import { parseISO, differenceInSeconds } from \"date-fns\";\n\n// Types\nimport { Control, NotificationCenterControlsProps } from \"./types\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype INotification = services.notification.types.INotification;\ntype IMuteFilter = services.notification.types.IMuteFilter;\ntype IPerformedAction = services.notification.types.IPerformedAction;\n\n/*\n Simplify this function with optional chaining\nreturn notification?.actionsHistory?.sort((a: IPerformedAction, b: IPerformedAction) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed))?.[0]\n */\nexport const getMostRecentAction = (notification: INotification): IPerformedAction \| null => {\n\tif (!notification \|\| !notification.actionsHistory) return null;\n\n\tlet actionHistoryArray = [\n\t\t...notification.actionsHistory.sort(\n\t\t\t(a: IPerformedAction, b: IPerformedAction) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed)\n\t\t),\n\t];\n\n\tif (actionHistoryArray.length > 0) {\n\t\treturn actionHistoryArray[0];\n\t} else {\n\t\treturn null;\n\t}\n};\n\nexport const isNewNotification = (notification: INotification, newNotificationHaloPeriodSeconds: number) => {\n\tconst mostRecentAction = getMostRecentAction(notification);\n\n\tif (\n\t\t(mostRecentAction && mostRecentAction.type === \"FINSEMBLE:READ\") \|\|\n\t\tnotification.isRead \|\|\n\t\t(notification.actionsHistory && notification.actionsHistory.length > 1)\n\t) {\n\t\treturn false;\n\t}\n\treturn differenceInSeconds(Date.now(), parseISO(notification.issuedAt)) < newNotificationHaloPeriodSeconds;\n};\n\nexport const isReNotification = (notification: INotification, newNotificationHaloPeriodSeconds: number) => {\n\tconst mostRecentAction = getMostRecentAction(notification);\n\n\tif (!mostRecentAction \|\| mostRecentAction.type !== \"FINSEMBLE:WAKE\") return false;\n\n\treturn differenceInSeconds(Date.now(), parseISO(mostRecentAction.datePerformed)) < newNotificationHaloPeriodSeconds;\n};\n\nexport const getActiveFilter = (drawerControlProps: NotificationCenterControlsProps): Control =>\n\tdrawerControlProps.controls.filter((control: Control) => control.action === drawerControlProps.active)[0];\n\nconst search = (\n\tnotification: INotification,\n\tsearchField: \"title\" \| \"details\" \| \"source\" \| null,\n\tsearchString: string\n): boolean => {\n\tif (searchField) {\n\t\treturn (notification[searchField] as string).toLowerCase().includes(searchString.toLowerCase());\n\t} else {\n\t\treturn (\n\t\t\t(notification[\"title\"] as string).toLowerCase().includes(searchString.toLowerCase()) \|\|\n\t\t\t(notification[\"details\"] as string).toLowerCase().includes(searchString.toLowerCase()) \|\|\n\t\t\t(notification[\"source\"] as string).toLowerCase().includes(searchString.toLowerCase())\n\t\t);\n\t}\n\treturn false;\n};\n\nexport const searchNotifications = (notifications: INotification[], searchTerm: string): INotification[] =>\n\t[...notifications].filter((notification) => {\n\t\tconst searchTermSplit = searchTerm.split(\":\");\n\t\tif (searchTermSplit.length === 1) {\n\t\t\treturn search(notification, null, searchTermSplit[0].trim());\n\t\t} else {\n\t\t\tconst field = searchTermSplit[0].trim();\n\t\t\tif ([\"title\", \"details\", \"source\"].includes(field) && notification.hasOwnProperty(field)) {\n\t\t\t\treturn search(notification, field as \"title\" \| \"details\" \| \"source\" \| null, searchTermSplit[1].trim());\n\t\t\t} else {\n\t\t\t\treturn search(notification, null, searchTermSplit[1].trim());\n\t\t\t}\n\t\t}\n\t});\n\nexport const getMuteFilterFromNotification = (notification: INotification): IMuteFilter => {\n\tconst muteFilter: IMuteFilter = {};\n\tif (notification.source) {\n\t\tmuteFilter.source = notification.source;\n\t}\n\tif (notification.type) {\n\t\tmuteFilter.type = notification.type;\n\t}\n\treturn muteFilter;\n};\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/notifications/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { parseISO, differenceInSeconds } from \"date-fns\";\n\n// Types\nimport { Control, NotificationCenterControlsProps } from \"./types\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype INotification = services.notification.types.INotification;\ntype IMuteFilter = services.notification.types.IMuteFilter;\ntype IPerformedAction = services.notification.types.IPerformedAction;\n\n/*\n Simplify this function with optional chaining\nreturn notification?.actionsHistory?.sort((a: IPerformedAction, b: IPerformedAction) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed))?.[0]\n */\nexport const getMostRecentAction = (notification: INotification): IPerformedAction \| null => {\n\tif (!notification \|\| !notification.actionsHistory) return null;\n\n\tlet actionHistoryArray = [\n\t\t...notification.actionsHistory.sort(\n\t\t\t(a: IPerformedAction, b: IPerformedAction) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed)\n\t\t),\n\t];\n\n\tif (actionHistoryArray.length > 0) {\n\t\treturn actionHistoryArray[0];\n\t} else {\n\t\treturn null;\n\t}\n};\n\nexport const isNewNotification = (notification: INotification, newNotificationHaloPeriodSeconds: number) => {\n\tconst mostRecentAction = getMostRecentAction(notification);\n\n\tif (\n\t\t(mostRecentAction && mostRecentAction.type === \"FINSEMBLE:READ\") \|\|\n\t\tnotification.isRead \|\|\n\t\t(notification.actionsHistory && notification.actionsHistory.length > 1)\n\t) {\n\t\treturn false;\n\t}\n\treturn differenceInSeconds(Date.now(), parseISO(notification.issuedAt)) < newNotificationHaloPeriodSeconds;\n};\n\nexport const isReNotification = (notification: INotification, newNotificationHaloPeriodSeconds: number) => {\n\tconst mostRecentAction = getMostRecentAction(notification);\n\n\tif (!mostRecentAction \|\| mostRecentAction.type !== \"FINSEMBLE:WAKE\") return false;\n\n\treturn differenceInSeconds(Date.now(), parseISO(mostRecentAction.datePerformed)) < newNotificationHaloPeriodSeconds;\n};\n\nexport const getActiveFilter = (drawerControlProps: NotificationCenterControlsProps): Control =>\n\tdrawerControlProps.controls.filter((control: Control) => control.action === drawerControlProps.active)[0];\n\nconst search = (\n\tnotification: INotification,\n\tsearchField: \"title\" \| \"details\" \| \"source\" \| null,\n\tsearchString: string\n): boolean => {\n\tif (searchField) {\n\t\treturn (notification[searchField] as string).toLowerCase().includes(searchString.toLowerCase());\n\t} else {\n\t\treturn (\n\t\t\t(notification[\"title\"] as string).toLowerCase().includes(searchString.toLowerCase()) \|\|\n\t\t\t(notification[\"details\"] as string).toLowerCase().includes(searchString.toLowerCase()) \|\|\n\t\t\t(notification[\"source\"] as string).toLowerCase().includes(searchString.toLowerCase())\n\t\t);\n\t}\n\treturn false;\n};\n\nexport const searchNotifications = (notifications: INotification[], searchTerm: string): INotification[] =>\n\t[...notifications].filter((notification) => {\n\t\tconst searchTermSplit = searchTerm.split(\":\");\n\t\tif (searchTermSplit.length === 1) {\n\t\t\treturn search(notification, null, searchTermSplit[0].trim());\n\t\t} else {\n\t\t\tconst field = searchTermSplit[0].trim();\n\t\t\tif ([\"title\", \"details\", \"source\"].includes(field) && notification.hasOwnProperty(field)) {\n\t\t\t\treturn search(notification, field as \"title\" \| \"details\" \| \"source\" \| null, searchTermSplit[1].trim());\n\t\t\t} else {\n\t\t\t\treturn search(notification, null, searchTermSplit[1].trim());\n\t\t\t}\n\t\t}\n\t});\n\nexport const getMuteFilterFromNotification = (notification: INotification): IMuteFilter => {\n\tconst muteFilter: IMuteFilter = {};\n\tif (notification.source) {\n\t\tmuteFilter.source = notification.source;\n\t}\n\tif (notification.type) {\n\t\tmuteFilter.type = notification.type;\n\t}\n\treturn muteFilter;\n};\n"]}

package/react/components/processMonitor/ProcessMonitor.d.ts CHANGED Viewed

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import "../../assets/css/processMonitor.css";
+/**
+ * The window that shows performance data for applications running in Finsemble, such as CPU and memory usage.
+ */
 export declare const ProcessMonitor: () => JSX.Element;

package/react/components/processMonitor/ProcessMonitor.js CHANGED Viewed

@@ -3,11 +3,13 @@ import { Store, Actions } from "./stores/ProcessMonitorStore";
 import ListHeader from "./components/ListHeader";
 import ProcessStatistics from "./components/ProcessStatistics";
 import ChildWindow from "./components/ChildWindow";
-import { EMPTY_TOTALS, SIMPLE_MODE_STATISTICS, ADVANCED_MODE_STATISTICS } from "./constants.js";
-import { statReducer, roundDecimalToPrecision, bytesToSize } from "./helpers.js";
+import { EMPTY_TOTALS, SIMPLE_MODE_STATISTICS, ADVANCED_MODE_STATISTICS } from "./constants";
+import { statReducer, roundDecimalToPrecision, bytesToSize } from "./helpers";
 import "../../assets/css/processMonitor.css";
 import { ViewModeEnums } from "./ProcessMonitorTypes";
 import FloatingFocus from "@q42/floating-focus-a11y";
+// The package FloatingFocus injects a focus indicator that moves around the page, but only for
+// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.
 new FloatingFocus();
 function isAffinityGroupProcess(proc) {
     return Object.values(proc.statistics.webContents || {}).some((obj) => /Affinity Group/.test(obj.windowName));
@@ -25,12 +27,18 @@ class ProcessMonitorBase extends React.Component {
         this.onProcessListChanged = this.onProcessListChanged.bind(this);
         this.onViewModeChanged = this.onViewModeChanged.bind(this);
     }
+    /**
+     * Handler for when we go from simple to advanced mode, or the opposite.
+     */
     onViewModeChanged(err, response) {
         let { value } = response;
         this.setState({
             viewMode: value,
         });
     }
+    /**
+     * Invoked at minimum, once per second. This listener handles updates that we receive from the system.
+     */
     onProcessListChanged(err, response) {
         let { value } = response;
         this.setState({
@@ -50,6 +58,10 @@ class ProcessMonitorBase extends React.Component {
     render() {
         if (!Store)
             return null;
+        // View modes are:
+        // * Simple - Top-level views, showing stats: CPU, Memory
+        // * Advanced - Expanded processes, showing stats: CPU, Memory, Peak Memory, PID
+        // statReducer is an array.reduce function that will sum all of the CPU/memory usage across the app.
         const totals = this.state.processList.length ? this.state.processList.reduce(statReducer) : EMPTY_TOTALS;
         return (React.createElement("div", null,
             React.createElement("div", { className: "process-list-wrapper" },
@@ -82,5 +94,8 @@ class ProcessMonitorBase extends React.Component {
                         } }, this.state.viewMode === ViewModeEnums.ADVANCED ? "Simple" : "Advanced")))));
     }
 }
+/**
+ * The window that shows performance data for applications running in Finsemble, such as CPU and memory usage.
+ */
 export const ProcessMonitor = () => React.createElement(ProcessMonitorBase, null);
 //# sourceMappingURL=ProcessMonitor.js.map

package/react/components/processMonitor/ProcessMonitor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProcessMonitor.js","sourceRoot":"","sources":["../../../src/components/processMonitor/ProcessMonitor.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { Store, Actions } from \"./stores/ProcessMonitorStore\";\nimport ListHeader from \"./components/ListHeader\";\nimport ProcessStatistics from \"./components/ProcessStatistics\";\nimport ChildWindow from \"./components/ChildWindow\";\nimport { EMPTY_TOTALS, SIMPLE_MODE_STATISTICS, ADVANCED_MODE_STATISTICS } from \"./constants.js\";\nimport { statReducer, roundDecimalToPrecision, bytesToSize } from \"./helpers.js\";\nimport \"../../assets/css/processMonitor.css\";\nimport { ProcessType, ViewModeEnums, ChildWindowType } from \"./ProcessMonitorTypes\";\nimport { StandardError } from \"@finsemble/finsemble-api/types/types\";\n\nimport FloatingFocus from \"@q42/floating-focus-a11y\";\n// The package FloatingFocus injects a focus indicator that moves around the page, but only for\n// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.\nnew FloatingFocus();\n\ninterface IProps {}\ninterface IState {\n\tprocessList: ProcessType[];\n\tviewMode: ViewModeEnums;\n}\n\nfunction isAffinityGroupProcess(proc: ProcessType) {\n\treturn Object.values(proc.statistics.webContents \|\| {}).some((obj) => /Affinity Group/.test(obj.windowName));\n}\nclass ProcessMonitorBase extends React.Component<IProps, IState> {\n\tconstructor(props: {}) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tprocessList: [],\n\t\t\tviewMode: ViewModeEnums.SIMPLE,\n\t\t};\n\t\tthis.bindCorrectContext();\n\t}\n\n\tbindCorrectContext() {\n\t\tthis.onProcessListChanged = this.onProcessListChanged.bind(this);\n\t\tthis.onViewModeChanged = this.onViewModeChanged.bind(this);\n\t}\n\n\t/*\n\t Handler for when we go from simple to advanced mode, or the opposite.\n\t /\n\tonViewModeChanged(err: StandardError, response: { value: ViewModeEnums }) {\n\t\tlet { value } = response;\n\t\tthis.setState({\n\t\t\tviewMode: value,\n\t\t});\n\t}\n\n\t/\n\t Invoked at minimum, once per second. This listener handles updates that we receive from the system.\n\t /\n\tonProcessListChanged(err: StandardError, response: { value: ProcessType[] }) {\n\t\tlet { value } = response;\n\t\tthis.setState({\n\t\t\tprocessList: value,\n\t\t});\n\t}\n\n\tcomponentDidMount() {\n\t\tActions.initialize(() => {\n\t\t\tStore?.addListener({ field: \"processList\" }, this.onProcessListChanged);\n\t\t\tStore?.addListener({ field: \"viewMode\" }, this.onViewModeChanged);\n\t\t});\n\t}\n\n\tcomponentWillUnmount() {\n\t\tStore?.removeListener({ field: \"processList\" }, this.onProcessListChanged);\n\t\tStore?.removeListener({ field: \"viewMode\" }, this.onViewModeChanged);\n\t}\n\n\trender() {\n\t\tif (!Store) return null;\n\t\t// View modes are:\n\t\t// Simple - Top-level views, showing stats: CPU, Memory\n\t\t// * Advanced - Expanded processes, showing stats: CPU, Memory, Peak Memory, PID\n\n\t\t// statReducer is an array.reduce function that will sum all of the CPU/memory usage across the app.\n\t\tconst totals = this.state.processList.length ? this.state.processList.reduce(statReducer) : EMPTY_TOTALS;\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<div className=\"process-list-wrapper\">\n\t\t\t\t\t<ListHeader\n\t\t\t\t\t\tfields={this.state.viewMode === ViewModeEnums.SIMPLE ? SIMPLE_MODE_STATISTICS : ADVANCED_MODE_STATISTICS}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"process-list\">\n\t\t\t\t\t\t{/* Filter will remove the hidden processes. Afterwards, map will render the remaining processes in turn. /}\n\t\t\t\t\t\t{this.state.processList\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t(proc) =>\n\t\t\t\t\t\t\t\t\tproc.visible && (!isAffinityGroupProcess(proc) \|\| this.state.viewMode === ViewModeEnums.ADVANCED)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((proc, i) => (\n\t\t\t\t\t\t\t\t<div key={i} className=\"process\">\n\t\t\t\t\t\t\t\t\t{/ Process statistics is the meat of this component. It's the statistics and the child windows. /}\n\t\t\t\t\t\t\t\t\t<ProcessStatistics\n\t\t\t\t\t\t\t\t\t\tmode={this.state.viewMode}\n\t\t\t\t\t\t\t\t\t\tfields={\n\t\t\t\t\t\t\t\t\t\t\tthis.state.viewMode === ViewModeEnums.SIMPLE ? SIMPLE_MODE_STATISTICS : ADVANCED_MODE_STATISTICS\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tstats={proc.statistics}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{proc.childWindows?.map((cw: ChildWindowType, j: number) => (\n\t\t\t\t\t\t\t\t\t\t<ChildWindow key={j} viewMode={this.state.viewMode} cw={cw} />\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"bottom-section\">\n\t\t\t\t\t<div className=\"summary-statistics-wrapper\">\n\t\t\t\t\t\t<div className=\"summary-statistics-header\">Finsemble Total Usage</div>\n\t\t\t\t\t\t<div className=\"summary-statistics\">\n\t\t\t\t\t\t\t{typeof totals.statistics.cpuUsage !== \"undefined\" && (\n\t\t\t\t\t\t\t\t<div className=\"summary-statistic\">\n\t\t\t\t\t\t\t\t\t<div className=\"summary-statistic-label\">CPU</div>\n\t\t\t\t\t\t\t\t\t<div className=\"summary-statistic-number\">{`${roundDecimalToPrecision(\n\t\t\t\t\t\t\t\t\t\ttotals.statistics.cpuUsage,\n\t\t\t\t\t\t\t\t\t\t2\n\t\t\t\t\t\t\t\t\t)}%`}</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{typeof totals.statistics.workingSetSize !== \"undefined\" && (\n\t\t\t\t\t\t\t\t<div className=\"summary-statistic\">\n\t\t\t\t\t\t\t\t\t<div className=\"summary-statistic-label\">Memory</div>\n\t\t\t\t\t\t\t\t\t<div className=\"summary-statistic-number\">{bytesToSize(totals.statistics.workingSetSize)}</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"advanced-button-wrapper\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"fsbl-button advanced-button\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tActions.toggleViewMode();\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.toggleViewMode();\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{this.state.viewMode === ViewModeEnums.ADVANCED ? \"Simple\" : \"Advanced\"}\n\t\t\t\t\t\t</div>\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\n/\n The window that shows performance data for applications running in Finsemble, such as CPU and memory usage.\n */\nexport const ProcessMonitor = () => <ProcessMonitorBase />;\n"]}
1	+ {"version":3,"file":"ProcessMonitor.js","sourceRoot":"","sources":["../../../src/components/processMonitor/ProcessMonitor.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { Store, Actions } from \"./stores/ProcessMonitorStore\";\nimport ListHeader from \"./components/ListHeader\";\nimport ProcessStatistics from \"./components/ProcessStatistics\";\nimport ChildWindow from \"./components/ChildWindow\";\nimport { EMPTY_TOTALS, SIMPLE_MODE_STATISTICS, ADVANCED_MODE_STATISTICS } from \"./constants\";\nimport { statReducer, roundDecimalToPrecision, bytesToSize } from \"./helpers\";\nimport \"../../assets/css/processMonitor.css\";\nimport { ProcessType, ViewModeEnums, ChildWindowType } from \"./ProcessMonitorTypes\";\nimport { StandardError } from \"@finsemble/finsemble-api/types/types\";\n\nimport FloatingFocus from \"@q42/floating-focus-a11y\";\n// The package FloatingFocus injects a focus indicator that moves around the page, but only for\n// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.\nnew FloatingFocus();\n\ninterface IProps {}\ninterface IState {\n\tprocessList: ProcessType[];\n\tviewMode: ViewModeEnums;\n}\n\nfunction isAffinityGroupProcess(proc: ProcessType) {\n\treturn Object.values(proc.statistics.webContents \|\| {}).some((obj) => /Affinity Group/.test(obj.windowName));\n}\nclass ProcessMonitorBase extends React.Component<IProps, IState> {\n\tconstructor(props: {}) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tprocessList: [],\n\t\t\tviewMode: ViewModeEnums.SIMPLE,\n\t\t};\n\t\tthis.bindCorrectContext();\n\t}\n\n\tbindCorrectContext() {\n\t\tthis.onProcessListChanged = this.onProcessListChanged.bind(this);\n\t\tthis.onViewModeChanged = this.onViewModeChanged.bind(this);\n\t}\n\n\t/*\n\t Handler for when we go from simple to advanced mode, or the opposite.\n\t /\n\tonViewModeChanged(err: StandardError, response: { value: ViewModeEnums }) {\n\t\tlet { value } = response;\n\t\tthis.setState({\n\t\t\tviewMode: value,\n\t\t});\n\t}\n\n\t/\n\t Invoked at minimum, once per second. This listener handles updates that we receive from the system.\n\t /\n\tonProcessListChanged(err: StandardError, response: { value: ProcessType[] }) {\n\t\tlet { value } = response;\n\t\tthis.setState({\n\t\t\tprocessList: value,\n\t\t});\n\t}\n\n\tcomponentDidMount() {\n\t\tActions.initialize(() => {\n\t\t\tStore?.addListener({ field: \"processList\" }, this.onProcessListChanged);\n\t\t\tStore?.addListener({ field: \"viewMode\" }, this.onViewModeChanged);\n\t\t});\n\t}\n\n\tcomponentWillUnmount() {\n\t\tStore?.removeListener({ field: \"processList\" }, this.onProcessListChanged);\n\t\tStore?.removeListener({ field: \"viewMode\" }, this.onViewModeChanged);\n\t}\n\n\trender() {\n\t\tif (!Store) return null;\n\t\t// View modes are:\n\t\t// Simple - Top-level views, showing stats: CPU, Memory\n\t\t// * Advanced - Expanded processes, showing stats: CPU, Memory, Peak Memory, PID\n\n\t\t// statReducer is an array.reduce function that will sum all of the CPU/memory usage across the app.\n\t\tconst totals = this.state.processList.length ? this.state.processList.reduce(statReducer) : EMPTY_TOTALS;\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<div className=\"process-list-wrapper\">\n\t\t\t\t\t<ListHeader\n\t\t\t\t\t\tfields={this.state.viewMode === ViewModeEnums.SIMPLE ? SIMPLE_MODE_STATISTICS : ADVANCED_MODE_STATISTICS}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"process-list\">\n\t\t\t\t\t\t{/* Filter will remove the hidden processes. Afterwards, map will render the remaining processes in turn. /}\n\t\t\t\t\t\t{this.state.processList\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t(proc) =>\n\t\t\t\t\t\t\t\t\tproc.visible && (!isAffinityGroupProcess(proc) \|\| this.state.viewMode === ViewModeEnums.ADVANCED)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((proc, i) => (\n\t\t\t\t\t\t\t\t<div key={i} className=\"process\">\n\t\t\t\t\t\t\t\t\t{/ Process statistics is the meat of this component. It's the statistics and the child windows. /}\n\t\t\t\t\t\t\t\t\t<ProcessStatistics\n\t\t\t\t\t\t\t\t\t\tmode={this.state.viewMode}\n\t\t\t\t\t\t\t\t\t\tfields={\n\t\t\t\t\t\t\t\t\t\t\tthis.state.viewMode === ViewModeEnums.SIMPLE ? SIMPLE_MODE_STATISTICS : ADVANCED_MODE_STATISTICS\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tstats={proc.statistics}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{proc.childWindows?.map((cw: ChildWindowType, j: number) => (\n\t\t\t\t\t\t\t\t\t\t<ChildWindow key={j} viewMode={this.state.viewMode} cw={cw} />\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"bottom-section\">\n\t\t\t\t\t<div className=\"summary-statistics-wrapper\">\n\t\t\t\t\t\t<div className=\"summary-statistics-header\">Finsemble Total Usage</div>\n\t\t\t\t\t\t<div className=\"summary-statistics\">\n\t\t\t\t\t\t\t{typeof totals.statistics.cpuUsage !== \"undefined\" && (\n\t\t\t\t\t\t\t\t<div className=\"summary-statistic\">\n\t\t\t\t\t\t\t\t\t<div className=\"summary-statistic-label\">CPU</div>\n\t\t\t\t\t\t\t\t\t<div className=\"summary-statistic-number\">{`${roundDecimalToPrecision(\n\t\t\t\t\t\t\t\t\t\ttotals.statistics.cpuUsage,\n\t\t\t\t\t\t\t\t\t\t2\n\t\t\t\t\t\t\t\t\t)}%`}</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{typeof totals.statistics.workingSetSize !== \"undefined\" && (\n\t\t\t\t\t\t\t\t<div className=\"summary-statistic\">\n\t\t\t\t\t\t\t\t\t<div className=\"summary-statistic-label\">Memory</div>\n\t\t\t\t\t\t\t\t\t<div className=\"summary-statistic-number\">{bytesToSize(totals.statistics.workingSetSize)}</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"advanced-button-wrapper\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"fsbl-button advanced-button\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tActions.toggleViewMode();\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.toggleViewMode();\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{this.state.viewMode === ViewModeEnums.ADVANCED ? \"Simple\" : \"Advanced\"}\n\t\t\t\t\t\t</div>\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\n/\n The window that shows performance data for applications running in Finsemble, such as CPU and memory usage.\n */\nexport const ProcessMonitor = () => <ProcessMonitorBase />;\n"]}

package/react/components/processMonitor/components/ChildWindow.d.ts CHANGED Viewed

@@ -4,6 +4,9 @@ interface IProps {
     cw: ChildWindowType;
     viewMode: ViewModeEnums;
 }
+/**
+ * This file is the react component for an individual window beneath a process. It allows the user to close the window.
+ */
 export default class ChildWindow extends React.Component<IProps> {
     constructor(props: IProps);
     render(): JSX.Element;

package/react/components/processMonitor/components/ChildWindow.js CHANGED Viewed

@@ -1,18 +1,23 @@
 import React from "react";
 import { ViewModeEnums } from "../ProcessMonitorTypes";
 import { Actions } from "../stores/ProcessMonitorStore";
+/**
+ * This file is the react component for an individual window beneath a process. It allows the user to close the window.
+ */
 export default class ChildWindow extends React.Component {
     constructor(props) {
         super(props);
     }
     render() {
         const { cw, viewMode } = this.props;
+        //If we're in simple mode, onClick does nothing. In advanced mode, we'll identify the window by making it flash.
         const simpleClickHandler = () => { };
         const advancedClickHandler = () => {
             Actions.getFlashingState((err, flashState) => {
                 if (err) {
                     console.error("Error getting current flashing state of window.", err);
                 }
+                // Only begin flashing if not already started
                 if (!flashState) {
                     Actions.identifyWindow(cw);
                 }

package/react/components/processMonitor/components/ChildWindow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChildWindow.js","sourceRoot":"","sources":["../../../../src/components/processMonitor/components/ChildWindow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAmB,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;~~AAUxD~~,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAiB;IAC/D,YAAY,KAAa;QACxB,KAAK,CAAC,KAAK,CAAC,CAAC;IACd,CAAC;IAED,MAAM;QACL,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;~~QAGpC~~,MAAM,kBAAkB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QACpC,MAAM,oBAAoB,GAAG,GAAG,EAAE;YACjC,OAAO,CAAC,gBAAgB,CAAC,CAAC,GAAkB,EAAE,UAAmB,EAAE,EAAE;gBACpE,IAAI,GAAG,EAAE;oBACR,OAAO,CAAC,KAAK,CAAC,iDAAiD,EAAE,GAAG,CAAC,CAAC;iBACtE;~~gBAGD~~,IAAI,CAAC,UAAU,EAAE;oBAChB,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;iBAC3B;YACF,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,QAAQ,KAAK,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,oBAAoB,CAAC;QAErG,MAAM,kBAAkB,GAAG,gBAAgB,QAAQ,EAAE,CAAC;QACtD,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;QAC1B,OAAO,CACN,6BAAK,SAAS,EAAE,kBAAkB;YACjC,6BAAK,SAAS,EAAC,sBAAsB,IACnC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,KAAK,QAAQ,IAAI,CACnC,2BACC,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAE,GAAG,EAAE;oBACb,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;gBACjC,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,WAAW,CAAC,UAAU,CAAC,CAAC;qBAChC;gBACF,CAAC,GACG,CACL,CACI;YACN,6BAAK,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,cAAc,IACxD,EAAE,CAAC,eAAe,CACd,CACD,CACN,CAAC;IACH,CAAC;CACD","sourcesContent":["import React from \"react\";\nimport { StandardError } from \"@finsemble/finsemble-api/types/types\";\nimport { ChildWindowType, ViewModeEnums } from \"../ProcessMonitorTypes\";\nimport { Actions } from \"../stores/ProcessMonitorStore\";\n\ninterface IProps {\n\tcw: ChildWindowType;\n\tviewMode: ViewModeEnums;\n}\n\n/*\n This file is the react component for an individual window beneath a process. It allows the user to close the window.\n */\nexport default class ChildWindow extends React.Component<IProps> {\n\tconstructor(props: IProps) {\n\t\tsuper(props);\n\t}\n\n\trender() {\n\t\tconst { cw, viewMode } = this.props;\n\n\t\t//If we're in simple mode, onClick does nothing. In advanced mode, we'll identify the window by making it flash.\n\t\tconst simpleClickHandler = () => {};\n\t\tconst advancedClickHandler = () => {\n\t\t\tActions.getFlashingState((err: StandardError, flashState: boolean) => {\n\t\t\t\tif (err) {\n\t\t\t\t\tconsole.error(\"Error getting current flashing state of window.\", err);\n\t\t\t\t}\n\n\t\t\t\t// Only begin flashing if not already started\n\t\t\t\tif (!flashState) {\n\t\t\t\t\tActions.identifyWindow(cw);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tconst cwClickHandler = viewMode === ViewModeEnums.SIMPLE ? simpleClickHandler : advancedClickHandler;\n\n\t\tconst childWindowClasses = `child-window ${viewMode}`;\n\t\tconst { windowName } = cw;\n\t\treturn (\n\t\t\t<div className={childWindowClasses}>\n\t\t\t\t<div className=\"child-window-actions\">\n\t\t\t\t\t{this.props.cw.type === \"window\" && (\n\t\t\t\t\t\t<i\n\t\t\t\t\t\t\tclassName=\"close-window ff-close\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tActions.closeWindow(windowName);\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.closeWindow(windowName);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t></i>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"child-window-name\" onClick={cwClickHandler}>\n\t\t\t\t\t{cw.webContentsName}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"file":"ChildWindow.js","sourceRoot":"","sources":["../../../../src/components/processMonitor/components/ChildWindow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAmB,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAOxD;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAiB;IAC/D,YAAY,KAAa;QACxB,KAAK,CAAC,KAAK,CAAC,CAAC;IACd,CAAC;IAED,MAAM;QACL,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEpC,gHAAgH;QAChH,MAAM,kBAAkB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QACpC,MAAM,oBAAoB,GAAG,GAAG,EAAE;YACjC,OAAO,CAAC,gBAAgB,CAAC,CAAC,GAAkB,EAAE,UAAmB,EAAE,EAAE;gBACpE,IAAI,GAAG,EAAE;oBACR,OAAO,CAAC,KAAK,CAAC,iDAAiD,EAAE,GAAG,CAAC,CAAC;iBACtE;gBAED,6CAA6C;gBAC7C,IAAI,CAAC,UAAU,EAAE;oBAChB,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;iBAC3B;YACF,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,QAAQ,KAAK,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,oBAAoB,CAAC;QAErG,MAAM,kBAAkB,GAAG,gBAAgB,QAAQ,EAAE,CAAC;QACtD,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;QAC1B,OAAO,CACN,6BAAK,SAAS,EAAE,kBAAkB;YACjC,6BAAK,SAAS,EAAC,sBAAsB,IACnC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,KAAK,QAAQ,IAAI,CACnC,2BACC,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAE,GAAG,EAAE;oBACb,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;gBACjC,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,WAAW,CAAC,UAAU,CAAC,CAAC;qBAChC;gBACF,CAAC,GACG,CACL,CACI;YACN,6BAAK,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,cAAc,IACxD,EAAE,CAAC,eAAe,CACd,CACD,CACN,CAAC;IACH,CAAC;CACD","sourcesContent":["import React from \"react\";\nimport { StandardError } from \"@finsemble/finsemble-api/types/types\";\nimport { ChildWindowType, ViewModeEnums } from \"../ProcessMonitorTypes\";\nimport { Actions } from \"../stores/ProcessMonitorStore\";\n\ninterface IProps {\n\tcw: ChildWindowType;\n\tviewMode: ViewModeEnums;\n}\n\n/*\n This file is the react component for an individual window beneath a process. It allows the user to close the window.\n */\nexport default class ChildWindow extends React.Component<IProps> {\n\tconstructor(props: IProps) {\n\t\tsuper(props);\n\t}\n\n\trender() {\n\t\tconst { cw, viewMode } = this.props;\n\n\t\t//If we're in simple mode, onClick does nothing. In advanced mode, we'll identify the window by making it flash.\n\t\tconst simpleClickHandler = () => {};\n\t\tconst advancedClickHandler = () => {\n\t\t\tActions.getFlashingState((err: StandardError, flashState: boolean) => {\n\t\t\t\tif (err) {\n\t\t\t\t\tconsole.error(\"Error getting current flashing state of window.\", err);\n\t\t\t\t}\n\n\t\t\t\t// Only begin flashing if not already started\n\t\t\t\tif (!flashState) {\n\t\t\t\t\tActions.identifyWindow(cw);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tconst cwClickHandler = viewMode === ViewModeEnums.SIMPLE ? simpleClickHandler : advancedClickHandler;\n\n\t\tconst childWindowClasses = `child-window ${viewMode}`;\n\t\tconst { windowName } = cw;\n\t\treturn (\n\t\t\t<div className={childWindowClasses}>\n\t\t\t\t<div className=\"child-window-actions\">\n\t\t\t\t\t{this.props.cw.type === \"window\" && (\n\t\t\t\t\t\t<i\n\t\t\t\t\t\t\tclassName=\"close-window ff-close\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tActions.closeWindow(windowName);\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.closeWindow(windowName);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t></i>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"child-window-name\" onClick={cwClickHandler}>\n\t\t\t\t\t{cw.webContentsName}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/react/components/processMonitor/components/ListHeader.d.ts CHANGED Viewed

@@ -7,6 +7,11 @@ interface IProps {
 interface IState {
     sort: SortObjectType;
 }
+/**
+ * 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<IProps, IState> {
     constructor(props: IProps);
     onSortChanged(err: StandardError, response: {

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

@@ -1,5 +1,10 @@
 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);
@@ -8,6 +13,7 @@ export default class ListHeader extends React.Component {
         };
         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({
@@ -21,6 +27,7 @@ export default class ListHeader extends React.Component {
         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");

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

	@@ -1 +1 @@
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;~~AAiB~~/D,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;~~IAGD~~,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;~~QAEL~~,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"]}
1	+ {"version":3,"file":"ListHeader.js","sourceRoot":"","sources":["../../../../src/components/processMonitor/components/ListHeader.tsx"],"names":[],"mappings":"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","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.js CHANGED Viewed

@@ -2,6 +2,9 @@ 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") {
@@ -18,11 +21,16 @@ function getClassesForStat(number, statType) {
     }
     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") {
@@ -39,7 +47,10 @@ export default class ProcessStatistics extends React.Component {
     render() {
         const { processId, webContents } = this.props.stats;
         const items = Object.values(webContents !== null && webContents !== void 0 ? webContents : {});
-        const displayName = this.props.stats.name;
+        // 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" },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProcessStatistics.js","sourceRoot":"","sources":["../../../../src/components/processMonitor/components/ProcessStatistics.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC7G,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;~~AAalE~~,SAAS,iBAAiB,CAAC,MAA0B,EAAE,QAAgB;IACtE,IAAI,OAAO,GAAG,WAAW,EACxB,eAAe,GAAG,iBAAiB,GAAG,KAAK,EAC3C,mBAAmB,GAAG,qBAAqB,GAAG,KAAK,CAAC;IAErD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QAClC,OAAO,OAAO,CAAC;KACf;IAED,IAAI,QAAQ,KAAK,KAAK,EAAE;QACvB,CAAC,eAAe,GAAG,QAAQ,CAAC,EAAE,CAAC,mBAAmB,GAAG,kBAAkB,CAAC,CAAC;KACzE;IACD,IAAI,MAAM,GAAG,eAAe,EAAE;QAC7B,OAAO,GAAG,GAAG,OAAO,aAAa,CAAC;KAClC;SAAM,IAAI,MAAM,GAAG,mBAAmB,EAAE;QACxC,OAAO,GAAG,GAAG,OAAO,iBAAiB,CAAC;KACtC;IACD,OAAO,OAAO,CAAC;AAChB,CAAC;~~AAMD~~,SAAS,WAAW,CAAC,MAA0B,EAAE,QAAgB;IAChE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QAClC,OAAO,EAAE,CAAC;KACV;IAED,IAAI,QAAQ,KAAK,KAAK,EAAE;~~QAEvB~~,OAAO,GAAG,uBAAuB,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC;KAChD;SAAM,IAAI,QAAQ,KAAK,KAAK,EAAE;QAC9B,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;KAC3B;SAAM;QACN,OAAO,MAAM,CAAC;KACd;AACF,CAAC;AAED,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAAiB;IACrE,YAAY,KAAa;QACxB,KAAK,CAAC,KAAK,CAAC,CAAC;IACd,CAAC;IAED,MAAM;QACL,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QACpD,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,EAAE,CAAC,CAAC;~~QAG~~/C,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;~~QAI1C~~,OAAO,CACN,6BAAK,SAAS,EAAC,aAAa;YAC3B,6BAAK,SAAS,EAAC,cAAc,IAAE,WAAW,CAAO;YACjD,6BAAK,SAAS,EAAC,oBAAoB;gBACjC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACpC,6BAAK,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IACnF,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CACnD,CACN,CAAC;gBACF,6BAAK,SAAS,EAAC,2BAA2B,IACxC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,CAC/C,6BACC,SAAS,EAAC,gDAAgD,EAC1D,OAAO,EAAE,GAAG,EAAE;wBACb,OAAO,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;oBACvC,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,gBAAgB,CAAC,WAAW,CAAC,CAAC;yBACtC;oBACF,CAAC,gBAGI,CACN,CAAC,CAAC,CAAC,IAAI,CACH,CACD,CACD,CACN,CAAC;IACH,CAAC;CACD","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"]}
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.js CHANGED Viewed

@@ -1,22 +1,28 @@
+// 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;
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/processMonitor/constants.ts"],"names":[],"mappings":"~~AAGA~~,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;~~AAGF~~,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;~~AAGF~~,MAAM,CAAC,MAAM,QAAQ,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC;~~AAGpC~~,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC;AACzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC;~~AAGrC~~,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAC;AAE7B,MAAM,WAAW,GAAgB;IAChC,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,EAAE;CACd,CAAC;~~AAEF~~,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"]}
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 CHANGED Viewed

@@ -1,5 +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;