feat(metrics): Add monitor bandwidth

client/react-native/common/components/Screens/Settings/Devtools/Networks/List.js

@@ -0,0 +1,33 @@
+import React, { PureComponent } from 'react'
+import { Header, Menu } from '../../../../Library'
+
+export default class List extends PureComponent {
+  static navigationOptions = ({ navigation }) => ({
+    header: (
+      <Header
+        navigation={navigation}
+        title='Developer Tools'
+        titleIcon='terminal'
+        backBtn
+      />
+    ),
+    tabBarVisible: false,
+  })
+
+  render () {
+    const { navigation } = this.props
+    return (
+      <Menu absolute>
+        <Menu.Section>
+          <Menu.Item
+            icon='list'
+            title='List peers (not implemented)'
+            onPress={() => {
+              navigation.push('networks/peers')
+            }}
+          />
+        </Menu.Section>
+      </Menu>
+    )
+  }
+}

client/react-native/common/components/Screens/Settings/Devtools/Networks/Peers.js

@@ -0,0 +1,43 @@
+import React, { PureComponent } from 'react'
+import { Text, View, ActivityIndicator } from 'react-native'
+import { Header, Screen } from '../../../../Library'
+import { QueryReducer } from '../../../../../relay'
+import { queries } from '../../../../../graphql'
+import { colors } from '../../../../../constants'
+
+export default class Peers extends PureComponent {
+  static navigationOptions = ({ navigation }) => ({
+    header: (
+      <Header
+        navigation={navigation}
+        title='Peers List'
+        titleIcon='list'
+        backBtn
+      />
+    ),
+  })
+
+  render () {
+    return (
+      <Screen style={[{ backgroundColor: colors.white }]}>
+        <QueryReducer query={queries.Peers}>
+          {(state, retry) => {
+            console.log('state:', state)
+            switch (state.type) {
+              case state.success:
+                return (
+                  <View>
+                    {state.data.Peers.list.map((peer, i) => (
+                      <Text key={i}>{peer.id}</Text>
+                    ))}
+                  </View>
+                )
+              default:
+                return <ActivityIndicator />
+            }
+          }}
+        </QueryReducer>
+      </Screen>
+    )
+  }
+}

client/react-native/common/components/Screens/Settings/Devtools/Networks/index.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { createSubStackNavigator } from '../../../../../helpers/react-navigation'
+import { Header } from '../../../../Library'
+import List from './List'
+import Peers from './Peers'
+
+export default createSubStackNavigator(
+  {
+    'networks/list': List,
+    'networks/peers': Peers,
+  },
+  {
+    initialRouteName: 'networks/list',
+    navigationOptions: ({ navigation }) => ({
+      header: (
+        <Header navigation={navigation} title='Networks' titleIcon='activity' />
+      ),
+      tabBarVisible: false,
+    }),
+  }
+)

client/react-native/common/components/Screens/Settings/Devtools/Peers.js

@@ -0,0 +1,43 @@
+import React, { PureComponent } from 'react'
+import { Menu, Header } from '../../../Library'
+import { mutations } from '../../../../graphql'
+
+export default class Database extends PureComponent {
+  static navigationOptions = ({ navigation }) => ({
+    header: (
+      <Header
+        navigation={navigation}
+        title='Peers List'
+//        titleIcon='Peers'
+        backBtn
+      />
+    ),
+  })
+  render () {
+    return (
+      <Menu absolute>
+        <Menu.Section>
+          <Menu.Item
+            icon='database'
+            title=''
+            onPress={async () => {
+              try {
+                await mutations.generateFakeData.commit({ t: true })
+              } catch (err) {
+                this.setState({ err })
+                console.error(err)
+              }
+            }}
+          />
+          <Menu.Item
+            icon='refresh-ccw'
+            title='Reset database (not implemented)'
+            onPress={() => {
+              console.log('Reset')
+            }}
+          />
+        </Menu.Section>
+      </Menu>
+    )
+  }
+}

client/react-native/common/components/Screens/Settings/Devtools/index.js

@@ -1,7 +1,7 @@
 import { createSubStackNavigator } from '../../../../helpers/react-navigation'
 import List from './List'
 import Database from './Database'
-import Network from './Network'
+import Networks from './Networks/index.js'
 import EventList from './EventList'
 import EventDetails from './EventDetails'
 import DeviceInfos from './DeviceInfos'
@@ -12,7 +12,7 @@ export default createSubStackNavigator(
   {
     'devtools/list': List,
     'devtools/database': Database,
-    'devtools/network': Network,
+    'devtools/network': Networks,
     'devtools/eventlist': EventList,
     'devtools/eventdetails': EventDetails,
     'devtools/deviceinfos': DeviceInfos,

client/react-native/common/graphql/queries/Peers.js

@@ -0,0 +1,12 @@
+import { graphql } from 'react-relay'
+
+export default graphql`
+  query PeersListQuery {
+    Peers(T: true) {
+      list {
+        id
+        addrs
+      }
+    }
+  }
+`

client/react-native/common/graphql/queries/index.js

@@ -5,3 +5,4 @@ export DeviceInfos from './DeviceInfos'
 export AppVersion from './AppVersion'
 export EventList from './EventList'
 export Panic from './Panic'
+export Peers from './Peers'

client/react-native/common/graphql/subscriptions/MonitorPeers.js

@@ -0,0 +1,14 @@
+import { graphql } from 'react-relay'
+import { subscriber } from '../../relay'
+
+const MonitorPeers = graphql`
+  subscription MonitorPeersSubscription {
+    MonitorPeers {
+      id
+      addrs
+      connection
+    }
+  }
+`
+
+export default subscriber({ subscription: MonitorPeers })