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