chore: add pubsub debug

Author: achingbrain

package.json

@@ -19,11 +19,10 @@
     }
   },
   "dependencies": {
-    "@libp2p/devtools-metrics": "^1.0.1",
+    "@libp2p/interface": "^2.1.2",
+    "@libp2p/devtools-metrics": "*",
     "@multiformats/multiaddr": "^12.2.3",
     "@multiformats/multiaddr-matcher": "^1.2.1",
-    "it-drain": "^3.0.7",
-    "it-foreach": "^2.1.1",
     "it-pipe": "^3.0.1",
     "it-pushable": "^3.2.3",
     "it-rpc": "^1.0.0",

src/app.css

@@ -20,6 +20,7 @@
   --action-border-color: #047DB7;
 
   --success-text-colour: #6DD58C;
+  --dark-success-color: #2c5639;
 }
 
 .light {
@@ -29,7 +30,7 @@
   --dark-text-color: #8F8F8F;
 
   --warning-text-color: #8a0000;
-  --dark-warning-text-color: #4a0000;
+  --dark-warning-color: #4a0000;
 }
 
 body {

src/app.tsx

@@ -1,34 +1,34 @@
 import './app.css'
 import 'react'
-import { Component } from 'react'
-import { createRoot } from 'react-dom/client'
-import { getBrowserTheme } from './utils/get-theme.js'
-import { Inspector } from './panels/inspector.js'
-import { FloatingPanel } from './panels/floating-panel.js'
 import { LIBP2P_DEVTOOLS_METRICS_KEY } from '@libp2p/devtools-metrics'
-import type { DevToolsEvents, MetricsRPC, Peer, RPCMessage } from '@libp2p/devtools-metrics'
-import { evalOnPage } from './utils/eval-on-page.js'
+import { valueCodecs } from '@libp2p/devtools-metrics/rpc'
+import { TypedEventEmitter } from '@libp2p/interface'
+import { pipe } from 'it-pipe'
+import { pushable } from 'it-pushable'
+import { rpc } from 'it-rpc'
+import { base64 } from 'multiformats/bases/base64'
+import { Component, type ReactElement } from 'react'
+import { createRoot } from 'react-dom/client'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import { dark } from 'react-syntax-highlighter/dist/esm/styles/hljs'
-import { sendMessage, events } from './utils/send-message.js'
-import { defer, type DeferredPromise } from './utils/defer.js'
-import { getPlatform } from './utils/get-platform.js'
+import { DetectingPanel } from './panels/detecting.js'
+import { FloatingPanel } from './panels/floating-panel.js'
 import { GrantPermissions } from './panels/grant-permissions.js'
-import { pushable, type Pushable } from 'it-pushable'
-import { rpc, type RPC } from 'it-rpc'
-import { valueCodecs } from '@libp2p/devtools-metrics/rpc'
-import { base64 } from 'multiformats/bases/base64'
-import { pipe } from 'it-pipe'
-import { TypedEventEmitter } from '@libp2p/interface'
-import { DetectingPanel } from './panels/detecting'
-import type { TypedEventTarget } from '@libp2p/interface'
+import { Inspector } from './panels/inspector.js'
+import { defer } from './utils/defer.js'
+import { evalOnPage } from './utils/eval-on-page.js'
+import { getPlatform } from './utils/get-platform.js'
+import { getBrowserTheme } from './utils/get-theme.js'
+import { sendMessage, events } from './utils/send-message.js'
+import type { DeferredPromise } from './utils/defer.js'
+import type { DevToolsEvents, MetricsRPC, Peer, RPCMessage } from '@libp2p/devtools-metrics'
+import type { TypedEventTarget, Message } from '@libp2p/interface'
+import type { Pushable } from 'it-pushable'
+import type { RPC } from 'it-rpc'
 
 const theme = getBrowserTheme()
 const platform = getPlatform()
 
-console.info('theme is', theme, 'browser is', platform)
-
-
 interface OfflineAppState {
   status: 'init' | 'missing' | 'permissions'
 }
@@ -43,11 +43,13 @@ interface OnlineAppState {
   self: Peer
   peers: Peer[]
   debug: string
+  capabilities: Record<string, string[]>
+  pubsub: Record<string, Message[]>
 }
 
 type AppState = OfflineAppState | ErrorAppState | OnlineAppState
 
-const ErrorPanel = ({ error }: { error: Error }) => {
+const ErrorPanel = ({ error }: { error: Error }): ReactElement => {
   return (
     <>
       <FloatingPanel>
@@ -61,7 +63,7 @@ const ErrorPanel = ({ error }: { error: Error }) => {
   )
 }
 
-const MissingPanel = () => {
+const MissingPanel = (): ReactElement => {
   return (
     <>
       <FloatingPanel>
@@ -82,17 +84,19 @@ const node = await createLibp2p({
   )
 }
 
-const GrantPermissionsPanel = () => {
+const GrantPermissionsPanel = (): ReactElement => {
   return (
     <>
       <FloatingPanel>
         <h2>Permissions</h2>
         <p>No data has been received from the libp2p node running on the page.</p>
         <p>You may need to grant this extension access to the current page.</p>
         {
-          platform === 'unknown' ? (
-            <p>Please see your browser documentation for how to do this.</p>
-          ) : <GrantPermissions />
+          platform === 'unknown'
+            ? (
+              <p>Please see your browser documentation for how to do this.</p>
+              )
+            : <GrantPermissions />
         }
       </FloatingPanel>
     </>
@@ -141,11 +145,24 @@ class App extends Component {
       }))
     })
 
+    this.events.addEventListener('pubsub:message', (evt) => {
+      this.setState(s => ({
+        ...s,
+        pubsub: {
+          ...(s.pubsub ?? {}),
+          [evt.detail.topic ?? '']: [
+            ...(s.pubsub[evt.detail.topic] ?? []),
+            evt.detail
+          ]
+        }
+      }))
+    })
+
     this.rpc.createTarget('devTools', this.events)
 
     // send RPC messages
     Promise.resolve()
-     .then(async () => {
+      .then(async () => {
         await pipe(
           this.rpcQueue,
           this.rpc,
@@ -158,10 +175,10 @@ class App extends Component {
             }
           }
         )
-     })
-     .catch(err => {
-       console.error('error while reading RPC messages', err)
-     })
+      })
+      .catch(err => {
+        console.error('error while reading RPC messages', err)
+      })
 
     // receive RPC messages
     events.addEventListener('libp2p-rpc', (event) => {
@@ -183,7 +200,7 @@ class App extends Component {
     this.init()
   }
 
-  init () {
+  init (): void {
     Promise.resolve().then(async () => {
       const metricsPresent = await evalOnPage<boolean>(`${LIBP2P_DEVTOOLS_METRICS_KEY} === true`)
 
@@ -197,15 +214,17 @@ class App extends Component {
       const signal = AbortSignal.timeout(2000)
 
       try {
-        const { self, peers, debug } = await this.metrics.init({
+        const { self, peers, debug, capabilities } = await this.metrics.init({
           signal
         })
 
         this.setState({
           status: 'online',
           self,
           peers,
-          debug
+          debug,
+          capabilities,
+          pubsub: {}
         })
       } catch (err: any) {
         if (signal.aborted) {
@@ -221,17 +240,17 @@ class App extends Component {
         })
       }
     })
-    .catch(err => {
-      console.error('error communicating with page', err)
+      .catch(err => {
+        console.error('error communicating with page', err)
 
-      this.setState({
-        status: 'error',
-        error: err
+        this.setState({
+          status: 'error',
+          error: err
+        })
       })
-    })
   }
 
-  render() {
+  render (): ReactElement {
     if (this.state.status === 'init') {
       return (
         <DetectingPanel />

src/panels/debug.tsx

@@ -1,21 +1,20 @@
-import 'react'
-import { useState } from 'react'
-import { Panel } from './panel.js'
+import { useState, type ReactElement } from 'react'
 import { Button } from './button.js'
+import { Panel } from './panel.js'
+import { SmallError, SmallSuccess } from './status.js'
 import { TextInput } from './text-input.js'
 import type { MetricsRPC } from '@libp2p/devtools-metrics'
-import { SmallError, SmallSuccess } from './status.js'
 
 export interface DebugProps {
   metrics: MetricsRPC
   debug: string
 }
 
-export function Debug ({ metrics, debug }: DebugProps) {
+export function Debug ({ metrics, debug }: DebugProps): ReactElement {
   const [namespace, setNamespace] = useState(debug)
   const [result, setResult] = useState(<small>E.g. `libp2p:*`, `libp2p:kad-dht*,*:trace`, etc</small>)
 
-  function sendDebug (evt: { preventDefault: () => void }, namespace: string): boolean {
+  function sendDebug (evt: { preventDefault(): void }, namespace: string): boolean {
     evt.preventDefault()
 
     metrics.setDebug(namespace)
@@ -35,7 +34,7 @@ export function Debug ({ metrics, debug }: DebugProps) {
       <h2>Debug</h2>
       <p>Enter the name of one or more libp2p components to enable logging in the console tab or disable it completely</p>
       <form onSubmit={(evt) => sendDebug(evt, namespace)}>
-        <TextInput type="text" value={namespace} placeholder="libp2p:*" onChange={(e) => setNamespace(e.target.value)} />
+        <TextInput type="text" value={namespace} placeholder="libp2p:*" onChange={(e) => { setNamespace(e.target.value) }} />
         <Button onClick={(evt) => sendDebug(evt, namespace)} primary={true}>Go</Button>
         <Button onClick={(evt) => sendDebug(evt, '')} danger={true}>Disable</Button>
       </form>

src/panels/inspector.tsx

@@ -1,34 +1,54 @@
-import 'react'
 import { useState } from 'react'
+import libp2pLogo from '../../public/img/libp2p.svg'
+import { Debug } from './debug.js'
 import { Menu } from './menu.js'
+import { Node } from './node.js'
 import { Peers } from './peers/index.js'
+import { PubSub } from './pubsub/index.js'
 import { Routing } from './routing/index.js'
-import { Node } from './node.js'
-import { Debug } from './debug.js'
 import type { MetricsRPC, Peer } from '@libp2p/devtools-metrics'
-import libp2pLogo from '../../public/img/libp2p.svg'
+import type { Message } from '@libp2p/interface'
+import type { ReactElement } from 'react'
 
 export interface InspectorProps {
   self: Peer
   peers: Peer[]
   debug: string
   metrics: MetricsRPC
+  capabilities: Record<string, string[]>
+  pubsub: Record<string, Message[]>
 }
 
-export function Inspector ({ self, peers, debug, metrics }: InspectorProps) {
-  const [panel, setPanel] = useState('Node')
+export function Inspector ({ self, peers, debug, metrics, capabilities, pubsub }: InspectorProps): ReactElement {
+  const panels = ['Node', 'Peers', 'Debug', 'Routing']
+  const [panel, setPanel] = useState(panels[0])
 
   const logo = (
     <img src={libp2pLogo} height={24} width={24} className={'Icon'} />
   )
 
+  const pubSubComponent = findPubSubComponent(capabilities)
+
+  if (pubSubComponent != null) {
+    panels.push('PubSub')
+  }
+
   return (
     <>
-      <Menu logo={logo} onClick={(panel) => setPanel(panel)} panel={panel} options={['Node', 'Peers', 'Debug', 'Routing']} />
+      <Menu logo={logo} onClick={(panel) => { setPanel(panel) }} panel={panel} options={panels} />
       { panel === 'Node' ? <Node self={self} /> : undefined }
       { panel === 'Peers' ? <Peers peers={peers} metrics={metrics} /> : undefined }
       { panel === 'Debug' ? <Debug metrics={metrics} debug={debug} /> : undefined }
       { panel === 'Routing' ? <Routing metrics={metrics} /> : undefined }
+      { panel === 'PubSub' ? <PubSub component={pubSubComponent ?? ''} metrics={metrics} pubsub={pubsub} /> : undefined}
     </>
   )
 }
+
+function findPubSubComponent (capabilities: Record<string, string[]>): string | undefined {
+  for (const component of Object.keys(capabilities)) {
+    if (capabilities[component].includes('@libp2p/pubsub')) {
+      return component
+    }
+  }
+}

src/panels/menu.tsx

@@ -1,20 +1,21 @@
 import 'react'
 import './menu.css'
+import type { ReactElement } from 'react'
 
 export interface MenuProps {
-  onClick: (arg: string) => void
+  onClick(arg: string): void
   panel: string
   options: string[]
   logo?: JSX.Element
 }
 
-export function Menu ({ onClick, panel, options, logo }: MenuProps) {
+export function Menu ({ onClick, panel, options, logo }: MenuProps): ReactElement {
   return (
     <div className='Menu'>
       {logo}
       {
         options.map(option => (
-          <button key={option} onClick={() => onClick(option)} className={panel === option ? 'selected' : ''}>{option}</button>
+          <button key={option} onClick={() => { onClick(option) }} className={panel === option ? 'selected' : ''}>{option}</button>
         ))
       }
     </div>