diff --git a/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/cluster_health.tsx b/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/cluster_health.tsx index af1850404255d..7530328634947 100644 --- a/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/cluster_health.tsx +++ b/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/cluster_health.tsx @@ -10,7 +10,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiHealth, EuiText, EuiTextProps } from '@elastic/eui'; -import { HEALTH_HEX_CODES } from './gradient'; +import { useHealthHexCodes } from './gradient'; interface Props { count?: number; @@ -24,6 +24,7 @@ const defaultTextProps: EuiTextProps = { }; export function ClusterHealth({ count, status, textProps = defaultTextProps }: Props) { + const healthHexCodes = useHealthHexCodes(); if (typeof count === 'number' && count === 0) { return null; } @@ -31,22 +32,22 @@ export function ClusterHealth({ count, status, textProps = defaultTextProps }: P let color = 'subdued'; let statusLabel = status; if (status === 'successful') { - color = HEALTH_HEX_CODES.successful; + color = healthHexCodes.successful; statusLabel = i18n.translate('inspector.requests.clusters.successfulLabel', { defaultMessage: 'successful', }); } else if (status === 'partial') { - color = HEALTH_HEX_CODES.partial; + color = healthHexCodes.partial; statusLabel = i18n.translate('inspector.requests.clusters.partialLabel', { defaultMessage: 'partial', }); } else if (status === 'skipped') { - color = HEALTH_HEX_CODES.skipped; + color = healthHexCodes.skipped; statusLabel = i18n.translate('inspector.requests.clusters.skippedLabel', { defaultMessage: 'skipped', }); } else if (status === 'failed') { - color = HEALTH_HEX_CODES.failed; + color = healthHexCodes.failed; statusLabel = i18n.translate('inspector.requests.clusters.failedLabel', { defaultMessage: 'failed', }); diff --git a/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/clusters_health.tsx b/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/clusters_health.tsx index 981ece7ee4e63..8ae68594a3869 100644 --- a/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/clusters_health.tsx +++ b/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/clusters_health.tsx @@ -10,11 +10,10 @@ import React from 'react'; import { estypes } from '@elastic/elasticsearch'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { i18n } from '@kbn/i18n'; -import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui'; import { ClusterHealth } from './cluster_health'; -import { getHeathBarLinearGradient } from './gradient'; +import { useHeathBarLinearGradient } from './gradient'; interface Props { clusters: Record; @@ -25,6 +24,8 @@ export function ClustersHealth({ clusters }: Props) { let partial = 0; let skipped = 0; let failed = 0; + const { euiTheme } = useEuiTheme(); + Object.values(clusters).forEach((clusterDetails) => { if (clusterDetails.status === 'successful') { successful++; @@ -76,11 +77,11 @@ export function ClustersHealth({ clusters }: Props) {
diff --git a/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/gradient.test.ts b/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/gradient.test.ts index 9c7ad51232d7a..c7dd029f4db48 100644 --- a/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/gradient.test.ts +++ b/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/gradient.test.ts @@ -7,18 +7,32 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { getHeathBarLinearGradient, HEALTH_HEX_CODES } from './gradient'; +import { useHeathBarLinearGradient, useHealthHexCodes } from './gradient'; + +jest.mock('@elastic/eui', () => ({ + useEuiTheme: () => ({ + euiTheme: { + colors: { + backgroundFilledSuccess: 'green', + backgroundLightWarning: 'yellow', + backgroundFilledDanger: 'red', + }, + }, + }), +})); + +describe('useHeathBarLinearGradient', () => { + const healthHexCodes = useHealthHexCodes(); -describe('getHeathBarLinearGradient', () => { test('should return linear-gradient with percentages for each status', () => { - expect(getHeathBarLinearGradient(5, 1, 1, 2)).toBe( - `linear-gradient(to right, ${HEALTH_HEX_CODES.successful} 0% 56%, ${HEALTH_HEX_CODES.partial} 56% 67%, ${HEALTH_HEX_CODES.skipped} 67% 78%, ${HEALTH_HEX_CODES.failed} 78% 100%)` + expect(useHeathBarLinearGradient(5, 1, 1, 2)).toBe( + `linear-gradient(to right, ${healthHexCodes.successful} 0% 56%, ${healthHexCodes.partial} 56% 67%, ${healthHexCodes.skipped} 67% 78%, ${healthHexCodes.failed} 78% 100%)` ); }); test('should return linear-gradient with percentages for each status with count above zero', () => { - expect(getHeathBarLinearGradient(5, 0, 0, 2)).toBe( - `linear-gradient(to right, ${HEALTH_HEX_CODES.successful} 0% 71%, ${HEALTH_HEX_CODES.failed} 71% 100%)` + expect(useHeathBarLinearGradient(5, 0, 0, 2)).toBe( + `linear-gradient(to right, ${healthHexCodes.successful} 0% 71%, ${healthHexCodes.failed} 71% 100%)` ); }); }); diff --git a/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/gradient.ts b/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/gradient.ts index 3c9b1e1502d84..925c40e10a504 100644 --- a/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/gradient.ts +++ b/src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_health/gradient.ts @@ -7,21 +7,26 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { euiThemeVars } from '@kbn/ui-theme'; - -export const HEALTH_HEX_CODES = { - successful: euiThemeVars.euiColorSuccess, - partial: euiThemeVars.euiColorWarning, - skipped: '#DA8B45', - failed: euiThemeVars.euiColorDanger, -}; +import { useEuiTheme } from '@elastic/eui'; + +export function useHealthHexCodes() { + const { euiTheme } = useEuiTheme(); + return { + successful: euiTheme.colors.backgroundFilledSuccess, + partial: euiTheme.colors.backgroundLightWarning, + skipped: euiTheme.colors.backgroundFilledWarning, + failed: euiTheme.colors.backgroundFilledDanger, + }; +} -export function getHeathBarLinearGradient( +export function useHeathBarLinearGradient( successful: number, partial: number, skipped: number, failed: number ) { + const healthHexCodes = useHealthHexCodes(); + const total = successful + partial + skipped + failed; const stops: string[] = []; let startPercent: number = 0; @@ -37,10 +42,10 @@ export function getHeathBarLinearGradient( startPercent = endPercent; } - addStop(successful, HEALTH_HEX_CODES.successful); - addStop(partial, HEALTH_HEX_CODES.partial); - addStop(skipped, HEALTH_HEX_CODES.skipped); - addStop(failed, HEALTH_HEX_CODES.failed); + addStop(successful, healthHexCodes.successful); + addStop(partial, healthHexCodes.partial); + addStop(skipped, healthHexCodes.skipped); + addStop(failed, healthHexCodes.failed); const printedStops = stops .map((stop, index) => { diff --git a/src/platform/plugins/shared/inspector/tsconfig.json b/src/platform/plugins/shared/inspector/tsconfig.json index 0b0b7217ef8f9..bcd3bd45a6988 100644 --- a/src/platform/plugins/shared/inspector/tsconfig.json +++ b/src/platform/plugins/shared/inspector/tsconfig.json @@ -15,7 +15,6 @@ "@kbn/core-ui-settings-browser-mocks", "@kbn/core-ui-settings-browser", "@kbn/std", - "@kbn/ui-theme", "@kbn/code-editor", "@kbn/core-lifecycle-browser", "@kbn/react-kibana-mount"