feat: DHT Provide Sweep Diagnostic Screen

package.json

@@ -73,7 +73,7 @@
     "it-first": "^1.0.6",
     "it-last": "^1.0.5",
     "it-map": "^1.0.5",
-    "kubo-rpc-client": "^5.4.0",
+    "kubo-rpc-client": "^6.1.0",
     "milliseconds": "^1.0.3",
     "money-clip": "^3.0.5",
     "multiformats": "^13.4.0",
@@ -171,7 +171,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-mock": "^30.0.5",
-    "kubo": "^0.38.0",
+    "kubo": "^0.39.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "os-browserify": "^0.3.0",

public/locales/en/diagnostics.json

@@ -2,7 +2,8 @@
   "title": "Diagnostics",
   "tabs": {
     "logs": "Logs",
-    "retrieval-check": "Retrieval Check"
+    "retrieval-check": "Retrieval Check",
+    "dht-provide": "DHT Provide"
   },
   "logs": {
     "title": "Node Logs",
@@ -93,5 +94,93 @@
       "upgradeDescription": "To use the log level management features, you need to upgrade to a newer version of Kubo that supports getting log levels and tailing logs from the RPC API endpoint.",
       "downloadKubo": "Download Kubo"
     }
+  },
+  "dhtProvide": {
+    "title": "DHT Provide",
+    "node": "Node",
+    "unknown": "Unknown",
+    "cidLabel": "CID to provide",
+    "provideButton": "Trigger Provide",
+    "clear": "Clear",
+    "provideTriggered": "Provide triggered for {cid}",
+    "noCid": "Please enter a CID",
+    "description": "Trigger a background provide operation for a CID. This will announce the CID on the DHT so other peers can discover providers for it.",
+    "screen": {
+      "description": "Visual summary of the DHT provide sweep system. See <0>configuration guide</0> and <1>metric reference</1> for details.",
+      "loading": "Loading DHT provide stats…",
+      "notEnabled": "DHT Sweep provider is not enabled on this node.",
+      "failedToLoad": "Failed to load provide stats: {message}",
+      "refreshCountdown": "Refresh: {seconds}s",
+      "refreshOff": "Refresh: OFF",
+      "lastUpdated": "Last updated at {time}",
+      "workersWarning": "Workers at {percent}% capacity. If the queue grows, consider increasing Provide.DHT.MaxWorkers (current: {max})."
+    },
+    "connectivity": {
+      "title": "Connectivity",
+      "tooltip": "Overall health of the DHT provide subsystem: connectivity, uptime, and keyspace coverage.",
+      "status": "Status",
+      "online": "Online",
+      "offline": "Offline",
+      "sinceAgo": "{value}{unit} ago",
+      "justNow": "just now",
+      "uptime": "Uptime",
+      "keyspaceCoverage": "Keyspace",
+      "full": "Full",
+      "partial": "Partial",
+      "closedWarning": "Provider system is shutting down"
+    },
+    "schedule": {
+      "title": "Schedule",
+      "tooltip": "The reprovide cycle periodically re-announces groups of CIDs to the DHT.",
+      "reprovideInterval": "Reprovide interval",
+      "elapsed": "Elapsed",
+      "remaining": "Remaining",
+      "regions": "Regions",
+      "cidsScheduled": "CIDs this cycle",
+      "avgCidsPerRegion": "Avg CIDs/region",
+      "nextRegionPrefix": "Next region prefix",
+      "avgPrefixLength": "Avg prefix length",
+      "nextReprovide": "Next region start"
+    },
+    "queues": {
+      "title": "Queues",
+      "tooltip": "Pending items in the provide and reprovide queues.",
+      "pendingCids": "Pending CIDs (provide)",
+      "pendingRegionProvides": "Pending regions (provide)",
+      "pendingRegionReprovides": "Pending regions (reprovide)"
+    },
+    "operations": {
+      "title": "Operations",
+      "tooltip": "In-flight provide and reprovide operations, throughput rates, and cumulative statistics.",
+      "ongoingProvides": "Ongoing provides",
+      "ongoingReprovides": "Ongoing reprovides",
+      "provideRate": "Avg provide rate",
+      "reprovideRate": "Avg reprovide rate",
+      "totalCidsProvided": "Total CIDs provided",
+      "totalRecordsProvided": "Total records provided",
+      "totalProvideErrors": "Total provide errors",
+      "regionReprovideDuration": "Region reprovide duration",
+      "avgCidsPerReprovide": "Avg CIDs/reprovide"
+    },
+    "workers": {
+      "title": "Workers",
+      "tooltip": "Breakdown of worker status by type: periodic workers handle scheduled reprovides, burst workers handle initial provides.",
+      "active": "Active",
+      "periodic": "Periodic",
+      "burst": "Burst",
+      "queued": "Queued (periodic / burst)",
+      "maxConnsPerWorker": "Max connections/worker"
+    },
+    "network": {
+      "title": "Network",
+      "tooltip": "DHT network metrics: peer counts, reachability, and record holders.",
+      "peerSwept": "Peers swept",
+      "reachablePeers": "Reachable peers",
+      "avgRecordHolders": "Avg record holders",
+      "avgRegionSize": "Avg region size",
+      "replicationFactor": "Replication factor",
+      "fullKeyspaceCoverage": "Full keyspace coverage",
+      "fullRT": "Accelerated DHT client"
+    }
   }
 }

src/App.js

@@ -74,7 +74,7 @@ export class App extends Component {
                 <FilesExploreForm onBrowse={doFilesNavigateTo} />
               </div>
               <div className='dn flex-ns flex-auto items-center justify-end'>
-                <TourHelper />
+                {!url.startsWith('/diagnostics') && <TourHelper />}
                 <Connected className='joyride-app-status' />
               </div>
             </div>

src/components/card/card.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { Box } from '../box/Box'
+
+/**
+ * Card root
+ */
+export const Card: React.FC<{
+  className?: string
+  style?: React.CSSProperties
+  children: React.ReactNode
+}> = ({ className = '', style, children }) => {
+  return (
+    <Box
+      className={`ba b--black-10 br2 bg-white ${className}`}
+      style={{ padding: 0, ...style }}
+    >
+      {children}
+    </Box>
+  )
+}
+
+/**
+ * Card header
+ */
+export const CardHeader: React.FC<{
+  className?: string
+  children: React.ReactNode
+}> = ({ className = '', children }) => {
+  return (
+    <div className={`pa3 bb b--black-10 ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Card title
+ */
+export const CardTitle: React.FC<{
+  className?: string
+  children: React.ReactNode
+}> = ({ className = '', children }) => {
+  return (
+    <div className={`ttu tracked f6 fw4 teal ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Card description
+ */
+export const CardDescription: React.FC<{
+  className?: string
+  children: React.ReactNode
+}> = ({ className = '', children }) => {
+  return (
+    <div className={`f7 gray mt1 ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Card action (top-right area)
+ */
+export const CardAction: React.FC<{
+  className?: string
+  children: React.ReactNode
+}> = ({ className = '', children }) => {
+  return (
+    <div className={`absolute top-1 right-1 ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Card content
+ */
+export const CardContent: React.FC<{
+  className?: string
+  children: React.ReactNode
+}> = ({ className = '', children }) => {
+  return (
+    <div className={`pa3 ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Card footer
+ */
+export const CardFooter: React.FC<{
+  className?: string
+  children: React.ReactNode
+}> = ({ className = '', children }) => {
+  return (
+    <div className={`pa3 bt b--black-10 ${className}`}>
+      {children}
+    </div>
+  )
+}

src/components/metric-row/MetricRow.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export const MetricRow: React.FC<{
+  label: string
+  value: React.ReactNode
+  highlight?: boolean
+  className?: string
+}> = ({ label, value, highlight = false, className = '' }) => {
+  return (
+    <div className={`flex justify-between items-center mb2 ${className}`}>
+      <span className='f6'>
+        {label}
+      </span>
+
+      <span className={`f6 ${highlight ? 'fw6 green' : ''}`}>
+        {value}
+      </span>
+    </div>
+  )
+}
+
+export default MetricRow

src/components/tooltip/icon-tooltip.tsx

@@ -14,9 +14,10 @@ interface IconTooltipProps {
   text: string
   position: 'top' | 'bottom' | 'left' | 'right'
   forceShow?: boolean
+  className?: string
 }
 
-const IconTooltip: React.FC<IconTooltipProps> = ({ children, text, position, forceShow = false }) => {
+const IconTooltip: React.FC<IconTooltipProps> = ({ children, text, position, forceShow = false, className = '' }) => {
   const [show, setShow] = useState(false)
 
   const onMouseOver = () => setShow(true)
@@ -114,7 +115,7 @@ const IconTooltip: React.FC<IconTooltipProps> = ({ children, text, position, for
   const tooltipDisplayClass = useMemo(() => (show || forceShow) ? 'db' : 'dn', [show, forceShow])
 
   return (
-    <div className="relative" style={{ display: 'inline-block' }}>
+    <div className={`relative ${className}`} style={{ display: 'inline-block' }}>
       <div
         onMouseOver={onMouseOver}
         onMouseLeave={onMouseLeave}
@@ -125,7 +126,7 @@ const IconTooltip: React.FC<IconTooltipProps> = ({ children, text, position, for
       </div>
       <div
         style={tooltipStyles}
-        className={`white z-max bg-navy-muted br2 pv2 ph3 f6 lh-copy fw5 absolute sans-serif noselect ${tooltipDisplayClass}`}
+        className={`white z-max bg-navy-muted br2 pv2 ph3 f6 lh-copy fw5 absolute sans-serif noselect ttn ${tooltipDisplayClass}`}
       >
         <div className='bg-navy-muted db bg-navy-muted absolute' style={arrowStyles} />
         {text}

src/contexts/ProvideStat/api.ts

@@ -0,0 +1,9 @@
+import type { KuboRPCClient } from 'kubo-rpc-client'
+import type { ProvideStatOptions, ProvideStats } from './types'
+
+export async function getProvideStats (
+  ipfs: KuboRPCClient,
+  options: ProvideStatOptions = { all: true }
+): Promise<ProvideStats> {
+  return ipfs.provide.stat(options)
+}

src/contexts/ProvideStat/index.ts

@@ -0,0 +1,5 @@
+// Export the context provider and hook
+export { ProvideProvider, useProvide } from './provide-context'
+
+export * from './types'
+export * from './api'