| 1 | import { Button, SpinnerIcon, Libp2pIcon, SmallError } from '@ipshipyard/libp2p-inspector-ui' |
| 2 | import { FaServer } from 'react-icons/fa6' |
| 3 | import type { InspectTarget } from '../../ipc/index.ts' |
| 4 | import type { PeerId } from '@libp2p/interface' |
| 5 | import type { JSX } from 'react' |
| 6 | import './target-list.css' |
| 7 | |
| 8 | export interface TargetListPanelProps { |
| 9 | targets: InspectTarget[] |
| 10 | onConnect(evt: React.UIEvent, peer: string | PeerId): void |
| 11 | } |
| 12 | |
| 13 | function getIcon (name: string): JSX.Element { |
| 14 | if (name === 'js-libp2p') { |
| 15 | return <Libp2pIcon /> |
| 16 | } |
| 17 | |
| 18 | return <FaServer /> |
| 19 | } |
| 20 | |
| 21 | function getAction (target: InspectTarget, onConnect: (evt: React.UIEvent, peer: string | PeerId) => void): JSX.Element { |
| 22 | if (target.status === 'ready') { |
| 23 | return <Button onClick={(evt) => onConnect(evt, target.id)}>Inspect</Button> |
| 24 | } |
| 25 | |
| 26 | if (target.status === 'incompatible') { |
| 27 | return <SmallError error='The remote @ipshipyard/inspector-metrics dep is outdated' /> |
| 28 | } |
| 29 | |
| 30 | return <SpinnerIcon /> |
| 31 | } |
| 32 | |
| 33 | export const TargetListPanel = ({ targets, onConnect }: TargetListPanelProps): JSX.Element => { |
| 34 | return ( |
| 35 | <div className='TargetListPanel'> |
| 36 | { |
| 37 | targets.length > 0 |
| 38 | ? ( |
| 39 | <ul> |
| 40 | {targets.map((target, index) => ( |
| 41 | <li key={`node-${index}`}> |
| 42 | {getIcon(target.name)} {target.userAgent} {getAction(target, onConnect)} |
| 43 | </li> |
| 44 | ))} |
| 45 | </ul> |
| 46 | ) |
| 47 | : ( |
| 48 | <> |
| 49 | <p><SpinnerIcon /> Searching...</p> |
| 50 | </> |
| 51 | ) |
| 52 | } |
| 53 | </div> |
| 54 | ) |
| 55 | } |