feat: add dht lookups

.npmrc

@@ -1 +1 @@
-package-lock=false
+package-lock=false

jsx-packages.js

@@ -6,6 +6,7 @@ const jsxPackages = [
   'catalogue',
   'connections-table',
   'dht-buckets',
+  'dht-queries',
   'events-table',
   'sdk',
   'shell',

package.json

@@ -24,8 +24,10 @@
     "prepare": "lerna run prepare",
     "prettier": "prettier --check './**/*.js'",
     "prettier-fix": "prettier --write './**/*.js'",
+    "protoc": "lerna exec --scope=\"@libp2p/observer-proto\" -- npm run protoc",
     "storybook:connections-table": "lerna exec --scope=\"@libp2p/observer-connections-table\" -- npm run storybook",
     "storybook:dht-buckets": "lerna exec --scope=\"@libp2p/observer-dht-buckets\" -- npm run storybook",
+    "storybook:dht-queries": "lerna exec --scope=\"@libp2p/observer-dht-queries\" -- npm run storybook",
     "storybook:sdk": "lerna exec --scope=\"@libp2p/observer-sdk\" -- npm run storybook",
     "storybook:streams-table": "lerna exec --scope=\"@libp2p/observer-streams-table\" -- npm run storybook",
     "start:app": "lerna exec --scope=\"@libp2p/observer-app\" -- npm run start",

packages/app/package.json

@@ -30,6 +30,7 @@
     "@libp2p/observer-catalogue": "^1.1.0",
     "@libp2p/observer-connections-table": "^1.1.0",
     "@libp2p/observer-dht-buckets": "^1.1.0",
+    "@libp2p/observer-dht-queries": "./packages/dht-queries",
     "@libp2p/observer-events-table": "^1.1.0",
     "@libp2p/observer-samples": "^1.1.0",
     "@libp2p/observer-streams-table": "^1.1.0",

packages/app/src/widgets.js

@@ -1,6 +1,13 @@
 import * as connectionsTable from '@libp2p/observer-connections-table'
 import * as dhtBuckets from '@libp2p/observer-dht-buckets'
+import * as dhtQueries from '@libp2p/observer-dht-queries'
 import * as eventsTable from '@libp2p/observer-events-table'
 import * as streamsTable from '@libp2p/observer-streams-table'
 
-export default [connectionsTable, dhtBuckets, eventsTable, streamsTable]
+export default [
+  connectionsTable,
+  dhtBuckets,
+  dhtQueries,
+  eventsTable,
+  streamsTable,
+]

packages/catalogue/definitions/approvedWidgets.js

@@ -2,12 +2,14 @@ import { validateWidgetFields } from './utils'
 
 import * as connectionsTable from '@libp2p/observer-connections-table'
 import * as dhtBuckets from '@libp2p/observer-dht-buckets'
+import * as dhtQueries from '@libp2p/observer-dht-queries'
 import * as eventsTable from '@libp2p/observer-events-table'
 import * as streamsTable from '@libp2p/observer-streams-table'
 
 const approvedWidgets = [
   validateWidgetFields(connectionsTable),
   validateWidgetFields(dhtBuckets),
+  validateWidgetFields(dhtQueries),
   validateWidgetFields(eventsTable),
   validateWidgetFields(streamsTable),
 ]

packages/data/lib/dht.js

@@ -57,6 +57,10 @@ function getDhtPeers(state, status = null) {
   return peers.filter(peer => peer.getStatus() === statusNum)
 }
 
+function getAllDhtLookups(state) {
+  return getDht(state).getLookupsList()
+}
+
 function getAllDhtBuckets(state) {
   return getDht(state).getBucketsList()
 }
@@ -160,4 +164,5 @@ module.exports = {
   getAllDhtBuckets,
   getDhtQueryTimes,
   getKademliaDistance,
+  getAllDhtLookups,
 }

packages/dht-queries/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/dht-queries/.storybook/config.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import styled from 'styled-components'
+import { configure, addDecorator } from '@storybook/react'
+import {
+  ThemeWrapper,
+  DataDemoWrapper,
+  ShellDemoWrapper,
+} from '@libp2p/observer-testing'
+import WidgetContext from '../components/context/WidgetContext'
+
+import sampleUrl from '../test-fixtures/sample-dht-2min.mock'
+
+function getWrapper(wrapper) {
+  switch (wrapper) {
+    case 'shell':
+      return ShellDemoWrapper
+    case 'data':
+      return DataDemoWrapper
+    case 'theme':
+      return ThemeWrapper
+    default:
+      throw new Error(`Unrecognised wrapper "${wrapper}"`)
+  }
+}
+
+addDecorator((render, { parameters }) => {
+  const Wrapper = getWrapper(parameters.wrapper || 'shell')
+  return (
+    <Wrapper sample={sampleUrl}>
+      <WidgetContext>{render()}</WidgetContext>
+    </Wrapper>
+  )
+})
+
+// Import all .stories.js files from /components
+configure(require.context('../components', true, /\.stories\.js$/), module)

packages/dht-queries/.storybook/webpack.config.js

@@ -0,0 +1,32 @@
+module.exports = async ({ config }) => {
+  config.module.rules.push({
+    test: /\.mock$/,
+    loader: 'file-loader',
+    options: {
+      name: '[path][name].[ext]',
+    },
+  })
+
+  config.module.rules.push({
+    test: /\.base64$/,
+    use: 'raw-loader',
+  })
+
+  config.module.rules.push({
+    test: /\.(png|woff|woff2|eot|ttf)$/,
+    loader: 'file-loader',
+  })
+
+  config.module.rules.push({
+    test: /\.js$/,
+    loader: 'babel-loader',
+    exclude: /node_modules/,
+    options: {
+      rootMode: 'upward',
+    },
+  })
+
+  config.devtool = 'source-map'
+
+  return config
+}

packages/dht-queries/README.md

@@ -0,0 +1,3 @@
+# `dht-queries` @libp2p/observer-dht-queries
+
+WIP

packages/dht-queries/Widget.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import T from 'prop-types'
+
+import { ActiveWidget } from '@libp2p/observer-shell'
+import { name, description } from './metadata'
+import WidgetContext from './components/context/WidgetContext'
+import DhtLookups from './components/DhtLookups'
+
+function Widget({ closeWidget }) {
+  return (
+    <WidgetContext>
+      <ActiveWidget
+        name={name}
+        description={description}
+        closeWidget={closeWidget}
+      >
+        <DhtLookups />
+      </ActiveWidget>
+    </WidgetContext>
+  )
+}
+
+Widget.propTypes = {
+  closeWidget: T.func,
+}
+
+export default Widget

packages/dht-queries/components/DhtLookups.js

@@ -0,0 +1,74 @@
+import React, { useContext, useMemo } from 'react'
+import T from 'prop-types'
+import styled from 'styled-components'
+
+import { getAllDhtLookups, getStateTime } from '@libp2p/observer-data'
+import { DataTable, useTabularData, TimeContext } from '@libp2p/observer-sdk'
+
+import lookupColumnDefs from '../definitions/lookupColumns'
+
+import DhtLookupsKey from './DhtLookupsKey'
+
+const Container = styled.div`
+  background: ${({ theme, backgroundColorIndex }) =>
+    theme.color('background', 1)};
+  padding: ${({ theme }) => theme.spacing([1, 0.5])};
+`
+
+function DhtLookups({ children }) {
+  const currentState = useContext(TimeContext)
+  const { dhtLookups } = useMemo(() => {
+    if (!currentState) return {}
+    const dhtLookups = getAllDhtLookups(currentState)
+
+    return {
+      dhtLookups,
+    }
+  }, [currentState])
+  const timestamp = getStateTime(currentState)
+
+  const {
+    columnDefs,
+    allContent,
+    shownContent,
+    sortColumn,
+    setSortColumn,
+    sortDirection,
+    setSortDirection,
+    setRange,
+    rowCounts,
+  } = useTabularData({
+    columns: lookupColumnDefs,
+    data: dhtLookups && dhtLookups.length ? dhtLookups : [],
+    defaultSort: 'open',
+    metadata: {
+      state: currentState,
+    },
+  })
+
+  if (!currentState || !dhtLookups || !dhtLookups.length) return 'Loading...'
+
+  return (
+    <Container>
+      <DhtLookupsKey />
+      <DataTable
+        allContent={allContent}
+        shownContent={shownContent}
+        columnDefs={columnDefs}
+        sortColumn={sortColumn}
+        setSortColumn={setSortColumn}
+        sortDirection={sortDirection}
+        setSortDirection={setSortDirection}
+        setRange={setRange}
+        rowCounts={rowCounts}
+        hasPagination
+      />
+    </Container>
+  )
+}
+
+DhtLookups.propTypes = {
+  children: T.node,
+}
+
+export default DhtLookups

packages/dht-queries/components/DhtLookups.stories.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import DhtLookups from './DhtLookups'
+
+storiesOf('DhtLookups', module).add('DhtLookups', () => <DhtLookups />, {
+  wrapper: 'shell',
+})

packages/dht-queries/components/DhtLookupsKey.js

@@ -0,0 +1,89 @@
+import React, { useContext } from 'react'
+import T from 'prop-types'
+import styled from 'styled-components'
+
+import { RuntimeContext } from '@libp2p/observer-sdk'
+
+import { slotSize, borderWidth } from '../utils/constants'
+
+const Container = styled.div`
+  background: ${({ theme }) => theme.color('background')};
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  color: ${({ theme }) => theme.color('text', 1)};
+  ${({ theme }) => theme.text('body', 'small')};
+  align-items: center;
+`
+
+const Segment = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  padding: ${({ theme }) => theme.spacing(2)};
+  margin-right: ${({ theme }) => theme.spacing(2)};
+  color: ${({ theme }) => theme.color('text', 1)};
+  align-items: center;
+`
+
+const KeyHeading = styled.h3`
+  color: ${({ theme }) => theme.color('tertiary', 3)};
+  ${({ theme }) => theme.text('heading', 'small')};
+`
+
+const SegmentLabel = styled.label`
+  color: ${({ theme }) => theme.color('text', 1)};
+  ${({ theme }) => theme.text('heading', 'small')};
+  margin-right: ${({ theme }) => theme.spacing(1)};
+`
+
+const Item = styled.div`
+  margin-right: ${({ theme }) => theme.spacing(2)};
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+`
+
+const OuterSlot = styled.div`
+  background: ${({ theme, isEmpty }) => theme.color('tertiary', 2)};
+  padding: ${({ theme }) => theme.spacing(0.5)};
+  margin: ${({ theme }) => theme.spacing(0.5)};
+  width: ${({ theme }) => theme.spacing(1, true) + slotSize}px;
+  height: ${({ theme }) => theme.spacing(1, true) + slotSize}px;
+`
+
+const Slot = styled.div`
+  position: relative;
+  border-width: ${borderWidth}px;
+  border-style: solid;
+  width: ${slotSize - 2 * borderWidth}px;
+  height: ${slotSize - 2 * borderWidth}px;
+  border-color: ${({ theme, isEmpty, isSelected }) =>
+    theme.color('background', 1, isEmpty ? 0.2 : 0)};
+  background: ${({ theme, isEmpty }) =>
+    isEmpty ? theme.color('tertiary', 3) : theme.color('contrast', 0, 0.25)};
+`
+
+const queryTimes = [100, 200, 300, 400, 500, 600, 700, 800, 900].map(time => ({
+  sentTs: time,
+}))
+const timestamp = 6000
+
+function DhtLookupsKey() {
+  const runtime = useContext(RuntimeContext)
+  const peerId = runtime.getPeerId()
+  return (
+    <Container>
+      <Segment>
+        <KeyHeading>Kad dht Lookups</KeyHeading>
+      </Segment>
+    </Container>
+  )
+}
+
+DhtLookupsKey.propTypes = {
+  children: T.node,
+}
+
+export default DhtLookupsKey