From d31ff46e65e755bbbd977e04b015edbe1ed59a40 Mon Sep 17 00:00:00 2001
From: Nikolay <46225163+vigdorov@users.noreply.github.com>
Date: Sun, 30 Aug 2020 19:44:57 +0300
Subject: [PATCH] =?UTF-8?q?HM-100.=20=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B8=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D0=BA=D0=B8?=
 =?UTF-8?q?=20=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD=D1=82=D1=81=D0=BA=D0=B8=D1=85?=
 =?UTF-8?q?=20=D0=B7=D0=B0=D0=BF=D1=80=D0=BE=D1=81=D0=BE=D0=B2=20(#60)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.html                                  |  1 +
 .../ClientLogsViewForm.js                     | 87 +++++++++++++------
 .../client-logs-view-form/consts.js           | 14 ++-
 .../headers-table/HeaderTableRow.js           | 11 +++
 src/components/headers-table/HeadersTable.js  | 22 +++++
 src/components/headers-table/index.js         |  3 +
 src/components/table/Table.js                 | 17 +++-
 src/consts.js                                 | 11 +++
 src/utils/converters.js                       | 14 ++-
 9 files changed, 145 insertions(+), 35 deletions(-)
 create mode 100644 src/components/headers-table/HeaderTableRow.js
 create mode 100644 src/components/headers-table/HeadersTable.js
 create mode 100644 src/components/headers-table/index.js

diff --git a/src/app.html b/src/app.html
index 4252db2..b082ec7 100644
--- a/src/app.html
+++ b/src/app.html
@@ -159,6 +159,7 @@
     <template id="uni-table">
         <div class="table-responsive">
             <table class="table table-striped table-hover">
+                <caption></caption>
                 <thead>
                     <tr></tr>
                 </thead>
diff --git a/src/components/client-logs-view-form/ClientLogsViewForm.js b/src/components/client-logs-view-form/ClientLogsViewForm.js
index d160378..9176e72 100644
--- a/src/components/client-logs-view-form/ClientLogsViewForm.js
+++ b/src/components/client-logs-view-form/ClientLogsViewForm.js
@@ -1,9 +1,13 @@
 import Component from '../component';
 import FormControl from '../form-control';
-import {FORM_TYPES} from '../../consts';
+import {FORM_TYPES, TAG_NAME} from '../../consts';
 import ModalSidebar from '../modal-sidebar';
 import './ClientLogsViewForm.css';
 import {INPUT_IDS, LABELS, CLASSNAMES} from './consts';
+import {makeApiName, makeDurationMessage} from '../../utils/converters';
+import HeadersTable from '../headers-table';
+
+const FORMAT = 'DD/MM/YYYY HH:mm:ss';
 
 class ClientLogsViewForm extends Component {
     constructor (parentNode) {
@@ -23,25 +27,17 @@ class ClientLogsViewForm extends Component {
                 id: INPUT_IDS.ID,
                 label: LABELS.ID,
             }),
-            this.resultInput = this.createComponent(FormControl, this.form, {
-                id: INPUT_IDS.RESULT,
-                label: LABELS.RESULT,
-            }),
             this.startTimeInput = this.createComponent(FormControl, this.form, {
                 id: INPUT_IDS.START_TIME,
                 label: LABELS.TIME_REQUEST,
             }),
-            this.headersInput = this.createComponent(FormControl, this.form, {
-                id: INPUT_IDS.HEADERS,
-                label: LABELS.HEADERS_REQUEST,
-                type: FORM_TYPES.TEXTAREA,
-                className: CLASSNAMES.HEADERS_INPUT,
+            this.resultInput = this.createComponent(FormControl, this.form, {
+                id: INPUT_IDS.RESULT,
+                label: LABELS.RESULT,
             }),
-            this.bodyRequest = this.createComponent(FormControl, this.form, {
-                id: INPUT_IDS.BODY,
-                label: LABELS.BODY_REQUEST,
-                type: FORM_TYPES.TEXTAREA,
-                className: CLASSNAMES.HEADERS_INPUT,
+            this.dataBaseInput = this.createComponent(FormControl, this.form, {
+                id: INPUT_IDS.DATA_BASE,
+                label: LABELS.DATA_BASE,
             }),
             this.urlInput = this.createComponent(FormControl, this.form, {
                 id: INPUT_IDS.URL,
@@ -51,17 +47,41 @@ class ClientLogsViewForm extends Component {
                 id: INPUT_IDS.METHOD,
                 label: LABELS.METHOD_REQUEST,
             }),
-            this.endTimeInput = this.createComponent(FormControl, this.form, {
-                id: INPUT_IDS.END_TIME,
-                label: LABELS.TIME_RESPONSE,
-            }),
-            this.responseInput = this.createComponent(FormControl, this.form, {
-                id: INPUT_IDS.RESPONSE,
-                label: LABELS.SERVER_RESPONSE,
+            this.bodyRequest = this.createComponent(FormControl, this.form, {
+                id: INPUT_IDS.BODY,
+                label: LABELS.BODY_REQUEST,
                 type: FORM_TYPES.TEXTAREA,
-                className: CLASSNAMES.RESPONSE_INPUT,
+                className: CLASSNAMES.HEADERS_INPUT,
+            }),
+            this.endTimeInput = this.createComponent(FormControl, this.form, {
+                id: INPUT_IDS.DURATION_TIME,
+                label: LABELS.DURATION_TIME,
+            }),
+            this.statusInput = this.createComponent(FormControl, this.form, {
+                id: INPUT_IDS.STATUS_RESPONSE,
+                label: LABELS.STATUS,
+            }),
+            this.messageInput = this.createComponent(FormControl, this.form, {
+                id: INPUT_IDS.MESSAGE_RESPONSE,
+                label: LABELS.MESSAGE,
             }),
         ];
+
+        const headersContainer = this.createElement({
+            tagName: TAG_NAME.DIV,
+        });
+        this.createElement({
+            tagName: TAG_NAME.LABEL,
+            parentNode: headersContainer,
+            options: {
+                textContent: LABELS.HEADERS_REQUEST,
+                className: CLASSNAMES.FORM_LABEL,
+            }
+        });
+        this.methodInput.mainNode.after(headersContainer);
+
+        this.headersTable = this.createComponent(HeadersTable, headersContainer);
+
         inputs.forEach((input) => {
             input.disabled(true);
         });
@@ -77,16 +97,31 @@ class ClientLogsViewForm extends Component {
         this.bodyRequest.mainNode.style.display = body ? 'block' : 'none';
     }
 
+    prepareHeadersToRows = (headers) => {
+        return Object.entries(headers).reduce((rows, [header, value]) => {
+            return [
+                ...rows,
+                {header, value},
+            ];
+        }, []);
+    }
+
     setForm = ({_id, type, request, response, startTime, endTime}) => {
         const {headers, url, method, body} = JSON.parse(request) ?? {};
+        const {status, message} = JSON.parse(response) ?? {};
+        const durationTime = makeDurationMessage(startTime, endTime, FORMAT);
+        const dataBase = makeApiName(headers);
+        const headerRows = this.prepareHeadersToRows(headers);
         this.idInput.setValue(_id);
         this.resultInput.setValue(type);
         this.startTimeInput.setValue(startTime);
-        this.headersInput.setValue(this.prepareStringJSON(headers));
         this.urlInput.setValue(url);
+        this.headersTable.render(headerRows);
         this.methodInput.setValue(method);
-        this.endTimeInput.setValue(endTime);
-        this.responseInput.setValue(this.prepareStringJSON(response));
+        this.endTimeInput.setValue(durationTime);
+        this.dataBaseInput.setValue(dataBase);
+        this.statusInput.setValue(status || '-');
+        this.messageInput.setValue(message || '-');
         this.setRequestBody(body);
         this.sidebar.show();
     }
diff --git a/src/components/client-logs-view-form/consts.js b/src/components/client-logs-view-form/consts.js
index 3b96ba1..86b1615 100644
--- a/src/components/client-logs-view-form/consts.js
+++ b/src/components/client-logs-view-form/consts.js
@@ -6,24 +6,30 @@ export const INPUT_IDS = {
     BODY: 'client-logs-view-form-body-request',
     URL: 'client-logs-view-form-url',
     METHOD: 'client-logs-view-form-method',
-    END_TIME: 'client-logs-view-form-endTime',
-    RESPONSE: 'client-logs-view-form-response',
+    DURATION_TIME: 'client-logs-view-form-endTime',
+    STATUS_RESPONSE: 'client-logs-view-form-status-response',
+    MESSAGE_RESPONSE: 'client-logs-view-form-message-response',
+    DATA_BASE: 'client-logs-view-form-dataBase',
 };
 
 export const LABELS = {
     ID: 'id',
     RESULT: 'Результат',
-    TIME_REQUEST: 'Время запроса',
+    TIME_REQUEST: 'Дата запроса',
     HEADERS_REQUEST: 'Заголовки запроса',
     BODY_REQUEST: 'Тело запроса',
     URL_REQUEST: 'URL запроса',
     METHOD_REQUEST: 'Метод запроса',
-    TIME_RESPONSE: 'Время ответа',
+    DURATION_TIME: 'Скорость ответа',
     SERVER_RESPONSE: 'Ответ сервера',
     VIEW_CLIENT_REQUEST: 'Просмотр клиентского запроса',
+    DATA_BASE: 'База данных',
+    STATUS: 'Статус',
+    MESSAGE: 'Сообщение',
 };
 
 export const CLASSNAMES = {
     HEADERS_INPUT: 'ClientLogsViewForm__headersInput',
     RESPONSE_INPUT: 'ClientLogsViewForm__responseInput',
+    FORM_LABEL: 'form-label',
 };
diff --git a/src/components/headers-table/HeaderTableRow.js b/src/components/headers-table/HeaderTableRow.js
new file mode 100644
index 0000000..fa6534f
--- /dev/null
+++ b/src/components/headers-table/HeaderTableRow.js
@@ -0,0 +1,11 @@
+import Component from '../component';
+import TableCellOverflow from '../table-cell-overflow';
+
+class HeaderTableRow extends Component {
+    constructor (parentNode, cols, row) {
+        super(null, parentNode);
+        this.cols = cols.map((col) => this.createComponent(TableCellOverflow, this.mainNode, row[col.id]));
+    }
+}
+
+export default HeaderTableRow;
diff --git a/src/components/headers-table/HeadersTable.js b/src/components/headers-table/HeadersTable.js
new file mode 100644
index 0000000..bf20f38
--- /dev/null
+++ b/src/components/headers-table/HeadersTable.js
@@ -0,0 +1,22 @@
+import Table from '../table';
+import HeaderTableRow from './HeaderTableRow';
+import {TABLE_TYPE} from '../../consts';
+
+const COLUMNS = [
+    {id: 'header', label: 'Заголовок'},
+    {id: 'value', label: 'Значение'},
+];
+
+class HeadersTable extends Table {
+    constructor (parentNode) {
+        super(parentNode, COLUMNS, {
+            type: TABLE_TYPE.BORDERED,
+        });
+    }
+
+    renderRow = (parentNode, cols, row) => {
+        return this.createComponent(HeaderTableRow, parentNode, cols, row);
+    }
+}
+
+export default HeadersTable;
diff --git a/src/components/headers-table/index.js b/src/components/headers-table/index.js
new file mode 100644
index 0000000..42bae31
--- /dev/null
+++ b/src/components/headers-table/index.js
@@ -0,0 +1,3 @@
+import HeadersTable from './HeadersTable';
+
+export default HeadersTable;
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
index e6689d5..8e30cd2 100644
--- a/src/components/table/Table.js
+++ b/src/components/table/Table.js
@@ -2,7 +2,7 @@ import Component from '../component/index';
 import HeaderCol from './HeaderCol';
 import TableRow from './TableRow';
 import TableRowWrapper from './TableRowWrapper';
-import {EVENTS} from '../../consts';
+import {EVENTS, TABLE_TYPE, CAPTION_POSITION} from '../../consts';
 
 /**
  * @interface Col
@@ -30,14 +30,27 @@ import {EVENTS} from '../../consts';
  * ]);
  */
 class Table extends Component {
-    constructor (parentNode, cols) {
+    constructor (parentNode, cols, {
+        type = TABLE_TYPE.DEFAULT,
+        caption = '',
+        captionPosition = CAPTION_POSITION.TOP,
+    } = {}) {
         super('#uni-table', parentNode);
 
         this.mainNode.classList.add('Table');
 
+        this.table = this.mainNode.querySelector('table');
+        this.caption = this.mainNode.querySelector('caption');
         this.theadTr = this.mainNode.querySelector('thead tr');
         this.tbody = this.mainNode.querySelector('tbody');
 
+        this.table.className = type;
+
+        if (caption) {
+            this.table.classList.add(captionPosition);
+            this.caption.textContent = caption;
+        }
+
         this.cols = cols;
         this.renderHeader();
     }
diff --git a/src/consts.js b/src/consts.js
index 6accf9b..1c87d8d 100644
--- a/src/consts.js
+++ b/src/consts.js
@@ -84,4 +84,15 @@ export const TAG_NAME = {
     INPUT: 'input',
     SELECT: 'select',
     TEXTAREA: 'textarea',
+    LABEL: 'label',
+};
+
+export const TABLE_TYPE = {
+    DEFAULT: 'table table-striped table-hover',
+    BORDERED: 'table table-bordered table-hover',
+};
+
+export const CAPTION_POSITION = {
+    TOP: 'caption-top',
+    BOTH: '',
 };
diff --git a/src/utils/converters.js b/src/utils/converters.js
index addc244..f2d97a8 100644
--- a/src/utils/converters.js
+++ b/src/utils/converters.js
@@ -1,13 +1,21 @@
 import moment from 'moment';
 
+export const makeApiName = (headers) => {
+    return headers['api-name'] ? 'testing' : 'production';
+};
+
+export const makeDurationMessage = (startTime, endTime, format) => {
+    const duration = moment(endTime, format).millisecond() - moment(startTime, format).millisecond();
+    return `${duration} мс`;
+};
+
 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 data_base = makeApiName(headers);
 
-    const duration = moment(client.endTime).millisecond() - moment(client.startTime).millisecond();
     return {
         ...client,
         data_base,
@@ -15,6 +23,6 @@ export const prepareClientLogElement = (client) => {
         url,
         status: status || 500,
         message: message || 'Критическая ошибка сервера',
-        duration: `${duration} мс`,
+        duration: makeDurationMessage(client.startTime, client.endTime),
     };
 };