vigdorov/storage-service-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nikolay
2020-08-30 19:44:57 +03:00
committed by GitHub
parent 770f46b5e5
commit d31ff46e65
9 changed files with 145 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.html
View File

@ -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>

87
src/components/client-logs-view-form/ClientLogsViewForm.js
View File

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

14
src/components/client-logs-view-form/consts.js
View File

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

11
src/components/headers-table/HeaderTableRow.js Normal file
View File

@ -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;

22
src/components/headers-table/HeadersTable.js Normal file
View File

@ -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;

3
src/components/headers-table/index.js Normal file
View File

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

17
src/components/table/Table.js
View File

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

11
src/consts.js
View File

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

14
src/utils/converters.js
View File

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