123 lines
3.8 KiB
JavaScript
123 lines
3.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import ReactTable from 'react-table';
|
|
import { saveAs } from 'file-saver/FileSaver';
|
|
import PageTitle from '../ui/PageTitle';
|
|
import Card from '../ui/Card';
|
|
import Loading from '../ui/Loading';
|
|
import { normalizeLogs } from '../../helpers/helpers';
|
|
|
|
|
|
const DOWNLOAD_LOG_FILENAME = 'dns-logs.txt';
|
|
|
|
class Logs extends Component {
|
|
componentDidMount() {
|
|
// get logs on initialization if queryLogIsEnabled
|
|
if (this.props.dashboard.queryLogEnabled) {
|
|
this.props.getLogs();
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
// get logs when queryLog becomes enabled
|
|
if (this.props.dashboard.queryLogEnabled && !prevProps.dashboard.queryLogEnabled) {
|
|
this.props.getLogs();
|
|
}
|
|
}
|
|
|
|
renderLogs(logs) {
|
|
const columns = [{
|
|
Header: 'Time',
|
|
accessor: 'time',
|
|
maxWidth: 150,
|
|
}, {
|
|
Header: 'Domain name',
|
|
accessor: 'domain',
|
|
}, {
|
|
Header: 'Type',
|
|
accessor: 'type',
|
|
maxWidth: 100,
|
|
}, {
|
|
Header: 'Response',
|
|
accessor: 'response',
|
|
Cell: (row) => {
|
|
const responses = row.value;
|
|
if (responses.length > 0) {
|
|
const liNodes = responses.map((response, index) =>
|
|
(<li key={index}>{response}</li>));
|
|
return (<ul className="list-unstyled">{liNodes}</ul>);
|
|
}
|
|
return 'Empty';
|
|
},
|
|
}];
|
|
|
|
if (logs) {
|
|
const normalizedLogs = normalizeLogs(logs);
|
|
return (<ReactTable
|
|
data={normalizedLogs}
|
|
columns={columns}
|
|
showPagination={false}
|
|
minRows={7}
|
|
noDataText="No logs found"
|
|
defaultSorted={[
|
|
{
|
|
id: 'time',
|
|
desc: true,
|
|
},
|
|
]}
|
|
/>);
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
handleDownloadButton = async (e) => {
|
|
e.preventDefault();
|
|
const data = await this.props.downloadQueryLog();
|
|
const jsonStr = JSON.stringify(data);
|
|
const dataBlob = new Blob([jsonStr], { type: 'text/plain;charset=utf-8' });
|
|
saveAs(dataBlob, DOWNLOAD_LOG_FILENAME);
|
|
};
|
|
|
|
renderButtons(queryLogEnabled) {
|
|
return (<div className="card-actions-top">
|
|
<button
|
|
className="btn btn-success btn-standart mr-2"
|
|
type="submit"
|
|
onClick={() => this.props.toggleLogStatus(queryLogEnabled)}
|
|
>{queryLogEnabled ? 'Disable log' : 'Enable log'}</button>
|
|
{queryLogEnabled &&
|
|
<button
|
|
className="btn btn-primary btn-standart"
|
|
type="submit"
|
|
onClick={this.handleDownloadButton}
|
|
>Download log file</button> }
|
|
</div>);
|
|
}
|
|
|
|
render() {
|
|
const { queryLogs, dashboard } = this.props;
|
|
const { queryLogEnabled } = dashboard;
|
|
return (
|
|
<div>
|
|
<PageTitle title="Query Log" subtitle="DNS queries log" />
|
|
<Card>
|
|
{this.renderButtons(queryLogEnabled)}
|
|
{queryLogEnabled && queryLogs.processing && <Loading />}
|
|
{queryLogEnabled && !queryLogs.processing &&
|
|
this.renderLogs(queryLogs.logs)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Logs.propTypes = {
|
|
getLogs: PropTypes.func,
|
|
queryLogs: PropTypes.object,
|
|
dashboard: PropTypes.object,
|
|
toggleLogStatus: PropTypes.func,
|
|
downloadQueryLog: PropTypes.func,
|
|
};
|
|
|
|
export default Logs;
|