From d76f10545792b3da6e43183da1fcb2004380f154 Mon Sep 17 00:00:00 2001 From: jgresham Date: Thu, 3 Nov 2022 14:48:42 -0500 Subject: [PATCH 1/4] feat: remove window top bar. add custom draggable area. remove old header. --- src/main/main.ts | 2 ++ src/renderer/App.tsx | 6 +++--- .../Presentational/Sidebar/sidebar.css.ts | 1 + src/renderer/app.css.ts | 17 +++++++++++++++++ src/renderer/{App.css => reset.css} | 12 +++++++----- 5 files changed, 30 insertions(+), 8 deletions(-) create mode 100644 src/renderer/app.css.ts rename src/renderer/{App.css => reset.css} (93%) diff --git a/src/main/main.ts b/src/main/main.ts index cc69df772..8638202eb 100644 --- a/src/main/main.ts +++ b/src/main/main.ts @@ -86,6 +86,8 @@ const createWindow = async () => { }; mainWindow = new BrowserWindow({ + titleBarOverlay: true, + titleBarStyle: 'hiddenInset', show: false, width: 1200, height: 820, diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index 9646544b5..59be33b89 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -3,9 +3,8 @@ import { MemoryRouter as Router, Routes, Route } from 'react-router-dom'; import * as Sentry from '@sentry/electron/renderer'; import './Generics/redesign/globalStyle.css'; -// import './App.css'; +import './reset.css'; import { useAppDispatch } from './state/hooks'; -import Header from './Header'; import Footer from './Footer/Footer'; import Warnings from './Warnings'; import { initialize as initializeIpcListeners } from './ipc'; @@ -16,6 +15,7 @@ import electron from './electronGlobal'; import Sidebar from './Presentational/Sidebar/Sidebar'; import { darkTheme, lightTheme } from './Generics/redesign/theme.css'; import NNSplash from './Presentational/NNSplashScreen/NNSplashScreen'; +import { dragWindowContainer } from './app.css'; Sentry.init({ dsn: electron.SENTRY_DSN, @@ -84,7 +84,7 @@ const MainScreen = () => { ) : ( <> -
+
Date: Thu, 3 Nov 2022 16:12:22 -0500 Subject: [PATCH 2/4] wip: define single content props. parse selected node to single content. missing lots of func. --- package.json | 2 +- src/renderer/App.tsx | 2 - .../redesign/HeaderMetrics/HeaderMetrics.tsx | 6 +- .../redesign/MetricTypes/MetricTypes.tsx | 28 +- .../redesign/MetricTypes/metricTypes.css.ts | 2 +- src/renderer/Generics/redesign/consts.ts | 20 +- src/renderer/NodeScreen.tsx | 242 ++++++++++++------ .../ContentMultipleClients.tsx | 5 +- .../ContentSingleClient.tsx | 74 +++--- src/renderer/Warnings.tsx | 168 ------------ src/renderer/app.css.ts | 6 +- src/renderer/reset.css | 87 ------- src/stories/Generic/ClientCard.stories.tsx | 2 +- src/stories/Generic/Header.stories.tsx | 2 +- src/stories/Generic/HeaderMetrics.stories.tsx | 2 +- src/stories/Generic/MetricTypes.stories.tsx | 2 +- .../ContentMultipleClients.stories.tsx | 4 +- .../ContentSingleClient.stories.tsx | 46 +++- 18 files changed, 284 insertions(+), 416 deletions(-) delete mode 100644 src/renderer/Warnings.tsx diff --git a/package.json b/package.json index 0c82bbdef..24498cb0e 100644 --- a/package.json +++ b/package.json @@ -136,7 +136,7 @@ "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/.erb/mocks/fileMock.js", "\\.svg": "/src/renderer/__mocks__/svg.ts", - "(App.css|.less|.sass|.scss)$": "identity-obj-proxy" + "(reset.css|.less|.sass|.scss)$": "identity-obj-proxy" }, "transform": { "\\.((? { }} > -
diff --git a/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx b/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx index cc586b4b6..64e21cefe 100644 --- a/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx +++ b/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx @@ -17,14 +17,14 @@ export const HeaderMetrics = (props: NodeOverviewProps) => { client: MetricStats[]; validator: MetricStats[]; } = { - altruistic: ['status', 'currentSlot', 'cpuLoad', 'diskUsage'], - client: ['status', getSlotOrBlockMetricType, 'peers', 'diskUsage'], + altruistic: ['status', 'currentSlot', 'cpuLoad', 'diskUsageGBs'], + client: ['status', getSlotOrBlockMetricType, 'peers', 'diskUsageGBs'], validator: ['status', 'stake', 'rewards', 'balance'], }; const assignedMetric = metricTypeArray[type]; return (
- {assignedMetric.map((metric, index) => { + {assignedMetric?.map((metric, index) => { let statsValue; if (metric === 'status') { statsValue = getSyncStatus(status); diff --git a/src/renderer/Generics/redesign/MetricTypes/MetricTypes.tsx b/src/renderer/Generics/redesign/MetricTypes/MetricTypes.tsx index fe2f23afa..9d3554dbf 100644 --- a/src/renderer/Generics/redesign/MetricTypes/MetricTypes.tsx +++ b/src/renderer/Generics/redesign/MetricTypes/MetricTypes.tsx @@ -24,7 +24,7 @@ export type MetricStats = | 'currentBlock' | 'peers' | 'cpuLoad' - | 'diskUsage' + | 'diskUsageGBs' | 'balance' | 'stake' | 'rewards'; @@ -121,6 +121,7 @@ export const MetricTypes = ({ labelText = 'Current slot'; break; case 'peers': + iconId = 'peers'; titleText = '16'; labelText = 'Peers connected'; break; @@ -129,17 +130,22 @@ export const MetricTypes = ({ titleText = `${statsValue}%`; labelText = 'CPU load'; break; - case 'diskUsage': - if (typeof statsValue === 'number' && statsValue >= 1000000) { - titleText = `${statsValue / 1000000} TB`; - } else if ( - typeof statsValue === 'number' && - statsValue <= 999999 && - statsValue >= 1000 - ) { - titleText = `${statsValue / 1000} GB`; + case 'diskUsageGBs': + // if (typeof statsValue === 'number' && statsValue >= 1000000) { + // titleText = `${statsValue / 1000000} TB`; + // } else if ( + // typeof statsValue === 'number' && + // statsValue <= 999999 && + // statsValue >= 1000 + // ) { + // titleText = `${statsValue / 1000} GB`; + // } else { + // titleText = `${statsValue} MB`; + // } + if (typeof statsValue === 'number') { + titleText = `${statsValue.toFixed(2)} GB`; } else { - titleText = `${statsValue} MB`; + titleText = `${statsValue} GB`; } iconId = 'disks'; labelText = 'Disk usage'; diff --git a/src/renderer/Generics/redesign/MetricTypes/metricTypes.css.ts b/src/renderer/Generics/redesign/MetricTypes/metricTypes.css.ts index 03267863f..e405efeb0 100644 --- a/src/renderer/Generics/redesign/MetricTypes/metricTypes.css.ts +++ b/src/renderer/Generics/redesign/MetricTypes/metricTypes.css.ts @@ -61,7 +61,7 @@ const redPulse = keyframes({ }); export const statusStyle = style({ - zIndex: 1, + // zIndex: 1, animationDuration: '2s', animationIterationCount: 'infinite', animationTimingFunction: 'linear', diff --git a/src/renderer/Generics/redesign/consts.ts b/src/renderer/Generics/redesign/consts.ts index 54d98ee22..426e9e241 100644 --- a/src/renderer/Generics/redesign/consts.ts +++ b/src/renderer/Generics/redesign/consts.ts @@ -25,22 +25,22 @@ export interface ClientStatsProps { highestSlot?: number; peers?: number; cpuLoad?: number; - diskUsage?: number; + diskUsageGBs?: number; rewards?: number; balance?: number; stake?: number; } export interface ClientStatusProps { - updating: boolean; - initialized: boolean; // initial initialization is done - synchronized: boolean; // constantly updated from checking current / height slot or block - lowPeerCount: boolean; - updateAvailable: boolean; - blocksBehind: boolean; - noConnection: boolean; - stopped: boolean; - error: boolean; + updating?: boolean; + initialized?: boolean; // initial initialization is done + synchronized?: boolean; // constantly updated from checking current / height slot or block + lowPeerCount?: boolean; + updateAvailable?: boolean; + blocksBehind?: boolean; + noConnection?: boolean; + stopped?: boolean; + error?: boolean; } export interface SyncStatusProps { diff --git a/src/renderer/NodeScreen.tsx b/src/renderer/NodeScreen.tsx index 0d2dfda65..f1fe1ce1c 100644 --- a/src/renderer/NodeScreen.tsx +++ b/src/renderer/NodeScreen.tsx @@ -1,24 +1,134 @@ -import { FaPlayCircle, FaPauseCircle } from 'react-icons/fa'; -import { useTranslation } from 'react-i18next'; +// import { useTranslation } from 'react-i18next'; -import { NodeStatus } from '../common/node'; -import electron from './electronGlobal'; -import InstallDocker from './Docker/InstallDocker'; +import { useEffect, useState } from 'react'; +// import { NodeStatus } from '../common/node'; +// import electron from './electronGlobal'; // import { useGetNodesQuery } from './state/nodeService'; import { useAppSelector } from './state/hooks'; -import { selectSelectedNode } from './state/node'; -import { useGetNodeVersionQuery } from './state/services'; -import { useGetIsDockerInstalledQuery } from './state/settingsService'; +import { selectIsAvailableForPolling, selectSelectedNode } from './state/node'; +import { + useGetExecutionIsSyncingQuery, + useGetExecutionLatestBlockQuery, + useGetExecutionPeersQuery, + useGetNodeVersionQuery, +} from './state/services'; +// import { useGetNetworkConnectedQuery } from './state/network'; +import ContentSingleClient, { + SingleNodeContent, +} from './Presentational/ContentSingleClient/ContentSingleClient'; +import { hexToDecimal } from './utils'; const NodeScreen = () => { - const { t } = useTranslation(); + // const { t } = useTranslation(); const selectedNode = useAppSelector(selectSelectedNode); const qNodeVersion = useGetNodeVersionQuery( selectedNode?.spec.rpcTranslation ); - const qIsDockerInstalled = useGetIsDockerInstalledQuery(); - // const isDisabled = true; - const isDockerInstalled = qIsDockerInstalled?.data; + const [sIsSyncing, setIsSyncing] = useState(); + const [sSyncPercent, setSyncPercent] = useState(''); + const [sPeers, setPeers] = useState(); + const [sLatestBlockNumber, setLatestBlockNumber] = useState(); + const sIsAvailableForPolling = useAppSelector(selectIsAvailableForPolling); + const pollingInterval = sIsAvailableForPolling ? 15000 : 0; + const qExeuctionIsSyncing = useGetExecutionIsSyncingQuery( + selectedNode?.spec.rpcTranslation, + { + pollingInterval, + } + ); + // const isSelectedNode = selectedNode !== undefined; + // const peersPolling = isSelectedNode ? pollingInterval : 0; + const qExecutionPeers = useGetExecutionPeersQuery( + selectedNode?.spec.rpcTranslation, + { + pollingInterval, + } + ); + const qLatestBlock = useGetExecutionLatestBlockQuery( + selectedNode?.spec.rpcTranslation, + { + pollingInterval, + } + ); + + // use to show if internet is disconnected + // const qNetwork = useGetNetworkConnectedQuery(null, { + // // Only polls network connection if there are exactly 0 peers + // pollingInterval: typeof sPeers === 'number' && sPeers === 0 ? 30000 : 0, + // }); + + const diskUsed = + selectedNode?.runtime?.usage?.diskGBs?.toPrecision(2) ?? undefined; + // eslint-disable-next-line eqeqeq + // const isHttpEnabled = + // selectedNode?.config?.configValuesMap?.http && + // ['Enabled', 'enabled', 'true', true, 1].includes( + // selectedNode?.config?.configValuesMap?.http + // ); + // todo: http apis + + useEffect(() => { + if (!sIsAvailableForPolling) { + // clear all node data when it becomes unavailable to get + setSyncPercent(''); + setIsSyncing(undefined); + setPeers(undefined); + setLatestBlockNumber(undefined); + } + }, [sIsAvailableForPolling]); + + useEffect(() => { + console.log('qExeuctionIsSyncing: ', qExeuctionIsSyncing); + if (qExeuctionIsSyncing.isError) { + setSyncPercent(''); + setIsSyncing(undefined); + return; + } + const syncingData = qExeuctionIsSyncing.data; + if (typeof syncingData === 'object') { + setSyncPercent(syncingData.syncPercent); + setIsSyncing(syncingData.isSyncing); + } + // else if (syncingData === false) { + // // light client geth, it is done syncing if data is false + // setSyncPercent(''); + // setIsSyncing(false); + // } + else { + setSyncPercent(''); + setIsSyncing(undefined); + } + }, [qExeuctionIsSyncing]); + + useEffect(() => { + if (qExecutionPeers.isError) { + setPeers(undefined); + return; + } + if (typeof qExecutionPeers.data === 'string') { + setPeers(qExecutionPeers.data); + } else if (typeof qExecutionPeers.data === 'number') { + setPeers(qExecutionPeers.data.toString()); + } else { + setPeers(undefined); + } + }, [qExecutionPeers]); + + useEffect(() => { + if (qLatestBlock.isError) { + setLatestBlockNumber(undefined); + return; + } + if ( + qLatestBlock?.data?.number && + typeof qLatestBlock.data.number === 'string' + ) { + const latestBlockNum = hexToDecimal(qLatestBlock.data.number); + setLatestBlockNumber(latestBlockNum); + } else { + setLatestBlockNumber(undefined); + } + }, [qLatestBlock]); // useEffect(() => { // qNodeInfo.refetch(); // }, [selectedNode]); @@ -34,81 +144,45 @@ const NodeScreen = () => { // }); if (!selectedNode) { // if docker is not installed, show prompt - if (!isDockerInstalled) { - if (qIsDockerInstalled.isLoading) { - return <>Loading...; - } - return ; - } - return
No node selected
; + // eslint-disable-next-line react/jsx-curly-brace-presence + return

{'Get started! "Add a node"!'}

; } const { status, spec } = selectedNode; - const { category, displayName } = spec; + // todo: get node type, single or multi-service + // parse node details from selectedNode => SingleNodeContent + // todo: add stop/start ability? + const nodeContent: SingleNodeContent = { + nodeId: selectedNode.id, + name: spec.specId.replace('-beacon', ''), + type: 'client', + version: qNodeVersion?.currentData, + info: spec.category, + status: { + stopped: status === 'stopped', + error: status.includes('error'), + sychronized: !sIsSyncing && parseFloat(sSyncPercent) > 99.9, + }, + stats: { + peers: sPeers, + currentBlock: sLatestBlockNumber, + diskUsageGBs: diskUsed ? parseFloat(diskUsed) : undefined, + }, + }; + console.log('passing content to NodeScreen: ', nodeContent); + return ; - return ( -
-
-

{displayName}

- {status === 'running' && qNodeVersion && ( -

- Version:{' '} - <> - {qNodeVersion.isLoading ? ( - <>Loading... - ) : ( - <> - {qNodeVersion.isError ? ( - <>Loading.. - ) : ( - qNodeVersion.currentData - )} - - )} - -

- )} -

- {t('Type')}: {category} Node -

-

- {t('Status')}: {t(status)} -

-
-
- -   - -
-
- ); + // start button disabled logic + // disabled={ + // !( + // status === NodeStatus.created || + // status === NodeStatus.readyToStart || + // status === NodeStatus.errorStarting || + // status === NodeStatus.errorRunning || + // status === NodeStatus.stopped || + // status === NodeStatus.errorStopping || + // status === NodeStatus.unknown + // stop button disabled logic + // disabled={status !== NodeStatus.running} }; export default NodeScreen; diff --git a/src/renderer/Presentational/ContentMultipleClients/ContentMultipleClients.tsx b/src/renderer/Presentational/ContentMultipleClients/ContentMultipleClients.tsx index 87637b852..14b246d25 100644 --- a/src/renderer/Presentational/ContentMultipleClients/ContentMultipleClients.tsx +++ b/src/renderer/Presentational/ContentMultipleClients/ContentMultipleClients.tsx @@ -127,8 +127,9 @@ const ContentMultipleClients = (props: { highestSlot: clClient?.stats.highestSlot, cpuLoad: (clClient?.stats.cpuLoad || 0) + (elClient?.stats.cpuLoad || 0), - diskUsage: - (clClient?.stats.diskUsage || 0) + (elClient?.stats.diskUsage || 0), + diskUsageGBs: + (clClient?.stats.diskUsageGBs || 0) + + (elClient?.stats.diskUsageGBs || 0), }, }; return nodeOverview; diff --git a/src/renderer/Presentational/ContentSingleClient/ContentSingleClient.tsx b/src/renderer/Presentational/ContentSingleClient/ContentSingleClient.tsx index 0abb0495f..51876d91d 100644 --- a/src/renderer/Presentational/ContentSingleClient/ContentSingleClient.tsx +++ b/src/renderer/Presentational/ContentSingleClient/ContentSingleClient.tsx @@ -8,49 +8,53 @@ import { Header } from '../../Generics/redesign/Header/Header'; import { container } from './contentSingleClient.css'; import { NodeOverviewProps } from '../../Generics/redesign/consts'; -// TODO: process retrieved client data into this format? -const client = { - name: 'geth', - version: 'v10', - type: 'client', - nodeType: 'execution', - status: { - updating: false, - sychronized: true, - initialized: false, - lowPeerCount: false, - updateAvailable: false, - blocksBehind: true, - noConnection: false, - stopped: false, - error: false, - }, - stats: { - peers: 15, - currentBlock: 1000, - highestBlock: 2000, - cpuLoad: 20, - diskUsage: 600, // in MB? - }, +// TODO: process retrieved client data into this format +export type SingleNodeContent = { + nodeId: string; + name: string; // lowercase for supported node icons + version?: string; + type?: string; + nodeType?: 'execution' | 'consensus' | string; + info?: string; + network?: string; + iconUrl?: string; + status?: { + updating?: boolean; + sychronized?: boolean; + initialized?: boolean; + lowPeerCount?: boolean; + updateAvailable?: boolean; + blocksBehind?: boolean; + noConnection?: boolean; + stopped?: boolean; + error?: boolean; + }; + stats?: { + peers?: number; + currentBlock?: number; + highestBlock?: number; + cpuLoad?: number; + diskUsageGBs?: number; // in MB? + }; }; -const ContentSingleClient = () => { +const ContentSingleClient = (props: SingleNodeContent) => { /* TODO: maybe a "provider" wrapper/manager to fetch data and handle states */ // TODO: refactor this out so that it can be shared with multiple, single, and validator? - const getNodeOverview = () => { - // useEffect, used only in Header and Metrics + // const getNodeOverview = () => { + // // useEffect, used only in Header and Metrics - const clientTypeLabel = - client.nodeType === 'consensus' ? 'Consensus Client' : 'Execution Client'; + // const clientTypeLabel = + // client.nodeType === 'consensus' ? 'Consensus Client' : 'Execution Client'; - return { - ...client, - info: `${clientTypeLabel} -- Ethereum mainnet`, // should be more flexible for other networks - }; - }; + // return { + // ...client, + // info: `${clientTypeLabel} -- Ethereum mainnet`, // should be more flexible for other networks + // }; + // }; - const nodeOverview = getNodeOverview(); + const nodeOverview = props; // TODO: retrieve initial data for all pages diff --git a/src/renderer/Warnings.tsx b/src/renderer/Warnings.tsx deleted file mode 100644 index 9466705cc..000000000 --- a/src/renderer/Warnings.tsx +++ /dev/null @@ -1,168 +0,0 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -import { useEffect, useState } from 'react'; -import { CgCloseO } from 'react-icons/cg'; -import { ImWarning } from 'react-icons/im'; - -import electron from './electronGlobal'; -import IconButton from './IconButton'; -import { useAppDispatch } from './state/hooks'; -import { updateSystemNumFreeDiskGB } from './state/node'; - -const Warnings = () => { - const dispatch = useAppDispatch(); - // const sGethDiskUsed = useAppSelector(selectNumGethDiskUsedGB); - // const sFreeDisk = useAppSelector(selectNumFreeDiskGB); - - const [sIsOpen, setIsOpen] = useState(false); - const [sHasBeenClosed, setHasBeenClosed] = useState(false); - const [sWarnings, setWarnings] = useState(); - const [sStorageWarning] = useState(); - - const getSystemWarnings = async () => { - const warnings = await electron.checkSystemHardware(); - setWarnings(warnings); - }; - - // useEffect(() => { - // const updateGethDiskUsed = async () => { - // // todo: fix warnings for multi-client - // const gethDiskUsed = await electron.getGethDiskUsed(); - // if (gethDiskUsed) { - // dispatch(updateNodeNumGethDiskUsedGB(gethDiskUsed)); - // } - // }; - // updateGethDiskUsed(); - // const intveral = setInterval(updateGethDiskUsed, 30000); - // return () => clearInterval(intveral); - // }, [dispatch]); - - useEffect(() => { - const updateFreeDisk = async () => { - const freeDisk = await electron.getSystemFreeDiskSpace(); - if (freeDisk) { - dispatch(updateSystemNumFreeDiskGB(freeDisk)); - } - }; - updateFreeDisk(); - const intveral = setInterval(updateFreeDisk, 30000); - return () => clearInterval(intveral); - }, [dispatch]); - - // useEffect(() => { - // if (sFreeDisk !== undefined && sGethDiskUsed !== undefined) { - // if (sNodeConfig?.syncMode === 'light') { - // if (sFreeDisk < 2) { - // setStorageWarning(true); - // } else { - // setStorageWarning(false); - // } - // } else { - // // eslint-disable-next-line no-lonely-if - // if (sGethDiskUsed + sFreeDisk > 1000) { - // setStorageWarning(false); - // } else { - // setStorageWarning(true); - // } - // } - // } - // }, [sGethDiskUsed, sFreeDisk, sStorageWarning, sNodeConfig]); - - useEffect(() => { - // don't show the warning if it has already been closed - if (sHasBeenClosed) { - return; - } - if ((sWarnings && sWarnings.length > 0) || sStorageWarning) { - setIsOpen(true); - } else { - setIsOpen(false); - } - }, [sHasBeenClosed, sWarnings, sStorageWarning]); - - useEffect(() => { - getSystemWarnings(); - }, []); - - return ( -
- - - -
- {sWarnings?.map((warning) => { - return ( -
- - {warning} -
- ); - })} - {/* {sStorageWarning && ( -
- {sNodeConfig?.syncMode === 'light' ? ( - - - At least 2GB of storage is required to run an Ethereum light - client. Your computer does not have enough free SSD storage - space. - - ) : ( - - - At least 1 TB of storage is required to run an Ethereum Node. - Your computer does not have enough free SSD storage space. - - )} -
- )} */} - {((sWarnings && sWarnings.length > 0) || sStorageWarning) && ( -
- - Please visit ethereum.org to see computer hardware requirements at{' '} - - ethereum.org/run-a-node - - -
- - Or consider using light client mode available in Settings > - Node Configuration{' '} - - geth.ethereum.org/docs/interface/les - - -
- )} -
- - { - setIsOpen(false); - setHasBeenClosed(true); - }} - style={{ paddingRight: 0, paddingTop: 0 }} - > - - - -
- ); -}; -export default Warnings; diff --git a/src/renderer/app.css.ts b/src/renderer/app.css.ts index 02daeacbf..b0247e9c2 100644 --- a/src/renderer/app.css.ts +++ b/src/renderer/app.css.ts @@ -1,4 +1,4 @@ -import { style } from '@vanilla-extract/css'; +import { style, ComplexStyleRule } from '@vanilla-extract/css'; import { vars } from './Generics/redesign/theme.css'; export const dragWindowContainer = style({ @@ -10,8 +10,8 @@ export const dragWindowContainer = style({ top: 0, zIndex: 100, cursor: 'grab', - '&:hover': { + ':hover': { background: vars.color.background92, opacity: 0.3, }, -}); +} as ComplexStyleRule); // fix for lacking '-webkit-app-region' type diff --git a/src/renderer/reset.css b/src/renderer/reset.css index 66fdee045..293d3b1f1 100644 --- a/src/renderer/reset.css +++ b/src/renderer/reset.css @@ -1,90 +1,3 @@ -/* - * @NOTE: Prepend a `~` to css file paths that are in your node_modules - * See https://github.com/webpack-contrib/sass-loader#imports - */ - body { margin: 0; } - -/* ---- LEGACY CSS (for reference during transition ---- */ -/* body { - position: relative; - color: white; - height: 100vh; - background: linear-gradient( - 200.96deg, - #fedc2a -29.09%, - #dd5789 51.77%, - #7a2c9e 129.35% - ); - font-family: sans-serif; - overflow-y: hidden; - display: flex; - margin: 0; -} - -button { - background-color: white; - padding: 10px 20px; - border-radius: 10px; - border: none; - appearance: none; - font-size: 1.3rem; - box-shadow: 0px 8px 28px -6px rgba(24, 39, 75, 0.12), - 0px 18px 88px -4px rgba(24, 39, 75, 0.14); - transition: all ease-in 0.1s; - cursor: pointer; -} - -button:hover { - transform: scale(1.05); -} - -li { - list-style: none; -} - -a { - margin: 10px; - color: white; -} - -a:hover { - opacity: 1; - text-decoration: none; -} - -.Hello { - display: flex; - justify-content: center; - align-items: center; - margin: 20px 0; -} - -@keyframes spin { - from { - transform: scale(1) rotate(0deg); - } - to { - transform: scale(1) rotate(360deg); - } -} - -.spin { - animation: spin 10s infinite linear; -} - -.colored-circle { - display: inline-block; - margin-left: 1px; - margin-right: 1px; - margin-bottom: -2px; - border-radius: 50%; - border-style: solid; - border-width: 0.5px; - height: 10px; - width: 10px; - border: 0px; - background: 'grey'; -} */ diff --git a/src/stories/Generic/ClientCard.stories.tsx b/src/stories/Generic/ClientCard.stories.tsx index f917ab2b3..c35fd9a60 100644 --- a/src/stories/Generic/ClientCard.stories.tsx +++ b/src/stories/Generic/ClientCard.stories.tsx @@ -32,6 +32,6 @@ Nethermind.args = { currentSlot: 90, highestSlot: 190, cpuLoad: 82, - diskUsage: 5000, + diskUsageGBs: 5000, }, }; diff --git a/src/stories/Generic/Header.stories.tsx b/src/stories/Generic/Header.stories.tsx index c9826c8db..9053adf9c 100644 --- a/src/stories/Generic/Header.stories.tsx +++ b/src/stories/Generic/Header.stories.tsx @@ -31,6 +31,6 @@ Primary.args = { currentSlot: 90, highestSlot: 190, cpuLoad: 90, - diskUsage: 10000, + diskUsageGBs: 10000, }, }; diff --git a/src/stories/Generic/HeaderMetrics.stories.tsx b/src/stories/Generic/HeaderMetrics.stories.tsx index 2d6b820dc..bf8d29bf3 100644 --- a/src/stories/Generic/HeaderMetrics.stories.tsx +++ b/src/stories/Generic/HeaderMetrics.stories.tsx @@ -33,6 +33,6 @@ Primary.args = { currentSlot: 90, highestSlot: 190, cpuLoad: 90, - diskUsage: 10000 + diskUsageGBs: 10000 }, }; diff --git a/src/stories/Generic/MetricTypes.stories.tsx b/src/stories/Generic/MetricTypes.stories.tsx index c9ebc0d3c..10110a84a 100644 --- a/src/stories/Generic/MetricTypes.stories.tsx +++ b/src/stories/Generic/MetricTypes.stories.tsx @@ -24,5 +24,5 @@ Status.args = { export const Stats = Template.bind({}); Stats.args = { statsValue: 100, - statsType: 'diskUsage', + statsType: 'diskUsageGBs', }; diff --git a/src/stories/Presentational/ContentMultipleClients.stories.tsx b/src/stories/Presentational/ContentMultipleClients.stories.tsx index 254cf190f..f77ac58e6 100644 --- a/src/stories/Presentational/ContentMultipleClients.stories.tsx +++ b/src/stories/Presentational/ContentMultipleClients.stories.tsx @@ -40,7 +40,7 @@ Primary.args = { highestSlot: highestSlot, peers: 20, cpuLoad: 20, - diskUsage: 600, // in MB? + diskUsageGBs: 0.600, }, }, { @@ -64,7 +64,7 @@ Primary.args = { highestBlock: highestBlock, peers: 16, cpuLoad: 82, - diskUsage: 5000, + diskUsageGBs: 5.000, }, }, ], diff --git a/src/stories/Presentational/ContentSingleClient.stories.tsx b/src/stories/Presentational/ContentSingleClient.stories.tsx index 747272c34..3b399288e 100644 --- a/src/stories/Presentational/ContentSingleClient.stories.tsx +++ b/src/stories/Presentational/ContentSingleClient.stories.tsx @@ -8,9 +8,49 @@ export default { argTypes: {}, } as ComponentMeta; -const Template: ComponentStory = () => ( - +const Template: ComponentStory = (args) => ( + ); export const Primary = Template.bind({}); -Primary.args = {}; +Primary.args = { + nodeId: "1f916ffa-b5e8-421e-a9b2-622efc3e8223", + name: 'geth', + version: 'v10', + type: 'client', + nodeType: 'execution', + status: { + updating: false, + sychronized: true, + initialized: false, + lowPeerCount: false, + updateAvailable: false, + blocksBehind: true, + noConnection: false, + stopped: false, + error: false, + }, + stats: { + peers: 15, + currentBlock: 1000, + highestBlock: 2000, + cpuLoad: 20, + diskUsageGBs: 600, // in MB? + }, +}; + +export const LimitedData = Template.bind({}); +LimitedData.args = { + "nodeId": "1f916ffa-b5e8-421e-a9b2-622efc3e8223", + "name": "nethermind", + "type": 'client', + "nodeType": "L1/ExecutionClient", + "network": "Ethereum mainnet", + "status": { + "stopped": true, + "error": false + }, + "stats": { + "diskUsageGBs": 5.6 + } +}; From ed08b8a85ab09052bcb0f6e7d83cca29c3302322 Mon Sep 17 00:00:00 2001 From: jgresham Date: Thu, 3 Nov 2022 22:39:12 -0500 Subject: [PATCH 3/4] do not vert center node content --- src/renderer/App.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index 97b1c656d..2266f7c36 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -93,17 +93,7 @@ const MainScreen = () => { > -
- -
+