[Fleet] Show remote es output error state on UI (#172181)

## Summary Relates elastic/fleet-server#3116 Relates #104986 Reading latest output health state from `logs-fleet_server.output_health-default` data stream by output id, and displaying error state on UI - Edit Output flyout. Steps to verify: - enable feature flag `remoteESOutput` - add `remote_elasticsearch` output, can be a non-existent host for this test - add the output as monitoring output of an agent policy - run fleet-server with the changes [here](elastic/fleet-server#3116) - enroll an agent - wait until fleet-server starts reporting degraded state in the output health data stream - open edit output flyout on UI and verify that the error state is visible - when the connection is back again (update host to a valid one, or remote es was temporarily down), the error state goes away <img width="568" alt="image" src="https://github.com/elastic/kibana/assets/90178898/46d0cf95-6aa4-4f7c-8608-4362ada4eb6c"> The UI was suggested in the design doc: https://docs.google.com/document/d/19D0bX7oURf0yms4qemfqDyisw_IYB-OVw4oU-t4lf18/edit#bookmark=id.595r8l91kaq8 ### Notes/suggestions: - We might want to add the output state to the output list as well (maybe as badges like agent health?) as it's not too visible in the flyout (have to scroll down). - Also the error state will be reported earliest when an agent is enrolled and fleet-server can't create api key, so not immediately when the output is added. It would be good to show the time of the last state (e.g. how we display on agents last checkin x minutes ago) - I think it would be beneficial to display the healthy state too. Added badges to output list: <img width="1233" alt="image" src="https://github.com/elastic/kibana/assets/90178898/07ff06ec-b778-4420-975b-b46a0a18c7cc"> Added healthy state UI to Edit output: <img width="627" alt="image" src="https://github.com/elastic/kibana/assets/90178898/4222d849-c957-41d7-9606-b58493264115"> ### Checklist Delete any items that are not applicable to this PR. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
elastic · Dec 5, 2023 · ae5e2fd · ae5e2fd
1 parent 159f361
commit ae5e2fd
Show file tree

Hide file tree

Showing 23 changed files with 609 additions and 21 deletions.
diff --git a/x-pack/plugins/fleet/common/constants/output.ts b/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';
diff --git a/x-pack/plugins/fleet/common/constants/routes.ts b/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`,
 };
 

diff --git a/x-pack/plugins/fleet/common/openapi/bundled.json b/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",

diff --git a/x-pack/plugins/fleet/common/openapi/bundled.yaml b/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

diff --git a/x-pack/plugins/fleet/common/openapi/entrypoint.yaml b/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
 

diff --git a/x-pack/plugins/fleet/common/openapi/paths/output_health@{output_id}.yaml b/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
+
diff --git a/x-pack/plugins/fleet/common/services/routes.ts b/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 = {

diff --git a/x-pack/plugins/fleet/common/types/rest_spec/output.ts b/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;
+}
diff --git a/...fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx b/...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">

diff --git a/...applications/fleet/sections/settings/components/edit_output_flyout/output_health.test.tsx b/...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();
+    });
+  });
+});