+
+
+
diff --git a/src/components/client-logs-table/ClientLogsTableRow.js b/src/components/client-logs-table/ClientLogsTableRow.js
index f932c02..3b908c5 100644
--- a/src/components/client-logs-table/ClientLogsTableRow.js
+++ b/src/components/client-logs-table/ClientLogsTableRow.js
@@ -4,7 +4,6 @@ import TableCellOverflow from '../table-cell-overflow';
class ClientLogsTableRow extends Component {
constructor (parentNode, cols, row) {
super(null, parentNode);
-
this.cols = cols.map((col) => this.createComponent(TableCellOverflow, this.mainNode, row[col.id]));
}
}
diff --git a/src/components/logs-filters/LogsFilters.js b/src/components/logs-filters/LogsFilters.js
index 0aa2ad2..ae15fcf 100644
--- a/src/components/logs-filters/LogsFilters.js
+++ b/src/components/logs-filters/LogsFilters.js
@@ -60,9 +60,11 @@ class LogsFilters extends Component {
initInput = ({name, id}) => {
const input = this.mainNode.querySelector(`#${id}`);
const clearButton = input.parentNode.querySelector('.LogsFilters__clearButton');
- this.addEventListener(clearButton, 'click', () => {
- input.value = '';
- });
+ if (clearButton) {
+ this.addEventListener(clearButton, 'click', () => {
+ input.value = '';
+ });
+ }
return {
name,
input,
@@ -78,7 +80,11 @@ class LogsFilters extends Component {
{name: 'trace', id: 'logs-filter-trace'},
].map(this.initInput);
this.clientInputs = [
- {name: 'type', id: 'logs-filter-request-type'},
+ {name: 'data_base', id: 'logs-filter-request-data-base'},
+ {name: 'method', id: 'logs-filter-request-method'},
+ {name: 'url', id: 'logs-filter-request-url'},
+ {name: 'status', id: 'logs-filter-request-status'},
+ {name: 'message', id: 'logs-filter-request-message'},
].map(this.initInput);
this.changeType();
diff --git a/src/components/logs-page/LogsPage.js b/src/components/logs-page/LogsPage.js
index 1578cfe..df37a3e 100644
--- a/src/components/logs-page/LogsPage.js
+++ b/src/components/logs-page/LogsPage.js
@@ -1,3 +1,4 @@
+import toString from 'lodash/toString';
import Component from '../component/index';
import storageLogsApi from '../../api/StorageLogsAPI';
import Pagination from '../pagination';
@@ -10,6 +11,7 @@ import ServerLogsTable from '../server-logs-table';
import ClientLogsTable from '../client-logs-table';
import ClientLogsViewForm from '../client-logs-view-form';
import ServerLogsViewForm from '../server-logs-view-form';
+import {prepareClientLogElement} from '../../utils/converters';
const ELEMENTS_ON_PAGE = 15;
@@ -36,8 +38,8 @@ class LogsPage extends Component {
this.filters = this.createComponent(LogsFilters, this.header);
this.tables = {
- [LOG_TYPE.SERVER]: this.createComponent(ServerLogsTable),
- [LOG_TYPE.CLIENT]: this.createComponent(ClientLogsTable),
+ [LOG_TYPE.SERVER]: ServerLogsTable,
+ [LOG_TYPE.CLIENT]: ClientLogsTable,
};
this.pagination = this.createComponent(Pagination, this.footer);
@@ -53,8 +55,10 @@ class LogsPage extends Component {
}
initPage = async () => {
- this.logList[LOG_TYPE.SERVER] = await storageLogsApi.requestServerLogs();
- this.logList[LOG_TYPE.CLIENT] = await storageLogsApi.requestClientLogs();
+ const serverList = await storageLogsApi.requestServerLogs();
+ const clientList = await storageLogsApi.requestClientLogs();
+ this.logList[LOG_TYPE.SERVER] = serverList;
+ this.logList[LOG_TYPE.CLIENT] = clientList.map(prepareClientLogElement);
this.renderTable();
}
@@ -65,7 +69,7 @@ class LogsPage extends Component {
if (!rowValue) {
return true;
}
- return rowValue.toLowerCase().includes(value.toLowerCase());
+ return toString(rowValue).toLowerCase().includes(value.toLowerCase());
});
});
@@ -122,7 +126,7 @@ class LogsPage extends Component {
const {query} = routeService.getUrlData();
const {tableType, ...omitQuery} = query;
this.table?.destroy();
- this.table = this.tables[tableType];
+ this.table = this.createComponent(this.tables[tableType]);
this.body.appendChild(this.table.mainNode);
const preparedRows = this.prepareRows(this.logList[tableType]);
const filteredRows = this.filterRows(preparedRows, omitQuery);
diff --git a/src/components/table-cell-overflow/TableCellOverflow.js b/src/components/table-cell-overflow/TableCellOverflow.js
index a954ae5..c0a8d44 100644
--- a/src/components/table-cell-overflow/TableCellOverflow.js
+++ b/src/components/table-cell-overflow/TableCellOverflow.js
@@ -25,7 +25,7 @@ class TableCellOverflow extends Component {
},
});
- span.innerHTML = text;
+ span.innerHTML = text || '-';
}
}
diff --git a/src/consts.js b/src/consts.js
index 6cc31c3..bf7efad 100644
--- a/src/consts.js
+++ b/src/consts.js
@@ -5,7 +5,7 @@ export const LOG_TYPE = {
export const LOG_LABELS = [
{id: LOG_TYPE.SERVER, label: 'Ошибки сервера'},
- {id: LOG_TYPE.CLIENT, label: 'Запросы клиентов'},
+ {id: LOG_TYPE.CLIENT, label: 'Ошибки запросов'},
];
export const SERVER_COLS = [
@@ -17,12 +17,14 @@ export const SERVER_COLS = [
];
export const CLIENT_COLS = [
- {id: '_id', label: 'id', width: '240px'},
+ {id: 'startTime', label: 'Дата запроса', width: '150px'},
{id: 'type', label: 'Результат', width: '100px'},
- {id: 'request', label: 'Запрос клиента', width: '240px'},
- {id: 'response', label: 'Ответ сервера'},
- {id: 'startTime', label: 'Начало', width: '150px'},
- {id: 'endTime', label: 'Окончание', width: '150px'},
+ {id: 'data_base', label: 'База данных'},
+ {id: 'url', label: 'URL'},
+ {id: 'method', label: 'Метод'},
+ {id: 'status', label: 'Код ответа'},
+ {id: 'message', label: 'Сообщение'},
+ {id: 'duration', label: 'Скорость ответа'},
];
export const LOG_COLS = {
diff --git a/src/utils/converters.js b/src/utils/converters.js
new file mode 100644
index 0000000..addc244
--- /dev/null
+++ b/src/utils/converters.js
@@ -0,0 +1,20 @@
+import moment from 'moment';
+
+export const prepareClientLogElement = (client) => {
+ const {request, response} = client;
+ const {headers, method, url} = request;
+ const {status, message} = response;
+
+ const data_base = headers.api_name ? 'testing' : 'production';
+
+ const duration = moment(client.endTime).millisecond() - moment(client.startTime).millisecond();
+ return {
+ ...client,
+ data_base,
+ method,
+ url,
+ status: status || 500,
+ message: message || 'Критическая ошибка сервера',
+ duration: `${duration} мс`,
+ };
+};
diff --git a/src/utils/elementUtils.js b/src/utils/elementUtils.js
index 951ce02..76084fb 100644
--- a/src/utils/elementUtils.js
+++ b/src/utils/elementUtils.js
@@ -1,4 +1,5 @@
import moment from 'moment';
+import toString from 'lodash/toString';
/**
* @interface CreateElementProps
@@ -46,13 +47,13 @@ export const createElement = (createElementProps) => {
*/
export const markText = (searchMessage, text, styleClassName = 'text-warning bg-dark') => {
const replaceMessage = new RegExp(searchMessage, 'gi');
- return text.replace(replaceMessage, (match) => (
+ return toString(text).replace(replaceMessage, (match) => (
`${match}`
));
};
export const prepareServerDate = (stringDate) => {
- return moment(stringDate).format('DD/MM/YYYY hh:mm:ss');
+ return moment(stringDate).format('DD/MM/YYYY HH:mm:ss');
};
export const prepareObjectToString = (object) => {