104 lines
3.4 KiB
JavaScript
104 lines
3.4 KiB
JavaScript
import Component from '../component/index';
|
|
import Table from '../table';
|
|
import storageLogsApi from '../../api/StorageLogsAPI';
|
|
import Pagination from '../pagination';
|
|
import LogsFilters from '../logs-filters';
|
|
import routeService from '../../services/RouteService';
|
|
import {prepareToNumber} from '../../utils/urlUtils';
|
|
import {LOG_TYPE, LOG_COLS, EVENTS} from '../../consts';
|
|
import {createElement, markText} from '../../utils/elementUtils';
|
|
|
|
const ELEMENTS_ON_PAGE = 15;
|
|
|
|
class LogsPage extends Component {
|
|
constructor (mainNodeSelector, parentNode) {
|
|
super(mainNodeSelector, parentNode);
|
|
|
|
this.header = createElement({
|
|
tagName: 'div',
|
|
parentNode: this.mainNode,
|
|
});
|
|
this.body = createElement({
|
|
tagName: 'div',
|
|
parentNode: this.mainNode,
|
|
});
|
|
this.footer = createElement({
|
|
tagName: 'div',
|
|
parentNode: this.mainNode,
|
|
});
|
|
|
|
this.filters = new LogsFilters(this.header);
|
|
|
|
this.tables = {
|
|
[LOG_TYPE.SERVER]: new Table(null, LOG_COLS[LOG_TYPE.SERVER]),
|
|
[LOG_TYPE.CLIENT]: new Table(null, LOG_COLS[LOG_TYPE.CLIENT]),
|
|
};
|
|
|
|
this.pagination = new Pagination(this.footer);
|
|
|
|
this.logList = {
|
|
[LOG_TYPE.SERVER]: [],
|
|
[LOG_TYPE.CLIENT]: [],
|
|
};
|
|
|
|
this.addSubscribe(routeService, EVENTS.ROUTE_SEARCH_CHANGE, this.renderTable);
|
|
|
|
this.initPage();
|
|
}
|
|
|
|
initPage = async () => {
|
|
this.logList[LOG_TYPE.SERVER] = await storageLogsApi.requestServerLogs();
|
|
this.logList[LOG_TYPE.CLIENT] = await storageLogsApi.requestClientLogs();
|
|
this.renderTable();
|
|
}
|
|
|
|
filterRows = (rows, query) => {
|
|
const filteredRows = rows.filter((row) => {
|
|
return Object.entries(query).every(([key, value]) => {
|
|
const rowValue = row[key];
|
|
if (!rowValue) {
|
|
return true;
|
|
}
|
|
return rowValue.toLowerCase().includes(value.toLowerCase());
|
|
});
|
|
});
|
|
|
|
return filteredRows.map((row) => {
|
|
return Object.entries(query).reduce((memo, [key, searchMessage]) => {
|
|
const rowValue = memo[key];
|
|
if (!rowValue) {
|
|
return memo;
|
|
}
|
|
return {
|
|
...memo,
|
|
[key]: markText(searchMessage, rowValue),
|
|
};
|
|
}, row);
|
|
});
|
|
}
|
|
|
|
cutPagginationPage = (filteredRows, queryPageNumber) => {
|
|
const countPages = Math.ceil(filteredRows.length / ELEMENTS_ON_PAGE);
|
|
const pageNumber = prepareToNumber(queryPageNumber, countPages);
|
|
this.pagination.changeCountPages(countPages);
|
|
const start = (pageNumber - 1) * ELEMENTS_ON_PAGE;
|
|
const end = start + ELEMENTS_ON_PAGE;
|
|
return filteredRows.slice(start, end + 1);
|
|
}
|
|
|
|
renderTable = () => {
|
|
this.render(() => {
|
|
const {query} = routeService.getUrlData();
|
|
const {tableType, ...omitQuery} = query;
|
|
this.table?.mainNode?.remove();
|
|
this.table = this.tables[tableType];
|
|
this.body.appendChild(this.table.mainNode);
|
|
const filteredRows = this.filterRows(this.logList[tableType], omitQuery);
|
|
const rows = this.cutPagginationPage(filteredRows, query.pageNumber);
|
|
this.table.render(rows);
|
|
});
|
|
}
|
|
}
|
|
|
|
export default LogsPage;
|