fix: work even when bandwidth metrics are disabled

public/locales/en/status.json

@@ -43,5 +43,7 @@
     "yesLabel": "OK",
     "noLabel": "No thanks",
     "detailsLabel": "More info"
-  }
+  },
+  "bandwidthStats": "Bandwidth Stats",
+  "bandwidthStatsDisabled": "You have the bandwidth metrics disabled. You can enable them by typing the command bellow or changing the key <1>Swarm.DisableBandwidthMetrics</1> to <3>false</3> on <5>Settings</5>."
 }

src/bundles/connected.js

@@ -16,8 +16,8 @@ const connected = {
 
   selectIpfsConnected: createSelector(
     'selectIpfsReady',
-    'selectStatsLastSuccess',
-    'selectStatsLastError',
+    'selectNodeBandwidthLastSuccess',
+    'selectNodeBandwidthLastError',
     (ipfsReady, lastSuccess, lastError) => ipfsReady && lastSuccess && lastSuccess > lastError
   )
 }

src/bundles/index.js

@@ -12,7 +12,6 @@ import filesBundle from './files'
 import configBundle from './config'
 import configSaveBundle from './config-save'
 import navbarBundle from './navbar'
-import statsBundle from './stats'
 import notifyBundle from './notify'
 import connectedBundle from './connected'
 import retryInitBundle from './retry-init'
@@ -27,17 +26,24 @@ export default composeBundles(
   appIdle({ idleTimeout: 5000 }),
   ipfsBundle({
     tryWindow: false,
-    ipfsConnectionTest: (ipfs) => {
+    ipfsConnectionTest: async (ipfs) => {
       // ipfs connection is working if can we fetch the bw stats.
       // See: https://github.com/ipfs-shipyard/ipfs-webui/issues/835#issuecomment-466966884
-      return ipfs.stats.bw()
+      try {
+        await ipfs.stats.bw()
+      } catch (err) {
+        if (!/bandwidth reporter disabled in config/.test(err)) {
+          throw err
+        }
+      }
+
+      return true
     }
   }),
   identityBundle,
   navbarBundle,
   routesBundle,
   redirectsBundle,
-  statsBundle,
   filesBundle(),
   exploreBundle(async () => {
     const ipldDeps = await Promise.all([

src/bundles/node-bandwidth-chart.js

@@ -35,16 +35,18 @@ export default function (opts) {
     },
 
     reactUpdateNodeBandwidthChartData: createSelector(
-      'selectNodeBandwidthRaw',
+      'selectNodeBandwidth',
+      'selectNodeBandwidthLastSuccess',
+      'selectNodeBandwidthEnabled',
       'selectNodeBandwidthChartData',
-      (bwRaw, chartData) => {
-        if (!bwRaw.data) return
+      (bw, lastSuccess, enabled, chartData) => {
+        if (!bw || !enabled) return
 
         // Only tests for .in because it has the same timestamps as .out
-        if (!chartData.in.length || bwRaw.lastSuccess > chartData.in[chartData.in.length - 1].x) {
+        if (!chartData.in.length || lastSuccess > chartData.in[chartData.in.length - 1].x) {
           return {
             actionCreator: 'doUpdateNodeBandwidthChartData',
-            args: [bwRaw.data, bwRaw.lastSuccess, chartData]
+            args: [bw, lastSuccess, chartData]
           }
         }
       }

src/bundles/node-bandwidth-chart.test.js

@@ -10,6 +10,9 @@ const mockNodeBandwidthBundle = {
   reducer (state = { data: null }, action) {
     return action.type === 'UPDATE_MOCK_NODE_BANDWIDTH' ? action.payload : state
   },
+  selectNodeBandwidth: state => state.nodeBandwidth.data,
+  selectNodeBandwidthLastSuccess: state => state.nodeBandwidth.lastSuccess,
+  selectNodeBandwidthEnabled: () => true,
   selectNodeBandwidthRaw: state => state.nodeBandwidth
 }
 

src/bundles/node-bandwidth.js

@@ -4,12 +4,28 @@ import ms from 'milliseconds'
 const bundle = createAsyncResourceBundle({
   name: 'nodeBandwidth',
   actionBaseType: 'NODE_BANDWIDTH',
-  getPromise: ({ getIpfs }) => getIpfs().stats.bw(),
-  staleAfter: ms.seconds(10),
+  getPromise: async ({ getIpfs }) => {
+    try {
+      const stats = await getIpfs().stats.bw()
+      return stats
+    } catch (err) {
+      if (/bandwidth reporter disabled in config/.test(err)) {
+        return { disabled: true }
+      }
+
+      throw err
+    }
+  },
+  staleAfter: ms.seconds(3),
+  retryAfter: ms.seconds(3),
   persist: false,
   checkIfOnline: false
 })
 
+bundle.selectNodeBandwidthEnabled = state => state.nodeBandwidth.data ? !state.nodeBandwidth.data.disabled : false
+
+bundle.selectNodeBandwidthLastSuccess = state => state.nodeBandwidth.lastSuccess
+
 // Update the node bandwidth if it is stale (appTime - lastSuccess > staleAfter)
 bundle.reactNodeBandwidthFetchWhenIdle = createSelector(
   'selectNodeBandwidthShouldUpdate',

src/status/BandwidthStatsDisabled.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { translate, Trans } from 'react-i18next'
+import Shell from '../components/shell/Shell'
+import Box from '../components/box/Box'
+
+const StatusNotConnected = ({ t }) => {
+  return (
+    <Box className='mt3 pa3' >
+      <h2 className='ttu yellow tracked f6 fw4 aqua mt0 mb4'>{t('bandwidthStats')}</h2>
+
+      <p className='mw6 mr2 lh-copy charcoal f6'>
+        <Trans i18nKey='bandwidthStatsDisabled'>
+          You have the bandwidth metrics disabled. You can enable them by typing the command bellow
+          or changing the key <code>Swarm.DisableBandwidthMetrics</code> to <code>false</code> on
+          <a className='link blue' href='#/settings'>Settings</a>.
+        </Trans>
+      </p>
+
+      <Shell>
+        <code className='db'>$ ipfs config --json Swarm.DisableBandwidthMetrics false</code>
+      </Shell>
+    </Box>
+  )
+}
+
+export default translate('status')(StatusNotConnected)

src/status/NetworkTraffic.js

@@ -17,9 +17,10 @@ class NetworkTraffic extends React.Component {
   }
 
   componentDidUpdate (_, prevState) {
-    const { stats } = this.props
-    const down = stats ? parseInt(stats.bw.rateIn.toFixed(0), 10) : 0
-    const up = stats ? parseInt(stats.bw.rateOut.toFixed(0), 10) : 0
+    const { nodeBandwidth } = this.props
+
+    const down = nodeBandwidth ? parseInt(nodeBandwidth.rateIn.toFixed(0), 10) : 0
+    const up = nodeBandwidth ? parseInt(nodeBandwidth.rateOut.toFixed(0), 10) : 0
 
     if (down !== prevState.downSpeed.filled || up !== prevState.upSpeed.filled) {
       this.setState({
@@ -62,6 +63,6 @@ class NetworkTraffic extends React.Component {
 }
 
 export default connect(
-  'selectStats',
+  'selectNodeBandwidth',
   translate('status')(NetworkTraffic)
 )

src/status/StatusPage.js

@@ -10,8 +10,9 @@ import NodeBandwidthChart from './NodeBandwidthChart'
 import NetworkTraffic from './NetworkTraffic'
 import Box from '../components/box/Box'
 import AskToEnable from '../components/ask/AskToEnable'
+import BandwidthStatsDisabled from './BandwidthStatsDisabled'
 
-const StatusPage = ({ t, ipfsConnected, analyticsAskToEnable, doEnableAnalytics, doDisableAnalytics }) => {
+const StatusPage = ({ t, nodeBandwidthEnabled, ipfsConnected, analyticsAskToEnable, doEnableAnalytics, doDisableAnalytics }) => {
   return (
     <div data-id='StatusPage' className='mw9 center'>
       <Helmet>
@@ -47,22 +48,28 @@ const StatusPage = ({ t, ipfsConnected, analyticsAskToEnable, doEnableAnalytics,
         />
         : null
       }
-      <Box className='mt3 pa3' style={{ opacity: ipfsConnected ? 1 : 0.4 }}>
-        <div className='flex flex-column flex-row-l'>
-          <div className='pr0 pr2-l flex-auto'>
-            <NodeBandwidthChart />
-          </div>
-          <div className='dn db-l pl3 pr5'>
-            <NetworkTraffic />
-          </div>
-        </div>
-      </Box>
+      <div style={{ opacity: ipfsConnected ? 1 : 0.4 }}>
+        { nodeBandwidthEnabled
+          ? <Box className='mt3 pa3'>
+            <div className='flex flex-column flex-row-l'>
+              <div className='pr0 pr2-l flex-auto'>
+                <NodeBandwidthChart />
+              </div>
+              <div className='dn db-l pl3 pr5'>
+                <NetworkTraffic />
+              </div>
+            </div>
+          </Box>
+          : <BandwidthStatsDisabled />
+        }
+      </div>
     </div>
   )
 }
 
 export default connect(
   'selectIpfsConnected',
+  'selectNodeBandwidthEnabled',
   'selectAnalyticsAskToEnable',
   'doEnableAnalytics',
   'doDisableAnalytics',