[Uptime] only render ping status code badge when status code is avail…

…able (#87096) (#87360)

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

* uptime update ResponseCodeColumn error state

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Kibana Machine <[email protected]>

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

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