From 7a9a5194d7acf8a9e507ae6b6acc9d22f56cf2ea Mon Sep 17 00:00:00 2001 From: Rachel Shen Date: Tue, 1 Oct 2024 17:01:20 -0600 Subject: [PATCH] [Observability] fix slo observability compressed styles to be not compressed (#193081) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Building off of PR https://github.com/elastic/kibana/pull/192993 to revert the compressed styles for SLOs Compressed styles PR [here](https://github.com/elastic/kibana/pull/190636) ### Before In the SLO page in Observability, the status and tags fields are uneven with the unified search bar. ![Screenshot 2024-09-30 at 2 10 17 PM](https://github.com/user-attachments/assets/63391aa2-ec7d-43f5-9803-8094e73b8a6c) ### After ![Screenshot 2024-09-30 at 2 52 37 PM](https://github.com/user-attachments/assets/fb70109d-15d1-4278-81c6-318da290594f) --- .../components/control_panel.tsx | 5 ++- .../control_group_renderer.tsx | 3 ++ .../control_group/utils/is_compressed.test.ts | 33 +++++++++++++++++++ .../control_group/utils/is_compressed.ts | 23 +++++++++++++ .../components/options_list_control.tsx | 3 +- .../components/range_slider_control.tsx | 4 ++- .../get_range_slider_control_factory.tsx | 2 ++ .../components/time_slider_anchored_range.tsx | 3 +- .../time_slider_popover_content.tsx | 3 ++ .../time_slider_sliding_window_range.tsx | 3 +- .../get_timeslider_control_factory.tsx | 2 ++ .../slos/components/common/quick_filters.tsx | 1 + 12 files changed, 78 insertions(+), 7 deletions(-) create mode 100644 src/plugins/controls/public/control_group/utils/is_compressed.test.ts create mode 100644 src/plugins/controls/public/control_group/utils/is_compressed.ts diff --git a/src/plugins/controls/public/control_group/components/control_panel.tsx b/src/plugins/controls/public/control_group/components/control_panel.tsx index 73eee5c5146ae..acff284eeba1f 100644 --- a/src/plugins/controls/public/control_group/components/control_panel.tsx +++ b/src/plugins/controls/public/control_group/components/control_panel.tsx @@ -34,6 +34,7 @@ import { ControlPanelProps, DefaultControlApi } from '../../controls/types'; import { ControlError } from './control_error'; import './control_panel.scss'; +import { isCompressed } from '../utils/is_compressed'; const DragHandle = ({ isEditable, @@ -122,7 +123,6 @@ export const ControlPanel = } + compressed={isCompressed(api)} > <> {blockingError && ( diff --git a/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx b/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx index 728c8ca551a28..6a50c60c4e597 100644 --- a/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx +++ b/src/plugins/controls/public/control_group/control_group_renderer/control_group_renderer.tsx @@ -40,6 +40,7 @@ export interface ControlGroupRendererProps { timeRange?: TimeRange; query?: Query; dataLoading?: boolean; + compressed?: boolean; } export const ControlGroupRenderer = ({ @@ -50,6 +51,7 @@ export const ControlGroupRenderer = ({ query, viewMode, dataLoading, + compressed, }: ControlGroupRendererProps) => { const id = useMemo(() => uuidv4(), []); const [regenerateId, setRegenerateId] = useState(uuidv4()); @@ -171,6 +173,7 @@ export const ControlGroupRenderer = ({ getRuntimeStateForChild: () => { return runtimeState$.getValue(); }, + compressed: compressed ?? true, })} onApiAvailable={(controlGroupApi) => { const controlGroupRendererApi: ControlGroupRendererApi = { diff --git a/src/plugins/controls/public/control_group/utils/is_compressed.test.ts b/src/plugins/controls/public/control_group/utils/is_compressed.test.ts new file mode 100644 index 0000000000000..e17fced5831bf --- /dev/null +++ b/src/plugins/controls/public/control_group/utils/is_compressed.test.ts @@ -0,0 +1,33 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { isCompressed } from './is_compressed'; + +describe('isCompressed', () => { + test('should return true by default', () => { + const mockApi = {}; + expect(isCompressed(mockApi)).toBe(true); + }); + test('should return false if compressed is false', () => { + const mockApi = { compressed: false }; + expect(isCompressed(mockApi)).toBe(false); + }); + test('should return false if parent api has compressed false', () => { + const mockApi = { parentApi: { compressed: false } }; + expect(isCompressed(mockApi)).toBe(false); + }); + test('should return false if nested api has compressed false', () => { + const mockApi = { parentApi: { parentApi: { parentApi: { compressed: false } } } }; + expect(isCompressed(mockApi)).toBe(false); + }); + test('should return true if parent api does not specify compressed', () => { + const mockApi = { parentApi: { parentApi: {} } }; + expect(isCompressed(mockApi)).toBe(true); + }); +}); diff --git a/src/plugins/controls/public/control_group/utils/is_compressed.ts b/src/plugins/controls/public/control_group/utils/is_compressed.ts new file mode 100644 index 0000000000000..46f7f27b66251 --- /dev/null +++ b/src/plugins/controls/public/control_group/utils/is_compressed.ts @@ -0,0 +1,23 @@ +/* + * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side + * Public License v 1"; you may not use this file except in compliance with, at + * your election, the "Elastic License 2.0", the "GNU Affero General Public + * License v3.0 only", or the "Server Side Public License, v 1". + */ + +import { apiHasParentApi } from '@kbn/presentation-publishing'; + +interface HasCompressed { + compressed: boolean; +} + +const apiHasCompressed = (unknownApi: unknown): unknownApi is HasCompressed => { + return Boolean(unknownApi) && typeof (unknownApi as HasCompressed).compressed === 'boolean'; +}; + +export function isCompressed(api: unknown): boolean { + if (apiHasCompressed(api)) return api.compressed; + return apiHasParentApi(api) ? isCompressed(api.parentApi) : true; +} diff --git a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx index da9aa000dcef0..ebb5458478531 100644 --- a/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx +++ b/src/plugins/controls/public/controls/data_controls/options_list_control/components/options_list_control.tsx @@ -25,6 +25,7 @@ import { useBatchedPublishingSubjects, } from '@kbn/presentation-publishing'; +import { isCompressed } from '../../../../control_group/utils/is_compressed'; import { OptionsListSelection } from '../../../../../common/options_list/options_list_selections'; import { MIN_POPOVER_WIDTH } from '../../../constants'; import { useOptionsListContext } from '../options_list_context_provider'; @@ -174,7 +175,7 @@ export const OptionsListControl = ({ ); return ( - + = ({ @@ -46,6 +47,7 @@ export const RangeSliderControl: FC = ({ value, uuid, controlPanelClassName, + compressed, }: Props) => { const rangeSliderRef = useRef(null); @@ -194,7 +196,7 @@ export const RangeSliderControl: FC = ({ min={displayedMin} max={displayedMax} isLoading={isLoading} - compressed + compressed={compressed} inputPopoverProps={{ className: controlPanelClassName, panelMinWidth: MIN_POPOVER_WIDTH, diff --git a/src/plugins/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx b/src/plugins/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx index 0605fe4586abb..3d0fa52c6a113 100644 --- a/src/plugins/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx +++ b/src/plugins/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx @@ -14,6 +14,7 @@ import { EuiFieldNumber, EuiFormRow } from '@elastic/eui'; import { Filter, RangeFilterParams, buildRangeFilter } from '@kbn/es-query'; import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing'; +import { isCompressed } from '../../../control_group/utils/is_compressed'; import { RANGE_SLIDER_CONTROL } from '../../../../common'; import { initializeDataControl } from '../initialize_data_control'; import type { DataControlFactory } from '../types'; @@ -248,6 +249,7 @@ export const getRangesliderControlFactory = (): DataControlFactory< step={step ?? 1} value={value} uuid={uuid} + compressed={isCompressed(api)} /> ); }, diff --git a/src/plugins/controls/public/controls/timeslider_control/components/time_slider_anchored_range.tsx b/src/plugins/controls/public/controls/timeslider_control/components/time_slider_anchored_range.tsx index 0ab4a467e8694..88cd7fb1f1034 100644 --- a/src/plugins/controls/public/controls/timeslider_control/components/time_slider_anchored_range.tsx +++ b/src/plugins/controls/public/controls/timeslider_control/components/time_slider_anchored_range.tsx @@ -19,6 +19,7 @@ interface Props { ticks: EuiRangeTick[]; timeRangeMin: number; timeRangeMax: number; + compressed: boolean; } export function TimeSliderAnchoredRange(props: Props) { @@ -40,7 +41,7 @@ export function TimeSliderAnchoredRange(props: Props) { max={props.timeRangeMax} step={props.stepSize} ticks={props.ticks} - compressed + compressed={props.compressed} /> ); } diff --git a/src/plugins/controls/public/controls/timeslider_control/components/time_slider_popover_content.tsx b/src/plugins/controls/public/controls/timeslider_control/components/time_slider_popover_content.tsx index 0d45797d42799..fc4d050d71d59 100644 --- a/src/plugins/controls/public/controls/timeslider_control/components/time_slider_popover_content.tsx +++ b/src/plugins/controls/public/controls/timeslider_control/components/time_slider_popover_content.tsx @@ -24,6 +24,7 @@ interface Props { ticks: EuiRangeTick[]; timeRangeMin: number; timeRangeMax: number; + compressed: boolean; } export function TimeSliderPopoverContent(props: Props) { @@ -35,6 +36,7 @@ export function TimeSliderPopoverContent(props: Props) { ticks={props.ticks} timeRangeMin={props.timeRangeMin} timeRangeMax={props.timeRangeMax} + compressed={props.compressed} /> ) : ( ); const anchorStartToggleButtonLabel = props.isAnchored diff --git a/src/plugins/controls/public/controls/timeslider_control/components/time_slider_sliding_window_range.tsx b/src/plugins/controls/public/controls/timeslider_control/components/time_slider_sliding_window_range.tsx index aa699a3082ebd..f1b93ccfb57a8 100644 --- a/src/plugins/controls/public/controls/timeslider_control/components/time_slider_sliding_window_range.tsx +++ b/src/plugins/controls/public/controls/timeslider_control/components/time_slider_sliding_window_range.tsx @@ -18,6 +18,7 @@ interface Props { ticks: EuiRangeTick[]; timeRangeMin: number; timeRangeMax: number; + compressed: boolean; } export function TimeSliderSlidingWindowRange(props: Props) { @@ -36,7 +37,7 @@ export function TimeSliderSlidingWindowRange(props: Props) { step={props.stepSize} ticks={props.ticks} isDraggable - compressed + compressed={props.compressed} /> ); } diff --git a/src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx b/src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx index b7d5b6f077080..a0c6c237ace00 100644 --- a/src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx +++ b/src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx @@ -37,6 +37,7 @@ import { roundUpToNextStepSizeFactor, } from './time_utils'; import { Timeslice, TimesliderControlApi, TimesliderControlState } from './types'; +import { isCompressed } from '../../control_group/utils/is_compressed'; const displayName = i18n.translate('controls.timesliderControl.displayName', { defaultMessage: 'Time slider', @@ -306,6 +307,7 @@ export const getTimesliderControlFactory = (): ControlFactory< ticks={timeRangeMeta.ticks} timeRangeMin={timeRangeMeta.timeRangeMin} timeRangeMax={timeRangeMeta.timeRangeMax} + compressed={isCompressed(api)} /> ); diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx index 82781a53612f3..ad350a3d17fbe 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx @@ -92,6 +92,7 @@ export function QuickFilters({ }; }} timeRange={{ from: 'now-24h', to: 'now' }} + compressed={false} /> );