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/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/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} +
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 +71,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..08d73ace1 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 }[] = [ @@ -50,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', @@ -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} /> ); }; 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; } diff --git a/src/stories/Presentational/Sidebar.stories.tsx b/src/stories/Presentational/Sidebar.stories.tsx index 7273d6151..156584373 100644 --- a/src/stories/Presentational/Sidebar.stories.tsx +++ b/src/stories/Presentational/Sidebar.stories.tsx @@ -17,6 +17,7 @@ export const Primary = Template.bind({}); Primary.args = { offline: false, updateAvailable: false, + selectedNodeId: '86825805-9c48-4667-9473-4df440714b4e', sUserNodes: { nodes: { '86825805-9c48-4667-9473-4df440714b4e': {