HM-56. Добавлена страница для просмотра логов с фильтрацией, пагинацией (#20)

src/components/logs-page/LogsPage.js

@@ -0,0 +1,83 @@
+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';
+
+const COLS = [
+    {id: '_id', label: 'id', width: '240px'},
+    {id: 'date', label: 'Дата', width: '150px'},
+    {id: 'type', label: 'Тип', width: '70px'},
+    {id: 'message', label: 'Сообщение', width: '200px'},
+    {id: 'trace', label: 'Стек', width: '200px'},
+];
+
+const ELEMENTS_ON_PAGE = 15;
+
+class LogsPage extends Component {
+    constructor (mainNodeSelector, parentNode) {
+        super(mainNodeSelector, parentNode);
+
+        this.filters = new LogsFilters(this.mainNode);
+
+        this.table = new Table(this.mainNode, COLS);
+
+        this.pagination = new Pagination(this.mainNode);
+
+        routeService.onChange(this.renderTable);
+
+        this.pagination.onPageChange((pageNumber) => {
+            const start = (pageNumber - 1) * ELEMENTS_ON_PAGE;
+            const end = start + ELEMENTS_ON_PAGE;
+            const rows = this.logList.slice(start, end + 1);
+
+            this.table.render(rows);
+        });
+
+        this.loadLogList();
+    }
+
+    loadLogList = async () => {
+        this.logList = await storageLogsApi.request();
+        this.renderTable();
+    }
+
+    filterRows = (queryMessage) => {
+        return this.logList.reduce((memo, row) => {
+            const message = row.message.toLowerCase();
+            const searchMessage = (queryMessage || '').toLowerCase();
+            if (searchMessage === '') {
+                memo.push(row);
+                return memo;
+            }
+            if (message.includes(searchMessage)) {
+                const replaceMessage = new RegExp(searchMessage, 'g');
+                const newText = message.replace(replaceMessage, `<span class="text-warning bg-dark">${searchMessage}</span>`);
+                memo.push({
+                    ...row,
+                    message: newText,
+                });
+            }
+            return memo;
+        }, []);
+    }
+
+    renderTable = () => {
+        const {query} = routeService.getUrlData();
+        const filterRows = this.filterRows(query.message);
+        const countPages = Math.ceil(filterRows.length / ELEMENTS_ON_PAGE);
+        const pageNumber = prepareToNumber(query.pageNumber, countPages);
+        this.pagination.changeCountPages(countPages);
+
+        const start = (pageNumber - 1) * ELEMENTS_ON_PAGE;
+        const end = start + ELEMENTS_ON_PAGE;
+        const rows = filterRows.slice(start, end + 1);
+
+        this.table.render(rows);
+
+    }
+}
+
+export default LogsPage;