-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Fleet] Spacetime: Add fleet server health check to debug page (#146594)
## Summary Closes elastic/ingest-dev#1422 Closes #143644 Fixes #141635 ### Description Spacetime project: - Fixing UI layout - Adding a new endpoint to check the connection to fleet-server. The endpoint executes `curl -s -k <hostname>/api/status` and can be called from dev tools as: ``` POST kbn:/api/fleet/health_check { "host": $hostname } ``` Where `$hostname` is the host configured in fleet server hosts settings section. - Adding a Fleet Server health check to the debug page `app/fleet/_debug`. The host can be selected via a dropdown. - Moving debug page outside of setup to allow debugging when fleet couldn't initialise. I added a warning on top of the page in this specific case - #143644 - Added some more saved objects and indices that weren't added the first time round to allow further debugging. ### Repro steps: To try that the page loads even when setup didn't work, I changed some values in the code. Comment out [this code](https://github.com/elastic/kibana/blob/main/x-pack/plugins/fleet/public/applications/fleet/app.tsx#L163-L165) and replace it with `setInitializationError({ name: 'error', message: 'unable to initialize' });`, then set `false` in [here](https://github.com/elastic/kibana/blob/b155134d662b8011857f7763a063ce87b3b6a91d/x-pack/plugins/fleet/public/applications/fleet/app.tsx#L179) and the fleet UI should show a setup error, however now the debug page should be visible. ### Screenshots <img width="2076" alt="Screenshot 2022-11-30 at 15 25 51" src="https://user-images.githubusercontent.com/16084106/204824818-d620aabf-83b1-4acd-9f38-6f271d17a38a.png"> <img width="1403" alt="Screenshot 2022-11-30 at 15 26 36" src="https://user-images.githubusercontent.com/16084106/204824851-04b36d5e-e466-4f0c-9eed-b8b492f128b9.png"> <img width="2063" alt="Screenshot 2022-11-30 at 15 27 09" src="https://user-images.githubusercontent.com/16084106/204824909-a26a8df1-38ba-4553-984f-fce13a3abf8d.png"> <img width="2110" alt="Screenshot 2022-12-01 at 17 36 57" src="https://user-images.githubusercontent.com/16084106/205110349-a682a894-767e-47f9-beb9-7f9c39bece72.png"> ### Checklist - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
- Loading branch information
1 parent
b5ba42b
commit 035ebc4
Showing
16 changed files
with
422 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
x-pack/plugins/fleet/common/types/rest_spec/health_check.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /* | ||
| * 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. | ||
| */ | ||
|
|
||
| export interface PostHealthCheckRequest { | ||
| body: { | ||
| host: string; | ||
| }; | ||
| } | ||
|
|
||
| export interface PostHealthCheckResponse { | ||
| name: string; | ||
| host: string; | ||
| status: string; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
167 changes: 167 additions & 0 deletions
167
.../plugins/fleet/public/applications/fleet/sections/debug/components/health_check_panel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| /* | ||
| * 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, { useEffect, useState, useMemo } from 'react'; | ||
|
|
||
| import { | ||
| EuiSpacer, | ||
| EuiText, | ||
| EuiSuperSelect, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiCallOut, | ||
| EuiHealth, | ||
| } from '@elastic/eui'; | ||
|
|
||
| import { FormattedMessage } from '@kbn/i18n-react'; | ||
| import { useQuery } from '@tanstack/react-query'; | ||
|
|
||
| import { sendPostHealthCheck, useGetFleetServerHosts } from '../../../hooks'; | ||
| import type { FleetServerHost } from '../../../types'; | ||
|
|
||
| const POLLING_INTERVAL_S = 10; // 10 sec | ||
| const POLLING_INTERVAL_MS = POLLING_INTERVAL_S * 1000; | ||
|
|
||
| export const HealthCheckPanel: React.FunctionComponent = () => { | ||
| const [selectedFleetServerHost, setSelectedFleetServerHost] = useState< | ||
| FleetServerHost | undefined | ||
| >(); | ||
|
|
||
| const { data } = useGetFleetServerHosts(); | ||
| const fleetServerHosts = useMemo(() => data?.items ?? [], [data?.items]); | ||
|
|
||
| useEffect(() => { | ||
| const defaultHost = fleetServerHosts.find((item) => item.is_default === true); | ||
| if (defaultHost) { | ||
| setSelectedFleetServerHost(defaultHost); | ||
| } | ||
| }, [fleetServerHosts]); | ||
|
|
||
| const hostName = useMemo( | ||
| () => selectedFleetServerHost?.host_urls[0] || '', | ||
| [selectedFleetServerHost?.host_urls] | ||
| ); | ||
|
|
||
| const [healthData, setHealthData] = useState<any>(); | ||
|
|
||
| const { data: healthCheckResponse } = useQuery( | ||
| ['fleetServerHealth', hostName], | ||
| () => sendPostHealthCheck({ host: hostName }), | ||
| { refetchInterval: POLLING_INTERVAL_MS } | ||
| ); | ||
| useEffect(() => { | ||
| setHealthData(healthCheckResponse); | ||
| }, [healthCheckResponse]); | ||
|
|
||
| const fleetServerHostsOptions = useMemo( | ||
| () => [ | ||
| ...fleetServerHosts.map((fleetServerHost) => { | ||
| return { | ||
| inputDisplay: `${fleetServerHost.name} (${fleetServerHost.host_urls[0]})`, | ||
| value: fleetServerHost.id, | ||
| }; | ||
| }), | ||
| ], | ||
| [fleetServerHosts] | ||
| ); | ||
|
|
||
| const healthStatus = (statusValue: string) => { | ||
| if (!statusValue) return null; | ||
|
|
||
| let color; | ||
| switch (statusValue) { | ||
| case 'HEALTHY': | ||
| color = 'success'; | ||
| break; | ||
| case 'UNHEALTHY': | ||
| color = 'warning'; | ||
| break; | ||
| case 'OFFLINE': | ||
| color = 'subdued'; | ||
| break; | ||
| default: | ||
| color = 'subdued'; | ||
| } | ||
|
|
||
| return <EuiHealth color={color}>{statusValue}</EuiHealth>; | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <EuiText grow={false}> | ||
| <p> | ||
| <FormattedMessage | ||
| id="xpack.fleet.debug.healthCheckPanel.description" | ||
| defaultMessage="Select the host used to enroll Fleet Server. The connection is refreshed every {interval}s." | ||
| values={{ | ||
| interval: POLLING_INTERVAL_S, | ||
| }} | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
|
|
||
| <EuiSpacer size="m" /> | ||
| <EuiFlexGroup alignItems="center"> | ||
| <EuiFlexItem | ||
| grow={false} | ||
| css={` | ||
| min-width: 600px; | ||
| `} | ||
| > | ||
| <EuiSuperSelect | ||
| fullWidth | ||
| data-test-subj="fleetDebug.fleetServerHostsSelect" | ||
| prepend={ | ||
| <EuiText size="relative" color={''}> | ||
| <FormattedMessage | ||
| id="xpack.fleet.debug.healthCheckPanel.fleetServerHostsLabel" | ||
| defaultMessage="Fleet Server Hosts" | ||
| /> | ||
| </EuiText> | ||
| } | ||
| onChange={(fleetServerHostId) => { | ||
| setHealthData(undefined); | ||
| setSelectedFleetServerHost( | ||
| fleetServerHosts.find((fleetServerHost) => fleetServerHost.id === fleetServerHostId) | ||
| ); | ||
| }} | ||
| valueOfSelected={selectedFleetServerHost?.id} | ||
| options={fleetServerHostsOptions} | ||
| /> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| {healthData?.data?.status && hostName === healthData?.data?.host ? ( | ||
| <EuiFlexGroup alignItems="center"> | ||
| <EuiFlexItem> | ||
| <FormattedMessage | ||
| id="xpack.fleet.debug.healthCheckPanel.status" | ||
| defaultMessage="Status:" | ||
| /> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem>{healthStatus(healthData?.data?.status)}</EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ) : null} | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| {healthData?.error && ( | ||
| <> | ||
| <EuiSpacer size="m" /> | ||
| <EuiCallOut title="Error" color="danger"> | ||
| {healthData?.error?.message ?? ( | ||
| <FormattedMessage | ||
| id="xpack.fleet.debug.healthCheckPanel.fetchError" | ||
| defaultMessage="Message: {errorMessage}" | ||
| values={{ | ||
| errorMessage: healthData?.error?.message, | ||
| }} | ||
| /> | ||
| )} | ||
| </EuiCallOut> | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.