| 1 | import { useState } from 'react' |
| 2 | import { Button } from './button.js' |
| 3 | import { Panel } from './panel.js' |
| 4 | import { SmallError, SmallSuccess } from './status.js' |
| 5 | import { TextInput } from './text-input.js' |
| 6 | import type { MetricsRPC } from '@ipshipyard/libp2p-inspector-metrics' |
| 7 | import type { ReactElement } from 'react' |
| 8 | |
| 9 | export interface DebugProps { |
| 10 | metrics: MetricsRPC |
| 11 | debug: string |
| 12 | } |
| 13 | |
| 14 | export function Debug ({ metrics, debug }: DebugProps): ReactElement { |
| 15 | const [namespace, setNamespace] = useState(debug) |
| 16 | const [result, setResult] = useState(<small>E.g. `libp2p:*`, `libp2p:kad-dht*,*:trace`, etc</small>) |
| 17 | |
| 18 | function sendDebug (evt: { preventDefault(): void }, namespace: string): boolean { |
| 19 | evt.preventDefault() |
| 20 | |
| 21 | metrics.setDebug(namespace) |
| 22 | .then(() => { |
| 23 | setNamespace(namespace) |
| 24 | setResult(<SmallSuccess message='Update successful' />) |
| 25 | }, (err: any) => { |
| 26 | setResult(<SmallError error={err} />) |
| 27 | }) |
| 28 | |
| 29 | return false |
| 30 | } |
| 31 | |
| 32 | return ( |
| 33 | <Panel> |
| 34 | <h2>Debug</h2> |
| 35 | <p>Enter the name of one or more libp2p components to enable logging in the console tab or disable it completely</p> |
| 36 | <form onSubmit={(evt) => sendDebug(evt, namespace)}> |
| 37 | <TextInput type='text' value={namespace} placeholder='libp2p:*' onChange={(e) => { setNamespace(e.target.value) }} /> |
| 38 | <Button onClick={(evt) => sendDebug(evt, namespace)} primary>Go</Button> |
| 39 | <Button onClick={(evt) => sendDebug(evt, '')} danger>Disable</Button> |
| 40 | </form> |
| 41 | {result} |
| 42 | </Panel> |
| 43 | ) |
| 44 | } |