From 56d2b42c63709a09b8b580c94a9cb1f47ba250fe Mon Sep 17 00:00:00 2001 From: jgresham Date: Tue, 8 Nov 2022 17:06:20 -0600 Subject: [PATCH 1/3] fix: selected node in sidebar. node peers in header metrics --- src/common/NodeSpecs/teku/teku-v1.0.0.json | 6 +++--- .../redesign/MetricTypes/MetricTypes.tsx | 5 ++++- .../redesign/SidebarNodeItem/SidebarNodeItem.tsx | 16 +++++++++------- src/renderer/Presentational/Sidebar/Sidebar.tsx | 4 ++++ .../SidebarWrapper/SidebarWrapper.tsx | 1 + 5 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/common/NodeSpecs/teku/teku-v1.0.0.json b/src/common/NodeSpecs/teku/teku-v1.0.0.json index 4a780724f..ba400335b 100644 --- a/src/common/NodeSpecs/teku/teku-v1.0.0.json +++ b/src/common/NodeSpecs/teku/teku-v1.0.0.json @@ -93,14 +93,14 @@ "documentation": "https://docs.teku.consensys.net/en/stable/Reference/CLI/CLI-Syntax/#rest-api-host-allowlist" }, "eth1ProviderUrl": { - "displayName": "Url to Eth1 node with enabled rpc", - "cliConfigPrefix": "--eth1-endpoint=", + "displayName": "URL of the execution client’s Engine JSON-RPC APIs.", + "cliConfigPrefix": "--ee-endpoint=", "defaultValue": "http://localhost:8545", "uiControl": { "type": "text" }, "infoDescription": "Urls to Eth1 node with enabled rpc. If not explicity provided and execution endpoint provided via execution.urls, it will use execution.urls. Otherwise will try connecting on the specified default(s)", - "documentation": "https://docs.teku.consensys.net/en/latest/Reference/CLI/CLI-Syntax/#data-base-path-data-path" + "documentation": "https://docs.teku.consensys.net/en/latest/Reference/CLI/CLI-Syntax/#ee-endpoint" }, "executionEngineEndpoint": { "displayName": "URL of the execution client's Engine JSON-RPC APIs", diff --git a/src/renderer/Generics/redesign/MetricTypes/MetricTypes.tsx b/src/renderer/Generics/redesign/MetricTypes/MetricTypes.tsx index 9d3554dbf..ca1f3dfed 100644 --- a/src/renderer/Generics/redesign/MetricTypes/MetricTypes.tsx +++ b/src/renderer/Generics/redesign/MetricTypes/MetricTypes.tsx @@ -122,7 +122,10 @@ export const MetricTypes = ({ break; case 'peers': iconId = 'peers'; - titleText = '16'; + titleText = `${statsValue}`; + if (statsValue === undefined) { + titleText = `${0}`; + } labelText = 'Peers connected'; break; case 'cpuLoad': diff --git a/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx b/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx index e2f30947b..2a295752b 100644 --- a/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx +++ b/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx @@ -37,29 +37,31 @@ export interface SidebarNodeItemProps { * Optional click handler */ onClick?: () => void; + /** + * Is the node selected? + */ + selected?: boolean; } -/** - * Primary UI component for user interaction - */ export const SidebarNodeItem = ({ onClick, title, info, iconId, status, + selected, }: SidebarNodeItemProps) => { - const [selected, setSelected] = useState(false); + const [sInternalSelected, setInternalSelected] = useState(false); const onClickAction = () => { - setSelected(true); + setInternalSelected(true); if (onClick) { onClick(); } }; const containerStyles = [container]; - if (selected) { + if (selected || sInternalSelected) { containerStyles.push(selectedContainer); } @@ -68,7 +70,7 @@ export const SidebarNodeItem = ({ className={containerStyles.join(' ')} onClick={onClickAction} onBlur={() => { - setSelected(false); + setInternalSelected(false); }} onKeyDown={onClickAction} role="button" diff --git a/src/renderer/Presentational/Sidebar/Sidebar.tsx b/src/renderer/Presentational/Sidebar/Sidebar.tsx index 8af0e5e7b..42c99c413 100644 --- a/src/renderer/Presentational/Sidebar/Sidebar.tsx +++ b/src/renderer/Presentational/Sidebar/Sidebar.tsx @@ -31,6 +31,7 @@ export interface SidebarProps { */ dockerStopped: boolean; sUserNodes?: UserNodes; + selectedNodeId?: NodeId; } const itemListData: { iconId: IconId; label: string; count?: number }[] = [ @@ -72,6 +73,7 @@ const Sidebar = ({ updateAvailable, offline, dockerStopped, + selectedNodeId, }: SidebarProps) => { const dispatch = useAppDispatch(); const [sIsModalOpenAddNode, setIsModalOpenAddNode] = useState(); @@ -147,6 +149,7 @@ const Sidebar = ({ const node = sUserNodes.nodes[nodeId]; const { spec, status } = node; const sidebarStatus = NODE_SIDEBAR_STATUS_MAP[status]; + console.log(node, 'sidebarStatus', sidebarStatus); return ( dispatch(updateSelectedNodeId(node.id))} /> ); diff --git a/src/renderer/Presentational/SidebarWrapper/SidebarWrapper.tsx b/src/renderer/Presentational/SidebarWrapper/SidebarWrapper.tsx index 5f73654af..a947e6a3d 100644 --- a/src/renderer/Presentational/SidebarWrapper/SidebarWrapper.tsx +++ b/src/renderer/Presentational/SidebarWrapper/SidebarWrapper.tsx @@ -45,6 +45,7 @@ export const SidebarWrapper = () => { updateAvailable={false} dockerStopped={!isDockerRunning} sUserNodes={sUserNodes} + selectedNodeId={sSelectedNodeId} /> ); }; From 80a2a1ab2fec64c811bdd06e52c57da114b75991 Mon Sep 17 00:00:00 2001 From: jgresham Date: Wed, 9 Nov 2022 10:07:06 -0600 Subject: [PATCH 2/3] fix: minor css fixes for node icons with varying status --- .../Generics/redesign/NodeIcon/NodeIcon.tsx | 5 +- .../redesign/NodeIcon/nodeIcon.css.ts | 51 +++++++++++-------- .../Presentational/Sidebar.stories.tsx | 1 + 3 files changed, 34 insertions(+), 23 deletions(-) diff --git a/src/renderer/Generics/redesign/NodeIcon/NodeIcon.tsx b/src/renderer/Generics/redesign/NodeIcon/NodeIcon.tsx index 394419728..b498da5d2 100644 --- a/src/renderer/Generics/redesign/NodeIcon/NodeIcon.tsx +++ b/src/renderer/Generics/redesign/NodeIcon/NodeIcon.tsx @@ -83,7 +83,10 @@ export const NodeIcon = ({ iconId, status, size }: NodeIconProps) => { return (
- {statusComponent} + {/* https://stackoverflow.com/questions/6040005/relatively-position-an-element-without-it-taking-up-space-in-document-flow */} +
+ {statusComponent} +
Date: Wed, 9 Nov 2022 12:19:47 -0600 Subject: [PATCH 3/3] fix: add reset.css to app (previously only in storybook). add updating status for nodes. --- .storybook/preview.js | 2 +- .../redesign/NodeIcon/nodeIcon.css.ts | 2 +- .../SidebarNodeItem/SidebarNodeItem.tsx | 3 +- .../Presentational/Sidebar/Sidebar.tsx | 10 +- src/renderer/assets/reset.scss | 52 ------- src/renderer/reset.css | 139 +++++++++++++++++- 6 files changed, 147 insertions(+), 61 deletions(-) delete mode 100644 src/renderer/assets/reset.scss diff --git a/.storybook/preview.js b/.storybook/preview.js index cdfc52621..9bb640088 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,4 +1,4 @@ -import '../src/renderer/assets/reset.scss'; +import '../src/renderer/reset.css'; import '../src/renderer/Generics/redesign/globalStyle.css'; import '../src/renderer/i18n'; diff --git a/src/renderer/Generics/redesign/NodeIcon/nodeIcon.css.ts b/src/renderer/Generics/redesign/NodeIcon/nodeIcon.css.ts index 6234f2711..80940303a 100644 --- a/src/renderer/Generics/redesign/NodeIcon/nodeIcon.css.ts +++ b/src/renderer/Generics/redesign/NodeIcon/nodeIcon.css.ts @@ -123,7 +123,7 @@ export const statusStyle = style({ }, [`&.${smallStyle}.${sync}`]: { left: '23px', - top: '-2px', + top: '-2.5px', width: '10px', height: '8px', }, diff --git a/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx b/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx index 2a295752b..8170d8ea3 100644 --- a/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx +++ b/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx @@ -15,7 +15,8 @@ export type SidebarNodeStatus = | 'warning' | 'error' | 'sync' - | 'stopped'; + | 'stopped' + | 'updating'; export interface SidebarNodeItemProps { /** * Node title diff --git a/src/renderer/Presentational/Sidebar/Sidebar.tsx b/src/renderer/Presentational/Sidebar/Sidebar.tsx index 42c99c413..08d73ace1 100644 --- a/src/renderer/Presentational/Sidebar/Sidebar.tsx +++ b/src/renderer/Presentational/Sidebar/Sidebar.tsx @@ -51,12 +51,12 @@ 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', + initializing: 'updating', + [NodeStatus.checkingForUpdates]: 'updating', + downloading: 'updating', + downloaded: 'stopped', [NodeStatus.errorDownloading]: 'error', - extracting: 'sync', + extracting: 'updating', [NodeStatus.readyToStart]: 'stopped', starting: 'sync', running: 'healthy', diff --git a/src/renderer/assets/reset.scss b/src/renderer/assets/reset.scss deleted file mode 100644 index d9ac20b69..000000000 --- a/src/renderer/assets/reset.scss +++ /dev/null @@ -1,52 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v5.0.1 | 20191019 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, menu, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -main, menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, main, menu, nav, section { - display: block; -} -/* HTML5 hidden-attribute fix for newer browsers */ -*[hidden] { - display: none; -} -body { - line-height: 1; -} -menu, ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} diff --git a/src/renderer/reset.css b/src/renderer/reset.css index 293d3b1f1..f8412f7cc 100644 --- a/src/renderer/reset.css +++ b/src/renderer/reset.css @@ -1,3 +1,140 @@ -body { +/* body { + margin: 0; +} */ +/* http://meyerweb.com/eric/tools/css/reset/ + v5.0.1 | 20191019 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +menu, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +main, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section { + display: block; +} +/* HTML5 hidden-attribute fix for newer browsers */ +*[hidden] { + display: none; +} +body { + line-height: 1; +} +menu, +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; }