From cdcaf12d9dfad523130ed6c364fd94c730c36e82 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Wed, 9 Nov 2022 16:09:15 -0800 Subject: [PATCH 01/35] log and log messages wip --- .../redesign/LogMessage/LogMessage.tsx | 33 +++++++ .../Generics/redesign/LogMessage/Logs.tsx | 97 +++++++++++++++++++ .../redesign/LogMessage/logMessage.css.ts | 60 ++++++++++++ src/stories/Generic/Logs.stories.tsx | 17 ++++ 4 files changed, 207 insertions(+) create mode 100644 src/renderer/Generics/redesign/LogMessage/LogMessage.tsx create mode 100644 src/renderer/Generics/redesign/LogMessage/Logs.tsx create mode 100644 src/renderer/Generics/redesign/LogMessage/logMessage.css.ts create mode 100644 src/stories/Generic/Logs.stories.tsx diff --git a/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx new file mode 100644 index 000000000..c4924f9e0 --- /dev/null +++ b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx @@ -0,0 +1,33 @@ +import { + container, + infoStyle, + timestampStyle, + typeStyle, + messageStyle, +} from './logMessage.css'; + +export interface LogMessageProps { + /** + * Timestamp + */ + timestamp: string; + /** + * Type + */ + type: string; + /** + * Message> + */ + message: string; +} + +export const LogMessage = ({ timestamp, type, message }: LogMessageProps) => { + return ( +
+
i
+
{timestamp}
+
{type}
+
{message}
+
+ ); +}; diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx new file mode 100644 index 000000000..c420376c0 --- /dev/null +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -0,0 +1,97 @@ +// import { container } from './logsMessage.css'; +import { LogMessage } from './LogMessage'; + +export const Logs = () => { + const sLogs = [ + '2022-11-04 21:41:44.170+00:00 | main | INFO | Besu | Using LibEthPairings native alt bn128', + '2022-11-04 21:41:44.173+00:00 | main | INFO | Besu | Using the native implementation of the signature algorithm', + '2022-11-04 21:41:44.181+00:00 | main | INFO | Besu | Using the native implementation of the blake2bf algorithm', + '2022-11-04 21:41:44.187+00:00 | main | INFO | Besu | Starting Besu version: besu/v22.10.0/linux-x86_64/openjdk-java-11', + '2022-11-04 21:41:44.637+00:00 | main | INFO | Besu | Engine API authentication enabled without key file. Expect ephemeral jwt.hex file in datadir', + '2022-11-04 21:41:44.638+00:00 | main | WARN | Besu | --graphql-http-host has been ignored because --graphql-http-enabled was not defined on the command line.', + '2022-11-04 21:41:44.640+00:00 | main | INFO | Besu | Static Nodes file = /var/lib/besu/static-nodes.json', + '2022-11-04 21:41:44.644+00:00 | main | INFO | StaticNodesParser | StaticNodes file /var/lib/besu/static-nodes.json does not exist, no static connections will be created.', + '2022-11-04 21:41:44.645+00:00 | main | INFO | Besu | Connecting to 0 static nodes.', + '2022-11-04 21:41:44.651+00:00 | main | INFO | Besu | Security Module: localfile', + '2022-11-04 21:41:44.675+00:00 | main | INFO | RocksDBKeyValueStorageFactory | No existing database detected at /var/lib/besu. Using version 1', + '2022-11-04 21:41:46.365+00:00 | main | WARN | Besu | --tx-pool-future-max-by-account has been deprecated, use --tx-pool-limit-by-account-percentage instead.', + '2022-11-04 21:41:46.433+00:00 | main | INFO | KeyPairUtil | Generated new secp256k1 public key 0x3909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4f6af9615cbac0da5cb23fd51c101962c5a78085371d15760e32d675a763b36c9 and stored it to /var/lib/besu/key', + '2022-11-04 21:41:46.679+00:00 | main | INFO | ProtocolScheduleBuilder | Protocol schedule created with milestones: [Frontier: 0, Homestead: 1150000, DaoRecoveryInit: 1920000, DaoRecoveryTransition: 1920001, Homestead: 1920010, TangerineWhistle: 2463000, SpuriousDragon: 2675000, Byzantium: 4370000, Petersburg: 7280000, Istanbul: 9069000, MuirGlacier: 9200000, Berlin: 12244000, London: 12965000, ArrowGlacier: 13773000, GrayGlacier: 15050000]', + '2022-11-04 21:41:46.721+00:00 | main | INFO | ProtocolScheduleBuilder | Protocol schedule created with milestones: [Frontier: 0, Homestead: 1150000, DaoRecoveryInit: 1920000, DaoRecoveryTransition: 1920001, Homestead: 1920010, TangerineWhistle: 2463000, SpuriousDragon: 2675000, Byzantium: 4370000, Petersburg: 7280000, Istanbul: 9069000, MuirGlacier: 9200000, Berlin: 12244000, London: 12965000, ArrowGlacier: 13773000, GrayGlacier: 15050000]', + '2022-11-04 21:41:48.327+00:00 | main | INFO | TransactionPoolFactory | Enabling transaction pool', + '2022-11-04 21:41:48.330+00:00 | main | INFO | EthPeers | Updating the default best peer comparator', + '2022-11-04 21:41:48.351+00:00 | main | INFO | BesuControllerBuilder | TTD difficulty is present, creating initial sync for PoS', + '2022-11-04 21:41:48.391+00:00 | main | INFO | TransitionBesuControllerBuilder | TTD present, creating DefaultSynchronizer that stops propagating after finalization', + '2022-11-04 21:41:48.446+00:00 | main | INFO | RunnerBuilder | Detecting NAT service.', + '2022-11-04 21:41:48.763+00:00 | main | INFO | Runner | Starting external services ... ', + '2022-11-04 21:41:48.764+00:00 | main | INFO | JsonRpcHttpService | Starting JSON-RPC service on 0.0.0.0:8545', + '2022-11-04 21:41:48.897+00:00 | vert.x-eventloop-thread-1 | INFO | JsonRpcHttpService | JSON-RPC service started and listening on 0.0.0.0:8545', + '2022-11-04 21:41:48.898+00:00 | main | INFO | JsonRpcService | Starting JSON-RPC service on 0.0.0.0:8551', + '2022-11-04 21:41:48.907+00:00 | vert.x-eventloop-thread-1 | INFO | JsonRpcService | JSON-RPC service started and listening on 0.0.0.0:8551', + '2022-11-04 21:41:48.909+00:00 | main | INFO | WebSocketService | Starting Websocket service on 0.0.0.0:8546', + '2022-11-04 21:41:48.915+00:00 | vert.x-eventloop-thread-1 | INFO | WebSocketService | Websocket service started and listening on 0.0.0.0:8546', + '2022-11-04 21:41:48.919+00:00 | main | INFO | AutoTransactionLogBloomCachingService | Starting auto transaction log bloom caching service.', + '2022-11-04 21:41:48.928+00:00 | main | INFO | LogBloomCacheMetadata | Lookup cache metadata file in data directory: /var/lib/besu/caches', + '2022-11-04 21:41:48.954+00:00 | main | INFO | Runner | Starting Ethereum main loop ... ', + '2022-11-04 21:41:48.954+00:00 | main | INFO | NatService | No NAT environment detected so no service could be started', + '2022-11-04 21:41:48.954+00:00 | main | INFO | NetworkRunner | Starting Network.', + '2022-11-04 21:41:48.958+00:00 | main | INFO | DefaultP2PNetwork | Starting DNS discovery with URL enrtree://AKA3AM6LPBYEUDMVNU3BSVQJ5AD45Y7YPOHJLEF6W26QOE4VTUDPE@all.mainnet.ethdisco.net', + '2022-11-04 21:41:49.059+00:00 | nioEventLoopGroup-2-1 | INFO | RlpxAgent | P2P RLPx agent started and listening on /0.0.0.0:30303.', + '2022-11-04 21:41:49.074+00:00 | main | INFO | PeerDiscoveryAgent | Starting peer discovery agent on host=0.0.0.0, port=30303', + '2022-11-04 21:41:49.144+00:00 | vert.x-eventloop-thread-1 | INFO | VertxPeerDiscoveryAgent | Started peer discovery agent successfully, on effective host=0.0.0.0 and port=30303', + '2022-11-04 21:41:49.146+00:00 | main | INFO | PeerDiscoveryAgent | P2P peer discovery agent started and listening on /0.0.0.0:30303', + '2022-11-04 21:41:49.289+00:00 | main | INFO | PeerDiscoveryAgent | Writing node record to disk. NodeRecord{seq=1, publicKey=0x033909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4, udpAddress=Optional[/127.0.0.1:30303], tcpAddress=Optional[/127.0.0.1:30303], asBase64=-Jq4QNYoVoUVzexfQnLnqtQqQwJp9_fi5lyBZAJyFxkGT9UXJYziTbMvP-17sawmUkNPpHa06ye-F_z3BoMKioHCgeUBg2V0aMrJhPxk7ASDEYwwgmlkgnY0gmlwhH8AAAGJc2VjcDI1NmsxoQM5CauidPLQJU556JTqQWxi_VyB3hsNg2-4W2lq8ymG1IN0Y3CCdl-DdWRwgnZf, nodeId=0x1921901c6a2067327bafdc3c00de1f1eb8ae021b397961d3419de43a7a860578, customFields={tcp=30303, udp=30303, ip=0x7f000001, eth=[[0xfc64ec04, 0x118c30]], id=V4, secp256k1=0x033909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4}}', + '2022-11-04 21:41:49.490+00:00 | main | INFO | DefaultP2PNetwork | Enode URL enode://3909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4f6af9615cbac0da5cb23fd51c101962c5a78085371d15760e32d675a763b36c9@127.0.0.1:30303', + '2022-11-04 21:41:49.491+00:00 | main | INFO | DefaultP2PNetwork | Node address 0x00de1f1eb8ae021b397961d3419de43a7a860578', + '2022-11-04 21:41:49.512+00:00 | main | INFO | DefaultSynchronizer | Starting synchronizer.', + '2022-11-04 21:41:49.525+00:00 | main | INFO | FullSyncDownloader | Starting full sync.', + '2022-11-04 21:41:49.526+00:00 | main | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 0', + '2022-11-04 21:41:49.542+00:00 | main | INFO | Runner | Ethereum main loop is up.', + '2022-11-04 21:41:50.084+00:00 | nioEventLoopGroup-3-1 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 1', + '2022-11-04 21:41:50.349+00:00 | nioEventLoopGroup-3-5 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 1', + '2022-11-04 21:41:55.330+00:00 | EthScheduler-Timer-0 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', + '2022-11-04 21:41:55.483+00:00 | nioEventLoopGroup-3-5 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', + '2022-11-04 21:42:00.257+00:00 | nioEventLoopGroup-3-4 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 4', + '2022-11-04 21:42:05.261+00:00 | EthScheduler-Timer-0 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 2', + '2022-11-04 21:42:06.943+00:00 | nioEventLoopGroup-3-10 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', + '2022-11-04 21:42:10.840+00:00 | BesuCommand-Shutdown-Hook | INFO | DefaultSynchronizer | Stopping synchronizer', + '2022-11-04 21:42:10.843+00:00 | BesuCommand-Shutdown-Hook | INFO | NetworkRunner | Stopping Network.', + '2022-11-04 21:42:10.857+00:00 | BesuCommand-Shutdown-Hook | INFO | EthProtocolManager | Stopping eth Subprotocol.', + '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | EthProtocolManager | eth Subprotocol stopped.', + '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | NetworkRunner | Network stopped.', + '2022-11-04 21:42:10.958+00:00 | BesuCommand-Shutdown-Hook | INFO | AutoTransactionLogBloomCachingService | Shutting down Auto transaction logs caching service.', + '2022-11-04 21:42:10.960+00:00 | BesuCommand-Shutdown-Hook | INFO | NatService | No NAT environment detected so no service could be stopped', + '2022-11-04 21:42:11.041+00:00 | main | INFO | Besu | Using jemalloc', + '2022-11-04 21:42:11.041+00:00 | main | ERROR | Besu | Using jemalloc', + '2022-11-04 21:42:11.041+00:00 | main | WARN | Besu | Using jemalloc', + ]; + + const type = null; + + const getFormattedDate = (string: string) => { + const date = new Date(string); + const dateArray = date.toString().split(' '); + const ms = string.substring(20, 23); + return `${dateArray[1]} ${dateArray[2]} ${dateArray[4]}:${ms}`; + }; + + const filteredLogMessages = sLogs.map((log) => { + const logArray = log.split(' | '); + + const logObject = { + timestamp: getFormattedDate(logArray[0]), + type: logArray[2].trim().toLowerCase(), + message: `${logArray[3]} ${logArray[4]}`, + }; + + if (type === null || type === logObject.type) { + return ; + } + return null; + }); + return ( +
+
{filteredLogMessages}
+
+ ); +}; diff --git a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts new file mode 100644 index 000000000..51d0e0dbb --- /dev/null +++ b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts @@ -0,0 +1,60 @@ +import { style } from '@vanilla-extract/css'; +import { vars, common } from '../theme.css'; + +export const container = style({ + boxSizing: 'border-box', + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-start', + padding: '4px 0px', + gap: 8, + borderBottom: '1px solid rgba(0, 0, 2, 0.04)', + flex: 'none', + order: 2, + alignSelf: 'stretch', + flexGrow: 0, + + color: common.color.black90, + fontFamily: `'SF Mono', SFMono-Regular, ui-monospace, + 'DejaVu Sans Mono', Menlo, Consolas, monospace`, + fontStyle: 'normal', + fontWeight: 400, + fontSize: '11px', + lineHeight: '14px', + + letterSpacing: '0.24px', +}); + +export const infoStyle = style({}); + +export const timestampStyle = style({ + width: 133, + flex: 'none', + order: 1, + flexGrow: 0, +}); + +export const typeStyle = style({ + textTransform: 'uppercase', + width: 35, + flex: 'none', + order: 2, + flexGrow: 0, + selectors: { + [`&.info`]: { + color: common.color.blue600, + }, + [`&.warn`]: { + color: common.color.orange500, + }, + [`&.error`]: { + color: common.color.red500, + }, + }, +}); + +export const messageStyle = style({ + flex: 'none', + order: 3, + flexGrow: 1, +}); diff --git a/src/stories/Generic/Logs.stories.tsx b/src/stories/Generic/Logs.stories.tsx new file mode 100644 index 000000000..c83f705ac --- /dev/null +++ b/src/stories/Generic/Logs.stories.tsx @@ -0,0 +1,17 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +import { Logs } from '../../renderer/Generics/redesign/LogMessage/Logs'; + +export default { + title: 'Generic/Logs', + component: Logs, + argTypes: { + backgroundColor: { control: 'color' }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const Primary = Template.bind({}); + +Primary.args = {}; From 100dcbd5bb876294a9c35e5cd4a3a21a1870101e Mon Sep 17 00:00:00 2001 From: corn-potage Date: Wed, 9 Nov 2022 22:20:52 -0800 Subject: [PATCH 02/35] added tooltip, improved filter --- .../redesign/LogMessage/LogMessage.tsx | 10 ++- .../Generics/redesign/LogMessage/Logs.tsx | 62 ++++++++++++------- .../redesign/LogMessage/logMessage.css.ts | 4 +- .../Generics/redesign/Tooltip/Tooltip.tsx | 24 +++++++ .../Generics/redesign/Tooltip/tooltip.css.ts | 27 ++++++++ src/stories/Generic/Tooltip.stories.tsx | 22 +++++++ 6 files changed, 123 insertions(+), 26 deletions(-) create mode 100644 src/renderer/Generics/redesign/Tooltip/Tooltip.tsx create mode 100644 src/renderer/Generics/redesign/Tooltip/tooltip.css.ts create mode 100644 src/stories/Generic/Tooltip.stories.tsx diff --git a/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx index c4924f9e0..079001fc7 100644 --- a/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx +++ b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx @@ -1,3 +1,4 @@ +import { Icon } from '../Icon/Icon'; import { container, infoStyle, @@ -22,9 +23,16 @@ export interface LogMessageProps { } export const LogMessage = ({ timestamp, type, message }: LogMessageProps) => { + const getTooltip = () => { + if (true) { + return ; + } + return null; + }; + const tooltip = getTooltip(); return (
-
i
+
{tooltip}
{timestamp}
{type}
{message}
diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index c420376c0..a3de4e705 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -1,6 +1,22 @@ // import { container } from './logsMessage.css'; import { LogMessage } from './LogMessage'; +const getFormattedDate = (string: string) => { + const date = new Date(string); + const dateArray = date.toString().split(' '); + const ms = string.substring(20, 23); + return `${dateArray[1]} ${dateArray[2]} ${dateArray[4]}:${ms}`; +}; + +const getLogObject = (log: string) => { + const logArray = log.split(' | '); + return { + timestamp: getFormattedDate(logArray[0]), + type: logArray[2].trim().toLowerCase(), + message: `${logArray[3]} ${logArray[4]}`, + }; +}; + export const Logs = () => { const sLogs = [ '2022-11-04 21:41:44.170+00:00 | main | INFO | Besu | Using LibEthPairings native alt bn128', @@ -66,32 +82,30 @@ export const Logs = () => { '2022-11-04 21:42:11.041+00:00 | main | WARN | Besu | Using jemalloc', ]; - const type = null; - - const getFormattedDate = (string: string) => { - const date = new Date(string); - const dateArray = date.toString().split(' '); - const ms = string.substring(20, 23); - return `${dateArray[1]} ${dateArray[2]} ${dateArray[4]}:${ms}`; + const filterQuery = { + type: 'warn', + text: 'use', + date: '', }; - const filteredLogMessages = sLogs.map((log) => { - const logArray = log.split(' | '); - - const logObject = { - timestamp: getFormattedDate(logArray[0]), - type: logArray[2].trim().toLowerCase(), - message: `${logArray[3]} ${logArray[4]}`, - }; + const filteredLogMessages = sLogs + .filter((log: string) => { + const logObject = getLogObject(log); - if (type === null || type === logObject.type) { + if ( + (!filterQuery.type || logObject.type === filterQuery.type) && + (!filterQuery.text || + (filterQuery.text !== '' && + logObject.message.includes(filterQuery.text))) && + !filterQuery.date + ) { + return true; + } + return false; + }) + .map((log) => { + const logObject = getLogObject(log); return ; - } - return null; - }); - return ( -
-
{filteredLogMessages}
-
- ); + }); + return
{filteredLogMessages}
; }; diff --git a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts index 51d0e0dbb..9b8b2dd14 100644 --- a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts @@ -25,7 +25,9 @@ export const container = style({ letterSpacing: '0.24px', }); -export const infoStyle = style({}); +export const infoStyle = style({ + color: common.color.black25, +}); export const timestampStyle = style({ width: 133, diff --git a/src/renderer/Generics/redesign/Tooltip/Tooltip.tsx b/src/renderer/Generics/redesign/Tooltip/Tooltip.tsx new file mode 100644 index 000000000..157d162f2 --- /dev/null +++ b/src/renderer/Generics/redesign/Tooltip/Tooltip.tsx @@ -0,0 +1,24 @@ +import { container, titleStyle, contentStyle } from './tooltip.css'; + +export interface TooltipProps { + /** + * What's the title? + */ + title: string; + /** + * Is there content? + */ + content?: string; +} + +/** + * Primary UI component for user interaction + */ +export const Tooltip = ({ title, content }: TooltipProps) => { + return ( +
+
{title}
+
{content}
+
+ ); +}; diff --git a/src/renderer/Generics/redesign/Tooltip/tooltip.css.ts b/src/renderer/Generics/redesign/Tooltip/tooltip.css.ts new file mode 100644 index 000000000..1849e1a50 --- /dev/null +++ b/src/renderer/Generics/redesign/Tooltip/tooltip.css.ts @@ -0,0 +1,27 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '../theme.css'; + +// required to export even if not using in a component +export const container = style({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + padding: 8, + gap: 2, + fontSize: '11px', + lineHeight: '14px', + width: 177, + color: vars.color.font70, + border: vars.components.menuBorder, + boxShadow: vars.color.elevation4boxShadow, + backgroundColor: vars.components.menuBackground, + borderRadius: 5, +}); + +export const titleStyle = style({ + fontWeight: 600, +}); + +export const contentStyle = style({ + fontWeight: 400, +}); diff --git a/src/stories/Generic/Tooltip.stories.tsx b/src/stories/Generic/Tooltip.stories.tsx new file mode 100644 index 000000000..df7a61081 --- /dev/null +++ b/src/stories/Generic/Tooltip.stories.tsx @@ -0,0 +1,22 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +import { Tooltip } from '../../renderer/Generics/redesign/Tooltip/Tooltip'; + +export default { + title: 'Generic/Tooltip', + component: Tooltip, + argTypes: { + backgroundColor: { control: 'color' }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Primary = Template.bind({}); + +Primary.args = { + title: 'Low peer count', + content: 'Try lorem ipsum sit dolor amet.', +}; From 95d79feb124e451c07542ec9fd206b398fe9fab3 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Fri, 11 Nov 2022 14:15:47 -0800 Subject: [PATCH 03/35] replace time function with moment, date range wip --- .../redesign/LogMessage/LogMessage.tsx | 10 ++--- .../Generics/redesign/LogMessage/Logs.tsx | 43 +++++++++++++------ .../redesign/LogMessage/logMessage.css.ts | 2 +- 3 files changed, 35 insertions(+), 20 deletions(-) diff --git a/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx index 079001fc7..fd5a75a4f 100644 --- a/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx +++ b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx @@ -2,16 +2,16 @@ import { Icon } from '../Icon/Icon'; import { container, infoStyle, - timestampStyle, + dateStyle, typeStyle, messageStyle, } from './logMessage.css'; export interface LogMessageProps { /** - * Timestamp + * Date */ - timestamp: string; + date: string; /** * Type */ @@ -22,7 +22,7 @@ export interface LogMessageProps { message: string; } -export const LogMessage = ({ timestamp, type, message }: LogMessageProps) => { +export const LogMessage = ({ date, type, message }: LogMessageProps) => { const getTooltip = () => { if (true) { return ; @@ -33,7 +33,7 @@ export const LogMessage = ({ timestamp, type, message }: LogMessageProps) => { return (
{tooltip}
-
{timestamp}
+
{date}
{type}
{message}
diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index a3de4e705..8ff2d060d 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -1,22 +1,36 @@ // import { container } from './logsMessage.css'; +import moment from 'moment'; import { LogMessage } from './LogMessage'; -const getFormattedDate = (string: string) => { - const date = new Date(string); - const dateArray = date.toString().split(' '); - const ms = string.substring(20, 23); - return `${dateArray[1]} ${dateArray[2]} ${dateArray[4]}:${ms}`; -}; - const getLogObject = (log: string) => { const logArray = log.split(' | '); return { - timestamp: getFormattedDate(logArray[0]), + timestamp: logArray[0], + date: moment(logArray[0]).format('MMM MM HH:MM:ss:SSS'), type: logArray[2].trim().toLowerCase(), message: `${logArray[3]} ${logArray[4]}`, }; }; +const isWithinTimeframe = (timestamp: string, timeframe) => { + const format = 'YYYY-MM-DD hh:mm:ss'; + + const logTime = moment(new Date(timestamp), format); + const nowTime = moment(); + const beforeTime = moment().subtract(30, 'minutes'); + console.log(logTime); + console.log(nowTime); + console.log(beforeTime); + + console.log(logTime.isBetween(moment(), moment().subtract(30, 'hours'))); + + // console.log( + // moment(timestamp) + // .format(format) + // .isBetween(moment(), moment().subtract(30, 'minutes').toDate().getTime()) + // ); +}; + export const Logs = () => { const sLogs = [ '2022-11-04 21:41:44.170+00:00 | main | INFO | Besu | Using LibEthPairings native alt bn128', @@ -77,15 +91,15 @@ export const Logs = () => { '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | NetworkRunner | Network stopped.', '2022-11-04 21:42:10.958+00:00 | BesuCommand-Shutdown-Hook | INFO | AutoTransactionLogBloomCachingService | Shutting down Auto transaction logs caching service.', '2022-11-04 21:42:10.960+00:00 | BesuCommand-Shutdown-Hook | INFO | NatService | No NAT environment detected so no service could be stopped', - '2022-11-04 21:42:11.041+00:00 | main | INFO | Besu | Using jemalloc', - '2022-11-04 21:42:11.041+00:00 | main | ERROR | Besu | Using jemalloc', - '2022-11-04 21:42:11.041+00:00 | main | WARN | Besu | Using jemalloc', + '2022-11-10 21:42:11.041+00:00 | main | INFO | Besu | Using jemalloc', + '2022-11-11 21:42:11.041+00:00 | main | ERROR | Besu | Using jemalloc', + '2022-11-11 21:35:11.041+00:00 | main | WARN | Besu | Using jemalloc', ]; const filterQuery = { type: 'warn', - text: 'use', - date: '', + text: '', + timeframe: '', }; const filteredLogMessages = sLogs @@ -97,7 +111,8 @@ export const Logs = () => { (!filterQuery.text || (filterQuery.text !== '' && logObject.message.includes(filterQuery.text))) && - !filterQuery.date + !filterQuery.timeframe + // isWithinTimeframe(logObject.timestamp, filterQuery.timeframe) ) { return true; } diff --git a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts index 9b8b2dd14..a6f1d895e 100644 --- a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts @@ -29,7 +29,7 @@ export const infoStyle = style({ color: common.color.black25, }); -export const timestampStyle = style({ +export const dateStyle = style({ width: 133, flex: 'none', order: 1, From 58fc61d14d40a500a37641cc2e30d4e0095749d4 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Fri, 11 Nov 2022 16:26:07 -0800 Subject: [PATCH 04/35] rough implementation of all filters --- .../Generics/redesign/Input/Input.tsx | 19 ++- .../Generics/redesign/LogMessage/Logs.tsx | 143 +++++++++++++----- .../Generics/redesign/LogMessage/logs.css.ts | 11 ++ 3 files changed, 135 insertions(+), 38 deletions(-) create mode 100644 src/renderer/Generics/redesign/LogMessage/logs.css.ts diff --git a/src/renderer/Generics/redesign/Input/Input.tsx b/src/renderer/Generics/redesign/Input/Input.tsx index 0f9af5019..830dd44e6 100644 --- a/src/renderer/Generics/redesign/Input/Input.tsx +++ b/src/renderer/Generics/redesign/Input/Input.tsx @@ -13,9 +13,23 @@ export interface InputProps { * Is this input field disabled? */ disabled?: boolean; + /** + * Is there an onChange event when a user types something? + */ + onChange?: () => void; } -const Input = ({ placeholder, required, disabled }: InputProps) => { +const Input = ({ + placeholder, + required, + disabled, + onChange = () => {}, +}: InputProps) => { + const onChangeAction = (evt) => { + if (onChange) { + onChange(evt); + } + }; return ( { placeholder, ...(disabled && { disabled }), ...(required && { required }), + onChange: (evt) => { + onChangeAction(evt); + }, }} /> ); diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index 8ff2d060d..78f560eb1 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -1,6 +1,21 @@ -// import { container } from './logsMessage.css'; +import { useState } from 'react'; import moment from 'moment'; +import { container } from './logs.css'; +import { Menu } from '../Menu/Menu'; +import { MenuItem } from '../MenuItem/MenuItem'; import { LogMessage } from './LogMessage'; +import Input from '../Input/Input'; + +const timeframes = { + '30MINUTES': 30, + '1HOUR': 60, + '6HOURS': 360, + '12HOURS': 720, + '1DAY': 1440, + '3DAYS': 4320, + '1WEEK': 10080, + '1MONTH': 43800, +}; const getLogObject = (log: string) => { const logArray = log.split(' | '); @@ -12,23 +27,10 @@ const getLogObject = (log: string) => { }; }; -const isWithinTimeframe = (timestamp: string, timeframe) => { - const format = 'YYYY-MM-DD hh:mm:ss'; - - const logTime = moment(new Date(timestamp), format); - const nowTime = moment(); - const beforeTime = moment().subtract(30, 'minutes'); - console.log(logTime); - console.log(nowTime); - console.log(beforeTime); - - console.log(logTime.isBetween(moment(), moment().subtract(30, 'hours'))); - - // console.log( - // moment(timestamp) - // .format(format) - // .isBetween(moment(), moment().subtract(30, 'minutes').toDate().getTime()) - // ); +const isWithinTimeframe = (timestamp: string, timeframe: number) => { + const nowTime = moment().format(); + const beforeTime = moment().subtract(timeframe, 'minutes').format(); + return moment(timestamp).isBetween(beforeTime, nowTime); }; export const Logs = () => { @@ -90,37 +92,104 @@ export const Logs = () => { '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | EthProtocolManager | eth Subprotocol stopped.', '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | NetworkRunner | Network stopped.', '2022-11-04 21:42:10.958+00:00 | BesuCommand-Shutdown-Hook | INFO | AutoTransactionLogBloomCachingService | Shutting down Auto transaction logs caching service.', - '2022-11-04 21:42:10.960+00:00 | BesuCommand-Shutdown-Hook | INFO | NatService | No NAT environment detected so no service could be stopped', - '2022-11-10 21:42:11.041+00:00 | main | INFO | Besu | Using jemalloc', + '2022-11-11 21:42:10.960+00:00 | BesuCommand-Shutdown-Hook | INFO | NatService | No NAT environment detected so no service could be stopped', + '2022-11-11 21:42:11.041+00:00 | main | INFO | Besu | Using jemalloc', '2022-11-11 21:42:11.041+00:00 | main | ERROR | Besu | Using jemalloc', - '2022-11-11 21:35:11.041+00:00 | main | WARN | Besu | Using jemalloc', + '2022-11-11 22:35:11.041+00:00 | main | WARN | Besu | Using jemalloc', ]; - const filterQuery = { - type: 'warn', - text: '', - timeframe: '', - }; + const [timeframeFilter, setTimeframeFilter] = useState(0); + const [textFilter, setTextFilter] = useState(''); + const [typeFilter, setTypeFilter] = useState(''); const filteredLogMessages = sLogs .filter((log: string) => { const logObject = getLogObject(log); if ( - (!filterQuery.type || logObject.type === filterQuery.type) && - (!filterQuery.text || - (filterQuery.text !== '' && - logObject.message.includes(filterQuery.text))) && - !filterQuery.timeframe - // isWithinTimeframe(logObject.timestamp, filterQuery.timeframe) + (typeFilter === '' || logObject.type === typeFilter) && + (textFilter === '' || logObject.message.includes(textFilter)) && + (timeframeFilter === 0 || + isWithinTimeframe(logObject.timestamp, timeframeFilter)) ) { return true; } return false; }) - .map((log) => { - const logObject = getLogObject(log); - return ; - }); - return
{filteredLogMessages}
; + .map((log) => ); + + return ( + <> +
+ + setTimeframeFilter(timeframes['30MINUTES'])} + /> + setTimeframeFilter(timeframes['1HOUR'])} + /> + setTimeframeFilter(timeframes['6HOURS'])} + /> + setTimeframeFilter(timeframes['12HOURS'])} + /> + setTimeframeFilter(timeframes['1DAY'])} + /> + setTimeframeFilter(timeframes['3DAYS'])} + /> + setTimeframeFilter(timeframes['1WEEK'])} + /> + setTimeframeFilter(timeframes['1MONTH'])} + /> + + + setTypeFilter('info')} + /> + setTypeFilter('warn')} + /> + setTypeFilter('error')} + /> + + { + setTextFilter(evt.target.value); + }} + /> +
+
{filteredLogMessages}
+ + ); }; diff --git a/src/renderer/Generics/redesign/LogMessage/logs.css.ts b/src/renderer/Generics/redesign/LogMessage/logs.css.ts new file mode 100644 index 000000000..33d0f6194 --- /dev/null +++ b/src/renderer/Generics/redesign/LogMessage/logs.css.ts @@ -0,0 +1,11 @@ +import { style } from '@vanilla-extract/css'; +import { vars, common } from '../theme.css'; + +export const container = style({ + boxSizing: 'border-box', + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-start', + padding: '4px 0px', + gap: 8, +}); From 2b353598cf945a3cbcd3c39997e9801fb49700e3 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Fri, 11 Nov 2022 17:18:50 -0800 Subject: [PATCH 05/35] added guard logic to deselect choices. multiple type logic next --- .../Generics/redesign/Input/Input.tsx | 7 ++-- .../Generics/redesign/LogMessage/Logs.tsx | 42 ++++++++++++------- 2 files changed, 32 insertions(+), 17 deletions(-) diff --git a/src/renderer/Generics/redesign/Input/Input.tsx b/src/renderer/Generics/redesign/Input/Input.tsx index 830dd44e6..ed559561d 100644 --- a/src/renderer/Generics/redesign/Input/Input.tsx +++ b/src/renderer/Generics/redesign/Input/Input.tsx @@ -1,3 +1,4 @@ +import { ChangeEvent } from 'react'; import { container } from './input.css'; export interface InputProps { @@ -16,7 +17,7 @@ export interface InputProps { /** * Is there an onChange event when a user types something? */ - onChange?: () => void; + onChange?: (text: string) => void; } const Input = ({ @@ -25,9 +26,9 @@ const Input = ({ disabled, onChange = () => {}, }: InputProps) => { - const onChangeAction = (evt) => { + const onChangeAction = (evt: ChangeEvent) => { if (onChange) { - onChange(evt); + onChange(evt.target.value); } }; return ( diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index 78f560eb1..ba67f73f7 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { SetStateAction, useState } from 'react'; import moment from 'moment'; import { container } from './logs.css'; import { Menu } from '../Menu/Menu'; @@ -101,6 +101,20 @@ export const Logs = () => { const [timeframeFilter, setTimeframeFilter] = useState(0); const [textFilter, setTextFilter] = useState(''); const [typeFilter, setTypeFilter] = useState(''); + const onClickSetTypeFilter = (type: string) => { + if (typeFilter !== '') { + setTypeFilter(''); + } else { + setTypeFilter(type); + } + }; + const onClickSetTimeframeFilter = (timeframe: SetStateAction) => { + if (timeframeFilter !== 0 && timeframeFilter === timeframe) { + setTimeframeFilter(0); + } else { + setTimeframeFilter(timeframe); + } + }; const filteredLogMessages = sLogs .filter((log: string) => { @@ -125,42 +139,42 @@ export const Logs = () => { setTimeframeFilter(timeframes['30MINUTES'])} + onClick={() => onClickSetTimeframeFilter(timeframes['30MINUTES'])} /> setTimeframeFilter(timeframes['1HOUR'])} + onClick={() => onClickSetTimeframeFilter(timeframes['1HOUR'])} /> setTimeframeFilter(timeframes['6HOURS'])} + onClick={() => onClickSetTimeframeFilter(timeframes['6HOURS'])} /> setTimeframeFilter(timeframes['12HOURS'])} + onClick={() => onClickSetTimeframeFilter(timeframes['12HOURS'])} /> setTimeframeFilter(timeframes['1DAY'])} + onClick={() => onClickSetTimeframeFilter(timeframes['1DAY'])} /> setTimeframeFilter(timeframes['3DAYS'])} + onClick={() => onClickSetTimeframeFilter(timeframes['3DAYS'])} /> setTimeframeFilter(timeframes['1WEEK'])} + onClick={() => onClickSetTimeframeFilter(timeframes['1WEEK'])} /> setTimeframeFilter(timeframes['1MONTH'])} + onClick={() => onClickSetTimeframeFilter(timeframes['1MONTH'])} /> @@ -168,24 +182,24 @@ export const Logs = () => { variant="checkbox" status="blue" text="Info" - onClick={() => setTypeFilter('info')} + onClick={() => onClickSetTypeFilter('info')} /> setTypeFilter('warn')} + onClick={() => onClickSetTypeFilter('warn')} /> setTypeFilter('error')} + onClick={() => onClickSetTypeFilter('error')} /> { - setTextFilter(evt.target.value); + onChange={(text: string) => { + setTextFilter(text); }} />
From b4608af9436a1ed87cce41f9ee888c332c9c4a84 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Fri, 11 Nov 2022 18:21:32 -0800 Subject: [PATCH 06/35] filter positioning --- .../Generics/redesign/LogMessage/Logs.tsx | 244 +++++++++++++----- .../Generics/redesign/LogMessage/logs.css.ts | 32 ++- src/renderer/Generics/redesign/Menu/Menu.tsx | 2 +- 3 files changed, 207 insertions(+), 71 deletions(-) diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index ba67f73f7..0a145863c 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -1,10 +1,20 @@ import { SetStateAction, useState } from 'react'; import moment from 'moment'; -import { container } from './logs.css'; +import { + contentHeader, + filterContainer, + textFilterContainer, + typeFilterContainer, + timeframeFilterContainer, + typeFilterMenu, + filterMenu, +} from './logs.css'; import { Menu } from '../Menu/Menu'; import { MenuItem } from '../MenuItem/MenuItem'; import { LogMessage } from './LogMessage'; import Input from '../Input/Input'; +import Button from '../Button/Button'; +import { HeaderButton } from '../HeaderButton/HeaderButton'; const timeframes = { '30MINUTES': 30, @@ -98,6 +108,12 @@ export const Logs = () => { '2022-11-11 22:35:11.041+00:00 | main | WARN | Besu | Using jemalloc', ]; + const [isFilterBarDisplayed, setIsFilterBarDisplayed] = + useState(false); + const [isTypeFilterDisplayed, setIsTypeFilterDisplayed] = + useState(false); + const [isTimeframeFilterDisplayed, setIsTimeframeFilterDisplayed] = + useState(false); const [timeframeFilter, setTimeframeFilter] = useState(0); const [textFilter, setTextFilter] = useState(''); const [typeFilter, setTypeFilter] = useState(''); @@ -134,75 +150,169 @@ export const Logs = () => { return ( <> -
- - onClickSetTimeframeFilter(timeframes['30MINUTES'])} - /> - onClickSetTimeframeFilter(timeframes['1HOUR'])} - /> - onClickSetTimeframeFilter(timeframes['6HOURS'])} - /> - onClickSetTimeframeFilter(timeframes['12HOURS'])} - /> - onClickSetTimeframeFilter(timeframes['1DAY'])} - /> - onClickSetTimeframeFilter(timeframes['3DAYS'])} - /> - onClickSetTimeframeFilter(timeframes['1WEEK'])} - /> - onClickSetTimeframeFilter(timeframes['1MONTH'])} - /> - - - onClickSetTypeFilter('info')} - /> - onClickSetTypeFilter('warn')} - /> - onClickSetTypeFilter('error')} - /> - - { - setTextFilter(text); +
+ { + if (isFilterBarDisplayed) { + setIsFilterBarDisplayed(false); + } else { + setIsFilterBarDisplayed(true); + } }} />
+ {isFilterBarDisplayed && ( +
+
+ { + setTextFilter(text); + }} + /> +
+
{ + if (!event.currentTarget.contains(event.relatedTarget)) { + setIsTypeFilterDisplayed(false); + } + }} + > +
+
{ + if (!event.currentTarget.contains(event.relatedTarget)) { + setIsTimeframeFilterDisplayed(false); + } + }} + > +
+
+ )}
{filteredLogMessages}
); diff --git a/src/renderer/Generics/redesign/LogMessage/logs.css.ts b/src/renderer/Generics/redesign/LogMessage/logs.css.ts index 33d0f6194..fe81772d4 100644 --- a/src/renderer/Generics/redesign/LogMessage/logs.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logs.css.ts @@ -1,11 +1,37 @@ import { style } from '@vanilla-extract/css'; import { vars, common } from '../theme.css'; -export const container = style({ +export const contentHeader = style({ + position: 'relative', +}); + +export const filterContainer = style({ + width: '100%', + position: 'absolute', boxSizing: 'border-box', display: 'flex', flexDirection: 'row', alignItems: 'flex-start', - padding: '4px 0px', - gap: 8, + padding: '8px 16px', + gap: 4, + background: common.color.white100, + borderBottom: `1px solid rgba(0, 0, 0, 0.08)`, + boxShadow: vars.color.elevation2boxShadow, +}); + +export const textFilterContainer = style({ + width: 200, +}); + +export const filterMenu = style({ + position: 'absolute', + top: 34, +}); + +export const typeFilterContainer = style({ + width: 158, + position: 'relative', +}); +export const timeframeFilterContainer = style({ + width: 148, }); diff --git a/src/renderer/Generics/redesign/Menu/Menu.tsx b/src/renderer/Generics/redesign/Menu/Menu.tsx index d1b9f137c..e639c9d76 100644 --- a/src/renderer/Generics/redesign/Menu/Menu.tsx +++ b/src/renderer/Generics/redesign/Menu/Menu.tsx @@ -4,7 +4,7 @@ export interface MenuProps { /** * What's the width? */ - width: number; + width?: number; /** * Menu Items? */ From 6c66c7f826e25559eb9eccf8aedd6bd427585f55 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Fri, 11 Nov 2022 18:47:05 -0800 Subject: [PATCH 07/35] additional styling --- .../Generics/redesign/LogMessage/Logs.tsx | 320 +++++++++--------- .../Generics/redesign/LogMessage/logs.css.ts | 14 + 2 files changed, 179 insertions(+), 155 deletions(-) diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index 0a145863c..e2c718a2b 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -1,13 +1,14 @@ import { SetStateAction, useState } from 'react'; import moment from 'moment'; import { + container, contentHeader, filterContainer, textFilterContainer, typeFilterContainer, timeframeFilterContainer, - typeFilterMenu, filterMenu, + logsContainer, } from './logs.css'; import { Menu } from '../Menu/Menu'; import { MenuItem } from '../MenuItem/MenuItem'; @@ -150,170 +151,179 @@ export const Logs = () => { return ( <> -
- { - if (isFilterBarDisplayed) { +
+
{ + if (!event.currentTarget.contains(event.relatedTarget)) { setIsFilterBarDisplayed(false); - } else { - setIsFilterBarDisplayed(true); } }} - /> -
- {isFilterBarDisplayed && ( -
-
- { - setTextFilter(text); - }} - /> -
-
{ - if (!event.currentTarget.contains(event.relatedTarget)) { - setIsTypeFilterDisplayed(false); + > + { + if (isFilterBarDisplayed) { + setIsFilterBarDisplayed(false); + } else { + setIsFilterBarDisplayed(true); } }} - > -
+
{ + if (!event.currentTarget.contains(event.relatedTarget)) { + setIsTimeframeFilterDisplayed(false); + } + }} + > +
- )} -
+
+ )}
- )} -
{filteredLogMessages}
+
{filteredLogMessages}
+
); }; diff --git a/src/renderer/Generics/redesign/LogMessage/logs.css.ts b/src/renderer/Generics/redesign/LogMessage/logs.css.ts index fe81772d4..52e90e5a5 100644 --- a/src/renderer/Generics/redesign/LogMessage/logs.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logs.css.ts @@ -1,7 +1,20 @@ import { style } from '@vanilla-extract/css'; import { vars, common } from '../theme.css'; +export const container = style({ + position: 'relative', +}); + export const contentHeader = style({ + position: 'absolute', + width: '100%', + background: 'white', + height: 52, + zIndex: 1, +}); + +export const logsContainer = style({ + paddingTop: 52, position: 'relative', }); @@ -34,4 +47,5 @@ export const typeFilterContainer = style({ }); export const timeframeFilterContainer = style({ width: 148, + position: 'relative', }); From 20a89ad7c57ecfde4246e34de6df2ea42c237023 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Mon, 14 Nov 2022 12:29:58 -0800 Subject: [PATCH 08/35] added value to input --- src/renderer/Generics/redesign/Input/Input.tsx | 2 ++ src/renderer/Generics/redesign/LogMessage/Logs.tsx | 3 +++ 2 files changed, 5 insertions(+) diff --git a/src/renderer/Generics/redesign/Input/Input.tsx b/src/renderer/Generics/redesign/Input/Input.tsx index ed559561d..d1e015ad4 100644 --- a/src/renderer/Generics/redesign/Input/Input.tsx +++ b/src/renderer/Generics/redesign/Input/Input.tsx @@ -21,6 +21,7 @@ export interface InputProps { } const Input = ({ + value, placeholder, required, disabled, @@ -42,6 +43,7 @@ const Input = ({ onChange: (evt) => { onChangeAction(evt); }, + value, }} /> ); diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index e2c718a2b..a43882f19 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -154,6 +154,8 @@ export const Logs = () => {
{ if (!event.currentTarget.contains(event.relatedTarget)) { setIsFilterBarDisplayed(false); @@ -174,6 +176,7 @@ export const Logs = () => {
{ setTextFilter(text); From dbf6370b764c7f9baac4b50707301e92e5792285 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Mon, 14 Nov 2022 14:03:55 -0800 Subject: [PATCH 09/35] integrated new log format --- src/main/docker/docker.ts | 4 +- src/renderer/Footer/Debugging.tsx | 10 +- .../redesign/LogMessage/LogMessage.tsx | 19 +- .../Generics/redesign/LogMessage/Logs.tsx | 445 ++++++++++++++---- .../redesign/LogMessage/logMessage.css.ts | 10 +- 5 files changed, 387 insertions(+), 101 deletions(-) diff --git a/src/main/docker/docker.ts b/src/main/docker/docker.ts index 720c44d16..a880e492d 100644 --- a/src/main/docker/docker.ts +++ b/src/main/docker/docker.ts @@ -231,8 +231,8 @@ export const sendLogsToUI = (node: Node) => { console.log('log metadata:', parseDockerLogMetadata(log)); try { // parse log metadata before sending to the UI - // send('nodeLogs', parseDockerLogMetadata(log)); - send('nodeLogs', log); + send('nodeLogs', parseDockerLogMetadata(log)); + // send('nodeLogs', log); } catch (err) { logger.error(`Error parsing docker event log ${log}`, err); } diff --git a/src/renderer/Footer/Debugging.tsx b/src/renderer/Footer/Debugging.tsx index f0fd9243f..4d46b7600 100644 --- a/src/renderer/Footer/Debugging.tsx +++ b/src/renderer/Footer/Debugging.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; +import moment from 'moment'; import { useAppSelector } from '../state/hooks'; import { selectSelectedNode, selectSelectedNodeId } from '../state/node'; @@ -16,7 +17,6 @@ const Debugging = ({ isOpen, onClickCloseButton }: Props) => { const [sLogs, setLogs] = useState([]); const nodeLogsListener = (message: string[]) => { - // console.log('sLogs: ', message); setLogs((prevState) => { if (prevState.length < 1000) { return [...prevState, message[0]]; @@ -79,11 +79,13 @@ const Debugging = ({ isOpen, onClickCloseButton }: Props) => { flexDirection: 'column-reverse', }} > - {sLogs.map((log, index) => { + {sLogs.map((log: any, index) => { return ( // eslint-disable-next-line react/no-array-index-key -

- {log} +

+ {`${moment.unix(log.timestamp).format('MMM DD HH:MM:ss:SSS')} ${ + log.level + } ${log.message}`}

); })} diff --git a/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx index fd5a75a4f..001cf0bb5 100644 --- a/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx +++ b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx @@ -1,9 +1,10 @@ +import moment from 'moment'; import { Icon } from '../Icon/Icon'; import { container, infoStyle, - dateStyle, - typeStyle, + timestampStyle, + levelStyle, messageStyle, } from './logMessage.css'; @@ -11,18 +12,18 @@ export interface LogMessageProps { /** * Date */ - date: string; + timestamp: number; /** - * Type + * Level */ - type: string; + level: string; /** * Message> */ message: string; } -export const LogMessage = ({ date, type, message }: LogMessageProps) => { +export const LogMessage = ({ timestamp, level, message }: LogMessageProps) => { const getTooltip = () => { if (true) { return ; @@ -33,8 +34,10 @@ export const LogMessage = ({ date, type, message }: LogMessageProps) => { return (
{tooltip}
-
{date}
-
{type}
+
+ {moment(timestamp).format('MMM DD HH:MM:ss:SSS')} +
+
{level}
{message}
); diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index a43882f19..ef56626fc 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -28,17 +28,7 @@ const timeframes = { '1MONTH': 43800, }; -const getLogObject = (log: string) => { - const logArray = log.split(' | '); - return { - timestamp: logArray[0], - date: moment(logArray[0]).format('MMM MM HH:MM:ss:SSS'), - type: logArray[2].trim().toLowerCase(), - message: `${logArray[3]} ${logArray[4]}`, - }; -}; - -const isWithinTimeframe = (timestamp: string, timeframe: number) => { +const isWithinTimeframe = (timestamp: number, timeframe: number) => { const nowTime = moment().format(); const beforeTime = moment().subtract(timeframe, 'minutes').format(); return moment(timestamp).isBetween(beforeTime, nowTime); @@ -46,67 +36,360 @@ const isWithinTimeframe = (timestamp: string, timeframe: number) => { export const Logs = () => { const sLogs = [ - '2022-11-04 21:41:44.170+00:00 | main | INFO | Besu | Using LibEthPairings native alt bn128', - '2022-11-04 21:41:44.173+00:00 | main | INFO | Besu | Using the native implementation of the signature algorithm', - '2022-11-04 21:41:44.181+00:00 | main | INFO | Besu | Using the native implementation of the blake2bf algorithm', - '2022-11-04 21:41:44.187+00:00 | main | INFO | Besu | Starting Besu version: besu/v22.10.0/linux-x86_64/openjdk-java-11', - '2022-11-04 21:41:44.637+00:00 | main | INFO | Besu | Engine API authentication enabled without key file. Expect ephemeral jwt.hex file in datadir', - '2022-11-04 21:41:44.638+00:00 | main | WARN | Besu | --graphql-http-host has been ignored because --graphql-http-enabled was not defined on the command line.', - '2022-11-04 21:41:44.640+00:00 | main | INFO | Besu | Static Nodes file = /var/lib/besu/static-nodes.json', - '2022-11-04 21:41:44.644+00:00 | main | INFO | StaticNodesParser | StaticNodes file /var/lib/besu/static-nodes.json does not exist, no static connections will be created.', - '2022-11-04 21:41:44.645+00:00 | main | INFO | Besu | Connecting to 0 static nodes.', - '2022-11-04 21:41:44.651+00:00 | main | INFO | Besu | Security Module: localfile', - '2022-11-04 21:41:44.675+00:00 | main | INFO | RocksDBKeyValueStorageFactory | No existing database detected at /var/lib/besu. Using version 1', - '2022-11-04 21:41:46.365+00:00 | main | WARN | Besu | --tx-pool-future-max-by-account has been deprecated, use --tx-pool-limit-by-account-percentage instead.', - '2022-11-04 21:41:46.433+00:00 | main | INFO | KeyPairUtil | Generated new secp256k1 public key 0x3909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4f6af9615cbac0da5cb23fd51c101962c5a78085371d15760e32d675a763b36c9 and stored it to /var/lib/besu/key', - '2022-11-04 21:41:46.679+00:00 | main | INFO | ProtocolScheduleBuilder | Protocol schedule created with milestones: [Frontier: 0, Homestead: 1150000, DaoRecoveryInit: 1920000, DaoRecoveryTransition: 1920001, Homestead: 1920010, TangerineWhistle: 2463000, SpuriousDragon: 2675000, Byzantium: 4370000, Petersburg: 7280000, Istanbul: 9069000, MuirGlacier: 9200000, Berlin: 12244000, London: 12965000, ArrowGlacier: 13773000, GrayGlacier: 15050000]', - '2022-11-04 21:41:46.721+00:00 | main | INFO | ProtocolScheduleBuilder | Protocol schedule created with milestones: [Frontier: 0, Homestead: 1150000, DaoRecoveryInit: 1920000, DaoRecoveryTransition: 1920001, Homestead: 1920010, TangerineWhistle: 2463000, SpuriousDragon: 2675000, Byzantium: 4370000, Petersburg: 7280000, Istanbul: 9069000, MuirGlacier: 9200000, Berlin: 12244000, London: 12965000, ArrowGlacier: 13773000, GrayGlacier: 15050000]', - '2022-11-04 21:41:48.327+00:00 | main | INFO | TransactionPoolFactory | Enabling transaction pool', - '2022-11-04 21:41:48.330+00:00 | main | INFO | EthPeers | Updating the default best peer comparator', - '2022-11-04 21:41:48.351+00:00 | main | INFO | BesuControllerBuilder | TTD difficulty is present, creating initial sync for PoS', - '2022-11-04 21:41:48.391+00:00 | main | INFO | TransitionBesuControllerBuilder | TTD present, creating DefaultSynchronizer that stops propagating after finalization', - '2022-11-04 21:41:48.446+00:00 | main | INFO | RunnerBuilder | Detecting NAT service.', - '2022-11-04 21:41:48.763+00:00 | main | INFO | Runner | Starting external services ... ', - '2022-11-04 21:41:48.764+00:00 | main | INFO | JsonRpcHttpService | Starting JSON-RPC service on 0.0.0.0:8545', - '2022-11-04 21:41:48.897+00:00 | vert.x-eventloop-thread-1 | INFO | JsonRpcHttpService | JSON-RPC service started and listening on 0.0.0.0:8545', - '2022-11-04 21:41:48.898+00:00 | main | INFO | JsonRpcService | Starting JSON-RPC service on 0.0.0.0:8551', - '2022-11-04 21:41:48.907+00:00 | vert.x-eventloop-thread-1 | INFO | JsonRpcService | JSON-RPC service started and listening on 0.0.0.0:8551', - '2022-11-04 21:41:48.909+00:00 | main | INFO | WebSocketService | Starting Websocket service on 0.0.0.0:8546', - '2022-11-04 21:41:48.915+00:00 | vert.x-eventloop-thread-1 | INFO | WebSocketService | Websocket service started and listening on 0.0.0.0:8546', - '2022-11-04 21:41:48.919+00:00 | main | INFO | AutoTransactionLogBloomCachingService | Starting auto transaction log bloom caching service.', - '2022-11-04 21:41:48.928+00:00 | main | INFO | LogBloomCacheMetadata | Lookup cache metadata file in data directory: /var/lib/besu/caches', - '2022-11-04 21:41:48.954+00:00 | main | INFO | Runner | Starting Ethereum main loop ... ', - '2022-11-04 21:41:48.954+00:00 | main | INFO | NatService | No NAT environment detected so no service could be started', - '2022-11-04 21:41:48.954+00:00 | main | INFO | NetworkRunner | Starting Network.', - '2022-11-04 21:41:48.958+00:00 | main | INFO | DefaultP2PNetwork | Starting DNS discovery with URL enrtree://AKA3AM6LPBYEUDMVNU3BSVQJ5AD45Y7YPOHJLEF6W26QOE4VTUDPE@all.mainnet.ethdisco.net', - '2022-11-04 21:41:49.059+00:00 | nioEventLoopGroup-2-1 | INFO | RlpxAgent | P2P RLPx agent started and listening on /0.0.0.0:30303.', - '2022-11-04 21:41:49.074+00:00 | main | INFO | PeerDiscoveryAgent | Starting peer discovery agent on host=0.0.0.0, port=30303', - '2022-11-04 21:41:49.144+00:00 | vert.x-eventloop-thread-1 | INFO | VertxPeerDiscoveryAgent | Started peer discovery agent successfully, on effective host=0.0.0.0 and port=30303', - '2022-11-04 21:41:49.146+00:00 | main | INFO | PeerDiscoveryAgent | P2P peer discovery agent started and listening on /0.0.0.0:30303', - '2022-11-04 21:41:49.289+00:00 | main | INFO | PeerDiscoveryAgent | Writing node record to disk. NodeRecord{seq=1, publicKey=0x033909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4, udpAddress=Optional[/127.0.0.1:30303], tcpAddress=Optional[/127.0.0.1:30303], asBase64=-Jq4QNYoVoUVzexfQnLnqtQqQwJp9_fi5lyBZAJyFxkGT9UXJYziTbMvP-17sawmUkNPpHa06ye-F_z3BoMKioHCgeUBg2V0aMrJhPxk7ASDEYwwgmlkgnY0gmlwhH8AAAGJc2VjcDI1NmsxoQM5CauidPLQJU556JTqQWxi_VyB3hsNg2-4W2lq8ymG1IN0Y3CCdl-DdWRwgnZf, nodeId=0x1921901c6a2067327bafdc3c00de1f1eb8ae021b397961d3419de43a7a860578, customFields={tcp=30303, udp=30303, ip=0x7f000001, eth=[[0xfc64ec04, 0x118c30]], id=V4, secp256k1=0x033909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4}}', - '2022-11-04 21:41:49.490+00:00 | main | INFO | DefaultP2PNetwork | Enode URL enode://3909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4f6af9615cbac0da5cb23fd51c101962c5a78085371d15760e32d675a763b36c9@127.0.0.1:30303', - '2022-11-04 21:41:49.491+00:00 | main | INFO | DefaultP2PNetwork | Node address 0x00de1f1eb8ae021b397961d3419de43a7a860578', - '2022-11-04 21:41:49.512+00:00 | main | INFO | DefaultSynchronizer | Starting synchronizer.', - '2022-11-04 21:41:49.525+00:00 | main | INFO | FullSyncDownloader | Starting full sync.', - '2022-11-04 21:41:49.526+00:00 | main | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 0', - '2022-11-04 21:41:49.542+00:00 | main | INFO | Runner | Ethereum main loop is up.', - '2022-11-04 21:41:50.084+00:00 | nioEventLoopGroup-3-1 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 1', - '2022-11-04 21:41:50.349+00:00 | nioEventLoopGroup-3-5 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 1', - '2022-11-04 21:41:55.330+00:00 | EthScheduler-Timer-0 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', - '2022-11-04 21:41:55.483+00:00 | nioEventLoopGroup-3-5 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', - '2022-11-04 21:42:00.257+00:00 | nioEventLoopGroup-3-4 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 4', - '2022-11-04 21:42:05.261+00:00 | EthScheduler-Timer-0 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 2', - '2022-11-04 21:42:06.943+00:00 | nioEventLoopGroup-3-10 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', - '2022-11-04 21:42:10.840+00:00 | BesuCommand-Shutdown-Hook | INFO | DefaultSynchronizer | Stopping synchronizer', - '2022-11-04 21:42:10.843+00:00 | BesuCommand-Shutdown-Hook | INFO | NetworkRunner | Stopping Network.', - '2022-11-04 21:42:10.857+00:00 | BesuCommand-Shutdown-Hook | INFO | EthProtocolManager | Stopping eth Subprotocol.', - '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | EthProtocolManager | eth Subprotocol stopped.', - '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | NetworkRunner | Network stopped.', - '2022-11-04 21:42:10.958+00:00 | BesuCommand-Shutdown-Hook | INFO | AutoTransactionLogBloomCachingService | Shutting down Auto transaction logs caching service.', - '2022-11-11 21:42:10.960+00:00 | BesuCommand-Shutdown-Hook | INFO | NatService | No NAT environment detected so no service could be stopped', - '2022-11-11 21:42:11.041+00:00 | main | INFO | Besu | Using jemalloc', - '2022-11-11 21:42:11.041+00:00 | main | ERROR | Besu | Using jemalloc', - '2022-11-11 22:35:11.041+00:00 | main | WARN | Besu | Using jemalloc', + { + message: + '2022-11-04 21:41:44.170+00:00 | main | INFO | Besu | Using LibEthPairings native alt bn128', + level: 'INFO', + timestamp: 1667598104174, + }, + { + message: + '2022-11-04 21:41:44.173+00:00 | main | INFO | Besu | Using the native implementation of the signature algorithm', + level: 'INFO', + timestamp: 1667598104174, + }, + { + message: + '2022-11-04 21:41:44.181+00:00 | main | INFO | Besu | Using the native implementation of the blake2bf algorithm', + level: 'INFO', + timestamp: 1667598104181, + }, + { + message: + '2022-11-04 21:41:44.187+00:00 | main | INFO | Besu | Starting Besu version: besu/v22.10.0/linux-x86_64/openjdk-java-11', + level: 'INFO', + timestamp: 1667598104187, + }, + { + message: + '2022-11-04 21:41:44.637+00:00 | main | INFO | Besu | Engine API authentication enabled without key file. Expect ephemeral jwt.hex file in datadir', + level: 'INFO', + timestamp: 1667598104638, + }, + { + message: + '2022-11-04 21:41:44.638+00:00 | main | WARN | Besu | --graphql-http-host has been ignored because --graphql-http-enabled was not defined on the command line.', + level: 'WARN', + timestamp: 1667598104639, + }, + { + message: + '2022-11-04 21:41:44.640+00:00 | main | INFO | Besu | Static Nodes file = /var/lib/besu/static-nodes.json', + level: 'INFO', + timestamp: 1667598104642, + }, + { + message: + '2022-11-04 21:41:44.644+00:00 | main | INFO | StaticNodesParser | StaticNodes file /var/lib/besu/static-nodes.json does not exist, no static connections will be created.', + level: 'INFO', + timestamp: 1667598104645, + }, + { + message: + '2022-11-04 21:41:44.645+00:00 | main | INFO | Besu | Connecting to 0 static nodes.', + level: 'INFO', + timestamp: 1667598104646, + }, + { + message: + '2022-11-04 21:41:44.651+00:00 | main | INFO | Besu | Security Module: localfile', + level: 'INFO', + timestamp: 1667598104651, + }, + { + message: + '2022-11-04 21:41:44.675+00:00 | main | INFO | RocksDBKeyValueStorageFactory | No existing database detected at /var/lib/besu. Using version 1', + level: 'INFO', + timestamp: 1667598104675, + }, + { + message: + '2022-11-04 21:41:46.365+00:00 | main | WARN | Besu | --tx-pool-future-max-by-account has been deprecated, use --tx-pool-limit-by-account-percentage instead.', + level: 'WARN', + timestamp: 1667598106366, + }, + { + message: + '2022-11-04 21:41:46.433+00:00 | main | INFO | KeyPairUtil | Generated new secp256k1 public key 0x3909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4f6af9615cbac0da5cb23fd51c101962c5a78085371d15760e32d675a763b36c9 and stored it to /var/lib/besu/key', + level: 'INFO', + timestamp: 1667598106434, + }, + { + message: + '2022-11-04 21:41:46.679+00:00 | main | INFO | ProtocolScheduleBuilder | Protocol schedule created with milestones: [Frontier: 0, Homestead: 1150000, DaoRecoveryInit: 1920000, DaoRecoveryTransition: 1920001, Homestead: 1920010, TangerineWhistle: 2463000, SpuriousDragon: 2675000, Byzantium: 4370000, Petersburg: 7280000, Istanbul: 9069000, MuirGlacier: 9200000, Berlin: 12244000, London: 12965000, ArrowGlacier: 13773000, GrayGlacier: 15050000]', + level: 'INFO', + timestamp: 1667598106679, + }, + { + message: + '2022-11-04 21:41:46.721+00:00 | main | INFO | ProtocolScheduleBuilder | Protocol schedule created with milestones: [Frontier: 0, Homestead: 1150000, DaoRecoveryInit: 1920000, DaoRecoveryTransition: 1920001, Homestead: 1920010, TangerineWhistle: 2463000, SpuriousDragon: 2675000, Byzantium: 4370000, Petersburg: 7280000, Istanbul: 9069000, MuirGlacier: 9200000, Berlin: 12244000, London: 12965000, ArrowGlacier: 13773000, GrayGlacier: 15050000]', + level: 'INFO', + timestamp: 1667598106722, + }, + { + message: + '2022-11-04 21:41:48.327+00:00 | main | INFO | TransactionPoolFactory | Enabling transaction pool', + level: 'INFO', + timestamp: 1667598108328, + }, + { + message: + '2022-11-04 21:41:48.330+00:00 | main | INFO | EthPeers | Updating the default best peer comparator', + level: 'INFO', + timestamp: 1667598108330, + }, + { + message: + '2022-11-04 21:41:48.351+00:00 | main | INFO | BesuControllerBuilder | TTD difficulty is present, creating initial sync for PoS', + level: 'INFO', + timestamp: 1667598108351, + }, + { + message: + '2022-11-04 21:41:48.391+00:00 | main | INFO | TransitionBesuControllerBuilder | TTD present, creating DefaultSynchronizer that stops propagating after finalization', + level: 'INFO', + timestamp: 1667598108392, + }, + { + message: + '2022-11-04 21:41:48.446+00:00 | main | INFO | RunnerBuilder | Detecting NAT service.', + level: 'INFO', + timestamp: 1667598108447, + }, + { + message: + '2022-11-04 21:41:48.763+00:00 | main | INFO | Runner | Starting external services ... ', + level: 'INFO', + timestamp: 1667598108763, + }, + { + message: + '2022-11-04 21:41:48.764+00:00 | main | INFO | JsonRpcHttpService | Starting JSON-RPC service on 0.0.0.0:8545', + level: 'INFO', + timestamp: 1667598108764, + }, + { + message: + '2022-11-04 21:41:48.897+00:00 | vert.x-eventloop-thread-1 | INFO | JsonRpcHttpService | JSON-RPC service started and listening on 0.0.0.0:8545', + level: 'INFO', + timestamp: 1667598108898, + }, + { + message: + '2022-11-04 21:41:48.898+00:00 | main | INFO | JsonRpcService | Starting JSON-RPC service on 0.0.0.0:8551', + level: 'INFO', + timestamp: 1667598108899, + }, + { + message: + '2022-11-04 21:41:48.907+00:00 | vert.x-eventloop-thread-1 | INFO | JsonRpcService | JSON-RPC service started and listening on 0.0.0.0:8551', + level: 'INFO', + timestamp: 1667598108908, + }, + { + message: + '2022-11-04 21:41:48.909+00:00 | main | INFO | WebSocketService | Starting Websocket service on 0.0.0.0:8546', + level: 'INFO', + timestamp: 1667598108910, + }, + { + message: + '2022-11-04 21:41:48.915+00:00 | vert.x-eventloop-thread-1 | INFO | WebSocketService | Websocket service started and listening on 0.0.0.0:8546', + level: 'INFO', + timestamp: 1667598108915, + }, + { + message: + '2022-11-04 21:41:48.919+00:00 | main | INFO | AutoTransactionLogBloomCachingService | Starting auto transaction log bloom caching service.', + level: 'INFO', + timestamp: 1667598108919, + }, + { + message: + '2022-11-04 21:41:48.928+00:00 | main | INFO | LogBloomCacheMetadata | Lookup cache metadata file in data directory: /var/lib/besu/caches', + level: 'INFO', + timestamp: 1667598108931, + }, + { + message: + '2022-11-04 21:41:48.954+00:00 | main | INFO | Runner | Starting Ethereum main loop ... ', + level: 'INFO', + timestamp: 1667598108955, + }, + { + message: + '2022-11-04 21:41:48.954+00:00 | main | INFO | NatService | No NAT environment detected so no service could be started', + level: 'INFO', + timestamp: 1667598108955, + }, + { + message: + '2022-11-04 21:41:48.954+00:00 | main | INFO | NetworkRunner | Starting Network.', + level: 'INFO', + timestamp: 1667598108955, + }, + { + message: + '2022-11-04 21:41:48.958+00:00 | main | INFO | DefaultP2PNetwork | Starting DNS discovery with URL enrtree://AKA3AM6LPBYEUDMVNU3BSVQJ5AD45Y7YPOHJLEF6W26QOE4VTUDPE@all.mainnet.ethdisco.net', + level: 'INFO', + timestamp: 1667598108959, + }, + { + message: + '2022-11-04 21:41:49.059+00:00 | nioEventLoopGroup-2-1 | INFO | RlpxAgent | P2P RLPx agent started and listening on /0.0.0.0:30303.', + level: 'INFO', + timestamp: 1667598109060, + }, + { + message: + '2022-11-04 21:41:49.074+00:00 | main | INFO | PeerDiscoveryAgent | Starting peer discovery agent on host=0.0.0.0, port=30303', + level: 'INFO', + timestamp: 1667598109075, + }, + { + message: + '2022-11-04 21:41:49.144+00:00 | vert.x-eventloop-thread-1 | INFO | VertxPeerDiscoveryAgent | Started peer discovery agent successfully, on effective host=0.0.0.0 and port=30303', + level: 'INFO', + timestamp: 1667598109144, + }, + { + message: + '2022-11-04 21:41:49.146+00:00 | main | INFO | PeerDiscoveryAgent | P2P peer discovery agent started and listening on /0.0.0.0:30303', + level: 'INFO', + timestamp: 1667598109147, + }, + { + message: + '2022-11-04 21:41:49.289+00:00 | main | INFO | PeerDiscoveryAgent | Writing node record to disk. NodeRecord{seq=1, publicKey=0x033909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4, udpAddress=Optional[/127.0.0.1:30303], tcpAddress=Optional[/127.0.0.1:30303], asBase64=-Jq4QNYoVoUVzexfQnLnqtQqQwJp9_fi5lyBZAJyFxkGT9UXJYziTbMvP-17sawmUkNPpHa06ye-F_z3BoMKioHCgeUBg2V0aMrJhPxk7ASDEYwwgmlkgnY0gmlwhH8AAAGJc2VjcDI1NmsxoQM5CauidPLQJU556JTqQWxi_VyB3hsNg2-4W2lq8ymG1IN0Y3CCdl-DdWRwgnZf, nodeId=0x1921901c6a2067327bafdc3c00de1f1eb8ae021b397961d3419de43a7a860578, customFields={tcp=30303, udp=30303, ip=0x7f000001, eth=[[0xfc64ec04, 0x118c30]], id=V4, secp256k1=0x033909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4}}', + level: 'INFO', + timestamp: 1667598109290, + }, + { + message: + '2022-11-04 21:41:49.490+00:00 | main | INFO | DefaultP2PNetwork | Enode URL enode://3909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4f6af9615cbac0da5cb23fd51c101962c5a78085371d15760e32d675a763b36c9@127.0.0.1:30303', + level: 'INFO', + timestamp: 1667598109491, + }, + { + message: + '2022-11-04 21:41:49.491+00:00 | main | INFO | DefaultP2PNetwork | Node address 0x00de1f1eb8ae021b397961d3419de43a7a860578', + level: 'INFO', + timestamp: 1667598109493, + }, + { + message: + '2022-11-04 21:41:49.512+00:00 | main | INFO | DefaultSynchronizer | Starting synchronizer.', + level: 'INFO', + timestamp: 1667598109513, + }, + { + message: + '2022-11-04 21:41:49.525+00:00 | main | INFO | FullSyncDownloader | Starting full sync.', + level: 'INFO', + timestamp: 1667598109526, + }, + { + message: + '2022-11-04 21:41:49.526+00:00 | main | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 0', + level: 'INFO', + timestamp: 1667598109527, + }, + { + message: + '2022-11-04 21:41:49.542+00:00 | main | INFO | Runner | Ethereum main loop is up.', + level: 'INFO', + timestamp: 1667598109543, + }, + { + message: + '2022-11-04 21:41:50.084+00:00 | nioEventLoopGroup-3-1 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 1', + level: 'INFO', + timestamp: 1667598110084, + }, + { + message: + '2022-11-04 21:41:50.349+00:00 | nioEventLoopGroup-3-5 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 1', + level: 'INFO', + timestamp: 1667598110350, + }, + { + message: + '2022-11-04 21:41:55.330+00:00 | EthScheduler-Timer-0 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', + level: 'INFO', + timestamp: 1667598115330, + }, + { + message: + '2022-11-04 21:41:55.483+00:00 | nioEventLoopGroup-3-5 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', + level: 'INFO', + timestamp: 1667598115484, + }, + { + message: + '2022-11-04 21:42:00.257+00:00 | nioEventLoopGroup-3-4 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 4', + level: 'INFO', + timestamp: 1667598120259, + }, + { + message: + '2022-11-04 21:42:05.261+00:00 | EthScheduler-Timer-0 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 2', + level: 'INFO', + timestamp: 1667598125262, + }, + { + message: + '2022-11-04 21:42:06.943+00:00 | nioEventLoopGroup-3-10 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', + level: 'INFO', + timestamp: 1667598126944, + }, + { + message: + '2022-11-04 21:42:10.840+00:00 | BesuCommand-Shutdown-Hook | INFO | DefaultSynchronizer | Stopping synchronizer', + level: 'INFO', + timestamp: 1667598130841, + }, + { + message: + '2022-11-04 21:42:10.843+00:00 | BesuCommand-Shutdown-Hook | INFO | NetworkRunner | Stopping Network.', + level: 'INFO', + timestamp: 1667598130843, + }, + { + message: + '2022-11-04 21:42:10.857+00:00 | BesuCommand-Shutdown-Hook | INFO | EthProtocolManager | Stopping eth Subprotocol.', + level: 'INFO', + timestamp: 1667598130857, + }, + { + message: + '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | EthProtocolManager | eth Subprotocol stopped.', + level: 'INFO', + timestamp: 1667598130958, + }, + { + message: + '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | NetworkRunner | Network stopped.', + level: 'INFO', + timestamp: 1667598130958, + }, + { + message: + '2022-11-04 21:42:10.958+00:00 | BesuCommand-Shutdown-Hook | INFO | AutoTransactionLogBloomCachingService | Shutting down Auto transaction logs caching service.', + level: 'INFO', + timestamp: 1667598130959, + }, + { + message: + '2022-11-04 21:42:10.960+00:00 | BesuCommand-Shutdown-Hook | INFO | NatService | No NAT environment detected so no service could be stopped', + level: 'INFO', + timestamp: 1667598130961, + }, + { + message: + '2022-11-13 21:42:11.041+00:00 | main | INFO | Besu | Using jemalloc', + level: 'INFO', + timestamp: 1668461782022, + }, ]; const [isFilterBarDisplayed, setIsFilterBarDisplayed] = @@ -134,20 +417,18 @@ export const Logs = () => { }; const filteredLogMessages = sLogs - .filter((log: string) => { - const logObject = getLogObject(log); - + .filter((log: any) => { if ( - (typeFilter === '' || logObject.type === typeFilter) && - (textFilter === '' || logObject.message.includes(textFilter)) && + (typeFilter === '' || log.level === typeFilter) && + (textFilter === '' || log.message.includes(textFilter)) && (timeframeFilter === 0 || - isWithinTimeframe(logObject.timestamp, timeframeFilter)) + isWithinTimeframe(log.timestamp, timeframeFilter)) ) { return true; } return false; }) - .map((log) => ); + .map((log) => ); return ( <> @@ -212,19 +493,19 @@ export const Logs = () => { variant="checkbox" status="blue" text="Info" - onClick={() => onClickSetTypeFilter('info')} + onClick={() => onClickSetTypeFilter('INFO')} /> onClickSetTypeFilter('warn')} + onClick={() => onClickSetTypeFilter('WARN')} /> onClickSetTypeFilter('error')} + onClick={() => onClickSetTypeFilter('ERROR')} />
diff --git a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts index a6f1d895e..26e1265e2 100644 --- a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts @@ -29,27 +29,27 @@ export const infoStyle = style({ color: common.color.black25, }); -export const dateStyle = style({ +export const timestampStyle = style({ width: 133, flex: 'none', order: 1, flexGrow: 0, }); -export const typeStyle = style({ +export const levelStyle = style({ textTransform: 'uppercase', width: 35, flex: 'none', order: 2, flexGrow: 0, selectors: { - [`&.info`]: { + [`&.INFO`]: { color: common.color.blue600, }, - [`&.warn`]: { + [`&.WARN`]: { color: common.color.orange500, }, - [`&.error`]: { + [`&.ERROR`]: { color: common.color.red500, }, }, From fabb442242ce582d1de43fd90017fc0816e4afbf Mon Sep 17 00:00:00 2001 From: corn-potage Date: Mon, 14 Nov 2022 18:07:21 -0800 Subject: [PATCH 10/35] added contentHeader component --- .../redesign/ContentHeader/ContentHeader.tsx | 73 ++++++++++++++++++ .../ContentHeader/contentHeader.css.ts | 76 +++++++++++++++++++ .../redesign/HeaderButton/headerButton.css.ts | 1 + .../redesign/LogMessage/LogMessage.tsx | 9 --- .../redesign/LogMessage/logMessage.css.ts | 4 - src/renderer/Generics/redesign/theme.css.ts | 10 +++ src/stories/Generic/ContentHeader.stories.tsx | 23 ++++++ 7 files changed, 183 insertions(+), 13 deletions(-) create mode 100644 src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx create mode 100644 src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts create mode 100644 src/stories/Generic/ContentHeader.stories.tsx diff --git a/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx b/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx new file mode 100644 index 000000000..e6a311bf2 --- /dev/null +++ b/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx @@ -0,0 +1,73 @@ +import { HeaderButtonProps, HeaderButton } from '../HeaderButton/HeaderButton'; +import { + container, + textContainer, + titleStyle, + subtitleStyle, + leftButtonContainer, + rightButtonContainer, +} from './contentHeader.css'; + +export interface ContentHeaderProps { + /** + * What's the title? + */ + title: string; + /** + * What's the subtitle? + */ + subtitle?: string; + /** + * Is there left button? + */ + leftButtonIconId?: HeaderButtonProps; + /** + * Is there onClick event on the left button? + */ + leftButtonOnClick?: () => void; + /** + * Is there right button? + */ + rightButtonIconId?: HeaderButtonProps; + /** + * Is there onClick event on the right button? + */ + rightButtonOnClick?: () => void; + /** + * Is this transparent? + */ + transparent?: boolean; +} + +/** + * Primary UI component for user interaction + */ +export const ContentHeader = ({ + title, + subtitle, + leftButtonIconId, + leftButtonOnClick, + rightButtonIconId, + rightButtonOnClick, + transparent, +}: ContentHeaderProps) => { + const transparentStyle = transparent ? 'transparent' : ''; + return ( +
+ {leftButtonIconId && ( +
+ +
+ )} +
+
{title}
+
{subtitle}
+
+ {rightButtonIconId && ( +
+ +
+ )} +
+ ); +}; diff --git a/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts b/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts new file mode 100644 index 000000000..832e15f3e --- /dev/null +++ b/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts @@ -0,0 +1,76 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '../theme.css'; + +// required to export even if not using in a component +export const container = style({ + boxSizing: 'border-box', + color: vars.color.font70, + borderBottom: vars.components.contentHeaderBorderBottom, + boxShadow: vars.color.elevation2boxShadow, + backgroundColor: vars.components.contentHeaderBackground, + display: 'flex', + flexDirection: 'row', + alignItems: 'flex-start', + justifyContent: 'space-between', + padding: '12px 14px', + position: 'relative', + height: 52, + selectors: { + [`&.transparent`]: { + backgroundColor: 'transparent', + borderBottom: 'none', + }, + }, +}); + +export const textContainer = style({ + position: 'absolute', + height: 30, + left: 54, + right: 54, + top: 'calc(50% - 30px/2)', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', +}); + +export const titleStyle = style({ + fontWeight: 510, + fontSize: '13px', + lineHeight: '16px', + textAlign: 'center', + letterSpacing: '-0.12px', + color: vars.components.contentHeaderTitle, + flex: 'none', + order: 0, + alignSelf: 'stretch', + flexGrow: 0, +}); + +export const subtitleStyle = style({ + fontWeight: 400, + fontSize: '11px', + lineHeight: '14px', + textAlign: 'center', + color: vars.components.contentHeaderSubtitle, + flex: 'none', + order: 1, + alignSelf: 'stretch', + flexGrow: 0, +}); + +export const leftButtonContainer = style({ + position: 'absolute', + left: 14, + top: 12, + width: 28, + height: 28, +}); +export const rightButtonContainer = style({ + position: 'absolute', + right: 14, + top: 12, + width: 28, + height: 28, +}); diff --git a/src/renderer/Generics/redesign/HeaderButton/headerButton.css.ts b/src/renderer/Generics/redesign/HeaderButton/headerButton.css.ts index 22a67c8a7..71c9215d2 100644 --- a/src/renderer/Generics/redesign/HeaderButton/headerButton.css.ts +++ b/src/renderer/Generics/redesign/HeaderButton/headerButton.css.ts @@ -2,6 +2,7 @@ import { style } from '@vanilla-extract/css'; import { vars } from '../theme.css'; export const container = style({ + boxSizing: 'border-box', flex: 'none', display: 'flex', flexDirection: 'row', diff --git a/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx index 001cf0bb5..1b35774be 100644 --- a/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx +++ b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx @@ -2,7 +2,6 @@ import moment from 'moment'; import { Icon } from '../Icon/Icon'; import { container, - infoStyle, timestampStyle, levelStyle, messageStyle, @@ -24,16 +23,8 @@ export interface LogMessageProps { } export const LogMessage = ({ timestamp, level, message }: LogMessageProps) => { - const getTooltip = () => { - if (true) { - return ; - } - return null; - }; - const tooltip = getTooltip(); return (
-
{tooltip}
{moment(timestamp).format('MMM DD HH:MM:ss:SSS')}
diff --git a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts index 26e1265e2..a6a22af8f 100644 --- a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts @@ -25,10 +25,6 @@ export const container = style({ letterSpacing: '0.24px', }); -export const infoStyle = style({ - color: common.color.black25, -}); - export const timestampStyle = style({ width: 133, flex: 'none', diff --git a/src/renderer/Generics/redesign/theme.css.ts b/src/renderer/Generics/redesign/theme.css.ts index 85fe3e9b0..dc577539a 100644 --- a/src/renderer/Generics/redesign/theme.css.ts +++ b/src/renderer/Generics/redesign/theme.css.ts @@ -5,6 +5,7 @@ export const common = { white100: '#FFFFFF', white90: 'rgba(255, 255, 255, 0.90)', white85: 'rgba(255, 255, 255, 0.85)', + white80: 'rgba(255, 255, 255, 0.80)', white70: 'rgba(255, 255, 255, 0.70)', white50: 'rgba(255, 255, 255, 0.50)', white40: 'rgba(255, 255, 255, 0.40)', @@ -17,6 +18,7 @@ export const common = { black100: '#000002', black90: 'rgba(0, 0, 2, 0.90)', black85: 'rgba(0, 0, 2, 0.85)', + black80: 'rgba(0, 0, 2, 0.80)', black70: 'rgba(0, 0, 2, 0.70)', black50: 'rgba(0, 0, 2, 0.50)', black40: 'rgba(0, 0, 2, 0.40)', @@ -204,6 +206,10 @@ export const [lightTheme, vars] = createTheme({ checkboxBackground: common.color.white100, checkboxBorder: common.color.black25, menuItemSelectIcon: common.color.purple600, + contentHeaderBorderBottom: `1px solid ${common.color.black8}`, + contentHeaderBackground: common.color.white80, + contentHeaderTitle: common.color.black70, + contentHeaderSubtitle: common.color.black50, }, }); @@ -292,5 +298,9 @@ export const darkTheme = createTheme(vars, { checkboxBackground: common.color.osMac, checkboxBorder: common.color.white25, menuItemSelectIcon: common.color.purple500, + contentHeaderBorderBottom: `1px solid ${common.color.black40}`, + contentHeaderBackground: `rgba(28, 28, 30, 0.8)`, + contentHeaderTitle: common.color.white85, + contentHeaderSubtitle: common.color.white50, }, }); diff --git a/src/stories/Generic/ContentHeader.stories.tsx b/src/stories/Generic/ContentHeader.stories.tsx new file mode 100644 index 000000000..de9827551 --- /dev/null +++ b/src/stories/Generic/ContentHeader.stories.tsx @@ -0,0 +1,23 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +import { ContentHeader } from '../../renderer/Generics/redesign/ContentHeader/ContentHeader'; + +export default { + title: 'Generic/ContentHeader', + component: ContentHeader, + argTypes: { + backgroundColor: { control: 'color' }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Primary = Template.bind({}); +Primary.args = { + title: 'Title', + subtitle: 'Subtitle', + leftButtonIconId: 'left', + rightButtonIconId: 'close', +}; From d5c40f7dc9ebe47946a5e019f772d02a8f24dada Mon Sep 17 00:00:00 2001 From: corn-potage Date: Mon, 14 Nov 2022 18:23:19 -0800 Subject: [PATCH 11/35] integrated contentHeader with Logs --- .../redesign/ContentHeader/ContentHeader.tsx | 15 ++++++++++----- .../redesign/ContentHeader/contentHeader.css.ts | 8 ++++++-- .../Generics/redesign/LogMessage/Logs.tsx | 10 +++++++--- .../Generics/redesign/LogMessage/logs.css.ts | 2 -- 4 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx b/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx index e6a311bf2..a51000b27 100644 --- a/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx +++ b/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx @@ -9,6 +9,10 @@ import { } from './contentHeader.css'; export interface ContentHeaderProps { + /** + * What's the text alignment? + */ + textAlign?: string; /** * What's the title? */ @@ -46,26 +50,27 @@ export const ContentHeader = ({ title, subtitle, leftButtonIconId, - leftButtonOnClick, + leftButtonOnClick = () => {}, rightButtonIconId, - rightButtonOnClick, + rightButtonOnClick = () => {}, transparent, + textAlign, }: ContentHeaderProps) => { const transparentStyle = transparent ? 'transparent' : ''; return (
{leftButtonIconId && (
- +
)} -
+
{title}
{subtitle}
{rightButtonIconId && (
- +
)}
diff --git a/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts b/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts index 832e15f3e..bab6c1293 100644 --- a/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts +++ b/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts @@ -33,13 +33,18 @@ export const textContainer = style({ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + textAlign: 'center', + selectors: { + [`&.left`]: { + textAlign: 'left', + }, + }, }); export const titleStyle = style({ fontWeight: 510, fontSize: '13px', lineHeight: '16px', - textAlign: 'center', letterSpacing: '-0.12px', color: vars.components.contentHeaderTitle, flex: 'none', @@ -52,7 +57,6 @@ export const subtitleStyle = style({ fontWeight: 400, fontSize: '11px', lineHeight: '14px', - textAlign: 'center', color: vars.components.contentHeaderSubtitle, flex: 'none', order: 1, diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index ef56626fc..7be20c4e9 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -16,6 +16,7 @@ import { LogMessage } from './LogMessage'; import Input from '../Input/Input'; import Button from '../Button/Button'; import { HeaderButton } from '../HeaderButton/HeaderButton'; +import { ContentHeader } from '../ContentHeader/ContentHeader'; const timeframes = { '30MINUTES': 30, @@ -443,9 +444,12 @@ export const Logs = () => { } }} > - { + { if (isFilterBarDisplayed) { setIsFilterBarDisplayed(false); } else { diff --git a/src/renderer/Generics/redesign/LogMessage/logs.css.ts b/src/renderer/Generics/redesign/LogMessage/logs.css.ts index 52e90e5a5..865494f61 100644 --- a/src/renderer/Generics/redesign/LogMessage/logs.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logs.css.ts @@ -8,8 +8,6 @@ export const container = style({ export const contentHeader = style({ position: 'absolute', width: '100%', - background: 'white', - height: 52, zIndex: 1, }); From 582f9aeb7218e928995c1811d0b7a6f02395fe7a Mon Sep 17 00:00:00 2001 From: corn-potage Date: Mon, 14 Nov 2022 18:46:53 -0800 Subject: [PATCH 12/35] logs dark mode --- src/renderer/Generics/redesign/LogMessage/logMessage.css.ts | 3 +-- src/renderer/Generics/redesign/LogMessage/logs.css.ts | 4 ++-- src/renderer/Generics/redesign/theme.css.ts | 4 ++++ 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts index a6a22af8f..a58599d3f 100644 --- a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts @@ -14,14 +14,13 @@ export const container = style({ alignSelf: 'stretch', flexGrow: 0, - color: common.color.black90, + color: vars.color.font90, fontFamily: `'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace`, fontStyle: 'normal', fontWeight: 400, fontSize: '11px', lineHeight: '14px', - letterSpacing: '0.24px', }); diff --git a/src/renderer/Generics/redesign/LogMessage/logs.css.ts b/src/renderer/Generics/redesign/LogMessage/logs.css.ts index 865494f61..7b7b1d417 100644 --- a/src/renderer/Generics/redesign/LogMessage/logs.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logs.css.ts @@ -25,8 +25,8 @@ export const filterContainer = style({ alignItems: 'flex-start', padding: '8px 16px', gap: 4, - background: common.color.white100, - borderBottom: `1px solid rgba(0, 0, 0, 0.08)`, + background: vars.components.filterBackground, + borderBottom: vars.components.contentHeaderBorderBottom, boxShadow: vars.color.elevation2boxShadow, }); diff --git a/src/renderer/Generics/redesign/theme.css.ts b/src/renderer/Generics/redesign/theme.css.ts index dc577539a..969bea121 100644 --- a/src/renderer/Generics/redesign/theme.css.ts +++ b/src/renderer/Generics/redesign/theme.css.ts @@ -130,6 +130,7 @@ export const [lightTheme, vars] = createTheme({ font40: common.color.black40, font50: common.color.black50, font70: common.color.black70, + font90: common.color.black90, fontDisabled: common.color.black25, background: common.color.white100, background96: common.color.black4, @@ -210,6 +211,7 @@ export const [lightTheme, vars] = createTheme({ contentHeaderBackground: common.color.white80, contentHeaderTitle: common.color.black70, contentHeaderSubtitle: common.color.black50, + filterBackground: common.color.white100, }, }); @@ -222,6 +224,7 @@ export const darkTheme = createTheme(vars, { font40: common.color.white40, font50: common.color.white50, font70: common.color.white70, + font90: common.color.white90, fontDisabled: common.color.white25, background: 'rgba(28, 28, 30, 1)', background96: common.color.white4, @@ -302,5 +305,6 @@ export const darkTheme = createTheme(vars, { contentHeaderBackground: `rgba(28, 28, 30, 0.8)`, contentHeaderTitle: common.color.white85, contentHeaderSubtitle: common.color.white50, + filterBackground: common.color.osMac, }, }); From 77b49a190e6d357e421d265b0a0a3cec6fcfb367 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Wed, 16 Nov 2022 13:39:39 -0800 Subject: [PATCH 13/35] replaced old logs with new logs, changed style of menudrawer --- src/renderer/Footer/Debugging.tsx | 27 +- src/renderer/Footer/MenuDrawer.tsx | 37 +- .../redesign/LogMessage/LogMessage.tsx | 1 - .../Generics/redesign/LogMessage/Logs.tsx | 371 +----------------- .../Generics/redesign/LogMessage/logs.css.ts | 2 +- src/stories/Generic/Logs.stories.tsx | 359 ++++++++++++++++- 6 files changed, 377 insertions(+), 420 deletions(-) diff --git a/src/renderer/Footer/Debugging.tsx b/src/renderer/Footer/Debugging.tsx index 4d46b7600..d3c11d1f4 100644 --- a/src/renderer/Footer/Debugging.tsx +++ b/src/renderer/Footer/Debugging.tsx @@ -5,6 +5,7 @@ import { selectSelectedNode, selectSelectedNodeId } from '../state/node'; import electron from '../electronGlobal'; import MenuDrawer from './MenuDrawer'; +import { Logs } from '../Generics/redesign/LogMessage/Logs'; type Props = { isOpen: boolean | undefined; @@ -66,30 +67,8 @@ const Debugging = ({ isOpen, onClickCloseButton }: Props) => { }, [isOpen, sSelectedNodeId]); return ( - - Newest logs at the top -
- {sLogs.map((log: any, index) => { - return ( - // eslint-disable-next-line react/no-array-index-key -

- {`${moment.unix(log.timestamp).format('MMM DD HH:MM:ss:SSS')} ${ - log.level - } ${log.message}`} -

- ); - })} -
+ + ); }; diff --git a/src/renderer/Footer/MenuDrawer.tsx b/src/renderer/Footer/MenuDrawer.tsx index 9982289ff..7f4723404 100644 --- a/src/renderer/Footer/MenuDrawer.tsx +++ b/src/renderer/Footer/MenuDrawer.tsx @@ -1,9 +1,6 @@ -import { CgCloseO } from 'react-icons/cg'; import React from 'react'; import styled from 'styled-components'; - -import IconButton from '../IconButton'; - +import { vars } from 'renderer/Generics/redesign/theme.css'; import { HEADER_HEIGHT } from '../Header'; // eslint-disable-next-line import/no-cycle // import { FOOTER_HEIGHT } from './Footer'; @@ -25,17 +22,11 @@ const MenuDrawerStyled = styled.div` // height of screen - footer height - header height height: calc(100vh - ${FOOTER_HEIGHT}px - ${HEADER_HEIGHT}px); transition: bottom 0.2s ease-out 0s; - background: linear-gradient( - -160.96deg, - #7a2c9e -29.09%, - #dd5789 51.77%, - #fedc2a 129.35% - ); box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding-bottom: 20px; - padding-left: 10px; - padding-right: 10px; box-sizing: border-box; + overflow-y: scroll; + background: ${vars.components.menuBackground}; `; type Props = { @@ -49,27 +40,7 @@ const MenuDrawer: React.FC = (props) => { const { title, isSelected, onClickCloseButton, children } = props; return ( -
-
-

{title}

- - - -
-
{children}
-
+ {children} ); }; diff --git a/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx index 1b35774be..424e2bc59 100644 --- a/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx +++ b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx @@ -1,5 +1,4 @@ import moment from 'moment'; -import { Icon } from '../Icon/Icon'; import { container, timestampStyle, diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index 7be20c4e9..871a0c8df 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -15,9 +15,16 @@ import { MenuItem } from '../MenuItem/MenuItem'; import { LogMessage } from './LogMessage'; import Input from '../Input/Input'; import Button from '../Button/Button'; -import { HeaderButton } from '../HeaderButton/HeaderButton'; import { ContentHeader } from '../ContentHeader/ContentHeader'; +export interface LogsProps { + /** + * sLogs props + */ + sLogs: any; + onClickCloseButton: () => void; +} + const timeframes = { '30MINUTES': 30, '1HOUR': 60, @@ -35,364 +42,7 @@ const isWithinTimeframe = (timestamp: number, timeframe: number) => { return moment(timestamp).isBetween(beforeTime, nowTime); }; -export const Logs = () => { - const sLogs = [ - { - message: - '2022-11-04 21:41:44.170+00:00 | main | INFO | Besu | Using LibEthPairings native alt bn128', - level: 'INFO', - timestamp: 1667598104174, - }, - { - message: - '2022-11-04 21:41:44.173+00:00 | main | INFO | Besu | Using the native implementation of the signature algorithm', - level: 'INFO', - timestamp: 1667598104174, - }, - { - message: - '2022-11-04 21:41:44.181+00:00 | main | INFO | Besu | Using the native implementation of the blake2bf algorithm', - level: 'INFO', - timestamp: 1667598104181, - }, - { - message: - '2022-11-04 21:41:44.187+00:00 | main | INFO | Besu | Starting Besu version: besu/v22.10.0/linux-x86_64/openjdk-java-11', - level: 'INFO', - timestamp: 1667598104187, - }, - { - message: - '2022-11-04 21:41:44.637+00:00 | main | INFO | Besu | Engine API authentication enabled without key file. Expect ephemeral jwt.hex file in datadir', - level: 'INFO', - timestamp: 1667598104638, - }, - { - message: - '2022-11-04 21:41:44.638+00:00 | main | WARN | Besu | --graphql-http-host has been ignored because --graphql-http-enabled was not defined on the command line.', - level: 'WARN', - timestamp: 1667598104639, - }, - { - message: - '2022-11-04 21:41:44.640+00:00 | main | INFO | Besu | Static Nodes file = /var/lib/besu/static-nodes.json', - level: 'INFO', - timestamp: 1667598104642, - }, - { - message: - '2022-11-04 21:41:44.644+00:00 | main | INFO | StaticNodesParser | StaticNodes file /var/lib/besu/static-nodes.json does not exist, no static connections will be created.', - level: 'INFO', - timestamp: 1667598104645, - }, - { - message: - '2022-11-04 21:41:44.645+00:00 | main | INFO | Besu | Connecting to 0 static nodes.', - level: 'INFO', - timestamp: 1667598104646, - }, - { - message: - '2022-11-04 21:41:44.651+00:00 | main | INFO | Besu | Security Module: localfile', - level: 'INFO', - timestamp: 1667598104651, - }, - { - message: - '2022-11-04 21:41:44.675+00:00 | main | INFO | RocksDBKeyValueStorageFactory | No existing database detected at /var/lib/besu. Using version 1', - level: 'INFO', - timestamp: 1667598104675, - }, - { - message: - '2022-11-04 21:41:46.365+00:00 | main | WARN | Besu | --tx-pool-future-max-by-account has been deprecated, use --tx-pool-limit-by-account-percentage instead.', - level: 'WARN', - timestamp: 1667598106366, - }, - { - message: - '2022-11-04 21:41:46.433+00:00 | main | INFO | KeyPairUtil | Generated new secp256k1 public key 0x3909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4f6af9615cbac0da5cb23fd51c101962c5a78085371d15760e32d675a763b36c9 and stored it to /var/lib/besu/key', - level: 'INFO', - timestamp: 1667598106434, - }, - { - message: - '2022-11-04 21:41:46.679+00:00 | main | INFO | ProtocolScheduleBuilder | Protocol schedule created with milestones: [Frontier: 0, Homestead: 1150000, DaoRecoveryInit: 1920000, DaoRecoveryTransition: 1920001, Homestead: 1920010, TangerineWhistle: 2463000, SpuriousDragon: 2675000, Byzantium: 4370000, Petersburg: 7280000, Istanbul: 9069000, MuirGlacier: 9200000, Berlin: 12244000, London: 12965000, ArrowGlacier: 13773000, GrayGlacier: 15050000]', - level: 'INFO', - timestamp: 1667598106679, - }, - { - message: - '2022-11-04 21:41:46.721+00:00 | main | INFO | ProtocolScheduleBuilder | Protocol schedule created with milestones: [Frontier: 0, Homestead: 1150000, DaoRecoveryInit: 1920000, DaoRecoveryTransition: 1920001, Homestead: 1920010, TangerineWhistle: 2463000, SpuriousDragon: 2675000, Byzantium: 4370000, Petersburg: 7280000, Istanbul: 9069000, MuirGlacier: 9200000, Berlin: 12244000, London: 12965000, ArrowGlacier: 13773000, GrayGlacier: 15050000]', - level: 'INFO', - timestamp: 1667598106722, - }, - { - message: - '2022-11-04 21:41:48.327+00:00 | main | INFO | TransactionPoolFactory | Enabling transaction pool', - level: 'INFO', - timestamp: 1667598108328, - }, - { - message: - '2022-11-04 21:41:48.330+00:00 | main | INFO | EthPeers | Updating the default best peer comparator', - level: 'INFO', - timestamp: 1667598108330, - }, - { - message: - '2022-11-04 21:41:48.351+00:00 | main | INFO | BesuControllerBuilder | TTD difficulty is present, creating initial sync for PoS', - level: 'INFO', - timestamp: 1667598108351, - }, - { - message: - '2022-11-04 21:41:48.391+00:00 | main | INFO | TransitionBesuControllerBuilder | TTD present, creating DefaultSynchronizer that stops propagating after finalization', - level: 'INFO', - timestamp: 1667598108392, - }, - { - message: - '2022-11-04 21:41:48.446+00:00 | main | INFO | RunnerBuilder | Detecting NAT service.', - level: 'INFO', - timestamp: 1667598108447, - }, - { - message: - '2022-11-04 21:41:48.763+00:00 | main | INFO | Runner | Starting external services ... ', - level: 'INFO', - timestamp: 1667598108763, - }, - { - message: - '2022-11-04 21:41:48.764+00:00 | main | INFO | JsonRpcHttpService | Starting JSON-RPC service on 0.0.0.0:8545', - level: 'INFO', - timestamp: 1667598108764, - }, - { - message: - '2022-11-04 21:41:48.897+00:00 | vert.x-eventloop-thread-1 | INFO | JsonRpcHttpService | JSON-RPC service started and listening on 0.0.0.0:8545', - level: 'INFO', - timestamp: 1667598108898, - }, - { - message: - '2022-11-04 21:41:48.898+00:00 | main | INFO | JsonRpcService | Starting JSON-RPC service on 0.0.0.0:8551', - level: 'INFO', - timestamp: 1667598108899, - }, - { - message: - '2022-11-04 21:41:48.907+00:00 | vert.x-eventloop-thread-1 | INFO | JsonRpcService | JSON-RPC service started and listening on 0.0.0.0:8551', - level: 'INFO', - timestamp: 1667598108908, - }, - { - message: - '2022-11-04 21:41:48.909+00:00 | main | INFO | WebSocketService | Starting Websocket service on 0.0.0.0:8546', - level: 'INFO', - timestamp: 1667598108910, - }, - { - message: - '2022-11-04 21:41:48.915+00:00 | vert.x-eventloop-thread-1 | INFO | WebSocketService | Websocket service started and listening on 0.0.0.0:8546', - level: 'INFO', - timestamp: 1667598108915, - }, - { - message: - '2022-11-04 21:41:48.919+00:00 | main | INFO | AutoTransactionLogBloomCachingService | Starting auto transaction log bloom caching service.', - level: 'INFO', - timestamp: 1667598108919, - }, - { - message: - '2022-11-04 21:41:48.928+00:00 | main | INFO | LogBloomCacheMetadata | Lookup cache metadata file in data directory: /var/lib/besu/caches', - level: 'INFO', - timestamp: 1667598108931, - }, - { - message: - '2022-11-04 21:41:48.954+00:00 | main | INFO | Runner | Starting Ethereum main loop ... ', - level: 'INFO', - timestamp: 1667598108955, - }, - { - message: - '2022-11-04 21:41:48.954+00:00 | main | INFO | NatService | No NAT environment detected so no service could be started', - level: 'INFO', - timestamp: 1667598108955, - }, - { - message: - '2022-11-04 21:41:48.954+00:00 | main | INFO | NetworkRunner | Starting Network.', - level: 'INFO', - timestamp: 1667598108955, - }, - { - message: - '2022-11-04 21:41:48.958+00:00 | main | INFO | DefaultP2PNetwork | Starting DNS discovery with URL enrtree://AKA3AM6LPBYEUDMVNU3BSVQJ5AD45Y7YPOHJLEF6W26QOE4VTUDPE@all.mainnet.ethdisco.net', - level: 'INFO', - timestamp: 1667598108959, - }, - { - message: - '2022-11-04 21:41:49.059+00:00 | nioEventLoopGroup-2-1 | INFO | RlpxAgent | P2P RLPx agent started and listening on /0.0.0.0:30303.', - level: 'INFO', - timestamp: 1667598109060, - }, - { - message: - '2022-11-04 21:41:49.074+00:00 | main | INFO | PeerDiscoveryAgent | Starting peer discovery agent on host=0.0.0.0, port=30303', - level: 'INFO', - timestamp: 1667598109075, - }, - { - message: - '2022-11-04 21:41:49.144+00:00 | vert.x-eventloop-thread-1 | INFO | VertxPeerDiscoveryAgent | Started peer discovery agent successfully, on effective host=0.0.0.0 and port=30303', - level: 'INFO', - timestamp: 1667598109144, - }, - { - message: - '2022-11-04 21:41:49.146+00:00 | main | INFO | PeerDiscoveryAgent | P2P peer discovery agent started and listening on /0.0.0.0:30303', - level: 'INFO', - timestamp: 1667598109147, - }, - { - message: - '2022-11-04 21:41:49.289+00:00 | main | INFO | PeerDiscoveryAgent | Writing node record to disk. NodeRecord{seq=1, publicKey=0x033909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4, udpAddress=Optional[/127.0.0.1:30303], tcpAddress=Optional[/127.0.0.1:30303], asBase64=-Jq4QNYoVoUVzexfQnLnqtQqQwJp9_fi5lyBZAJyFxkGT9UXJYziTbMvP-17sawmUkNPpHa06ye-F_z3BoMKioHCgeUBg2V0aMrJhPxk7ASDEYwwgmlkgnY0gmlwhH8AAAGJc2VjcDI1NmsxoQM5CauidPLQJU556JTqQWxi_VyB3hsNg2-4W2lq8ymG1IN0Y3CCdl-DdWRwgnZf, nodeId=0x1921901c6a2067327bafdc3c00de1f1eb8ae021b397961d3419de43a7a860578, customFields={tcp=30303, udp=30303, ip=0x7f000001, eth=[[0xfc64ec04, 0x118c30]], id=V4, secp256k1=0x033909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4}}', - level: 'INFO', - timestamp: 1667598109290, - }, - { - message: - '2022-11-04 21:41:49.490+00:00 | main | INFO | DefaultP2PNetwork | Enode URL enode://3909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4f6af9615cbac0da5cb23fd51c101962c5a78085371d15760e32d675a763b36c9@127.0.0.1:30303', - level: 'INFO', - timestamp: 1667598109491, - }, - { - message: - '2022-11-04 21:41:49.491+00:00 | main | INFO | DefaultP2PNetwork | Node address 0x00de1f1eb8ae021b397961d3419de43a7a860578', - level: 'INFO', - timestamp: 1667598109493, - }, - { - message: - '2022-11-04 21:41:49.512+00:00 | main | INFO | DefaultSynchronizer | Starting synchronizer.', - level: 'INFO', - timestamp: 1667598109513, - }, - { - message: - '2022-11-04 21:41:49.525+00:00 | main | INFO | FullSyncDownloader | Starting full sync.', - level: 'INFO', - timestamp: 1667598109526, - }, - { - message: - '2022-11-04 21:41:49.526+00:00 | main | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 0', - level: 'INFO', - timestamp: 1667598109527, - }, - { - message: - '2022-11-04 21:41:49.542+00:00 | main | INFO | Runner | Ethereum main loop is up.', - level: 'INFO', - timestamp: 1667598109543, - }, - { - message: - '2022-11-04 21:41:50.084+00:00 | nioEventLoopGroup-3-1 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 1', - level: 'INFO', - timestamp: 1667598110084, - }, - { - message: - '2022-11-04 21:41:50.349+00:00 | nioEventLoopGroup-3-5 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 1', - level: 'INFO', - timestamp: 1667598110350, - }, - { - message: - '2022-11-04 21:41:55.330+00:00 | EthScheduler-Timer-0 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', - level: 'INFO', - timestamp: 1667598115330, - }, - { - message: - '2022-11-04 21:41:55.483+00:00 | nioEventLoopGroup-3-5 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', - level: 'INFO', - timestamp: 1667598115484, - }, - { - message: - '2022-11-04 21:42:00.257+00:00 | nioEventLoopGroup-3-4 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 4', - level: 'INFO', - timestamp: 1667598120259, - }, - { - message: - '2022-11-04 21:42:05.261+00:00 | EthScheduler-Timer-0 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 2', - level: 'INFO', - timestamp: 1667598125262, - }, - { - message: - '2022-11-04 21:42:06.943+00:00 | nioEventLoopGroup-3-10 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', - level: 'INFO', - timestamp: 1667598126944, - }, - { - message: - '2022-11-04 21:42:10.840+00:00 | BesuCommand-Shutdown-Hook | INFO | DefaultSynchronizer | Stopping synchronizer', - level: 'INFO', - timestamp: 1667598130841, - }, - { - message: - '2022-11-04 21:42:10.843+00:00 | BesuCommand-Shutdown-Hook | INFO | NetworkRunner | Stopping Network.', - level: 'INFO', - timestamp: 1667598130843, - }, - { - message: - '2022-11-04 21:42:10.857+00:00 | BesuCommand-Shutdown-Hook | INFO | EthProtocolManager | Stopping eth Subprotocol.', - level: 'INFO', - timestamp: 1667598130857, - }, - { - message: - '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | EthProtocolManager | eth Subprotocol stopped.', - level: 'INFO', - timestamp: 1667598130958, - }, - { - message: - '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | NetworkRunner | Network stopped.', - level: 'INFO', - timestamp: 1667598130958, - }, - { - message: - '2022-11-04 21:42:10.958+00:00 | BesuCommand-Shutdown-Hook | INFO | AutoTransactionLogBloomCachingService | Shutting down Auto transaction logs caching service.', - level: 'INFO', - timestamp: 1667598130959, - }, - { - message: - '2022-11-04 21:42:10.960+00:00 | BesuCommand-Shutdown-Hook | INFO | NatService | No NAT environment detected so no service could be stopped', - level: 'INFO', - timestamp: 1667598130961, - }, - { - message: - '2022-11-13 21:42:11.041+00:00 | main | INFO | Besu | Using jemalloc', - level: 'INFO', - timestamp: 1668461782022, - }, - ]; - +export const Logs = ({ sLogs, onClickCloseButton }: LogsProps) => { const [isFilterBarDisplayed, setIsFilterBarDisplayed] = useState(false); const [isTypeFilterDisplayed, setIsTypeFilterDisplayed] = @@ -429,7 +79,7 @@ export const Logs = () => { } return false; }) - .map((log) => ); + .map((log: any) => ); return ( <> @@ -449,6 +99,7 @@ export const Logs = () => { title="Logs" leftButtonIconId="down" rightButtonIconId="filter" + leftButtonOnClick={onClickCloseButton} rightButtonOnClick={() => { if (isFilterBarDisplayed) { setIsFilterBarDisplayed(false); diff --git a/src/renderer/Generics/redesign/LogMessage/logs.css.ts b/src/renderer/Generics/redesign/LogMessage/logs.css.ts index 7b7b1d417..bf9922def 100644 --- a/src/renderer/Generics/redesign/LogMessage/logs.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logs.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars, common } from '../theme.css'; +import { vars } from '../theme.css'; export const container = style({ position: 'relative', diff --git a/src/stories/Generic/Logs.stories.tsx b/src/stories/Generic/Logs.stories.tsx index c83f705ac..814cdb18c 100644 --- a/src/stories/Generic/Logs.stories.tsx +++ b/src/stories/Generic/Logs.stories.tsx @@ -14,4 +14,361 @@ const Template: ComponentStory = (args) => ; export const Primary = Template.bind({}); -Primary.args = {}; +Primary.args = { + sLogs: [ + { + message: + '2022-11-04 21:41:44.170+00:00 | main | INFO | Besu | Using LibEthPairings native alt bn128', + level: 'INFO', + timestamp: 1667598104174, + }, + { + message: + '2022-11-04 21:41:44.173+00:00 | main | INFO | Besu | Using the native implementation of the signature algorithm', + level: 'INFO', + timestamp: 1667598104174, + }, + { + message: + '2022-11-04 21:41:44.181+00:00 | main | INFO | Besu | Using the native implementation of the blake2bf algorithm', + level: 'INFO', + timestamp: 1667598104181, + }, + { + message: + '2022-11-04 21:41:44.187+00:00 | main | INFO | Besu | Starting Besu version: besu/v22.10.0/linux-x86_64/openjdk-java-11', + level: 'INFO', + timestamp: 1667598104187, + }, + { + message: + '2022-11-04 21:41:44.637+00:00 | main | INFO | Besu | Engine API authentication enabled without key file. Expect ephemeral jwt.hex file in datadir', + level: 'INFO', + timestamp: 1667598104638, + }, + { + message: + '2022-11-04 21:41:44.638+00:00 | main | WARN | Besu | --graphql-http-host has been ignored because --graphql-http-enabled was not defined on the command line.', + level: 'WARN', + timestamp: 1667598104639, + }, + { + message: + '2022-11-04 21:41:44.640+00:00 | main | INFO | Besu | Static Nodes file = /var/lib/besu/static-nodes.json', + level: 'INFO', + timestamp: 1667598104642, + }, + { + message: + '2022-11-04 21:41:44.644+00:00 | main | INFO | StaticNodesParser | StaticNodes file /var/lib/besu/static-nodes.json does not exist, no static connections will be created.', + level: 'INFO', + timestamp: 1667598104645, + }, + { + message: + '2022-11-04 21:41:44.645+00:00 | main | INFO | Besu | Connecting to 0 static nodes.', + level: 'INFO', + timestamp: 1667598104646, + }, + { + message: + '2022-11-04 21:41:44.651+00:00 | main | INFO | Besu | Security Module: localfile', + level: 'INFO', + timestamp: 1667598104651, + }, + { + message: + '2022-11-04 21:41:44.675+00:00 | main | INFO | RocksDBKeyValueStorageFactory | No existing database detected at /var/lib/besu. Using version 1', + level: 'INFO', + timestamp: 1667598104675, + }, + { + message: + '2022-11-04 21:41:46.365+00:00 | main | WARN | Besu | --tx-pool-future-max-by-account has been deprecated, use --tx-pool-limit-by-account-percentage instead.', + level: 'WARN', + timestamp: 1667598106366, + }, + { + message: + '2022-11-04 21:41:46.433+00:00 | main | INFO | KeyPairUtil | Generated new secp256k1 public key 0x3909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4f6af9615cbac0da5cb23fd51c101962c5a78085371d15760e32d675a763b36c9 and stored it to /var/lib/besu/key', + level: 'INFO', + timestamp: 1667598106434, + }, + { + message: + '2022-11-04 21:41:46.679+00:00 | main | INFO | ProtocolScheduleBuilder | Protocol schedule created with milestones: [Frontier: 0, Homestead: 1150000, DaoRecoveryInit: 1920000, DaoRecoveryTransition: 1920001, Homestead: 1920010, TangerineWhistle: 2463000, SpuriousDragon: 2675000, Byzantium: 4370000, Petersburg: 7280000, Istanbul: 9069000, MuirGlacier: 9200000, Berlin: 12244000, London: 12965000, ArrowGlacier: 13773000, GrayGlacier: 15050000]', + level: 'INFO', + timestamp: 1667598106679, + }, + { + message: + '2022-11-04 21:41:46.721+00:00 | main | INFO | ProtocolScheduleBuilder | Protocol schedule created with milestones: [Frontier: 0, Homestead: 1150000, DaoRecoveryInit: 1920000, DaoRecoveryTransition: 1920001, Homestead: 1920010, TangerineWhistle: 2463000, SpuriousDragon: 2675000, Byzantium: 4370000, Petersburg: 7280000, Istanbul: 9069000, MuirGlacier: 9200000, Berlin: 12244000, London: 12965000, ArrowGlacier: 13773000, GrayGlacier: 15050000]', + level: 'INFO', + timestamp: 1667598106722, + }, + { + message: + '2022-11-04 21:41:48.327+00:00 | main | INFO | TransactionPoolFactory | Enabling transaction pool', + level: 'INFO', + timestamp: 1667598108328, + }, + { + message: + '2022-11-04 21:41:48.330+00:00 | main | INFO | EthPeers | Updating the default best peer comparator', + level: 'INFO', + timestamp: 1667598108330, + }, + { + message: + '2022-11-04 21:41:48.351+00:00 | main | INFO | BesuControllerBuilder | TTD difficulty is present, creating initial sync for PoS', + level: 'INFO', + timestamp: 1667598108351, + }, + { + message: + '2022-11-04 21:41:48.391+00:00 | main | INFO | TransitionBesuControllerBuilder | TTD present, creating DefaultSynchronizer that stops propagating after finalization', + level: 'INFO', + timestamp: 1667598108392, + }, + { + message: + '2022-11-04 21:41:48.446+00:00 | main | INFO | RunnerBuilder | Detecting NAT service.', + level: 'INFO', + timestamp: 1667598108447, + }, + { + message: + '2022-11-04 21:41:48.763+00:00 | main | INFO | Runner | Starting external services ... ', + level: 'INFO', + timestamp: 1667598108763, + }, + { + message: + '2022-11-04 21:41:48.764+00:00 | main | INFO | JsonRpcHttpService | Starting JSON-RPC service on 0.0.0.0:8545', + level: 'INFO', + timestamp: 1667598108764, + }, + { + message: + '2022-11-04 21:41:48.897+00:00 | vert.x-eventloop-thread-1 | INFO | JsonRpcHttpService | JSON-RPC service started and listening on 0.0.0.0:8545', + level: 'INFO', + timestamp: 1667598108898, + }, + { + message: + '2022-11-04 21:41:48.898+00:00 | main | INFO | JsonRpcService | Starting JSON-RPC service on 0.0.0.0:8551', + level: 'INFO', + timestamp: 1667598108899, + }, + { + message: + '2022-11-04 21:41:48.907+00:00 | vert.x-eventloop-thread-1 | INFO | JsonRpcService | JSON-RPC service started and listening on 0.0.0.0:8551', + level: 'INFO', + timestamp: 1667598108908, + }, + { + message: + '2022-11-04 21:41:48.909+00:00 | main | INFO | WebSocketService | Starting Websocket service on 0.0.0.0:8546', + level: 'INFO', + timestamp: 1667598108910, + }, + { + message: + '2022-11-04 21:41:48.915+00:00 | vert.x-eventloop-thread-1 | INFO | WebSocketService | Websocket service started and listening on 0.0.0.0:8546', + level: 'INFO', + timestamp: 1667598108915, + }, + { + message: + '2022-11-04 21:41:48.919+00:00 | main | INFO | AutoTransactionLogBloomCachingService | Starting auto transaction log bloom caching service.', + level: 'INFO', + timestamp: 1667598108919, + }, + { + message: + '2022-11-04 21:41:48.928+00:00 | main | INFO | LogBloomCacheMetadata | Lookup cache metadata file in data directory: /var/lib/besu/caches', + level: 'INFO', + timestamp: 1667598108931, + }, + { + message: + '2022-11-04 21:41:48.954+00:00 | main | INFO | Runner | Starting Ethereum main loop ... ', + level: 'INFO', + timestamp: 1667598108955, + }, + { + message: + '2022-11-04 21:41:48.954+00:00 | main | INFO | NatService | No NAT environment detected so no service could be started', + level: 'INFO', + timestamp: 1667598108955, + }, + { + message: + '2022-11-04 21:41:48.954+00:00 | main | INFO | NetworkRunner | Starting Network.', + level: 'INFO', + timestamp: 1667598108955, + }, + { + message: + '2022-11-04 21:41:48.958+00:00 | main | INFO | DefaultP2PNetwork | Starting DNS discovery with URL enrtree://AKA3AM6LPBYEUDMVNU3BSVQJ5AD45Y7YPOHJLEF6W26QOE4VTUDPE@all.mainnet.ethdisco.net', + level: 'INFO', + timestamp: 1667598108959, + }, + { + message: + '2022-11-04 21:41:49.059+00:00 | nioEventLoopGroup-2-1 | INFO | RlpxAgent | P2P RLPx agent started and listening on /0.0.0.0:30303.', + level: 'INFO', + timestamp: 1667598109060, + }, + { + message: + '2022-11-04 21:41:49.074+00:00 | main | INFO | PeerDiscoveryAgent | Starting peer discovery agent on host=0.0.0.0, port=30303', + level: 'INFO', + timestamp: 1667598109075, + }, + { + message: + '2022-11-04 21:41:49.144+00:00 | vert.x-eventloop-thread-1 | INFO | VertxPeerDiscoveryAgent | Started peer discovery agent successfully, on effective host=0.0.0.0 and port=30303', + level: 'INFO', + timestamp: 1667598109144, + }, + { + message: + '2022-11-04 21:41:49.146+00:00 | main | INFO | PeerDiscoveryAgent | P2P peer discovery agent started and listening on /0.0.0.0:30303', + level: 'INFO', + timestamp: 1667598109147, + }, + { + message: + '2022-11-04 21:41:49.289+00:00 | main | INFO | PeerDiscoveryAgent | Writing node record to disk. NodeRecord{seq=1, publicKey=0x033909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4, udpAddress=Optional[/127.0.0.1:30303], tcpAddress=Optional[/127.0.0.1:30303], asBase64=-Jq4QNYoVoUVzexfQnLnqtQqQwJp9_fi5lyBZAJyFxkGT9UXJYziTbMvP-17sawmUkNPpHa06ye-F_z3BoMKioHCgeUBg2V0aMrJhPxk7ASDEYwwgmlkgnY0gmlwhH8AAAGJc2VjcDI1NmsxoQM5CauidPLQJU556JTqQWxi_VyB3hsNg2-4W2lq8ymG1IN0Y3CCdl-DdWRwgnZf, nodeId=0x1921901c6a2067327bafdc3c00de1f1eb8ae021b397961d3419de43a7a860578, customFields={tcp=30303, udp=30303, ip=0x7f000001, eth=[[0xfc64ec04, 0x118c30]], id=V4, secp256k1=0x033909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4}}', + level: 'INFO', + timestamp: 1667598109290, + }, + { + message: + '2022-11-04 21:41:49.490+00:00 | main | INFO | DefaultP2PNetwork | Enode URL enode://3909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4f6af9615cbac0da5cb23fd51c101962c5a78085371d15760e32d675a763b36c9@127.0.0.1:30303', + level: 'INFO', + timestamp: 1667598109491, + }, + { + message: + '2022-11-04 21:41:49.491+00:00 | main | INFO | DefaultP2PNetwork | Node address 0x00de1f1eb8ae021b397961d3419de43a7a860578', + level: 'INFO', + timestamp: 1667598109493, + }, + { + message: + '2022-11-04 21:41:49.512+00:00 | main | INFO | DefaultSynchronizer | Starting synchronizer.', + level: 'INFO', + timestamp: 1667598109513, + }, + { + message: + '2022-11-04 21:41:49.525+00:00 | main | INFO | FullSyncDownloader | Starting full sync.', + level: 'INFO', + timestamp: 1667598109526, + }, + { + message: + '2022-11-04 21:41:49.526+00:00 | main | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 0', + level: 'INFO', + timestamp: 1667598109527, + }, + { + message: + '2022-11-04 21:41:49.542+00:00 | main | INFO | Runner | Ethereum main loop is up.', + level: 'INFO', + timestamp: 1667598109543, + }, + { + message: + '2022-11-04 21:41:50.084+00:00 | nioEventLoopGroup-3-1 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 1', + level: 'INFO', + timestamp: 1667598110084, + }, + { + message: + '2022-11-04 21:41:50.349+00:00 | nioEventLoopGroup-3-5 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 1', + level: 'INFO', + timestamp: 1667598110350, + }, + { + message: + '2022-11-04 21:41:55.330+00:00 | EthScheduler-Timer-0 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', + level: 'INFO', + timestamp: 1667598115330, + }, + { + message: + '2022-11-04 21:41:55.483+00:00 | nioEventLoopGroup-3-5 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', + level: 'INFO', + timestamp: 1667598115484, + }, + { + message: + '2022-11-04 21:42:00.257+00:00 | nioEventLoopGroup-3-4 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 4', + level: 'INFO', + timestamp: 1667598120259, + }, + { + message: + '2022-11-04 21:42:05.261+00:00 | EthScheduler-Timer-0 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 2', + level: 'INFO', + timestamp: 1667598125262, + }, + { + message: + '2022-11-04 21:42:06.943+00:00 | nioEventLoopGroup-3-10 | INFO | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3', + level: 'INFO', + timestamp: 1667598126944, + }, + { + message: + '2022-11-04 21:42:10.840+00:00 | BesuCommand-Shutdown-Hook | INFO | DefaultSynchronizer | Stopping synchronizer', + level: 'INFO', + timestamp: 1667598130841, + }, + { + message: + '2022-11-04 21:42:10.843+00:00 | BesuCommand-Shutdown-Hook | INFO | NetworkRunner | Stopping Network.', + level: 'INFO', + timestamp: 1667598130843, + }, + { + message: + '2022-11-04 21:42:10.857+00:00 | BesuCommand-Shutdown-Hook | INFO | EthProtocolManager | Stopping eth Subprotocol.', + level: 'INFO', + timestamp: 1667598130857, + }, + { + message: + '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | EthProtocolManager | eth Subprotocol stopped.', + level: 'INFO', + timestamp: 1667598130958, + }, + { + message: + '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO | NetworkRunner | Network stopped.', + level: 'INFO', + timestamp: 1667598130958, + }, + { + message: + '2022-11-04 21:42:10.958+00:00 | BesuCommand-Shutdown-Hook | INFO | AutoTransactionLogBloomCachingService | Shutting down Auto transaction logs caching service.', + level: 'INFO', + timestamp: 1667598130959, + }, + { + message: + '2022-11-04 21:42:10.960+00:00 | BesuCommand-Shutdown-Hook | INFO | NatService | No NAT environment detected so no service could be stopped', + level: 'INFO', + timestamp: 1667598130961, + }, + { + message: + '2022-11-13 21:42:11.041+00:00 | main | INFO | Besu | Using jemalloc', + level: 'INFO', + timestamp: 1668461782022, + }, + ], +}; From f643bf65f36886db81fed86e936cdf0a2d960d9e Mon Sep 17 00:00:00 2001 From: corn-potage Date: Wed, 16 Nov 2022 13:53:48 -0800 Subject: [PATCH 14/35] tried to fix lint warnings --- src/renderer/Footer/Debugging.tsx | 2 -- src/renderer/Footer/MenuDrawer.tsx | 4 +--- src/renderer/Generics/redesign/LogMessage/Logs.tsx | 2 +- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/renderer/Footer/Debugging.tsx b/src/renderer/Footer/Debugging.tsx index d3c11d1f4..9f763528a 100644 --- a/src/renderer/Footer/Debugging.tsx +++ b/src/renderer/Footer/Debugging.tsx @@ -1,5 +1,4 @@ import { useCallback, useEffect, useState } from 'react'; -import moment from 'moment'; import { useAppSelector } from '../state/hooks'; import { selectSelectedNode, selectSelectedNodeId } from '../state/node'; @@ -14,7 +13,6 @@ type Props = { const Debugging = ({ isOpen, onClickCloseButton }: Props) => { const sSelectedNodeId = useAppSelector(selectSelectedNodeId); - const sSelectedNode = useAppSelector(selectSelectedNode); const [sLogs, setLogs] = useState([]); const nodeLogsListener = (message: string[]) => { diff --git a/src/renderer/Footer/MenuDrawer.tsx b/src/renderer/Footer/MenuDrawer.tsx index 7f4723404..0ea7a2c67 100644 --- a/src/renderer/Footer/MenuDrawer.tsx +++ b/src/renderer/Footer/MenuDrawer.tsx @@ -30,14 +30,12 @@ const MenuDrawerStyled = styled.div` `; type Props = { - title: string; isSelected: boolean; - onClickCloseButton: () => void; children: React.ReactNode; }; const MenuDrawer: React.FC = (props) => { - const { title, isSelected, onClickCloseButton, children } = props; + const { isSelected, children } = props; return ( {children} diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index 871a0c8df..654e550a6 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -21,7 +21,7 @@ export interface LogsProps { /** * sLogs props */ - sLogs: any; + sLogs: string[]; onClickCloseButton: () => void; } From de08b2071e9d73e2bfe9c94a67a502c6935ea02c Mon Sep 17 00:00:00 2001 From: corn-potage Date: Wed, 16 Nov 2022 15:28:22 -0800 Subject: [PATCH 15/35] added clear filters, refresh logs with props --- src/renderer/Footer/Debugging.tsx | 2 +- .../Generics/redesign/LogMessage/Logs.tsx | 35 +++++++++++++++++-- .../Generics/redesign/LogMessage/logs.css.ts | 15 ++++++-- 3 files changed, 47 insertions(+), 5 deletions(-) diff --git a/src/renderer/Footer/Debugging.tsx b/src/renderer/Footer/Debugging.tsx index 9f763528a..0c61cf0ef 100644 --- a/src/renderer/Footer/Debugging.tsx +++ b/src/renderer/Footer/Debugging.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useState } from 'react'; import { useAppSelector } from '../state/hooks'; -import { selectSelectedNode, selectSelectedNodeId } from '../state/node'; +import { selectSelectedNodeId } from '../state/node'; import electron from '../electronGlobal'; import MenuDrawer from './MenuDrawer'; diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index 654e550a6..882f9d84e 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -1,4 +1,4 @@ -import { SetStateAction, useState } from 'react'; +import { SetStateAction, useState, useEffect } from 'react'; import moment from 'moment'; import { container, @@ -9,6 +9,8 @@ import { timeframeFilterContainer, filterMenu, logsContainer, + spacer, + clearFilters, } from './logs.css'; import { Menu } from '../Menu/Menu'; import { MenuItem } from '../MenuItem/MenuItem'; @@ -43,6 +45,7 @@ const isWithinTimeframe = (timestamp: number, timeframe: number) => { }; export const Logs = ({ sLogs, onClickCloseButton }: LogsProps) => { + const [logs, setLogs] = useState([]); const [isFilterBarDisplayed, setIsFilterBarDisplayed] = useState(false); const [isTypeFilterDisplayed, setIsTypeFilterDisplayed] = @@ -59,6 +62,7 @@ export const Logs = ({ sLogs, onClickCloseButton }: LogsProps) => { setTypeFilter(type); } }; + const onClickSetTimeframeFilter = (timeframe: SetStateAction) => { if (timeframeFilter !== 0 && timeframeFilter === timeframe) { setTimeframeFilter(0); @@ -67,7 +71,7 @@ export const Logs = ({ sLogs, onClickCloseButton }: LogsProps) => { } }; - const filteredLogMessages = sLogs + const filteredLogMessages = logs .filter((log: any) => { if ( (typeFilter === '' || log.level === typeFilter) && @@ -81,6 +85,19 @@ export const Logs = ({ sLogs, onClickCloseButton }: LogsProps) => { }) .map((log: any) => ); + const filterExists = + timeframeFilter !== 0 || typeFilter !== '' || textFilter !== ''; + + const resetFilters = () => { + setTextFilter(''); + setTypeFilter(''); + setTimeframeFilter(0); + }; + + useEffect(() => { + setLogs(sLogs); + }, [sLogs]); + return ( <>
@@ -258,6 +275,20 @@ export const Logs = ({ sLogs, onClickCloseButton }: LogsProps) => {
)}
+ {filterExists && ( + <> +
+
+ Clear all filters +
+ + )}
)}
diff --git a/src/renderer/Generics/redesign/LogMessage/logs.css.ts b/src/renderer/Generics/redesign/LogMessage/logs.css.ts index bf9922def..a63c91450 100644 --- a/src/renderer/Generics/redesign/LogMessage/logs.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logs.css.ts @@ -1,5 +1,5 @@ import { style } from '@vanilla-extract/css'; -import { vars } from '../theme.css'; +import { vars, common } from '../theme.css'; export const container = style({ position: 'relative', @@ -22,7 +22,7 @@ export const filterContainer = style({ boxSizing: 'border-box', display: 'flex', flexDirection: 'row', - alignItems: 'flex-start', + alignItems: 'baseline', padding: '8px 16px', gap: 4, background: vars.components.filterBackground, @@ -43,7 +43,18 @@ export const typeFilterContainer = style({ width: 158, position: 'relative', }); + export const timeframeFilterContainer = style({ width: 148, position: 'relative', }); + +export const spacer = style({ + alignSelf: 'stretch', + flexGrow: 1, +}); + +export const clearFilters = style({ + cursor: 'pointer', + color: common.color.purple600, +}); From e32429aaee9981853cc7eef296ca66397e55228b Mon Sep 17 00:00:00 2001 From: corn-potage Date: Wed, 16 Nov 2022 15:44:10 -0800 Subject: [PATCH 16/35] fixed text overflow --- src/renderer/Generics/redesign/LogMessage/logMessage.css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts index a58599d3f..ce6ee3e0c 100644 --- a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts @@ -51,7 +51,7 @@ export const levelStyle = style({ }); export const messageStyle = style({ - flex: 'none', order: 3, flexGrow: 1, + overflowWrap: 'anywhere', }); From b906b3a419e2646accc2eeea2cbc234e9818dbe4 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Wed, 16 Nov 2022 16:36:57 -0800 Subject: [PATCH 17/35] fixed logs at the top --- src/renderer/Generics/redesign/LogMessage/logs.css.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/renderer/Generics/redesign/LogMessage/logs.css.ts b/src/renderer/Generics/redesign/LogMessage/logs.css.ts index a63c91450..10d61fd1a 100644 --- a/src/renderer/Generics/redesign/LogMessage/logs.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logs.css.ts @@ -3,11 +3,14 @@ import { vars, common } from '../theme.css'; export const container = style({ position: 'relative', + maxWidth: '100%', + width: 'inherit', }); export const contentHeader = style({ - position: 'absolute', - width: '100%', + position: 'fixed', + maxWidth: 'inherit', + width: 'inherit', zIndex: 1, }); From 2a9784d81a25048b0b12ea1c4f77361bb9c26c88 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Wed, 16 Nov 2022 18:00:33 -0800 Subject: [PATCH 18/35] padding --- src/renderer/Generics/redesign/LogMessage/logs.css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/Generics/redesign/LogMessage/logs.css.ts b/src/renderer/Generics/redesign/LogMessage/logs.css.ts index 10d61fd1a..226577f93 100644 --- a/src/renderer/Generics/redesign/LogMessage/logs.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logs.css.ts @@ -15,7 +15,7 @@ export const contentHeader = style({ }); export const logsContainer = style({ - paddingTop: 52, + padding: '52px 17px 0px 17px', position: 'relative', }); From eb27336ec356bcbdd7907561d222d714f18d387e Mon Sep 17 00:00:00 2001 From: corn-potage Date: Wed, 16 Nov 2022 18:53:28 -0800 Subject: [PATCH 19/35] added icons to input --- .../Generics/redesign/Input/Input.tsx | 61 ++++++++++++++----- .../Generics/redesign/Input/input.css.ts | 31 +++++++++- .../Generics/redesign/LogMessage/Logs.tsx | 1 + src/stories/Generic/Input.stories.tsx | 13 ++-- 4 files changed, 86 insertions(+), 20 deletions(-) diff --git a/src/renderer/Generics/redesign/Input/Input.tsx b/src/renderer/Generics/redesign/Input/Input.tsx index 9453cf37c..ff94dd991 100644 --- a/src/renderer/Generics/redesign/Input/Input.tsx +++ b/src/renderer/Generics/redesign/Input/Input.tsx @@ -1,9 +1,24 @@ import { ChangeEvent } from 'react'; -import { container } from './input.css'; +import { IconId } from 'renderer/assets/images/icons'; +import { Icon } from '../Icon/Icon'; +import { + container, + inputContainer, + leftIconContainer, + rightIconContainer, +} from './input.css'; export interface InputProps { /** - * Control the input by passing a value + * Is there a left icon? + */ + leftIconId?: IconId; + /** + * Is there a right icon? + */ + rightIconId?: IconId; + /** + * Is there a left icon? */ value?: string; /** @@ -22,6 +37,8 @@ export interface InputProps { } const Input = ({ + leftIconId, + rightIconId, value, placeholder, required, @@ -33,20 +50,34 @@ const Input = ({ onChange(evt.target.value); } }; + const leftIconStyle = leftIconId ? 'leftIcon' : ''; + const rightIconStyle = rightIconId ? 'rightIcon' : ''; return ( - { - onChangeAction(evt); - }, - }} - /> +
+ {leftIconId && ( +
+ +
+ )} + { + onChangeAction(evt); + }, + }} + /> + {rightIconId && ( +
+ +
+ )} +
); }; export default Input; diff --git a/src/renderer/Generics/redesign/Input/input.css.ts b/src/renderer/Generics/redesign/Input/input.css.ts index ce4ba0366..7e3a43219 100644 --- a/src/renderer/Generics/redesign/Input/input.css.ts +++ b/src/renderer/Generics/redesign/Input/input.css.ts @@ -2,10 +2,31 @@ import { style } from '@vanilla-extract/css'; import { common, vars } from '../theme.css'; export const container = style({ + position: 'relative', +}); + +export const leftIconContainer = style({ + position: 'absolute', + left: 8, + top: 6, + color: vars.color.font70, +}); + +export const rightIconContainer = style({ + position: 'absolute', + right: 8, + top: 6, + color: vars.color.font70, +}); + +export const inputContainer = style({ height: '16px', display: 'block', width: '-webkit-fill-available', - padding: '6px 8px', + paddingTop: 6, + paddingBottom: 6, + paddingLeft: 8, + paddingRight: 8, backgroundColor: vars.color.background, backgroundClip: 'padding-box', color: 'inherit', @@ -13,6 +34,14 @@ export const container = style({ borderColor: vars.color.border, borderRadius: '4px', transition: 'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out', + selectors: { + [`&.leftIcon`]: { + paddingLeft: 32, + }, + [`&.rightIcon`]: { + paddingRight: 32, + }, + }, ':focus': { border: '1px solid', borderColor: vars.color.primary, diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index 882f9d84e..ee60ea2ee 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -129,6 +129,7 @@ export const Logs = ({ sLogs, onClickCloseButton }: LogsProps) => {
{ diff --git a/src/stories/Generic/Input.stories.tsx b/src/stories/Generic/Input.stories.tsx index 85af33306..ba526c5d7 100644 --- a/src/stories/Generic/Input.stories.tsx +++ b/src/stories/Generic/Input.stories.tsx @@ -3,7 +3,6 @@ import FolderInput from '../../renderer/Generics/redesign/Input/FolderInput'; import Input from '../../renderer/Generics/redesign/Input/Input'; - export default { title: 'Generic/Input', component: Input, @@ -23,15 +22,21 @@ Primary.args = { placeholder: 'Test placeholder', }; +export const Icon = Template.bind({}); +Icon.args = { + leftIconId: 'search', + placeholder: 'Test placeholder', +}; + const FolderTemplate: ComponentStory = (args) => ( - + ); export let FolderInputPrimary = FolderTemplate.bind({}); FolderInputPrimary.args = { placeholder: '/Users/Danneh/Library/Application Library/NiceNode/nodes', onClickChange: () => { - alert('Platform specific user prompt to select a folder location') + alert('Platform specific user prompt to select a folder location'); }, - freeStorageSpaceGBs: 250 + freeStorageSpaceGBs: 250, }; From b190d798a279ccd57dcca939feb8667dd9ee4690 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Wed, 16 Nov 2022 18:56:15 -0800 Subject: [PATCH 20/35] tweak outside width --- src/renderer/Generics/redesign/RedesignContainer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/renderer/Generics/redesign/RedesignContainer.tsx b/src/renderer/Generics/redesign/RedesignContainer.tsx index 56b743a73..b0393aa1e 100644 --- a/src/renderer/Generics/redesign/RedesignContainer.tsx +++ b/src/renderer/Generics/redesign/RedesignContainer.tsx @@ -44,6 +44,7 @@ const RedesignContainerStoryBook: React.FC = ({ children }) => { border: '1px dashed #E3E3E3', flexGrow: 1, overflow: 'auto', + width: '100%', /** * Then, because flex items cannot be smaller than the * size of their content – min-height: auto is the From 0c2ae4ece1fbe7b82a34c5e6d8fdc9e51d4e5049 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Thu, 17 Nov 2022 13:11:56 -0800 Subject: [PATCH 21/35] changed contentheader bg color based on feedback --- src/renderer/Generics/redesign/theme.css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/Generics/redesign/theme.css.ts b/src/renderer/Generics/redesign/theme.css.ts index ea8f9ade9..281e1ebfa 100644 --- a/src/renderer/Generics/redesign/theme.css.ts +++ b/src/renderer/Generics/redesign/theme.css.ts @@ -209,7 +209,7 @@ export const [lightTheme, vars] = createTheme({ checkboxBorder: common.color.black25, menuItemSelectIcon: common.color.purple600, contentHeaderBorderBottom: `1px solid ${common.color.black8}`, - contentHeaderBackground: common.color.white80, + contentHeaderBackground: common.color.white100, contentHeaderTitle: common.color.black70, contentHeaderSubtitle: common.color.black50, filterBackground: common.color.white100, From 6ab446d8134914c4ec24d39b700cf716737a7b86 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Thu, 17 Nov 2022 15:19:58 -0800 Subject: [PATCH 22/35] type and timeframe labels --- .../Generics/redesign/Button/Button.tsx | 6 ++++ .../Generics/redesign/Button/button.css.ts | 4 +++ .../Generics/redesign/LogMessage/Logs.tsx | 35 +++++++++++++++++-- .../Generics/redesign/LogMessage/logs.css.ts | 1 + src/renderer/Generics/redesign/theme.css.ts | 2 +- 5 files changed, 45 insertions(+), 3 deletions(-) diff --git a/src/renderer/Generics/redesign/Button/Button.tsx b/src/renderer/Generics/redesign/Button/Button.tsx index c6c260c27..a9fc7610b 100644 --- a/src/renderer/Generics/redesign/Button/Button.tsx +++ b/src/renderer/Generics/redesign/Button/Button.tsx @@ -10,6 +10,7 @@ import { iconStyle, ghostButton, dangerButton, + spaceBetweenButton, } from './button.css'; export interface ButtonProps { @@ -20,6 +21,7 @@ export interface ButtonProps { disabled?: boolean; backgroundColor?: string; ghost?: boolean; + spaceBetween?: boolean; size?: 'small' | 'medium' | 'large'; /** * Text only, with icon, or just icon? @@ -51,6 +53,7 @@ const Button = ({ variant = 'text', type = 'secondary', iconId = 'settings', + spaceBetween = false, wide = false, ghost = false, backgroundColor, @@ -78,6 +81,9 @@ const Button = ({ if (wide) { classNames.push(wideButton); } + if (spaceBetween) { + classNames.push(spaceBetweenButton); + } return (
+ {textAlign === 'left' && ( +
+ )} {rightButtonIconId && ( )} diff --git a/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts b/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts index 6166c6820..636eecf39 100644 --- a/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts +++ b/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts @@ -32,7 +32,7 @@ export const textContainer = style({ textAlign: 'center', selectors: { [`&.left`]: { - textAlign: 'left', + marginLeft: 12, }, }, }); @@ -49,6 +49,10 @@ export const titleStyle = style({ flexGrow: 0, }); +export const spacer = style({ + flex: 1, +}); + export const subtitleStyle = style({ fontWeight: 400, fontSize: '11px', diff --git a/src/renderer/Generics/redesign/LogMessage/logs.css.ts b/src/renderer/Generics/redesign/LogMessage/logs.css.ts index 9e93c4fe0..49d5d9193 100644 --- a/src/renderer/Generics/redesign/LogMessage/logs.css.ts +++ b/src/renderer/Generics/redesign/LogMessage/logs.css.ts @@ -19,7 +19,7 @@ export const logsContainer = style({ export const filterContainer = style({ width: '100%', - // position: 'absolute', + position: 'absolute', boxSizing: 'border-box', display: 'flex', flexDirection: 'row', @@ -29,6 +29,7 @@ export const filterContainer = style({ background: vars.components.filterBackground, borderBottom: vars.components.contentHeaderBorderBottom, boxShadow: vars.color.elevation2boxShadow, + zIndex: 1, }); export const textFilterContainer = style({ From c0b246b27646fd1e2f21720effa1f1d85c03fcdf Mon Sep 17 00:00:00 2001 From: corn-potage Date: Tue, 22 Nov 2022 13:31:43 -0800 Subject: [PATCH 33/35] fixed prettier --- .../Generics/redesign/ContentHeader/ContentHeader.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx b/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx index c630004f8..4479c4b23 100644 --- a/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx +++ b/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx @@ -65,9 +65,7 @@ export const ContentHeader = ({
{title}
{subtitle}
- {textAlign === 'left' && ( -
- )} + {textAlign === 'left' &&
} {rightButtonIconId && ( )} From 4997a09edd2842a9ab3ec1ad829e12801a66f061 Mon Sep 17 00:00:00 2001 From: corn-potage Date: Tue, 22 Nov 2022 16:20:53 -0800 Subject: [PATCH 34/35] fixed some bugs --- src/renderer/Generics/redesign/LogMessage/Logs.tsx | 3 +++ src/renderer/Generics/redesign/MenuItem/MenuItem.tsx | 8 +++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx index 5625991dd..b8573bdf9 100644 --- a/src/renderer/Generics/redesign/LogMessage/Logs.tsx +++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx @@ -190,18 +190,21 @@ export const Logs = ({ sLogs, onClickCloseButton }: LogsProps) => { onClickSetTypeFilter('INFO')} /> onClickSetTypeFilter('WARN')} /> onClickSetTypeFilter('ERROR')} diff --git a/src/renderer/Generics/redesign/MenuItem/MenuItem.tsx b/src/renderer/Generics/redesign/MenuItem/MenuItem.tsx index f2ee868e3..20fe9a0dd 100644 --- a/src/renderer/Generics/redesign/MenuItem/MenuItem.tsx +++ b/src/renderer/Generics/redesign/MenuItem/MenuItem.tsx @@ -1,5 +1,5 @@ import { IconId } from 'renderer/assets/images/icons'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { Checkbox } from '../Checkbox/Checkbox'; import { Icon } from '../Icon/Icon'; import { container, menuItemText, statusDot, selectIcon } from './menuItem.css'; @@ -65,8 +65,10 @@ export const MenuItem = ({ }; return ( -
)} -
+ ); }; From be4d3ec8876595262dc6fc5a16c89c43dd83aafb Mon Sep 17 00:00:00 2001 From: corn-potage Date: Tue, 22 Nov 2022 16:27:57 -0800 Subject: [PATCH 35/35] fix --- src/renderer/Generics/redesign/MenuItem/MenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/Generics/redesign/MenuItem/MenuItem.tsx b/src/renderer/Generics/redesign/MenuItem/MenuItem.tsx index 20fe9a0dd..897666051 100644 --- a/src/renderer/Generics/redesign/MenuItem/MenuItem.tsx +++ b/src/renderer/Generics/redesign/MenuItem/MenuItem.tsx @@ -1,5 +1,5 @@ import { IconId } from 'renderer/assets/images/icons'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { Checkbox } from '../Checkbox/Checkbox'; import { Icon } from '../Icon/Icon'; import { container, menuItemText, statusDot, selectIcon } from './menuItem.css';