translate status

License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>
ipfs · Sep 3, 2018 · f2602c5 · f2602c5
1 parent 7195078
commit f2602c5
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 90 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
diff --git a/public/locales/en/status.json b/public/locales/en/status.json
@@ -1,13 +1,22 @@
 {
   "title": "Status",
+  "peer": "Peer",
   "peers": "Peers",
   "addresses": "Addresses",
   "nodeInfo": "Node Info",
   "cid": "CID",
   "version": "Version",
   "advanced": "Advanced",
   "publicKey": "Public Key",
+  "upSpeed": "Up speed",
+  "downSpeed": "Down speed",
+  "spaceUsed": "Space used",
   "bandwidthOverTime": "Bandwidth over time",
   "bandwidthByPeer": "Bandwidth by peer",
-  "distributionOfPeers": "Distribution of peers"
+  "distributionOfPeers": "Distribution of peers",
+  "rateIn": "Rate In",
+  "rateOut": "Rate Out",
+  "totalIn": "Total In",
+  "totalOut": "Total Out",
+  "more": "...and {{count}} more"
 }
diff --git a/src/i18n.js b/src/i18n.js
@@ -6,13 +6,12 @@ i18n
   .use(XHR)
   .use(LanguageDetector)
   .init({
-    ns: ['common', 'files', 'settings', 'status', 'peers'],
-    defaultNS: 'common',
+    ns: ['files', 'settings', 'status', 'peers'],
     fallbackLng: 'en',
     debug: true,
     // react i18next special options (optional)
     react: {
-      wait: false,
+      wait: true,
       bindI18n: 'languageChanged loaded',
       bindStore: 'added removed',
       nsMode: 'default'

diff --git a/src/status/CountryChart.js b/src/status/CountryChart.js
@@ -1,78 +1,70 @@
-import React, { Component } from 'react'
+import React from 'react'
+import { translate } from 'react-i18next'
 import { Title } from './Commons'
 import { Pie } from 'react-chartjs-2'
 import { connect } from 'redux-bundler-react'
-import PropTypes from 'prop-types'
 import Box from '../components/box/Box'
 
-export class CountryChart extends Component {
-  static propTypes = {
-    peerLocations: PropTypes.object.isRequired
-  }
-
-  render () {
-    const { peerLocations } = this.props
-
-    const countryLabels = {}
-    const countsByCountry = {}
+const CountryChart = ({ t, peerLocations, className }) => {
+  const countryLabels = {}
+  const countsByCountry = {}
 
-    Object.keys(peerLocations).forEach(peerId => {
-      const { country_code: code, country_name: label } = peerLocations[peerId]
-      countsByCountry[code] = (countsByCountry[code] || 0) + 1
-      countryLabels[code] = label
-    })
+  Object.keys(peerLocations).forEach(peerId => {
+    const { country_code: code, country_name: label } = peerLocations[peerId]
+    countsByCountry[code] = (countsByCountry[code] || 0) + 1
+    countryLabels[code] = label
+  })
 
-    const countryRanking = Object.keys(countsByCountry).sort((a, b) => {
-      return countsByCountry[b] - countsByCountry[a]
-    })
+  const countryRanking = Object.keys(countsByCountry).sort((a, b) => {
+    return countsByCountry[b] - countsByCountry[a]
+  })
 
-    const totalCountries = Object.keys(peerLocations).length
+  const totalCountries = Object.keys(peerLocations).length
 
-    let data
+  let data
 
-    if (countryRanking.length < 5) {
-      data = countryRanking
-        .map(code => Math.round((countsByCountry[code] / totalCountries) * 100))
-    } else {
-      data = countryRanking
-        .slice(0, 3)
-        .map(code => Math.round((countsByCountry[code] / totalCountries) * 100))
+  if (countryRanking.length < 5) {
+    data = countryRanking
+      .map(code => Math.round((countsByCountry[code] / totalCountries) * 100))
+  } else {
+    data = countryRanking
+      .slice(0, 3)
+      .map(code => Math.round((countsByCountry[code] / totalCountries) * 100))
 
-      data = data.concat(100 - data.reduce((total, p) => total + p))
-    }
+    data = data.concat(100 - data.reduce((total, p) => total + p))
+  }
 
-    const datasets = [{
-      data,
-      backgroundColor: ['#69c4cd', '#f39031', '#ea5037', '#3e9096'],
-      label: 'Peer Countries'
-    }]
+  const datasets = [{
+    data,
+    backgroundColor: ['#69c4cd', '#f39031', '#ea5037', '#3e9096'],
+    label: 'Peer Countries'
+  }]
 
-    const options = {
-      responsive: true,
-      legend: {
-        display: true,
-        position: 'bottom'
-      }
+  const options = {
+    responsive: true,
+    legend: {
+      display: true,
+      position: 'bottom'
     }
+  }
 
-    let labels
-
-    if (countryRanking.length < 5) {
-      labels = countryRanking.map(code => countryLabels[code])
-    } else {
-      labels = countryRanking
-        .slice(0, 3)
-        .map(code => countryLabels[code])
-        .concat('Other')
-    }
+  let labels
 
-    return (
-      <Box className={this.props.className}>
-        <Title>Distribution of peers</Title>
-        <Pie data={{ datasets, labels }} options={options} />
-      </Box>
-    )
+  if (countryRanking.length < 5) {
+    labels = countryRanking.map(code => countryLabels[code])
+  } else {
+    labels = countryRanking
+      .slice(0, 3)
+      .map(code => countryLabels[code])
+      .concat('Other')
   }
+
+  return (
+    <Box className={className}>
+      <Title>{t('distributionOfPeers')}</Title>
+      <Pie data={{ datasets, labels }} options={options} />
+    </Box>
+  )
 }
 
-export default connect('selectPeerLocations', CountryChart)
+export default connect('selectPeerLocations', translate('status')(CountryChart))
diff --git a/src/status/NodeBandwidthChart.js b/src/status/NodeBandwidthChart.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { Line } from 'react-chartjs-2'
+import { translate } from 'react-i18next'
 import { connect } from 'redux-bundler-react'
 import PropTypes from 'prop-types'
 import filesize from 'filesize'
@@ -21,7 +22,7 @@ export class NodeBandwidthChart extends Component {
   }
 
   render () {
-    const { nodeBandwidthChartData } = this.props
+    const { t, nodeBandwidthChartData } = this.props
 
     const datasets = [
       {
@@ -68,11 +69,11 @@ export class NodeBandwidthChart extends Component {
 
     return (
       <Box className={`pa4 pr2 ${this.props.className}`}>
-        <Title>Bandwidth over time</Title>
+        <Title>{t('bandwidthOverTime')}</Title>
         <Line data={{ datasets }} options={options} />
       </Box>
     )
   }
 }
 
-export default connect('selectNodeBandwidthChartData', NodeBandwidthChart)
+export default connect('selectNodeBandwidthChartData', translate('status')(NodeBandwidthChart))
diff --git a/src/status/NodeInfo.js b/src/status/NodeInfo.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { connect } from 'redux-bundler-react'
+import { translate } from 'react-i18next'
 import Speedometer from './Speedometer'
 import Box from '../components/box/Box'
 import { Title } from './Commons'
@@ -70,7 +71,7 @@ class NodeInfo extends React.Component {
   }
 
   render () {
-    const { ipfsIdentity, stats, peers } = this.props
+    const { t, ipfsIdentity, stats, peers } = this.props
     const { downSpeed, upSpeed } = this.state
 
     let addresses = null
@@ -85,29 +86,29 @@ class NodeInfo extends React.Component {
           <div className='w-100 w-50-l pr2-l' style={{ maxWidth: '34em' }} >
             <Title style={{ marginBottom: '0.5rem' }}>Node Info</Title>
             <Block>
-              <Label>CID</Label>
+              <Label>{t('cid')}</Label>
               <Value>{this.getField(ipfsIdentity, 'id')}</Value>
             </Block>
             <Block>
-              <Label>Peers</Label>
+              <Label>{t('peers')}</Label>
               <Value>{peers ? peers.length : 0}</Value>
             </Block>
             <Block>
-              <Label>Version</Label>
+              <Label>{t('version')}</Label>
               <Value>{this.getField(ipfsIdentity, 'agentVersion')}</Value>
             </Block>
           </div>
           <div className='w-100 pl2-l flex-wrap flex-no-wrap-l flex justify-between' style={{ maxWidth: '35rem' }}>
             <Graph
-              title='Up Speed'
+              title={t('upSpeed')}
               color='#69c4cd'
               {...upSpeed} />
             <Graph
-              title='Down Speed'
+              title={t('downSpeed')}
               color='#f39021'
               {...downSpeed} />
             <Graph
-              title='Space Used'
+              title={t('spaceUsed')}
               color='#0b3a53'
               noSpeed
               filled={stats ? parseInt(stats.repo.repoSize.toFixed(0), 10) : 0}
@@ -116,14 +117,14 @@ class NodeInfo extends React.Component {
         </div>
 
         <details className='mt3'>
-          <summary className='pointer blue outline-0'>Advanced</summary>
+          <summary className='pointer blue outline-0'>{t('advanced')}</summary>
           <div className='mt3'>
             <Block>
-              <Label>Public Key</Label>
+              <Label>{t('publicKey')}</Label>
               <Value advanced>{this.getField(ipfsIdentity, 'publicKey')}</Value>
             </Block>
             <Block>
-              <Label>Addresses</Label>
+              <Label>{t('addresses')}</Label>
               <Value advanced>{addresses}</Value>
             </Block>
           </div>
@@ -137,5 +138,5 @@ export default connect(
   'selectIpfsIdentity',
   'selectPeers',
   'selectStats',
-  NodeInfo
+  translate('status')(NodeInfo)
 )
diff --git a/src/status/PeerBandwidthTable.js b/src/status/PeerBandwidthTable.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { connect } from 'redux-bundler-react'
+import { translate } from 'react-i18next'
 import PropTypes from 'prop-types'
 import filesize from 'filesize'
 import CountryFlag from 'react-country-flag'
@@ -41,7 +42,7 @@ export class PeerBandwidthTable extends Component {
   }
 
   render () {
-    const { peerBandwidthPeers, className, peerLocations } = this.props
+    const { t, peerBandwidthPeers, className, peerLocations } = this.props
     const { sort, showAll } = this.state
     const sortedPeers = Array.from(peerBandwidthPeers)
       .filter(p => Boolean(p.bw))
@@ -54,15 +55,15 @@ export class PeerBandwidthTable extends Component {
       <ComponentLoader pastDelay />
     ) : (
       <Box className={className}>
-        <Title>Bandwidth by peer</Title>
+        <Title>{t('bandwidthByPeer')}</Title>
         <table className='collapse'>
           <tbody>
             <tr className='tl'>
-              <th className='f6 pv2 pr3 pl0' colSpan='2'><span className='v-mid'>Peer</span></th>
-              <SortableTableHeader field='rateIn' label='Rate In' sort={sort} onClick={this.onFieldClick} />
-              <SortableTableHeader field='rateOut' label='Rate Out' sort={sort} onClick={this.onFieldClick} />
-              <SortableTableHeader field='totalIn' label='Total In' sort={sort} onClick={this.onFieldClick} />
-              <SortableTableHeader field='totalOut' label='Total Out' sort={sort} onClick={this.onFieldClick} />
+              <th className='f6 pv2 pr3 pl0' colSpan='2'><span className='v-mid'>{t('peer')}</span></th>
+              <SortableTableHeader field='rateIn' label={t('rateIn')} sort={sort} onClick={this.onFieldClick} />
+              <SortableTableHeader field='rateOut' label={t('rateOut')} sort={sort} onClick={this.onFieldClick} />
+              <SortableTableHeader field='totalIn' label={t('totalIn')} sort={sort} onClick={this.onFieldClick} />
+              <SortableTableHeader field='totalOut' label={t('totalOut')} sort={sort} onClick={this.onFieldClick} />
             </tr>
             {visiblePeers.map((p, i) => (
               <tr key={p.id} className={i % 2 ? 'bg-snow-muted' : ''}>
@@ -77,7 +78,7 @@ export class PeerBandwidthTable extends Component {
           </tbody>
         </table>
         {!showAll && hiddenPeers.length ? (
-          <p className='sans-serif f5 ma0 pv3 ph2 tc pointer underline-hover navy-muted' onClick={this.onShowAllClick}>...and {hiddenPeers.length} more</p>
+          <p className='sans-serif f5 ma0 pv3 ph2 tc pointer underline-hover navy-muted' onClick={this.onShowAllClick}>{t('more', { count: hiddenPeers.length })}</p>
         ) : null}
       </Box>
     )
@@ -108,4 +109,8 @@ function LocationFlag ({ location }) {
   )
 }
 
-export default connect('selectPeerBandwidthPeers', 'selectPeerLocations', PeerBandwidthTable)
+export default connect(
+  'selectPeerBandwidthPeers',
+  'selectPeerLocations',
+  translate('status')(PeerBandwidthTable)
+)
diff --git a/src/status/StatusPage.js b/src/status/StatusPage.js
@@ -1,14 +1,15 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
+import { translate } from 'react-i18next'
 import CountryChart from './CountryChart'
 import NodeInfo from './NodeInfo'
 import NodeBandwidthChart from './NodeBandwidthChart'
 import PeerBandwidthTable from './PeerBandwidthTable'
 
-export default () => (
+export default translate('status')(({t}) => (
   <div data-id='StatusPage'>
     <Helmet>
-      <title>Status - IPFS</title>
+      <title>{t('title')} - IPFS</title>
     </Helmet>
     <NodeInfo />
     <div className='flex flex-column-s flex-column-m flex-row'>
@@ -21,4 +22,4 @@ export default () => (
     </div>
     <PeerBandwidthTable className='mt3 pa4 overflow-x-auto' />
   </div>
-)
+))