[Fleet] Show remote es output error state on UI

x-pack/plugins/fleet/common/constants/output.ts

@@ -119,3 +119,5 @@ export const kafkaSupportedVersions = [
   '2.5.1',
   '2.6.0',
 ];
+
+export const OUTPUT_HEALTH_DATA_STREAM = 'logs-fleet_server.output_health-default';

x-pack/plugins/fleet/common/constants/routes.ts

@@ -94,6 +94,7 @@ export const OUTPUT_API_ROUTES = {
   UPDATE_PATTERN: `${API_ROOT}/outputs/{outputId}`,
   DELETE_PATTERN: `${API_ROOT}/outputs/{outputId}`,
   CREATE_PATTERN: `${API_ROOT}/outputs`,
+  GET_OUTPUT_HEALTH_PATTERN: `${API_ROOT}/outputs/{outputId}/health`,
   LOGSTASH_API_KEY_PATTERN: `${API_ROOT}/logstash_api_keys`,
 };
 

x-pack/plugins/fleet/common/openapi/bundled.json

@@ -4680,6 +4680,54 @@
         ]
       }
     },
+    "/outputs/{outputId}/health": {
+      "get": {
+        "summary": "Get latest output health",
+        "tags": [
+          "Outputs"
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "state": {
+                      "type": "string",
+                      "description": "state of output, HEALTHY or DEGRADED"
+                    },
+                    "message": {
+                      "type": "string",
+                      "description": "long message if unhealthy"
+                    },
+                    "timestamp": {
+                      "type": "string",
+                      "description": "timestamp of reported state"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "400": {
+            "$ref": "#/components/responses/error"
+          }
+        },
+        "operationId": "get-output-health"
+      },
+      "parameters": [
+        {
+          "schema": {
+            "type": "string"
+          },
+          "name": "outputId",
+          "in": "path",
+          "required": true
+        }
+      ]
+    },
     "/logstash_api_keys": {
       "post": {
         "summary": "Generate Logstash API key",

x-pack/plugins/fleet/common/openapi/bundled.yaml

@@ -2916,6 +2916,37 @@ paths:
           $ref: '#/components/responses/error'
       parameters:
         - $ref: '#/components/parameters/kbn_xsrf'
+  /outputs/{outputId}/health:
+    get:
+      summary: Get latest output health
+      tags:
+        - Outputs
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  state:
+                    type: string
+                    description: state of output, HEALTHY or DEGRADED
+                  message:
+                    type: string
+                    description: long message if unhealthy
+                  timestamp:
+                    type: string
+                    description: timestamp of reported state
+        '400':
+          $ref: '#/components/responses/error'
+      operationId: get-output-health
+    parameters:
+      - schema:
+          type: string
+        name: outputId
+        in: path
+        required: true
   /logstash_api_keys:
     post:
       summary: Generate Logstash API key

x-pack/plugins/fleet/common/openapi/entrypoint.yaml

@@ -142,6 +142,8 @@ paths:
     $ref: paths/outputs.yaml
   /outputs/{outputId}:
     $ref: paths/outputs@{output_id}.yaml
+  /outputs/{outputId}/health:
+    $ref: paths/output_health@{output_id}.yaml
   /logstash_api_keys:
     $ref: paths/logstash_api_keys.yaml
 

x-pack/plugins/fleet/common/openapi/paths/output_health@{output_id}.yaml

@@ -0,0 +1,31 @@
+get:
+  summary: Get latest output health
+  tags:
+    - Outputs
+  responses:
+    '200':
+      description: OK
+      content:
+        application/json:
+          schema:
+            type: object
+            properties:
+              state:
+                type: string
+                description: state of output, HEALTHY or DEGRADED
+              message:
+                type: string
+                description: long message if unhealthy
+              timestamp:
+                type: string
+                description: timestamp of reported state
+    '400':
+      $ref: ../components/responses/error.yaml
+  operationId: get-output-health
+parameters:
+  - schema:
+      type: string
+    name: outputId
+    in: path
+    required: true
+

x-pack/plugins/fleet/common/services/routes.ts

@@ -248,6 +248,8 @@ export const outputRoutesService = {
     OUTPUT_API_ROUTES.DELETE_PATTERN.replace('{outputId}', outputId),
   getCreatePath: () => OUTPUT_API_ROUTES.CREATE_PATTERN,
   getCreateLogstashApiKeyPath: () => OUTPUT_API_ROUTES.LOGSTASH_API_KEY_PATTERN,
+  getOutputHealthPath: (outputId: string) =>
+    OUTPUT_API_ROUTES.GET_OUTPUT_HEALTH_PATTERN.replace('{outputId}', outputId),
 };
 
 export const fleetProxiesRoutesService = {

x-pack/plugins/fleet/common/types/rest_spec/output.ts

@@ -43,3 +43,9 @@ export type GetOutputsResponse = ListResult<Output>;
 export interface PostLogstashApiKeyResponse {
   api_key: string;
 }
+
+export interface GetOutputHealthResponse {
+  state: string;
+  message: string;
+  timestamp: string;
+}

x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx

@@ -55,6 +55,7 @@ import { useOutputForm } from './use_output_form';
 import { EncryptionKeyRequiredCallout } from './encryption_key_required_callout';
 import { AdvancedOptionsSection } from './advanced_options_section';
 import { OutputFormRemoteEsSection } from './output_form_remote_es';
+import { OutputHealth } from './output_health';
 
 export interface EditOutputFlyoutProps {
   output?: Output;
@@ -576,6 +577,9 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
           <EuiSpacer size="l" />
           <AdvancedOptionsSection enabled={form.isShipperEnabled} inputs={inputs} />
         </EuiForm>
+        {output?.id && output.type === 'remote_elasticsearch' ? (
+          <OutputHealth output={output} />
+        ) : null}
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">

x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/output_health.test.tsx

@@ -0,0 +1,143 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+
+import type { Output } from '../../../../types';
+import { createFleetTestRendererMock } from '../../../../../../mock';
+
+import { sendGetOutputHealth, useStartServices } from '../../../../hooks';
+
+import { OutputHealth } from './output_health';
+
+jest.mock('../../../../hooks', () => {
+  return {
+    ...jest.requireActual('../../../../hooks'),
+    useStartServices: jest.fn(),
+    sendGetOutputHealth: jest.fn(),
+  };
+});
+
+jest.mock('@elastic/eui', () => {
+  return {
+    ...jest.requireActual('@elastic/eui'),
+    EuiToolTip: (props: any) => (
+      <div data-test-subj="outputHealthBadgeTooltip" data-tooltip-content={props.content}>
+        {props.children}
+      </div>
+    ),
+  };
+});
+
+const mockUseStartServices = useStartServices as jest.Mock;
+
+const mockSendGetOutputHealth = sendGetOutputHealth as jest.Mock;
+
+describe('OutputHealth', () => {
+  function render(output: Output, showBadge?: boolean) {
+    const renderer = createFleetTestRendererMock();
+
+    const utils = renderer.render(<OutputHealth output={output} showBadge={showBadge} />);
+
+    return { utils };
+  }
+
+  const mockStartServices = () => {
+    mockUseStartServices.mockReturnValue({
+      notifications: { toasts: {} },
+    });
+  };
+
+  beforeEach(() => {
+    mockStartServices();
+  });
+
+  it('should render output health component when degraded', async () => {
+    mockSendGetOutputHealth.mockResolvedValue({
+      data: { state: 'DEGRADED', message: 'connection error', timestamp: '2023-11-30T14:25:31Z' },
+    });
+    const { utils } = render({
+      type: 'remote_elasticsearch',
+      id: 'remote',
+      name: 'Remote ES',
+      hosts: ['https://remote-es:443'],
+    } as Output);
+
+    expect(mockSendGetOutputHealth).toHaveBeenCalled();
+
+    await waitFor(async () => {
+      expect(utils.getByTestId('outputHealthDegradedCallout').textContent).toContain(
+        'Unable to connect to "Remote ES" at https://remote-es:443. Please check the details are correct.'
+      );
+    });
+  });
+
+  it('should render output health component when healthy', async () => {
+    mockSendGetOutputHealth.mockResolvedValue({
+      data: { state: 'HEALTHY', message: '', timestamp: '2023-11-30T14:25:31Z' },
+    });
+    const { utils } = render({
+      type: 'remote_elasticsearch',
+      id: 'remote',
+      name: 'Remote ES',
+      hosts: ['https://remote-es:443'],
+    } as Output);
+
+    expect(mockSendGetOutputHealth).toHaveBeenCalled();
+
+    await waitFor(async () => {
+      expect(utils.getByTestId('outputHealthHealthyCallout').textContent).toContain(
+        'Connection with remote output established.'
+      );
+    });
+  });
+
+  it('should render output health badge when degraded', async () => {
+    mockSendGetOutputHealth.mockResolvedValue({
+      data: { state: 'DEGRADED', message: 'connection error', timestamp: '2023-11-30T14:25:31Z' },
+    });
+    const { utils } = render(
+      {
+        type: 'remote_elasticsearch',
+        id: 'remote',
+        name: 'Remote ES',
+        hosts: ['https://remote-es:443'],
+      } as Output,
+      true
+    );
+
+    expect(mockSendGetOutputHealth).toHaveBeenCalled();
+
+    await waitFor(async () => {
+      expect(utils.getByTestId('outputHealthDegradedBadge')).not.toBeNull();
+      expect(utils.getByTestId('outputHealthBadgeTooltip')).not.toBeNull();
+    });
+  });
+
+  it('should render output health badge when healthy', async () => {
+    mockSendGetOutputHealth.mockResolvedValue({
+      data: { state: 'HEALTHY', message: '', timestamp: '2023-11-30T14:25:31Z' },
+    });
+    const { utils } = render(
+      {
+        type: 'remote_elasticsearch',
+        id: 'remote',
+        name: 'Remote ES',
+        hosts: ['https://remote-es:443'],
+      } as Output,
+      true
+    );
+
+    expect(mockSendGetOutputHealth).toHaveBeenCalled();
+
+    await waitFor(async () => {
+      expect(utils.getByTestId('outputHealthHealthyBadge')).not.toBeNull();
+      expect(utils.getByTestId('outputHealthBadgeTooltip')).not.toBeNull();
+    });
+  });
+});