[Uptime] Display response headers for a ping (#82332)

shahzad31 · web-flow · commit 8d5ee265b455 · 2020-11-06T12:51:38.000+01:00
diff --git a/x-pack/plugins/uptime/common/runtime_types/ping/ping.ts b/x-pack/plugins/uptime/common/runtime_types/ping/ping.ts
@@ -145,6 +145,7 @@ export const PingType = t.intersection([
         bytes: t.number,
         redirects: t.array(t.string),
         status_code: t.number,
+        headers: t.record(t.string, t.string),
       }),
       version: t.string,
     }),
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/ping_headers.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/__snapshots__/ping_headers.test.tsx.snap
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/ping_headers.test.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/ping_headers.test.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import React from 'react';
+import { PingHeaders } from '../headers';
+
+describe('Ping Headers', () => {
+  const headers = {
+    'Content-Type': 'text/html',
+    'Content-Length': '174781',
+    Expires: 'Mon, 02 Nov 2020 17:22:03 GMT',
+    'X-Xss-Protection': '0',
+    'Accept-Ranges': 'bytes',
+    Date: 'Mon, 02 Nov 2020 17:22:03 GMT',
+    'Cache-Control': 'private, max-age=0',
+    'Alt-Svc':
+      'h3-Q050=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-T051=":443"; ma=2592000,h3-T050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"',
+    Server: 'sffe',
+    'Last-Modified': 'Wed, 28 Oct 2020 18:45:00 GMT',
+    Vary: 'Accept-Encoding',
+    'X-Content-Type-Options': 'nosniff',
+  };
+
+  it('shallow renders expected elements for valid props', () => {
+    expect(shallowWithIntl(<PingHeaders headers={headers} />)).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/expanded_row.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/expanded_row.tsx
@@ -21,6 +21,7 @@ import { Ping, HttpResponseBody } from '../../../../common/runtime_types';
 import { DocLinkForBody } from './doc_link_body';
 import { PingRedirects } from './ping_redirects';
 import { BrowserExpandedRow } from '../synthetics/browser_expanded_row';
+import { PingHeaders } from './headers';
 
 interface Props {
   ping: Ping;
@@ -105,6 +106,11 @@ export const PingListExpandedRowComponent = ({ ping }: Props) => {
           <PingRedirects monitorStatus={ping} showTitle={true} />
         </EuiFlexItem>
       )}
+      {ping?.http?.response?.headers && (
+        <EuiFlexItem>
+          <PingHeaders headers={ping?.http?.response?.headers} />
+        </EuiFlexItem>
+      )}
       <EuiFlexItem>
         <EuiCallOut color={ping?.error ? 'danger' : 'primary'}>
           <EuiDescriptionList listItems={listItems} />
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/headers.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/headers.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiAccordion, EuiDescriptionList, EuiSpacer, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+interface Props {
+  headers: Record<string, string>;
+}
+
+export const PingHeaders = ({ headers }: Props) => {
+  const headersList = Object.keys(headers)
+    .sort()
+    .map((header) => ({
+      title: header,
+      description: headers[header],
+    }));
+
+  return (
+    <>
+      <EuiSpacer size="s" />
+      <EuiAccordion
+        id="responseHeaderAccord"
+        buttonContent={
+          <EuiText size="s">
+            <h3>
+              {i18n.translate('xpack.uptime.pingList.headers.title', {
+                defaultMessage: 'Response headers',
+              })}
+            </h3>
+          </EuiText>
+        }
+      >
+        <EuiSpacer size="s" />
+        <EuiDescriptionList
+          titleProps={{ style: { width: '30%', paddingLeft: 30 } }}
+          compressed={true}
+          type="responsiveColumn"
+          listItems={headersList}
+        />
+      </EuiAccordion>
+    </>
+  );
+};
