-
- {formatNumber(value)}
- {percent}%
-
-
+const Cell = ({
+ value, percent, color, search,
+}) =>
+
+ {formatNumber(value)}
+ {percent}%
-);
+
+
;
Cell.propTypes = {
value: PropTypes.number.isRequired,
percent: PropTypes.number.isRequired,
color: PropTypes.string.isRequired,
+ search: PropTypes.string,
+ onSearchRedirect: PropTypes.func,
};
export default Cell;
diff --git a/client/src/components/ui/Tooltip.css b/client/src/components/ui/IconTooltip.css
similarity index 100%
rename from client/src/components/ui/Tooltip.css
rename to client/src/components/ui/IconTooltip.css
diff --git a/client/src/components/ui/IconTooltip.js b/client/src/components/ui/IconTooltip.js
new file mode 100644
index 00000000..7a7af2fa
--- /dev/null
+++ b/client/src/components/ui/IconTooltip.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './IconTooltip.css';
+import { useTranslation } from 'react-i18next';
+
+const IconTooltip = ({ text, type = '' }) => {
+ const { t } = useTranslation();
+
+ return
;
+};
+
+IconTooltip.propTypes = {
+ text: PropTypes.string.isRequired,
+ type: PropTypes.string,
+};
+
+export default IconTooltip;
diff --git a/client/src/components/ui/LogsSearchLink.css b/client/src/components/ui/LogsSearchLink.css
new file mode 100644
index 00000000..1649e1af
--- /dev/null
+++ b/client/src/components/ui/LogsSearchLink.css
@@ -0,0 +1,7 @@
+.stats__link {
+ color: inherit;
+}
+
+.stats__link:hover {
+ cursor: pointer;
+}
diff --git a/client/src/components/ui/LogsSearchLink.js b/client/src/components/ui/LogsSearchLink.js
new file mode 100644
index 00000000..692f78d2
--- /dev/null
+++ b/client/src/components/ui/LogsSearchLink.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import './LogsSearchLink.css';
+import { getLogsUrlParams } from '../../helpers/helpers';
+import { MENU_URLS } from '../../helpers/constants';
+
+const LogsSearchLink = ({
+ search = '', response_status = '', children, link = MENU_URLS.logs,
+}) => {
+ const { t } = useTranslation();
+
+ const to = link === MENU_URLS.logs ? `${MENU_URLS.logs}${getLogsUrlParams(search && `"${search}"`, response_status)}` : link;
+
+ return
{children};
+};
+
+LogsSearchLink.propTypes = {
+ children: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.element]).isRequired,
+ search: PropTypes.string,
+ response_status: PropTypes.string,
+ link: PropTypes.string,
+};
+
+export default LogsSearchLink;
diff --git a/client/src/components/ui/Tooltip.js b/client/src/components/ui/Tooltip.js
deleted file mode 100644
index 90bd69e1..00000000
--- a/client/src/components/ui/Tooltip.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import './Tooltip.css';
-
-const Tooltip = ({ text, type = '' }) =>
;
-
-Tooltip.propTypes = {
- text: PropTypes.string.isRequired,
- type: PropTypes.string,
-};
-
-export default Tooltip;
diff --git a/client/src/containers/Logs.js b/client/src/containers/Logs.js
index f25aab3b..92858cbf 100644
--- a/client/src/containers/Logs.js
+++ b/client/src/containers/Logs.js
@@ -1,7 +1,7 @@
import { connect } from 'react-redux';
import { getFilteringStatus, setRules } from '../actions/filtering';
import {
- getLogs, setLogsPagination, setLogsFilter, setLogsPage, toggleDetailedLogs,
+ getLogs, setLogsPagination, setLogsPage, toggleDetailedLogs,
} from '../actions/queryLogs';
import Logs from '../components/Logs';
import { addSuccessToast } from '../actions/toasts';
@@ -26,7 +26,6 @@ const mapDispatchToProps = {
setRules,
addSuccessToast,
setLogsPagination,
- setLogsFilter,
setLogsPage,
toggleDetailedLogs,
};
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index ae77faa5..e96086c5 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -397,6 +397,11 @@ export const RESPONSE_FILTER = {
},
};
+export const RESPONSE_FILTER_QUERIES = Object.values(RESPONSE_FILTER).reduce((acc, { query }) => {
+ acc[query] = query;
+ return acc;
+}, {});
+
export const FILTERED_STATUS_TO_META_MAP = {
[FILTERED_STATUS.NOT_FILTERED_WHITE_LIST]: {
label: RESPONSE_FILTER.ALLOWED.label,
diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js
index 3507e4ab..e075a3c5 100644
--- a/client/src/helpers/helpers.js
+++ b/client/src/helpers/helpers.js
@@ -11,6 +11,7 @@ import axios from 'axios';
import i18n from 'i18next';
import uniqBy from 'lodash/uniqBy';
import ipaddr from 'ipaddr.js';
+import queryString from 'query-string';
import versionCompare from './versionCompare';
import { getTrackerData } from './trackers/trackers';
@@ -618,6 +619,16 @@ export const selectCompletedFields = (values) => Object.entries(values)
return acc;
}, {});
+/**
+ * @param {string} search
+ * @param {string} [response_status]
+ * @returns {string}
+ */
+export const getLogsUrlParams = (search, response_status) => `?${queryString.stringify({
+ search,
+ response_status,
+})}`;
+
export const processContent = (content) => (Array.isArray(content)
? content.filter(([, value]) => value)
diff --git a/client/src/helpers/useDebounce.js b/client/src/helpers/useDebounce.js
new file mode 100644
index 00000000..32359f23
--- /dev/null
+++ b/client/src/helpers/useDebounce.js
@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+
+const useDebounce = (value, delay) => {
+ const [debouncedValue, setDebouncedValue] = useState(value);
+
+ useEffect(
+ () => {
+ const handler = setTimeout(() => {
+ setDebouncedValue(value);
+ }, delay);
+
+ return () => {
+ clearTimeout(handler);
+ };
+ },
+ [value, delay],
+ );
+
+ return [debouncedValue, setDebouncedValue];
+};
+
+export default useDebounce;
diff --git a/client/src/reducers/queryLogs.js b/client/src/reducers/queryLogs.js
index bff4896d..d1e24ac3 100644
--- a/client/src/reducers/queryLogs.js
+++ b/client/src/reducers/queryLogs.js
@@ -25,14 +25,14 @@ const queryLogs = handleActions(
page: payload,
}),
- [actions.setLogsFilterRequest]: (state) => ({ ...state, processingGetLogs: true }),
- [actions.setLogsFilterFailure]: (state) => ({ ...state, processingGetLogs: false }),
+ [actions.setFilteredLogsRequest]: (state) => ({ ...state, processingGetLogs: true }),
+ [actions.setFilteredLogsFailure]: (state) => ({ ...state, processingGetLogs: false }),
[actions.toggleDetailedLogs]: (state, { payload }) => ({
...state,
isDetailed: payload,
}),
- [actions.setLogsFilterSuccess]: (state, { payload }) => {
+ [actions.setFilteredLogsSuccess]: (state, { payload }) => {
const { logs, oldest, filter } = payload;
const pageSize = TABLE_DEFAULT_PAGE_SIZE;
const page = 0;
@@ -57,6 +57,12 @@ const queryLogs = handleActions(
};
},
+ [actions.setLogsFilterRequest]: (state, { payload }) => {
+ const { filter } = payload;
+
+ return { ...state, filter };
+ },
+
[actions.getLogsRequest]: (state) => ({ ...state, processingGetLogs: true }),
[actions.getLogsFailure]: (state) => ({ ...state, processingGetLogs: false }),
[actions.getLogsSuccess]: (state, { payload }) => {