From c425ffea4516d5137f33a0684a2884c567c3a641 Mon Sep 17 00:00:00 2001
From: Nikolay <46225163+vigdorov@users.noreply.github.com>
Date: Sat, 25 Jul 2020 14:23:52 +0300
Subject: [PATCH] =?UTF-8?q?HM-71.=20=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B8=20=D1=82=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D1=8B?=
 =?UTF-8?q?=20=D0=BB=D0=BE=D0=B3=D0=BE=D0=B2.=20=D0=A3=D0=BD=D0=B8=D0=B2?=
 =?UTF-8?q?=D0=B5=D1=80=D1=81=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D0=B9=20=D1=82?=
 =?UTF-8?q?=D0=B0=D0=B1=D0=BB=D0=B8=D1=86=D0=B5=20=D0=B4=D0=BE=D0=B1=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE?=
 =?UTF-8?q?=D0=B6=D0=BD=D0=BE=D1=81=D1=82=D1=8C=20=D0=BF=D0=B5=D1=80=D0=B5?=
 =?UTF-8?q?=D0=BE=D0=BF=D1=80=D0=B5=D0=B4=D0=B5=D0=BB=D1=8F=D1=82=D1=8C=20?=
 =?UTF-8?q?=D1=80=D0=B5=D0=BD=D0=B4=D0=B5=D1=80=20=D1=81=D1=82=D1=80=D0=BE?=
 =?UTF-8?q?=D0=BA=20=D0=B8=20=D0=B7=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=B2=20(#31)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 .../client-logs-table/ClientLogsTable.js      | 15 ++++++
 .../client-logs-table/ClientLogsTableRow.js   | 12 +++++
 src/components/client-logs-table/index.js     |  3 ++
 src/components/component/Component.js         | 24 +++++++---
 src/components/logs-page/LogsPage.js          | 31 +++++++++---
 .../server-logs-table/ServerLogsTable.js      | 16 +++++++
 .../server-logs-table/ServerLogsTableRow.js   | 12 +++++
 src/components/server-logs-table/index.js     |  3 ++
 .../table-cell-overflow/TableCellOverflow.css | 14 ++++++
 .../table-cell-overflow/TableCellOverflow.js  | 33 +++++++++++++
 src/components/table-cell-overflow/index.js   |  3 ++
 src/components/table/HeaderCol.js             |  2 +-
 src/components/table/RowCol.js                | 18 +++++++
 src/components/table/Table.js                 | 47 ++++++++++---------
 src/components/table/TableRow.js              | 25 ++--------
 src/components/table/TableRowWrapper.js       | 14 ++++++
 src/consts.js                                 | 11 +++--
 src/utils/elementUtils.js                     | 10 ++++
 19 files changed, 231 insertions(+), 63 deletions(-)
 create mode 100644 src/components/client-logs-table/ClientLogsTable.js
 create mode 100644 src/components/client-logs-table/ClientLogsTableRow.js
 create mode 100644 src/components/client-logs-table/index.js
 create mode 100644 src/components/server-logs-table/ServerLogsTable.js
 create mode 100644 src/components/server-logs-table/ServerLogsTableRow.js
 create mode 100644 src/components/server-logs-table/index.js
 create mode 100644 src/components/table-cell-overflow/TableCellOverflow.css
 create mode 100644 src/components/table-cell-overflow/TableCellOverflow.js
 create mode 100644 src/components/table-cell-overflow/index.js
 create mode 100644 src/components/table/RowCol.js
 create mode 100644 src/components/table/TableRowWrapper.js

diff --git a/package.json b/package.json
index 158972f..3895bdd 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "bootstrap": "^5.0.0-alpha1",
+    "moment": "^2.27.0",
     "popper.js": "^1.16.1",
     "query-string": "^6.13.1",
     "uuid": "^8.2.0"
diff --git a/src/components/client-logs-table/ClientLogsTable.js b/src/components/client-logs-table/ClientLogsTable.js
new file mode 100644
index 0000000..5be02bd
--- /dev/null
+++ b/src/components/client-logs-table/ClientLogsTable.js
@@ -0,0 +1,15 @@
+import Table from '../table';
+import {LOG_COLS, LOG_TYPE} from '../../consts';
+import ClientLogsTableRow from './ClientLogsTableRow';
+
+class ClientLogsTable extends Table {
+    constructor () {
+        super(null, LOG_COLS[LOG_TYPE.CLIENT]);
+    }
+
+    renderRow = (parentNode, cols, row) => {
+        return new ClientLogsTableRow(parentNode, cols, row);
+    }
+}
+
+export default ClientLogsTable;
diff --git a/src/components/client-logs-table/ClientLogsTableRow.js b/src/components/client-logs-table/ClientLogsTableRow.js
new file mode 100644
index 0000000..fc014b8
--- /dev/null
+++ b/src/components/client-logs-table/ClientLogsTableRow.js
@@ -0,0 +1,12 @@
+import Component from '../component';
+import TableCellOverflow from '../table-cell-overflow';
+
+class ClientLogsTableRow extends Component {
+    constructor (parentNode, cols, row) {
+        super(null, parentNode);
+
+        this.cols = cols.map((col) => new TableCellOverflow(this.mainNode, row[col.id]));
+    }
+}
+
+export default ClientLogsTableRow;
diff --git a/src/components/client-logs-table/index.js b/src/components/client-logs-table/index.js
new file mode 100644
index 0000000..16a38cd
--- /dev/null
+++ b/src/components/client-logs-table/index.js
@@ -0,0 +1,3 @@
+import ClientLogsTable from './ClientLogsTable';
+
+export default ClientLogsTable;
diff --git a/src/components/component/Component.js b/src/components/component/Component.js
index 1d07493..5f7c34b 100644
--- a/src/components/component/Component.js
+++ b/src/components/component/Component.js
@@ -26,15 +26,25 @@ class Component extends EmitService {
 
     constructor (mainNodeSelector, parentNode) {
         super();
-        const content = document.querySelector(mainNodeSelector).content;
-        if (content.children.length > 1) {
-            const message = '<template> должен содержать только один элемент children';
-            throw new Error(message);
+        if (!mainNodeSelector && !parentNode) {
+            throw new Error('Компонент должен содержать хотябы селектор или родительский Node');
         }
-        this.mainNode = content.firstElementChild.cloneNode(true);
-        if (parentNode) {
-            parentNode.appendChild(this.mainNode);
+
+        if (mainNodeSelector) {
+            const content = document.querySelector(mainNodeSelector).content;
+            if (content.children.length > 1) {
+                const message = '<template> должен содержать только один элемент children';
+                throw new Error(message);
+            }
+            this.mainNode = content.firstElementChild.cloneNode(true);
+
+            if (parentNode) {
+                parentNode.appendChild(this.mainNode);
+            }
+        } else {
+            this.mainNode = parentNode;
         }
+
         this._listeners = [];
         this._events = {};
         this._isAlive = true;
diff --git a/src/components/logs-page/LogsPage.js b/src/components/logs-page/LogsPage.js
index d1f4a31..07f979a 100644
--- a/src/components/logs-page/LogsPage.js
+++ b/src/components/logs-page/LogsPage.js
@@ -1,12 +1,13 @@
 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';
+import {LOG_TYPE, EVENTS} from '../../consts';
+import {createElement, markText, prepareServerDate, prepareObjectToString} from '../../utils/elementUtils';
+import ServerLogsTable from '../server-logs-table';
+import ClientLogsTable from '../client-logs-table';
 
 const ELEMENTS_ON_PAGE = 15;
 
@@ -30,8 +31,8 @@ class LogsPage extends Component {
         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]),
+            [LOG_TYPE.SERVER]: new ServerLogsTable(),
+            [LOG_TYPE.CLIENT]: new ClientLogsTable(),
         };
 
         this.pagination = new Pagination(this.footer);
@@ -86,6 +87,23 @@ class LogsPage extends Component {
         return filteredRows.slice(start, end + 1);
     }
 
+    prepareCells = (columns, prepareFunction) => {
+        return Object.entries(columns).reduce((memo, [colName, colValue]) => ({
+            ...memo,
+            ...(colValue ? {
+                [colName]: prepareFunction(colValue),
+            } : {}),
+        }), {});
+    }
+
+    prepareRows = (rows) => {
+        return rows.map(({startTime, endTime, date, request, response, ...omitProps}) => ({
+            ...omitProps,
+            ...this.prepareCells({startTime, endTime, date}, prepareServerDate),
+            ...this.prepareCells({request, response}, prepareObjectToString),
+        }));
+    }
+
     renderTable = () => {
         this.render(() => {
             const {query} = routeService.getUrlData();
@@ -95,7 +113,8 @@ class LogsPage extends Component {
             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);
+
+            this.table.render(this.prepareRows(rows));
         });
     }
 }
diff --git a/src/components/server-logs-table/ServerLogsTable.js b/src/components/server-logs-table/ServerLogsTable.js
new file mode 100644
index 0000000..504be07
--- /dev/null
+++ b/src/components/server-logs-table/ServerLogsTable.js
@@ -0,0 +1,16 @@
+import Table from '../table';
+import {LOG_TYPE, LOG_COLS} from '../../consts';
+import ServerLogsTableRow from './ServerLogsTableRow';
+
+class ServerLogsTable extends Table {
+    constructor () {
+        super(null, LOG_COLS[LOG_TYPE.SERVER]);
+    }
+
+    renderRow = (parentNode, cols, row) => {
+        return new ServerLogsTableRow(parentNode, cols, row);
+    }
+
+}
+
+export default ServerLogsTable;
diff --git a/src/components/server-logs-table/ServerLogsTableRow.js b/src/components/server-logs-table/ServerLogsTableRow.js
new file mode 100644
index 0000000..792fc4b
--- /dev/null
+++ b/src/components/server-logs-table/ServerLogsTableRow.js
@@ -0,0 +1,12 @@
+import Component from '../component';
+import TableCellOverflow from '../table-cell-overflow';
+
+class ServerLogsTableRow extends Component {
+    constructor (parentNode, cols, row) {
+        super(null, parentNode);
+
+        this.cols = cols.map((col) => new TableCellOverflow(this.mainNode, row[col.id]));
+    }
+}
+
+export default ServerLogsTableRow;
diff --git a/src/components/server-logs-table/index.js b/src/components/server-logs-table/index.js
new file mode 100644
index 0000000..48a8594
--- /dev/null
+++ b/src/components/server-logs-table/index.js
@@ -0,0 +1,3 @@
+import ServerLogsTable from './ServerLogsTable';
+
+export default ServerLogsTable;
diff --git a/src/components/table-cell-overflow/TableCellOverflow.css b/src/components/table-cell-overflow/TableCellOverflow.css
new file mode 100644
index 0000000..dc68f13
--- /dev/null
+++ b/src/components/table-cell-overflow/TableCellOverflow.css
@@ -0,0 +1,14 @@
+.TableCellOverflow__cellWrapper {
+    max-width: 300px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.TableCellOverflow__cell {
+    max-width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
diff --git a/src/components/table-cell-overflow/TableCellOverflow.js b/src/components/table-cell-overflow/TableCellOverflow.js
new file mode 100644
index 0000000..86d7a0c
--- /dev/null
+++ b/src/components/table-cell-overflow/TableCellOverflow.js
@@ -0,0 +1,33 @@
+import Component from '../component';
+import {createElement} from '../../utils/elementUtils';
+import './TableCellOverflow.css';
+
+class TableCellOverflow extends Component {
+    constructor (parentNode, text) {
+        super(null, parentNode);
+
+        const cell = createElement({
+            tagName: 'td',
+            parentNode: this.mainNode,
+        });
+
+        const div = createElement({
+            tagName: 'div',
+            parentNode: cell,
+            options: {
+                className: 'TableCellOverflow__cellWrapper'
+            }
+        });
+        const span = createElement({
+            tagName: 'span',
+            parentNode: div,
+            options: {
+                className: 'TableCellOverflow__cell',
+            },
+        });
+
+        span.innerHTML = text;
+    }
+}
+
+export default TableCellOverflow;
diff --git a/src/components/table-cell-overflow/index.js b/src/components/table-cell-overflow/index.js
new file mode 100644
index 0000000..4fba56a
--- /dev/null
+++ b/src/components/table-cell-overflow/index.js
@@ -0,0 +1,3 @@
+import TableCellOverflow from './TableCellOverflow';
+
+export default TableCellOverflow;
diff --git a/src/components/table/HeaderCol.js b/src/components/table/HeaderCol.js
index 83320e2..9d5ec60 100644
--- a/src/components/table/HeaderCol.js
+++ b/src/components/table/HeaderCol.js
@@ -5,8 +5,8 @@ class HeaderCol extends Component {
         super('#uni-table-th', parentNode);
 
         this.id = col.id;
-        this.mainNode.textContent = col.label;
         this.mainNode.style.minWidth = col.width ?? '';
+        this.mainNode.textContent = col.label;
     }
 }
 
diff --git a/src/components/table/RowCol.js b/src/components/table/RowCol.js
new file mode 100644
index 0000000..9e0201c
--- /dev/null
+++ b/src/components/table/RowCol.js
@@ -0,0 +1,18 @@
+import Component from '../component';
+import {createElement} from '../../utils/elementUtils';
+
+class RowCol extends Component {
+    constructor (parentNode, text) {
+        super(null, parentNode);
+
+        createElement({
+            tagName: 'td',
+            parentNode: this.mainNode,
+            options: {
+                innerHTML: text,
+            },
+        });
+    }
+}
+
+export default RowCol;
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
index 81eb2ea..521edca 100644
--- a/src/components/table/Table.js
+++ b/src/components/table/Table.js
@@ -1,8 +1,8 @@
 import Component from '../component/index';
 import HeaderCol from './HeaderCol';
 import TableRow from './TableRow';
-
-const ROW_CLICK = 'ROW_CLICK';
+import TableRowWrapper from './TableRowWrapper';
+import {EVENTS} from '../../consts';
 
 /**
  * @interface Col
@@ -33,6 +33,8 @@ class Table extends Component {
     constructor (parentNode, cols) {
         super('#uni-table', parentNode);
 
+        this.mainNode.classList.add('Table');
+
         this.theadTr = this.mainNode.querySelector('thead tr');
         this.tbody = this.mainNode.querySelector('tbody');
 
@@ -40,6 +42,14 @@ class Table extends Component {
         this.renderHeader();
     }
 
+    renderHeaderCol = (col) => {
+        return new HeaderCol(this.theadTr, col);
+    }
+
+    renderRow = (parentNode, cols, row) => {
+        return new TableRow(parentNode, cols, row);
+    }
+
     /**
      * Метод нужен для отрисовки шапки таблицы, вызывается конструктором самостоятельно
      */
@@ -49,7 +59,8 @@ class Table extends Component {
                 col.destroy();
             });
         }
-        this.headerCols = this.cols.map((col) => new HeaderCol(this.theadTr, col));
+
+        this.headerCols = this.cols.map(this.renderHeaderCol);
     }
 
     /**
@@ -58,32 +69,24 @@ class Table extends Component {
      */
     render = (rows) => {
         if (this.rows) {
-            this.rows.forEach((row) => {
-                row.destroy();
+            this.rows.forEach(({tr, rowComponent}) => {
+                tr.destroy();
+                rowComponent.destroy();
             });
         }
 
         this.rows = rows.map((row) => {
-            const rowComponent = new TableRow(this.tbody, this.cols, row);
-            rowComponent.onClick((event) => {
-                this.next(ROW_CLICK, event, row);
+            const tr = new TableRowWrapper(this.tbody, row);
+            this.addSubscribe(tr, EVENTS.ROW_CLICK, (event) => {
+                this.next(EVENTS.ROW_CLICK, event, row);
             });
-            return rowComponent;
+            const rowComponent = this.renderRow(tr.mainNode, this.cols, row);
+            return {
+                tr,
+                rowComponent,
+            };
         });
     }
-
-    /**
-     * Метод для подписки на клики по строчкам, передает event и данные строчки
-     * @param {Function} listener - слушатель
-     *
-     * @example
-     * table.onRowClick((event, row) => {
-     *     // Ваш код
-     * });
-     */
-    onRowClick = (listener) => {
-        this.subscribe(ROW_CLICK, listener);
-    }
 }
 
 export default Table;
diff --git a/src/components/table/TableRow.js b/src/components/table/TableRow.js
index 217f91c..ccd9609 100644
--- a/src/components/table/TableRow.js
+++ b/src/components/table/TableRow.js
@@ -1,30 +1,11 @@
 import Component from '../component/index';
-import {createElement} from '../../utils/elementUtils';
-
-const CLICK = 'click';
+import RowCol from './RowCol';
 
 class TableRow extends Component {
     constructor (parentNode, cols, row) {
-        super('#uni-table-row', parentNode);
+        super(null, parentNode);
 
-        cols.forEach((col) => {
-            const cell = createElement({
-                tagName: 'td',
-                parentNode: this.mainNode,
-                options: {
-                    className: 'text-break'
-                },
-            });
-            cell.innerHTML = row[col.id];
-        });
-
-        this.mainNode.addEventListener(CLICK, (event) => {
-            this.next(CLICK, event);
-        });
-    }
-
-    onClick = (listener) => {
-        this.subscribe(CLICK, listener);
+        this.cols = cols.map((col) => new RowCol(this.mainNode, row[col.id]));
     }
 }
 
diff --git a/src/components/table/TableRowWrapper.js b/src/components/table/TableRowWrapper.js
new file mode 100644
index 0000000..f803ecc
--- /dev/null
+++ b/src/components/table/TableRowWrapper.js
@@ -0,0 +1,14 @@
+import Component from '../component';
+import {EVENTS} from '../../consts';
+
+class TableRowWrapper extends Component {
+    constructor (parentNode) {
+        super('#uni-table-row', parentNode);
+
+        this.addEventListener(this.mainNode, 'click', () => {
+            this.next(EVENTS.ROW_CLICK);
+        });
+    }
+}
+
+export default TableRowWrapper;
diff --git a/src/consts.js b/src/consts.js
index 9fb97ed..0addd7a 100644
--- a/src/consts.js
+++ b/src/consts.js
@@ -18,11 +18,11 @@ export const SERVER_COLS = [
 
 export const CLIENT_COLS = [
     {id: '_id', label: 'id', width: '240px'},
-    {id: 'type', label: 'Результат запроса'},
+    {id: 'type', label: 'Результат', width: '100px'},
     {id: 'request', label: 'Запрос клиента', width: '240px'},
-    {id: 'response', label: 'Ответ сервера', width: '240px'},
-    {id: 'startTime', label: 'Начало запроса', width: '150px'},
-    {id: 'endTime', label: 'Окончание запроса', width: '150px'},
+    {id: 'response', label: 'Ответ сервера'},
+    {id: 'startTime', label: 'Начало', width: '150px'},
+    {id: 'endTime', label: 'Окончание', width: '150px'},
 ];
 
 export const LOG_COLS = {
@@ -32,5 +32,6 @@ export const LOG_COLS = {
 
 export const EVENTS = {
     ROUTE_CHANGE: 'routeChange',
-    ROUTE_SEARCH_CHANGE: 'routeSearchChange'
+    ROUTE_SEARCH_CHANGE: 'routeSearchChange',
+    ROW_CLICK: 'rowClick',
 };
diff --git a/src/utils/elementUtils.js b/src/utils/elementUtils.js
index acfa7a4..11754d4 100644
--- a/src/utils/elementUtils.js
+++ b/src/utils/elementUtils.js
@@ -1,3 +1,5 @@
+import moment from 'moment';
+
 /**
  * @interface CreateElementProps
  * @type {Object}
@@ -46,3 +48,11 @@ export const markText = (searchMessage, text, styleClassName = 'text-warning bg-
         `<span class="${styleClassName}">${match}</span>`
     ));
 };
+
+export const prepareServerDate = (stringDate) => {
+    return moment(stringDate).format('DD/MM/YYYY hh:mm:ss');
+};
+
+export const prepareObjectToString = (object) => {
+    return JSON.stringify(object);
+};