+ client: handle the new statistics format

client/src/components/Dashboard/QueriedDomains.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
-import map from 'lodash/map';
 import { withNamespaces, Trans } from 'react-i18next';
 
 import Card from '../ui/Card';
@@ -20,49 +19,58 @@ class QueriedDomains extends Component {
             return STATUS_COLORS.yellow;
         }
         return STATUS_COLORS.green;
-    }
+    };
 
-    columns = [{
-        Header: 'IP',
-        accessor: 'ip',
-        Cell: (row) => {
-            const { value } = row;
-            const trackerData = getTrackerData(value);
+    columns = [
+        {
+            Header: <Trans>domain</Trans>,
+            accessor: 'domain',
+            Cell: (row) => {
+                const { value } = row;
+                const trackerData = getTrackerData(value);
 
-            return (
-                <div className="logs__row">
-                    <div className="logs__text" title={value}>
-                        {value}
+                return (
+                    <div className="logs__row">
+                        <div className="logs__text" title={value}>
+                            {value}
+                        </div>
+                        {trackerData && <Popover data={trackerData} />}
                     </div>
-                    {trackerData && <Popover data={trackerData} />}
-                </div>
-            );
+                );
+            },
         },
-    }, {
-        Header: <Trans>requests_count</Trans>,
-        accessor: 'count',
-        maxWidth: 190,
-        Cell: ({ value }) => {
-            const percent = getPercent(this.props.dnsQueries, value);
-            const percentColor = this.getPercentColor(percent);
+        {
+            Header: <Trans>requests_count</Trans>,
+            accessor: 'count',
+            maxWidth: 190,
+            Cell: ({ value }) => {
+                const percent = getPercent(this.props.dnsQueries, value);
+                const percentColor = this.getPercentColor(percent);
 
-            return (
-                <Cell value={value} percent={percent} color={percentColor} />
-            );
+                return <Cell value={value} percent={percent} color={percentColor} />;
+            },
         },
-    }];
+    ];
 
     render() {
-        const { t } = this.props;
+        const {
+            t, refreshButton, topQueriedDomains, subtitle,
+        } = this.props;
         return (
-            <Card title={ t('stats_query_domain') } subtitle={ t('for_last_24_hours') } bodyType="card-table" refresh={this.props.refreshButton}>
+            <Card
+                title={t('stats_query_domain')}
+                subtitle={subtitle}
+                bodyType="card-table"
+                refresh={refreshButton}
+            >
                 <ReactTable
-                    data={map(this.props.topQueriedDomains, (value, prop) => (
-                        { ip: prop, count: value }
-                    ))}
+                    data={topQueriedDomains.map(item => ({
+                        domain: item.name,
+                        count: item.count,
+                    }))}
                     columns={this.columns}
                     showPagination={false}
-                    noDataText={ t('no_domains_found') }
+                    noDataText={t('no_domains_found')}
                     minRows={6}
                     className="-striped -highlight card-table-overflow stats__table"
                 />
@@ -72,10 +80,11 @@ class QueriedDomains extends Component {
 }
 
 QueriedDomains.propTypes = {
-    topQueriedDomains: PropTypes.object.isRequired,
+    topQueriedDomains: PropTypes.array.isRequired,
     dnsQueries: PropTypes.number.isRequired,
     refreshButton: PropTypes.node.isRequired,
-    t: PropTypes.func,
+    subtitle: PropTypes.string.isRequired,
+    t: PropTypes.func.isRequired,
 };
 
 export default withNamespaces()(QueriedDomains);