update: 2.1.0 bdk dashboard (#102)

* refactor: replace all then to promise (#96)

* feat: bootnode mode (#97)

* feat: bootnode mode

* feat: assign specified node to be bootnode

* fix: remove console log

* fix: eslink and test

* fix: adjust for pr comments

* feat: optimize create network process (#100)

* feat:  transform bdk ui to quorum dashboard (#99)

* feat: bdk ui dashboard

* fix: modify reviewed code

* fix(ui): network info json location

---------

Co-authored-by: kidneyweak <[email protected]>

* fix: modify ui to dashboard (#101)

* update: 2.1.0 bdk dashboard

* fix(ca): promise catch test error (#103)

---------

Co-authored-by: Chengwei-Lin <[email protected]>
Co-authored-by: JakeKuo <[email protected]>
Co-authored-by: PianoChicken <[email protected]>

.gitignore

@@ -117,3 +117,6 @@ src/command/test.ts
 
 
 .scannerwork
+
+# Pnpm lockfile
+pnpm-lock.yaml

CHANGELOG.md

@@ -3,6 +3,14 @@
 這份文件將記錄 BDK 專案的變更日誌
 
 All notable changes to BDK project will be documented here.
+## [v2.1.0](https://github.com/cathayddt/bdk/releases/tag/v2.1.0) - 2024-02-01
+
+### Features
+
+* Transform bdk ui to quorum dashboard [#99](https://github.com/cathayddt/bdk/issues/99)
+* Optimize create network process [#100](https://github.com/cathayddt/bdk/issues/100)
+* Bootnode mode [#97](https://github.com/cathayddt/bdk/issues/97)
+
 ## [v2.0.5](https://github.com/cathayddt/bdk/releases/tag/v2.0.5) - 2023-12-05
 
 ### Features

README.md

@@ -34,9 +34,9 @@ bdk fabric network create -i
 
 |      Latest      |      Stable      |
 | ---------------- | ---------------- |
-| [v2.0.5][v2.0.5] | [v2.0.5][v2.0.5] |
+| [v2.1.0][v2.1.0] | [v2.1.0][v2.1.0] |
 
-[v2.0.5]: https://github.com/cathayddt/bdk/releases/tag/v2.0.5
+[v2.1.0]: https://github.com/cathayddt/bdk/releases/tag/v2.1.0
 
 [更新內容 (Changelog)](CHANGELOG.md)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cathayddt/bdk",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "Blockchain Deploy Kit",
   "homepage": "https://github.com/cathayddt/bdk#readme",
   "bugs": {
@@ -34,18 +34,19 @@
     "init:autocomplete": "bdk fabric completion > $HOME/.bash_bdk",
     "build:console": "ts-node src/console.ts",
     "start:dev": "NODE_ENV=development nodemon --watch 'src/**/*' -e ts,tsx --exec 'ts-node' src/console.ts",
-    "start:ui": "NODE_ENV=ui nodemon --watch 'src/**/*' -e ts,tsx --exec 'ts-node' src/console.ts",
+    "start:dashboard": "NODE_ENV=dashboard nodemon --watch 'src/**/*' -e ts,tsx --exec 'ts-node' src/console.ts",
     "test": "NODE_ENV=testing BDK_PATH=$(pwd)/test/bdk BDK_DOCKER_HOST_PATH=$(pwd)/test/bdk mocha --reporter spec --require ts-node/register ./test/**/*.test.ts --exit",
     "test:dev": "nodemon --watch 'test/**/*.test.ts' -e ts,tsx --exec npm run test",
     "test:nyan": "NODE_ENV=testing mocha --reporter nyan --require ts-node/register ./test/**/*.test.ts --exit",
     "test:quorum": "nyc npm run test -- --grep Quorum",
     "test:fabric": "nyc npm run test -- --grep Fabric",
     "test:coverage": "nyc npm run test",
     "test:json": "NODE_ENV=testing BDK_PATH=$(pwd)/test/bdk BDK_DOCKER_HOST_PATH=$(pwd)/test/bdk mocha --reporter json --require ts-node/register ./test/**/*.test.ts --exit > test-results.json",
-    "git:changelog": "git-cliff --unreleased --tag v2.0.5 --prepend CHANGELOG.md",
+    "git:changelog": "git-cliff --unreleased --tag v2.1.0 --prepend CHANGELOG.md",
     "doc:create": "npx typedoc --readme none --out ./api-docs --packages  ."
   },
   "dependencies": {
+    "axios": "^1.6.5",
     "deep-object-diff": "^1.1.0",
     "dockerode": "^3.3.5",
     "dotenv": "^16.3.1",
@@ -98,4 +99,4 @@
   "publishConfig": {
     "@cathayddt:registry": "https://npm.pkg.github.com"
   }
-}
+}

src/bdk.ts

@@ -28,7 +28,7 @@ const argv = yargs
   .commandDir('quorum')
   .commandDir('wallet')
   .commandDir('hello')
-  .commandDir('ui')
+  .commandDir('dashboard')
   .strict()
   .demandCommand()
   .completion()

src/dashboard/components/nodeInfo.tsx

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react'
+import { Box, Text, Newline } from 'ink'
+import { NodeDetails } from '../models/type/dashboard.type'
+import { NodeContextService } from '../services/nodeContext'
+
+export default function NodeInfo (props: any) {
+  const apiUrl = props.apiUrl
+  const nodeInformationService = new NodeContextService(apiUrl)
+  const [nodeInfo, setNodeInfo] = useState<NodeDetails>()
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await nodeInformationService.getNodeDetails()
+      setNodeInfo(res)
+    }
+    fetchData()
+      .then((response) => { return response })
+      .catch((error) => { return error })
+  }, [apiUrl])
+
+  return (
+    <Box width='50%' flexDirection='column' borderStyle='bold' borderColor='white' padding={1}>
+      <Text color={'#00FF19'}>Node ID: {nodeInfo?.id}</Text>
+      <Newline />
+      <Text color={'white'}>Node Name: {nodeInfo?.name}</Text>
+      <Newline />
+      <Text color={'white'}>Enode: {nodeInfo?.enode}</Text>
+      <Newline />
+      <Text color={'white'}>IP Address: {nodeInfo?.ip}</Text>
+    </Box>
+  )
+}

src/dashboard/components/peerInfo.tsx

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react'
+import { Box, Text } from 'ink'
+import { NodeContextService } from '../services/nodeContext'
+import { PeerInformation } from '../models/type/dashboard.type'
+
+export default function PeerInfo (props: any) {
+  const apiUrl: string = props.apiUrl
+  const nodeInformationService = new NodeContextService(apiUrl)
+  const [jsonData, setJsonData] = useState<PeerInformation[]>([])
+
+  const fetchData = async () => {
+    const res: PeerInformation[] = await nodeInformationService.getNodePeers()
+    setJsonData(res)
+  }
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      fetchData()
+        .then((response) => { return response })
+        .catch((error) => { return error })
+    }, 2500)
+
+    return () => clearInterval(intervalId)
+  }, [apiUrl, jsonData])
+
+  return (
+    <Box height='65%' flexDirection='column' borderStyle='bold' borderColor='white'>
+      <Box height='10%' justifyContent='center'>
+        <Text color={'white'} bold>Peer Information</Text>
+      </Box>
+      <Box height='90%' flexDirection='column'>
+        { jsonData?.map((item: PeerInformation, index: number) => {
+          return (
+            <Box key={index} flexDirection='row' marginBottom={1} marginX={2} paddingLeft={3}>
+              <Text color={'#00FF19'}>ID: {item.id}</Text>
+              <Text>     </Text>
+              <Text color={'white'}>E-Node: {item.enode}</Text>
+              <Text>     </Text>
+              <Text color={'white'}>Local Address: {item.network?.localAddress}</Text>
+              <Text>     </Text>
+              <Text color={'white'}>Remote Address: {item.network?.remoteAddress}</Text>
+            </Box>
+          )
+        },
+        )}
+      </Box>
+    </Box>
+  )
+}

src/dashboard/components/status.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect, useLayoutEffect, memo } from 'react'
+import { Box, Text, Newline } from 'ink'
+import { NodeContextService } from '../services/nodeContext'
+import { debounce } from '../../util'
+
+const NodeStatus = memo(function NodeStatus (props: any) {
+  const apiUrl = props.apiUrl
+  const nodeInformationService = new NodeContextService(apiUrl)
+  const [state, setState] = useState<string>('shutdown')
+  const [stateColor, setStateColor] = useState<string>('#FF000F')
+  const [block, setBlock] = useState<number>(0)
+  const [peer, setPeer] = useState<number>(0)
+
+  const fetchData = async () => {
+    const res = await nodeInformationService.getBlocks()
+    setBlock(res)
+  }
+
+  const fetchPeerData = async () => {
+    const res = await nodeInformationService.getPeers()
+    setPeer(res)
+  }
+
+  const debouncedFetchData = debounce(fetchData, 2500)
+  const debouncedFetchPeerData = debounce(fetchPeerData, 2500)
+
+  useLayoutEffect(() => {
+    const intervalId = setInterval(() => {
+      debouncedFetchData()
+      debouncedFetchPeerData()
+    }, 2500)
+
+    return () => clearInterval(intervalId)
+  }, [apiUrl])
+
+  useEffect(() => {
+    if (block !== 0) {
+      setState('running')
+      setStateColor('#00FF19')
+    } else {
+      setState('shutdown')
+      setStateColor('#FF000F')
+    }
+  }, [block, peer])
+
+  return (
+    <Box width='20%' flexDirection='column' borderStyle='bold' borderColor='white' padding={2}>
+      <Text color={'#42c5f5'}>Node Status</Text>
+      <Newline />
+      <Text color={stateColor}>Status: {state}</Text>
+      <Newline />
+      <Text color={'#FF0099'}>Blocks: {block}</Text>
+      <Newline />
+      <Text color={'cyan'}>Peers: {peer}</Text>
+      <Newline />
+    </Box>
+  )
+},
+)
+export default NodeStatus

src/ui/ui.tsx → src/dashboard/dashboard.tsx

@@ -3,9 +3,9 @@ import { Argv } from 'yargs'
 import { render } from 'ink'
 import App from './views/app.js'
 
-export const command = 'ui'
+export const command = 'dashboard'
 
-export const desc = '使用 ui 模式'
+export const desc = '使用 dashboard 模式'
 export const builder = (yargs: Argv<any>) => {
   return yargs
 }