[Uptime] - Synthetics add transfer size, resource size, and status to waterfall flyout (#97042)

This commit is contained in:
Dominique Clarke 2021-04-15 08:42:07 -04:00 committed by GitHub
parent 18bc53880f
commit 1bd951cfa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 55 additions and 17 deletions

View file

@ -23079,7 +23079,6 @@
"xpack.uptime.synthetics.waterfall.resource.externalLink": "新しいタブでリソースを開く",
"xpack.uptime.synthetics.waterfall.searchBox.placeholder": "ネットワーク要求をフィルター",
"xpack.uptime.synthetics.waterfall.sidebar.filterMatchesScreenReaderLabel": "リソースがフィルターと一致します",
"xpack.uptime.synthetics.waterfallChart.labels.metadata.bytesDownloadedCompressed": "ダウンロードバイト数 (圧縮) ",
"xpack.uptime.synthetics.waterfallChart.labels.metadata.certificateExpiryDate": "有効期限:",
"xpack.uptime.synthetics.waterfallChart.labels.metadata.certificateIssueDate": "有効期間の開始",
"xpack.uptime.synthetics.waterfallChart.labels.metadata.certificateIssuer": "発行者",
@ -23485,4 +23484,4 @@
"xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。",
"xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。"
}
}
}

View file

@ -23437,7 +23437,6 @@
"xpack.uptime.synthetics.waterfall.resource.externalLink": "在新选项卡中打开资源",
"xpack.uptime.synthetics.waterfall.searchBox.placeholder": "筛选网络请求",
"xpack.uptime.synthetics.waterfall.sidebar.filterMatchesScreenReaderLabel": "资源匹配筛选",
"xpack.uptime.synthetics.waterfallChart.labels.metadata.bytesDownloadedCompressed": "已下载字节 (压缩) ",
"xpack.uptime.synthetics.waterfallChart.labels.metadata.certificateExpiryDate": "失效日期",
"xpack.uptime.synthetics.waterfallChart.labels.metadata.certificateIssueDate": "有效起始日期",
"xpack.uptime.synthetics.waterfallChart.labels.metadata.certificateIssuer": "颁发者",
@ -23853,4 +23852,4 @@
"xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。",
"xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
}
}
}

View file

@ -35,7 +35,6 @@ const NetworkEventType = t.intersection([
url: t.string,
}),
t.partial({
bytesDownloadedCompressed: t.number,
certificates: CertificateDataType,
ip: t.string,
method: t.string,
@ -44,6 +43,8 @@ const NetworkEventType = t.intersection([
responseHeaders: t.record(t.string, t.string),
requestHeaders: t.record(t.string, t.string),
timings: NetworkTimingsType,
transferSize: t.number,
resourceSize: t.number,
}),
]);

View file

@ -43,7 +43,8 @@ export const networkItems: NetworkItems = [
ssl: 55.38700000033714,
dns: 3.559999997378327,
},
bytesDownloadedCompressed: 1000,
resourceSize: 1000,
transferSize: 1000,
requestHeaders: {
sample_request_header: 'sample request header',
},
@ -544,6 +545,10 @@ describe('getSeriesAndDomain', () => {
Object {
"certificates": undefined,
"details": Array [
Object {
"name": "Status",
"value": undefined,
},
Object {
"name": "Content type",
"value": "text/javascript",
@ -573,7 +578,11 @@ describe('getSeriesAndDomain', () => {
"value": undefined,
},
Object {
"name": "Bytes downloaded (compressed)",
"name": "Resource size",
"value": undefined,
},
Object {
"name": "Transfer size",
"value": undefined,
},
Object {
@ -640,6 +649,7 @@ describe('getSeriesAndDomain', () => {
});
it.each([
[FriendlyFlyoutLabels[Metadata.Status], '200'],
[FriendlyFlyoutLabels[Metadata.MimeType], 'text/css'],
[FriendlyFlyoutLabels[Metadata.RequestStart], '0.000 ms'],
[FriendlyTimingLabels[Timings.Dns], '3.560 ms'],
@ -647,7 +657,8 @@ describe('getSeriesAndDomain', () => {
[FriendlyTimingLabels[Timings.Ssl], '55.387 ms'],
[FriendlyTimingLabels[Timings.Wait], '34.578 ms'],
[FriendlyTimingLabels[Timings.Receive], '0.552 ms'],
[FriendlyFlyoutLabels[Metadata.BytesDownloadedCompressed], '1.000 KB'],
[FriendlyFlyoutLabels[Metadata.TransferSize], '1.000 KB'],
[FriendlyFlyoutLabels[Metadata.ResourceSize], '1.000 KB'],
[FriendlyFlyoutLabels[Metadata.IP], '104.18.8.22'],
])('handles metadata details formatting', (name, value) => {
const { metadata } = getSeriesAndDomain(networkItems);

View file

@ -239,13 +239,15 @@ const formatMetadata = ({
requestStart: number;
}) => {
const {
bytesDownloadedCompressed,
certificates,
ip,
mimeType,
requestHeaders,
responseHeaders,
url,
resourceSize,
transferSize,
status,
} = item;
const { dns, connect, ssl, wait, receive, total } = item.timings || {};
const contentDownloaded = receive && receive > 0 ? receive : total;
@ -277,6 +279,7 @@ const formatMetadata = ({
]
: undefined,
details: [
{ name: FriendlyFlyoutLabels[Metadata.Status], value: status ? `${status}` : undefined },
{ name: FriendlyFlyoutLabels[Metadata.MimeType], value: mimeType },
{
name: FriendlyFlyoutLabels[Metadata.RequestStart],
@ -306,9 +309,16 @@ const formatMetadata = ({
}),
},
{
name: FriendlyFlyoutLabels[Metadata.BytesDownloadedCompressed],
name: FriendlyFlyoutLabels[Metadata.ResourceSize],
value: getFriendlyMetadataValue({
value: bytesDownloadedCompressed ? bytesDownloadedCompressed / 1000 : undefined,
value: resourceSize ? resourceSize / 1000 : undefined,
postFix: 'KB',
}),
},
{
name: FriendlyFlyoutLabels[Metadata.TransferSize],
value: getFriendlyMetadataValue({
value: transferSize ? transferSize / 1000 : undefined,
postFix: 'KB',
}),
},

View file

@ -19,7 +19,9 @@ export enum Timings {
}
export enum Metadata {
BytesDownloadedCompressed = 'bytesDownloadedCompressed',
Status = 'status',
ResourceSize = 'resourceSize',
TransferSize = 'transferSize',
CertificateIssuer = 'certificateIssuer',
CertificateIssueDate = 'certificateIssueDate',
CertificateExpiryDate = 'certificateExpiryDate',
@ -63,6 +65,12 @@ export const FriendlyTimingLabels = {
};
export const FriendlyFlyoutLabels = {
[Metadata.Status]: i18n.translate(
'xpack.uptime.synthetics.waterfallChart.labels.metadata.status',
{
defaultMessage: 'Status',
}
),
[Metadata.MimeType]: i18n.translate(
'xpack.uptime.synthetics.waterfallChart.labels.metadata.contentType',
{
@ -75,10 +83,16 @@ export const FriendlyFlyoutLabels = {
defaultMessage: 'Request start',
}
),
[Metadata.BytesDownloadedCompressed]: i18n.translate(
'xpack.uptime.synthetics.waterfallChart.labels.metadata.bytesDownloadedCompressed',
[Metadata.ResourceSize]: i18n.translate(
'xpack.uptime.synthetics.waterfallChart.labels.metadata.resourceSize',
{
defaultMessage: 'Bytes downloaded (compressed)',
defaultMessage: 'Resource size',
}
),
[Metadata.TransferSize]: i18n.translate(
'xpack.uptime.synthetics.waterfallChart.labels.metadata.transferSize',
{
defaultMessage: 'Transfer size',
}
),
[Metadata.CertificateIssuer]: i18n.translate(

View file

@ -66,6 +66,8 @@ describe('getNetworkEvents', () => {
},
is_navigation_request: false,
timestamp: 1607942799183375,
transfer_size: 1000,
resource_size: 1000,
},
},
http: {
@ -242,7 +244,6 @@ describe('getNetworkEvents', () => {
Object {
"events": Array [
Object {
"bytesDownloadedCompressed": 337,
"certificates": Object {
"issuer": "DigiCert TLS RSA SHA256 2020 CA1",
"subjectName": "syndication.twitter.com",
@ -258,6 +259,7 @@ describe('getNetworkEvents', () => {
"user_agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/88.0.4324.0 Safari/537.36",
},
"requestSentTime": 3287154.973,
"resourceSize": 1000,
"responseHeaders": Object {
"cache_control": "no-cache, no-store, must-revalidate, pre-check=0, post-check=0",
"content_encoding": "gzip",
@ -292,6 +294,7 @@ describe('getNetworkEvents', () => {
"total": 143.27800000000934,
"wait": 141.81299999972907,
},
"transferSize": 1000,
"url": "www.test.com",
},
],

View file

@ -58,7 +58,8 @@ export const getNetworkEvents: UMElasticsearchQueryFn<
requestSentTime,
loadEndTime,
timings: event._source.synthetics.payload.timings,
bytesDownloadedCompressed: event._source.http?.response?.encoded_data_length,
transferSize: event._source.synthetics.payload.transfer_size,
resourceSize: event._source.synthetics.payload.resource_size,
certificates: securityDetails
? {
issuer: securityDetails.issuer?.common_name,