Translate dashboard to Vietnamese with i18n

client/src/components/Dashboard/Clients.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import map from 'lodash/map';
+import { Trans, withNamespaces } from 'react-i18next';
 
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
@@ -24,7 +25,7 @@ class Clients extends Component {
         accessor: 'ip',
         Cell: ({ value }) => (<div className="logs__row logs__row--overflow"><span className="logs__text" title={value}>{value}</span></div>),
     }, {
-        Header: 'Requests count',
+        Header: <Trans>Requests count</Trans>,
         accessor: 'count',
         Cell: ({ value }) => {
             const percent = getPercent(this.props.dnsQueries, value);
@@ -37,15 +38,16 @@ class Clients extends Component {
     }];
 
     render() {
+        const { t } = this.props;
         return (
-            <Card title="Top clients" subtitle="for the last 24 hours" bodyType="card-table" refresh={this.props.refreshButton}>
+            <Card title={ t('Top clients') } subtitle={ t('for the last 24 hours') } bodyType="card-table" refresh={this.props.refreshButton}>
                 <ReactTable
                     data={map(this.props.topClients, (value, prop) => (
                         { ip: prop, count: value }
                     ))}
                     columns={this.columns}
                     showPagination={false}
-                    noDataText="No clients found"
+                    noDataText={ t('No clients found') }
                     minRows={6}
                     className="-striped -highlight card-table-overflow"
                 />
@@ -58,6 +60,7 @@ Clients.propTypes = {
     topClients: PropTypes.object.isRequired,
     dnsQueries: PropTypes.number.isRequired,
     refreshButton: PropTypes.node.isRequired,
+    t: PropTypes.func,
 };
 
-export default Clients;
+export default withNamespaces()(Clients);