HM-100. Доработки модалки клиентских запросов (#60)

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>

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, {
+            this.resultInput = this.createComponent(FormControl, this.form, {
-                id: INPUT_IDS.HEADERS,
+                id: INPUT_IDS.RESULT,
-                label: LABELS.HEADERS_REQUEST,
+                label: LABELS.RESULT,
-                type: FORM_TYPES.TEXTAREA,
-                className: CLASSNAMES.HEADERS_INPUT,
             }),
-            this.bodyRequest = this.createComponent(FormControl, this.form, {
+            this.dataBaseInput = this.createComponent(FormControl, this.form, {
-                id: INPUT_IDS.BODY,
+                id: INPUT_IDS.DATA_BASE,
-                label: LABELS.BODY_REQUEST,
+                label: LABELS.DATA_BASE,
-                type: FORM_TYPES.TEXTAREA,
-                className: CLASSNAMES.HEADERS_INPUT,
             }),
             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, {
+            this.bodyRequest = this.createComponent(FormControl, this.form, {
-                id: INPUT_IDS.END_TIME,
+                id: INPUT_IDS.BODY,
-                label: LABELS.TIME_RESPONSE,
+                label: LABELS.BODY_REQUEST,
-            }),
-            this.responseInput = this.createComponent(FormControl, this.form, {
-                id: INPUT_IDS.RESPONSE,
-                label: LABELS.SERVER_RESPONSE,
                 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.endTimeInput.setValue(durationTime);
-        this.responseInput.setValue(this.prepareStringJSON(response));
+        this.dataBaseInput.setValue(dataBase);
+        this.statusInput.setValue(status || '-');
+        this.messageInput.setValue(message || '-');
         this.setRequestBody(body);
         this.sidebar.show();
     }

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',
+    DURATION_TIME: 'client-logs-view-form-endTime',
-    RESPONSE: 'client-logs-view-form-response',
+    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',
 };

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;

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;

src/components/headers-table/index.js

@@ -0,0 +1,3 @@
+import HeadersTable from './HeadersTable';
+
+export default HeadersTable;

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();
     }

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: '',
 };

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),
     };
 };