Initial commit

client/src/components/Logs/index.js

@@ -0,0 +1,122 @@
+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;