From f1a1bb9db4a85c08e9b093216cb12ac7e643d2ec Mon Sep 17 00:00:00 2001
From: Dominique Clarke <doclarke71@gmail.com>
Date: Tue, 5 Jan 2021 15:16:53 -0500
Subject: [PATCH] [Uptime] only render ping status code badge when status code
 is available (#87096) (#87360)

* uptime only render ping status code badge when status code is available

* uptime update ResponseCodeColumn error state

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../__tests__/response_code.test.tsx          | 25 +++++++++++++++++++
 .../ping_list/columns/response_code.tsx       |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/response_code.test.tsx

diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/response_code.test.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/response_code.test.tsx
new file mode 100644
index 0000000000000..e10017760ecc3
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/__tests__/response_code.test.tsx
@@ -0,0 +1,25 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import { ResponseCodeColumn } from '../columns/response_code';
+
+describe('ResponseCodeColumn', () => {
+  const statusCode = '200';
+
+  it('render when statusCode is available', () => {
+    const { getByText } = render(<ResponseCodeColumn statusCode={statusCode} />);
+
+    expect(getByText(statusCode)).toBeInTheDocument();
+  });
+
+  it('renders error content when statusCode is unavailable', () => {
+    const { queryByText } = render(<ResponseCodeColumn statusCode={''} />);
+
+    expect(queryByText('--')).toBeInTheDocument();
+  });
+});
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/response_code.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/response_code.tsx
index da3200753bac1..80be4c514e28b 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/response_code.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/columns/response_code.tsx
@@ -19,7 +19,7 @@ interface Props {
 export const ResponseCodeColumn = ({ statusCode }: Props) => {
   return (
     <SpanWithMargin>
-      <EuiBadge>{statusCode}</EuiBadge>
+      {statusCode ? <EuiBadge data-test-subj="pingResponseCode">{statusCode}</EuiBadge> : '--'}
     </SpanWithMargin>
   );
 };