diff --git a/src/ui/components/dockerlogs.tsx b/src/ui/components/dockerlogs.tsx new file mode 100644 index 00000000..771d73ea --- /dev/null +++ b/src/ui/components/dockerlogs.tsx @@ -0,0 +1,43 @@ +import React, { useState, useEffect } from 'react' +import { Text, Box } from 'ink' +import Docker from 'dockerode' + +export default function DockerLogs () { + const docker = new Docker() + const [containers, setContainers] = useState([]) + + const listContainers = () => { + docker.listContainers({ all: true }, (err: any, containerList: any) => { + if (err) { + console.error('Error:', err) + } else { + setContainers(containerList) + } + }) + } + + useEffect(() => { + listContainers() + + // renew state every 10 seconds + const interval = setInterval(listContainers, 10000) + + return () => { + clearInterval(interval) + } + }, []) + + return ( + + {containers.map((container: any) => ( + + Container ID: {container.Id} + Image: {container.Image} + Name: {container.Names.join(', ')} + Status: {container.Status} + {/* Ports: {container.Ports.map((port:any) => `${port.PrivatePort}:${port.PublicPort}`).join(', ')} */} + + ))} + + ) +} diff --git a/src/ui/components/logo.tsx b/src/ui/components/logo.tsx new file mode 100644 index 00000000..077155cc --- /dev/null +++ b/src/ui/components/logo.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import { Newline, Text, Box } from 'ink' + +export default function Logo () { + return ( + + + {' '}:::::::: ::::::: ::: ::: + {' '}:+: :+: :+: :+: :+: :+: + {' '}+:+ +:+ +:+ +:+ +:+ +:+ + {' '}+#++:++#+ +#+ +:+ +#++:++ + {' '}+#+ +#+ +#+ +#+ +#+ +#+ + {' '}#+# #+# #+# #+# #+# #+# + ######## ######## ### ### + + ) +} diff --git a/src/ui/components/option.tsx b/src/ui/components/option.tsx new file mode 100644 index 00000000..9a7d2f2d --- /dev/null +++ b/src/ui/components/option.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import { Box } from 'ink' +import Terminal from './terminal' + +export default function Option ({ networkType }: any) { + return ( + <> + + + + + ) +} diff --git a/src/ui/components/selectInput.tsx b/src/ui/components/selectInput.tsx new file mode 100644 index 00000000..32509a60 --- /dev/null +++ b/src/ui/components/selectInput.tsx @@ -0,0 +1,42 @@ +import React, { useState } from 'react' +import { Text, Box } from 'ink' +import SelectInput from 'ink-select-input' +import CommandContext from '../services/commandContext' + +export default function Select ({ setNetworkType }:any) { + const commandContext = new CommandContext() + + const [items, setItems] = useState([ + { + label: 'Fabric', + value: 'bdk fabric', + }, + { + label: 'Quorum', + value: 'bdk quorum', + }, + ]) + + const selectChain = (item: any) => { + setNetworkType(item.value) + } + + const handleCommand = (item: any) => { + const commandList = commandContext.makeItem(item.value) + if (commandList.length === 0) { + commandContext.executeCommand(item.value) + } else setItems(commandList) + } + + return ( + <> + + + Choose a type of network to deploy: + + + + + + ) +} diff --git a/src/ui/components/table.tsx b/src/ui/components/table.tsx deleted file mode 100644 index aaedd9a7..00000000 --- a/src/ui/components/table.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' -import { Box } from 'ink' - -export default function Table () { - return ( - - - props - - - ) -} diff --git a/src/ui/views/terminal.tsx b/src/ui/components/terminal.tsx similarity index 65% rename from src/ui/views/terminal.tsx rename to src/ui/components/terminal.tsx index 7ff89026..92a79e96 100644 --- a/src/ui/views/terminal.tsx +++ b/src/ui/components/terminal.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import { Text, Box } from 'ink' import CommandContext from '../services/commandContext' interface TerminalProps { @@ -6,17 +6,17 @@ interface TerminalProps { } export default function Terminal (props: TerminalProps) { const commandContext = new CommandContext() - const [output, setOutput] = React.useState('') - React.useEffect(() => { + const [output, setOutput] = useState('') + useEffect(() => { setOutput(commandContext.getCommandHelp(props.type)) }, [props.type]) return ( - + <> Command output: - {output} + {output} - + ) } diff --git a/src/ui/views/app.tsx b/src/ui/views/app.tsx index 69becd4d..26dfa8c9 100644 --- a/src/ui/views/app.tsx +++ b/src/ui/views/app.tsx @@ -1,59 +1,78 @@ -import React, { useState } from 'react' -import { Box, Text, useApp, useInput } from 'ink' -import Logo from './logo' -import Command from './command' -import DockerLogs from './dockerLogs' -import Terminal from './terminal' -import SelectInput from 'ink-select-input' -import CommandContext from '../services/commandContext' +import React, { useState, useEffect } from 'react' +import { Box, Text, useApp, useInput, useStdout } from 'ink' +import Logo from '../components/logo' +import Select from '../components/selectInput' +import Option from '../components/option' +import DockerLogs from '../components/dockerlogs' export default function App () { const { exit } = useApp() - const commandContext = new CommandContext() - const [type, setType] = useState('bdk fabric') - const [items, setItems] = useState([ - { - label: 'Fabric', - value: 'bdk fabric', - }, - { - label: 'Quorum', - value: 'bdk quorum', - }, - ]) + useInput((input, key) => { if (input === 'q' || (key.ctrl && input === 'c') || key.escape) { exit() } }) - const selectChain = (item:any) => { - setType(item.value) - } + const { stdout }: any = useStdout() + const [width, setWidth] = useState(stdout.columns || 80) + const [height, setHeight] = useState(stdout.rows || 24) + const [, setWindowSize] = useState({ + columns: process.stdout.columns, + rows: process.stdout.rows, + }) + + useEffect(() => { + const handleResize = () => { + setWidth(stdout.columns) + setHeight(stdout.rows) + } + + process.stdout.on('resize', handleResize) + return () => { + process.stdout.off('resize', handleResize) + } + }, [stdout.columns, stdout.rows]) + + useEffect(() => { + const handleResize = () => { + setWindowSize({ + columns: process.stdout.columns, + rows: process.stdout.rows, + }) + } + + process.stdout.on('resize', handleResize) + + return () => { + process.stdout.off('resize', handleResize) + } + }, []) - const handleCommand = (item: any) => { - const commandList = commandContext.makeItem(item.value) - if (commandList.length === 0) { - commandContext.executeCommand(item.value) - } else setItems(commandList) - } + const [networkType, setNetworkType] = useState('bdk fabric') return ( - - - + + + + + +