HM-58. Добавлен новый тип логов client-logs (#21)

src/components/logs-page/LogsPage.js

@@ -5,14 +5,8 @@ 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'},
-];
+import {LOG_TYPE, LOG_COLS} from '../../consts';
+import {createElement, markText} from '../../utils/elementUtils';
 
 const ELEMENTS_ON_PAGE = 15;
 
@@ -20,63 +14,84 @@ class LogsPage extends Component {
     constructor (mainNodeSelector, parentNode) {
         super(mainNodeSelector, parentNode);
 
-        this.filters = new LogsFilters(this.mainNode);
+        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.table = new Table(this.mainNode, COLS);
+        this.filters = new LogsFilters(this.header);
 
-        this.pagination = new Pagination(this.mainNode);
+        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);
 
         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();
+        this.initPage();
     }
 
-    loadLogList = async () => {
-        this.logList = await storageLogsApi.request();
+    initPage = async () => {
+        this.logList = {
+            [LOG_TYPE.SERVER]: await storageLogsApi.requestServerLogs(),
+            [LOG_TYPE.CLIENT]: await storageLogsApi.requestClientLogs(),
+        };
         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;
-        }, []);
+    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 = () => {
         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);
-
+        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);
-
     }
 }