77 lines
2.4 KiB
JavaScript
77 lines
2.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import ReactTable from 'react-table';
|
|
import PropTypes from 'prop-types';
|
|
import map from 'lodash/map';
|
|
|
|
import Card from '../ui/Card';
|
|
import Cell from '../ui/Cell';
|
|
import Popover from '../ui/Popover';
|
|
|
|
import { getTrackerData } from '../../helpers/trackers/trackers';
|
|
import { getPercent } from '../../helpers/helpers';
|
|
import { STATUS_COLORS } from '../../helpers/constants';
|
|
|
|
class BlockedDomains extends Component {
|
|
columns = [{
|
|
Header: 'IP',
|
|
accessor: 'ip',
|
|
Cell: (row) => {
|
|
const { value } = row;
|
|
const trackerData = getTrackerData(value);
|
|
|
|
return (
|
|
<div className="logs__row">
|
|
<div className="logs__text" title={value}>
|
|
{value}
|
|
</div>
|
|
{trackerData && <Popover data={trackerData} />}
|
|
</div>
|
|
);
|
|
},
|
|
}, {
|
|
Header: 'Requests count',
|
|
accessor: 'domain',
|
|
maxWidth: 190,
|
|
Cell: ({ value }) => {
|
|
const {
|
|
blockedFiltering,
|
|
replacedSafebrowsing,
|
|
replacedParental,
|
|
} = this.props;
|
|
const blocked = blockedFiltering + replacedSafebrowsing + replacedParental;
|
|
const percent = getPercent(blocked, value);
|
|
|
|
return (
|
|
<Cell value={value} percent={percent} color={STATUS_COLORS.red} />
|
|
);
|
|
},
|
|
}];
|
|
|
|
render() {
|
|
return (
|
|
<Card title="Top blocked domains" subtitle="for the last 24 hours" bodyType="card-table" refresh={this.props.refreshButton}>
|
|
<ReactTable
|
|
data={map(this.props.topBlockedDomains, (value, prop) => (
|
|
{ ip: prop, domain: value }
|
|
))}
|
|
columns={this.columns}
|
|
showPagination={false}
|
|
noDataText="No domains found"
|
|
minRows={6}
|
|
className="-striped -highlight card-table-overflow stats__table"
|
|
/>
|
|
</Card>
|
|
);
|
|
}
|
|
}
|
|
|
|
BlockedDomains.propTypes = {
|
|
topBlockedDomains: PropTypes.object.isRequired,
|
|
blockedFiltering: PropTypes.number.isRequired,
|
|
replacedSafebrowsing: PropTypes.number.isRequired,
|
|
replacedParental: PropTypes.number.isRequired,
|
|
refreshButton: PropTypes.node.isRequired,
|
|
};
|
|
|
|
export default BlockedDomains;
|