fix slo observability compressed styles to be not compressed

elastic · Sep 16, 2024 · 2fb8a5a · 2fb8a5a
1 parent 1199a5c
commit 2fb8a5a
Show file tree

Hide file tree

Showing 19 changed files with 79 additions and 10 deletions.
diff --git a/src/plugins/controls/public/control_group/control_group.scss b/src/plugins/controls/public/control_group/control_group.scss
@@ -213,3 +213,12 @@ $controlMinWidth: $euiSize * 14;
     }
   }
 }
+
+.observability-slo {
+  .controlsWrapper {
+    min-height: $euiSize * 4;
+  }
+  .controlsFrame__draggable {
+    height: $euiButtonHeight;
+  }
+}
diff --git a/src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx b/src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx
@@ -40,6 +40,7 @@ export interface ControlGroupRendererProps {
   timeRange?: TimeRange;
   query?: Query;
   dataLoading?: boolean;
+  className?: string;
 }
 
 export const ControlGroupRenderer = ({
@@ -50,6 +51,7 @@ export const ControlGroupRenderer = ({
   query,
   viewMode,
   dataLoading,
+  className,
 }: ControlGroupRendererProps) => {
   const id = useMemo(() => uuidv4(), []);
   const [regenerateId, setRegenerateId] = useState(uuidv4());
@@ -187,6 +189,7 @@ export const ControlGroupRenderer = ({
       }}
       hidePanelChrome
       panelProps={{ hideLoader: true }}
+      className={className}
     />
   );
 };
diff --git a/src/plugins/controls/public/options_list/components/options_list.scss b/src/plugins/controls/public/options_list/components/options_list.scss
@@ -98,3 +98,9 @@
     padding: $euiSizeM;
   }
 }
+
+.observability-slo {
+  .optionsList--filterBtn {
+    height: $euiButtonHeight;
+  }
+}
diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx
@@ -46,6 +46,7 @@ interface Props {
   };
   hasUnappliedSelections: boolean;
   labelPosition: ControlStyle;
+  className?: string;
 }
 
 export function ControlGroup({
@@ -54,6 +55,7 @@ export function ControlGroup({
   controlsManager,
   labelPosition,
   hasUnappliedSelections,
+  className,
 }: Props) {
   const [isInitialized, setIsInitialized] = useState(false);
   const [autoApplySelections, controlsInOrder] = useBatchedPublishingSubjects(
@@ -154,6 +156,7 @@ export function ControlGroup({
                       controlsManager.setControlApi(id, controlApi);
                     }}
                     isControlGroupInitialized={isInitialized}
+                    className={className}
                   />
                 ))}
               </EuiFlexGroup>

diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss b/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss
@@ -68,4 +68,18 @@
   .euiFormControlLayout__prepend {
     padding-inline-start: $euiSizeXS * .5; // skinny icon
   }
+}
+
+.observability-slo {
+  .controlPanel {
+    height: $euiButtonHeight;
+
+    &--labelWrapper {
+      height: 100%;
+    }
+
+    .controlPanel--label {
+      height: 100%;
+    }
+  }
 }
diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx
@@ -61,6 +61,7 @@ const DragHandle = ({
 export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlApi>({
   Component,
   uuid,
+  className,
 }: ControlPanelProps<ApiType>) => {
   const [api, setApi] = useState<ApiType | null>(null);
   const {
@@ -157,12 +158,12 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
           data-test-subj="control-frame-title"
           fullWidth
           label={usingTwoLineLayout ? panelTitle || defaultPanelTitle || '...' : undefined}
-          display="rowCompressed"
+          display={className === 'observability-slo' ? undefined : 'rowCompressed'}
         >
           <EuiFormControlLayout
             fullWidth
             isLoading={Boolean(dataLoading)}
-            compressed
+            compressed={className === 'observability-slo' ? false : true}
             className={classNames(
               'controlFrame__formControlLayout',
               {

diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx
@@ -34,12 +34,14 @@ export const ControlRenderer = <
   getParentApi,
   onApiAvailable,
   isControlGroupInitialized,
+  className,
 }: {
   type: string;
   uuid: string;
   getParentApi: () => ControlGroupApi;
   onApiAvailable?: (api: ApiType) => void;
   isControlGroupInitialized: boolean;
+  className?: string;
 }) => {
   const cleanupFunction = useRef<(() => void) | null>(null);
 
@@ -138,7 +140,7 @@ export const ControlRenderer = <
 
   return component && isControlGroupInitialized ? (
     // @ts-expect-error
-    <ControlPanel<ApiType> Component={component} uuid={uuid} />
+    <ControlPanel<ApiType> Component={component} uuid={uuid} className={className} />
   ) : // Control group will not display controls until all controls are initialized
   null;
 };
diff --git a/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx b/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx
@@ -76,7 +76,7 @@ export const getControlGroupEmbeddableFactory = (services: {
         autoApplySelections,
         ignoreParentSettings,
       } = initialRuntimeState;
-
+      const isObservabilitySLO = await services.core.application.capabilities.apm;
       const autoApplySelections$ = new BehaviorSubject<boolean>(autoApplySelections);
       const defaultDataViewId = await services.dataViews.getDefaultId();
       const lastSavedControlsState$ = new BehaviorSubject<ControlPanelsState>(
@@ -298,6 +298,7 @@ export const getControlGroupEmbeddableFactory = (services: {
               controlsManager={controlsManager}
               hasUnappliedSelections={hasUnappliedSelections}
               labelPosition={labelPosition}
+              className={isObservabilitySLO ? 'observability-slo' : undefined}
             />
           );
         },

diff --git a/...c/react_controls/controls/data_controls/options_list_control/components/options_list.scss b/...c/react_controls/controls/data_controls/options_list_control/components/options_list.scss
@@ -88,3 +88,9 @@
     padding: $euiSizeM;
   }
 }
+
+.observability-slo {
+  .optionsList--filterBtn {
+    height: $euiButtonHeight;
+  }
+}
diff --git a/..._controls/controls/data_controls/options_list_control/components/options_list_control.tsx b/..._controls/controls/data_controls/options_list_control/components/options_list_control.tsx
@@ -35,8 +35,10 @@ import './options_list.scss';
 
 export const OptionsListControl = ({
   controlPanelClassName,
+  className,
 }: {
   controlPanelClassName: string;
+  className?: string;
 }) => {
   const popoverId = useMemo(() => htmlIdGenerator()(), []);
   const { api, stateManager, displaySettings } = useOptionsListContext();
@@ -174,7 +176,11 @@ export const OptionsListControl = ({
   );
 
   return (
-    <EuiFilterGroup fullWidth compressed className={controlPanelClassName}>
+    <EuiFilterGroup
+      fullWidth
+      className={controlPanelClassName}
+      compressed={className === 'observability-slo' ? false : true}
+    >
       <EuiInputPopover
         id={popoverId}
         ownFocus

diff --git a/...controls/controls/data_controls/options_list_control/get_options_list_control_factory.tsx b/...controls/controls/data_controls/options_list_control/get_options_list_control_factory.tsx
@@ -391,7 +391,6 @@ export const getOptionsListControlFactory = (
               hideExists$,
               hideSort$
             );
-
           return (
             <OptionsListControlContext.Provider
               value={{
@@ -400,7 +399,12 @@ export const getOptionsListControlFactory = (
                 displaySettings: { placeholder, hideActionBar, hideExclude, hideExists, hideSort },
               }}
             >
-              <OptionsListControl controlPanelClassName={controlPanelClassName} />
+              <OptionsListControl
+                controlPanelClassName={controlPanelClassName}
+                className={
+                  services.core.application.capabilities.apm ? 'observability-slo' : undefined
+                }
+              />
             </OptionsListControlContext.Provider>
           );
         },

diff --git a/...ic/react_controls/controls/data_controls/range_slider/components/range_slider_control.tsx b/...ic/react_controls/controls/data_controls/range_slider/components/range_slider_control.tsx
@@ -33,6 +33,7 @@ interface Props {
   value: RangeValue | undefined;
   uuid: string;
   controlPanelClassName?: string;
+  className?: string;
 }
 
 export const RangeSliderControl: FC<Props> = ({
@@ -46,6 +47,7 @@ export const RangeSliderControl: FC<Props> = ({
   value,
   uuid,
   controlPanelClassName,
+  className,
 }: Props) => {
   const rangeSliderRef = useRef<EuiDualRangeProps | null>(null);
 
@@ -194,7 +196,7 @@ export const RangeSliderControl: FC<Props> = ({
         min={displayedMin}
         max={displayedMax}
         isLoading={isLoading}
-        compressed
+        compressed={className === 'observability-slo' ? false : true}
         inputPopoverProps={{
           className: controlPanelClassName,
           panelMinWidth: MIN_POPOVER_WIDTH,

diff --git a/...blic/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx b/...blic/react_controls/controls/timeslider_control/components/time_slider_anchored_range.tsx
@@ -19,6 +19,7 @@ interface Props {
   ticks: EuiRangeTick[];
   timeRangeMin: number;
   timeRangeMax: number;
+  className?: string;
 }
 
 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.className !== 'observability-slo' ? false : true}
     />
   );
 }
diff --git a/...eact_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx b/...eact_controls/controls/timeslider_control/components/time_slider_sliding_window_range.tsx
@@ -18,6 +18,7 @@ interface Props {
   ticks: EuiRangeTick[];
   timeRangeMin: number;
   timeRangeMax: number;
+  className?: string;
 }
 
 export function TimeSliderSlidingWindowRange(props: Props) {
@@ -36,7 +37,7 @@ export function TimeSliderSlidingWindowRange(props: Props) {
       step={props.stepSize}
       ticks={props.ticks}
       isDraggable
-      compressed
+      compressed={props.className !== 'observability-slo' ? true : false}
     />
   );
 }
diff --git a/src/plugins/controls/public/react_controls/controls/types.ts b/src/plugins/controls/public/react_controls/controls/types.ts
@@ -96,4 +96,5 @@ export interface ControlPanelProps<
 > {
   uuid: string;
   Component: PanelCompatibleComponent<ApiType, PropsType>;
+  className?: string;
 }
diff --git a/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss b/src/plugins/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss
@@ -23,3 +23,9 @@
 .dashboardViewport--screenshotMode  .controlsWrapper--empty {
   display:none
 }
+
+.observability-slo {
+  .dshDashboardViewport-controls {
+    padding-bottom: $euiSizeXS;
+  }
+}
diff --git a/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx b/src/plugins/embeddable/public/react_embeddable_system/react_embeddable_renderer.tsx
@@ -76,6 +76,7 @@ export const ReactEmbeddableRenderer = <
    * as it changes. This is **not** expected to change over the lifetime of the component.
    */
   onAnyStateChange?: (state: SerializedPanelState<SerializedState>) => void;
+  className?: string;
 }) => {
   const cleanupFunction = useRef<(() => void) | null>(null);
   const firstLoadCompleteTime = useRef<number | null>(null);

diff --git a/...c/components/slo/burn_rate/alert_details/components/custom_panels/apm/embeddable_root.tsx b/...c/components/slo/burn_rate/alert_details/components/custom_panels/apm/embeddable_root.tsx
@@ -84,6 +84,7 @@ export function APMEmbeddableRoot({
       type={embeddableId}
       getParentApi={() => ({ getSerializedStateForChild: () => ({ rawState: input }) })}
       hidePanelChrome={true}
+      className="observability-slo"
     />
   );
 }

diff --git a/.../plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx b/.../plugins/observability_solution/slo/public/pages/slos/components/common/quick_filters.tsx
@@ -55,6 +55,7 @@ export function QuickFilters({
   return (
     <Container>
       <ControlGroupRenderer
+        className="observability-slo"
         onApiAvailable={setControlGroupAPI}
         getCreationOptions={async (initialState, builder) => {
           builder.addOptionsListControl(