fix: modify ui to dashboard

package.json

@@ -34,7 +34,7 @@
     "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",

src/bdk.ts

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

src/ui/components/nodeInfo.tsx → src/dashboard/components/nodeInfo.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { Box, Text, Newline } from 'ink'
-import { NodeDetails } from '../models/type/ui.type'
+import { NodeDetails } from '../models/type/dashboard.type'
 import { NodeContextService } from '../services/nodeContext'
 
 export default function NodeInfo (props: any) {

src/ui/components/peerInfo.tsx → src/dashboard/components/peerInfo.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { Box, Text } from 'ink'
 import { NodeContextService } from '../services/nodeContext'
-import { PeerInformation } from '../models/type/ui.type'
+import { PeerInformation } from '../models/type/dashboard.type'
 
 export default function PeerInfo (props: any) {
   const apiUrl: string = props.apiUrl

src/ui/components/status.tsx → src/dashboard/components/status.tsx

@@ -45,7 +45,7 @@ const NodeStatus = memo(function NodeStatus (props: any) {
 
   return (
     <Box width='20%' flexDirection='column' borderStyle='bold' borderColor='white' padding={2}>
-      <Text color={'blue'}>Node Status</Text>
+      <Text color={'#42c5f5'}>Node Status</Text>
       <Newline />
       <Text color={stateColor}>Status: {state}</Text>
       <Newline />

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
 }

src/ui/services/nodeContext.ts → src/dashboard/services/nodeContext.ts

@@ -1,5 +1,5 @@
 import fs from 'fs-extra'
-import { NodeDetails, PeerInformation } from '../models/type/ui.type'
+import { NodeDetails, PeerInformation } from '../models/type/dashboard.type'
 import axios from 'axios'
 
 export class NodeContextService {

src/ui/views/app.tsx → src/dashboard/views/app.tsx

@@ -6,7 +6,8 @@ import NodeStatus from '../components/status'
 import NodeInfo from '../components/nodeInfo'
 import PeerInfo from '../components/peerInfo'
 import { NodeContextService } from '../services/nodeContext'
-import { NodeListType } from '../models/type/ui.type'
+import { NodeListType } from '../models/type/dashboard.type'
+import { debounce } from '../../util'
 
 export default function App () {
   const { exit } = useApp()
@@ -57,19 +58,19 @@ export default function App () {
 
   const [nodeType, setNodeType] = useState<string>(NodeList[0].value)
   const [nodeName, setNodeName] = useState<string>(NodeList[0].label)
-  const selectNode = (item: NodeListType) => {
+  const selectNode = debounce((item: NodeListType) => {
     setNodeType(item.value)
     setNodeName(item.label)
-  }
+  }, 100)
 
   return (
     <Box flexDirection='column' width={width} height={height}>
       <Box height="35%" flexDirection='row'>
         <Box width="70%" flexDirection='row'>
           <Box width="30%" flexDirection='column' borderStyle='bold' borderColor='white' padding={2}>
-            <Text color={'blue'}>Select Node: </Text>
+            <Text color={'#42c5f5'}>Select Node: </Text>
             <Newline/>
-            <SelectInput items={NodeList} onSelect={selectNode} />
+            <SelectInput items={NodeList} onHighlight={selectNode} />
             <Newline/>
             <Text color={'#00FF19'}>Current node: {nodeName}  {nodeType}</Text>
           </Box>