From e851e52591fe6d1411393eb906f9fecb7ea8c4ae Mon Sep 17 00:00:00 2001 From: corn-potage Date: Tue, 1 Nov 2022 18:23:40 -0700 Subject: [PATCH 1/2] sidebar WIP --- src/renderer/App.tsx | 4 +- src/renderer/Generics/redesign/utils.ts | 1 - .../Presentational/Sidebar/Sidebar.tsx | 64 +++++++++++++++++-- 3 files changed, 61 insertions(+), 8 deletions(-) diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index ee0a4a106..a6b3e2aee 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -13,6 +13,7 @@ import LeftSideBar from './LeftSideBar'; import NodeScreen from './NodeScreen'; import DataRefresher from './DataRefresher'; import electron from './electronGlobal'; +import Sidebar from './Presentational/Sidebar/Sidebar'; Sentry.init({ dsn: electron.SENTRY_DSN, @@ -53,7 +54,8 @@ const MainScreen = () => { flex: 1, }} > - + {/* */} +
{ let syncStatus = null; switch (true) { - // TODO: revisit this.. feels off or unnecessary // find worst cases first case status.updating: syncStatus = SYNC_STATUS.UPDATING; diff --git a/src/renderer/Presentational/Sidebar/Sidebar.tsx b/src/renderer/Presentational/Sidebar/Sidebar.tsx index 2157cdf2c..ad7cf6d4b 100644 --- a/src/renderer/Presentational/Sidebar/Sidebar.tsx +++ b/src/renderer/Presentational/Sidebar/Sidebar.tsx @@ -1,3 +1,11 @@ +import { NodeId } from 'common/node'; +import { useEffect } from 'react'; +import { + selectSelectedNodeId, + selectUserNodes, + updateSelectedNodeId, +} from 'renderer/state/node'; +import { useAppDispatch, useAppSelector } from 'renderer/state/hooks'; import { Banner } from '../../Generics/redesign/Banner/Banner'; import { SidebarNodeItem } from '../../Generics/redesign/SidebarNodeItem/SidebarNodeItem'; import { SidebarLinkItem } from '../../Generics/redesign/SidebarLinkItem/SidebarLinkItem'; @@ -66,6 +74,36 @@ const itemListData = [ ]; const Sidebar = ({ offline }: SidebarProps) => { + const sSelectedNodeId = useAppSelector(selectSelectedNodeId); + const sUserNodes = useAppSelector(selectUserNodes); + const dispatch = useAppDispatch(); + + // Default selected node to be the first node + useEffect(() => { + if ( + !sSelectedNodeId && + sUserNodes && + Array.isArray(sUserNodes?.nodeIds) && + sUserNodes.nodeIds.length > 0 + ) { + dispatch(updateSelectedNodeId(sUserNodes.nodeIds[0])); + } + }, [sSelectedNodeId, sUserNodes, dispatch]); + + const nodeListObject = { nodeService: [], validator: [], singleClients: [] }; + sUserNodes?.nodeIds.forEach((nodeId: NodeId) => { + const node = sUserNodes.nodes[nodeId]; + // TODO: add validator logic here eventually + if ( + node.spec.category === 'L1/ExecutionClient' || + node.spec.category === 'L1/ConsensusClient/BeaconNode' + ) { + nodeListObject.nodeService.push(node); + } else { + nodeListObject.singleClients.push(node); + } + }); + return (
{offline && ( @@ -77,14 +115,28 @@ const Sidebar = ({ offline }: SidebarProps) => {
- {nodeListData.map((item) => { + {nodeListObject.nodeService.length === 2 && ( + { + dispatch(updateSelectedNodeId(nodeListObject.nodeService[1].id)); + }} + /> + )} + {nodeListObject.singleClients.map((nodeId: NodeId) => { + const item = sUserNodes.nodes[nodeId]; + const { spec, status } = item; return ( ); })} From f21ed4ce8172001523bb2913b85dca59e8d53b94 Mon Sep 17 00:00:00 2001 From: jgresham Date: Thu, 3 Nov 2022 11:41:32 -0500 Subject: [PATCH 2/2] feat(wip): new sidebar rendering. remove legacy css. functionality not all working --- src/renderer/AddNode/AddNodeRedesign.tsx | 2 +- src/renderer/App.tsx | 10 ++- src/renderer/Footer/Monitoring.tsx | 2 +- .../Generics/redesign/NodeIcon/NodeIcon.tsx | 10 ++- .../SidebarNodeItem/SidebarNodeItem.tsx | 2 +- .../SidebarNodeItem/sideBarNodeItem.css.ts | 2 +- .../Presentational/Sidebar/Sidebar.tsx | 75 +++++++++++++------ .../Presentational/Sidebar/sidebar.css.ts | 2 +- 8 files changed, 72 insertions(+), 33 deletions(-) diff --git a/src/renderer/AddNode/AddNodeRedesign.tsx b/src/renderer/AddNode/AddNodeRedesign.tsx index 5cdbb8aa6..7ef62d9a6 100644 --- a/src/renderer/AddNode/AddNodeRedesign.tsx +++ b/src/renderer/AddNode/AddNodeRedesign.tsx @@ -22,7 +22,7 @@ const AddNode = () => { -
+
{ const dispatch = useAppDispatch(); + const [isDarkTheme, setIsDarkTheme] = useState(false); // const isStartOnLogin = await electron.getStoreValue('isStartOnLogin'); // console.log('isStartOnLogin: ', isStartOnLogin); @@ -39,6 +41,8 @@ const MainScreen = () => { return (
{ />
-
+
{/* { {statusComponent}
- Node icon + Node icon
); diff --git a/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx b/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx index 52773c5f3..e2f30947b 100644 --- a/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx +++ b/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx @@ -28,7 +28,7 @@ export interface SidebarNodeItemProps { /** * Which icon? */ - iconId: NodeIconId; + iconId: NodeIconId | string; /** * What's the status? */ diff --git a/src/renderer/Generics/redesign/SidebarNodeItem/sideBarNodeItem.css.ts b/src/renderer/Generics/redesign/SidebarNodeItem/sideBarNodeItem.css.ts index 93d5e2bcc..575717477 100644 --- a/src/renderer/Generics/redesign/SidebarNodeItem/sideBarNodeItem.css.ts +++ b/src/renderer/Generics/redesign/SidebarNodeItem/sideBarNodeItem.css.ts @@ -29,7 +29,7 @@ export const textContainer = style({ alignItems: 'flex-start', padding: '0px', gap: '2px', - width: '172px', + // width: '172px', height: '32px', flex: 'none', order: '1', diff --git a/src/renderer/Presentational/Sidebar/Sidebar.tsx b/src/renderer/Presentational/Sidebar/Sidebar.tsx index f395254c7..977b50caa 100644 --- a/src/renderer/Presentational/Sidebar/Sidebar.tsx +++ b/src/renderer/Presentational/Sidebar/Sidebar.tsx @@ -1,5 +1,5 @@ -import { NodeId } from 'common/node'; -import { useEffect } from 'react'; +import { NodeId, NodeStatus } from 'common/node'; +import { useCallback, useEffect } from 'react'; import { selectSelectedNodeId, selectUserNodes, @@ -83,6 +83,25 @@ const itemListData: { iconId: IconId; label: string; count?: number }[] = [ }, ]; +const NODE_SIDEBAR_STATUS_MAP: Record = { + created: 'stopped', + initializing: 'sync', + [NodeStatus.checkingForUpdates]: 'sync', + downloading: 'sync', + downloaded: 'sync', + [NodeStatus.errorDownloading]: 'error', + extracting: 'sync', + [NodeStatus.readyToStart]: 'stopped', + starting: 'sync', + running: 'healthy', + stopping: 'healthy', + stopped: 'stopped', + [NodeStatus.errorRunning]: 'error', + [NodeStatus.errorStarting]: 'error', + [NodeStatus.errorStopping]: 'error', + unknown: 'error', +}; + const Sidebar = ({ offline }: SidebarProps) => { const sSelectedNodeId = useAppSelector(selectSelectedNodeId); const sUserNodes = useAppSelector(selectUserNodes); @@ -100,19 +119,26 @@ const Sidebar = ({ offline }: SidebarProps) => { } }, [sSelectedNodeId, sUserNodes, dispatch]); - const nodeListObject = { nodeService: [], validator: [], singleClients: [] }; - sUserNodes?.nodeIds.forEach((nodeId: NodeId) => { - const node = sUserNodes.nodes[nodeId]; - // TODO: add validator logic here eventually - if ( - node.spec.category === 'L1/ExecutionClient' || - node.spec.category === 'L1/ConsensusClient/BeaconNode' - ) { - nodeListObject.nodeService.push(node); - } else { - nodeListObject.singleClients.push(node); + // const nodeListObject = { nodeService: [], validator: [], singleClients: [] }; + // sUserNodes?.nodeIds.forEach((nodeId: NodeId) => { + // const node = sUserNodes.nodes[nodeId]; + // // TODO: add validator logic here eventually + // if ( + // node.spec.category === 'L1/ExecutionClient' || + // node.spec.category === 'L1/ConsensusClient/BeaconNode' + // ) { + // nodeListObject.nodeService.push(node); + // } else { + // nodeListObject.singleClients.push(node); + // } + // }); + + const onClickLinkItem = useCallback((linkItemId) => { + console.log('sidebar link item clicked: ', linkItemId); + if (linkItemId === 'add') { + // open add node dialog } - }); + }, []); return (
@@ -125,7 +151,7 @@ const Sidebar = ({ offline }: SidebarProps) => {
- {nodeListObject.nodeService.length === 2 && ( + {/* {nodeListObject.nodeService.length === 2 && ( { dispatch(updateSelectedNodeId(nodeListObject.nodeService[1].id)); }} /> - )} - {nodeListObject.singleClients.map((nodeId: NodeId) => { - const item = sUserNodes.nodes[nodeId]; - const { spec, status } = item; + )} */} + {sUserNodes?.nodeIds.map((nodeId: NodeId) => { + const node = sUserNodes.nodes[nodeId]; + const { spec, status } = node; + const sidebarStatus = NODE_SIDEBAR_STATUS_MAP[status]; return ( dispatch(updateSelectedNodeId(node.id))} /> ); })} @@ -155,9 +184,11 @@ const Sidebar = ({ offline }: SidebarProps) => { {itemListData.map((item) => { return ( onClickLinkItem(item.iconId)} /> ); })} diff --git a/src/renderer/Presentational/Sidebar/sidebar.css.ts b/src/renderer/Presentational/Sidebar/sidebar.css.ts index 58487d609..3807245b8 100644 --- a/src/renderer/Presentational/Sidebar/sidebar.css.ts +++ b/src/renderer/Presentational/Sidebar/sidebar.css.ts @@ -30,7 +30,7 @@ export const titleItem = style({ }); export const nodeList = style({ - overflowY: 'scroll', + overflowY: 'auto', order: '2', alignSelf: 'stretch', flexGrow: '1',