[SecuritySolution] Styling for Embeddables (#156877)

## Summary Issues: #156640 | #156812 Steps to reproduce: Please find #156640 After: <img width="2546" alt="Screenshot 2023-05-05 at 16 30 45" src="https://user-images.githubusercontent.com/6295984/236503176-cda407db-790d-4a2b-9f92-82386adc00c6.png"> <img width="2541" alt="Screenshot 2023-05-05 at 16 55 54" src="https://user-images.githubusercontent.com/6295984/236507655-641b6294-5612-4bef-bbb0-9f19b4f25c90.png"> <img width="2545" alt="Screenshot 2023-05-05 at 17 52 37" src="https://user-images.githubusercontent.com/6295984/236519285-f1b1387e-e9a3-4e63-9747-20ab735e661b.png"> Before: (Charts were cropped when legend has a scroll bar) <img width="1723" alt="Screenshot 2023-05-04 at 09 05 04" src="https://user-images.githubusercontent.com/17427073/236134389-41bfe561-3f96-4c71-8b2b-ca0f5ccb8ff1.png">
elastic · May 8, 2023 · c3a10f8 · c3a10f8
1 parent a513ec6
commit c3a10f8
Show file tree

Hide file tree

Showing 15 changed files with 39 additions and 25 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx b/x-pack/plugins/security_solution/public/common/components/matrix_histogram/index.tsx
@@ -76,7 +76,7 @@ const HistogramPanel = styled(Panel)<{ height?: number }>`
   ${({ height }) => (height != null ? `min-height: ${height}px;` : '')}
 `;
 
-const CHART_HEIGHT = '150px';
+const CHART_HEIGHT = 150;
 
 const visualizationResponseHasData = (response: VisualizationResponse): boolean =>
   Object.values<AggregationsTermsAggregateBase<unknown[]>>(response.aggregations ?? {}).some(
@@ -332,7 +332,7 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramComponentProps> =
                 data-test-subj="embeddable-matrix-histogram"
                 extraOptions={extraVisualizationOptions}
                 getLensAttributes={getLensAttributes}
-                height={CHART_HEIGHT}
+                height={chartHeight ?? CHART_HEIGHT}
                 id={visualizationId}
                 inspectTitle={title as string}
                 lensAttributes={lensAttributes}

diff --git a/...gins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx b/...gins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx
@@ -28,16 +28,25 @@ import { getRequestsAndResponses } from './utils';
 import { SourcererScopeName } from '../../store/sourcerer/model';
 import { VisualizationActions } from './actions';
 
+const HOVER_ACTIONS_PADDING = 24;
+
 const LensComponentWrapper = styled.div<{
-  height?: string;
-  width?: string;
+  $height?: number;
+  width?: string | number;
   $addHoverActionsPadding?: boolean;
 }>`
-  height: ${({ height }) => height ?? 'auto'};
+  height: ${({ $height }) => ($height ? `${$height}px` : 'auto')};
   width: ${({ width }) => width ?? 'auto'};
   > div {
     background-color: transparent;
-    ${({ $addHoverActionsPadding }) => ($addHoverActionsPadding ? `padding: 20px 0 0 0;` : ``)}
+    ${({ $addHoverActionsPadding }) =>
+      $addHoverActionsPadding ? `padding: ${HOVER_ACTIONS_PADDING}px 0 0 0;` : ``}
+  }
+  .lnsExpressionRenderer .echLegend {
+    ${({ $height, $addHoverActionsPadding }) =>
+      $height && $height > HOVER_ACTIONS_PADDING && $addHoverActionsPadding
+        ? `height: ${$height - HOVER_ACTIONS_PADDING * 1.5}px;`
+        : ''}
   }
   .expExpressionRenderer__expression {
     padding: 2px 0 0 0 !important;
@@ -254,7 +263,7 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
     <>
       {attributes && searchSessionId && (
         <LensComponentWrapper
-          height={wrapperHeight}
+          $height={wrapperHeight}
           width={wrapperWidth}
           $addHoverActionsPadding={addHoverActionsPadding}
         >

diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/types.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/types.ts
@@ -67,7 +67,7 @@ export interface LensEmbeddableComponentProps {
   extraActions?: Action[];
   extraOptions?: ExtraOptions;
   getLensAttributes?: GetLensAttributes;
-  height?: string;
+  height?: number; // px
   id: string;
   inputsModelId?: InputsModelId.global | InputsModelId.timeline;
   inspectTitle?: React.ReactNode;
@@ -76,7 +76,7 @@ export interface LensEmbeddableComponentProps {
   scopeId?: SourcererScopeName;
   stackByField?: string;
   timerange: { from: string; to: string };
-  width?: string;
+  width?: string | number;
   withActions?: boolean;
 }
 

diff --git a/...urity_solution/public/detections/components/alerts_kpis/alerts_count_panel/index.test.tsx b/...urity_solution/public/detections/components/alerts_kpis/alerts_count_panel/index.test.tsx
@@ -272,14 +272,14 @@ describe('when the isChartEmbeddablesEnabled experimental feature flag is enable
     });
   });
 
-  it('renders LensEmbeddable with 100% height', async () => {
+  it('renders LensEmbeddable with provided height', async () => {
     await act(async () => {
       mount(
         <TestProviders>
           <AlertsCountPanel {...defaultProps} />
         </TestProviders>
       );
-      expect((LensEmbeddable as unknown as jest.Mock).mock.calls[0][0].height).toEqual('100%');
+      expect((LensEmbeddable as unknown as jest.Mock).mock.calls[0][0].height).toEqual(218);
     });
   });
 

diff --git a/...s/security_solution/public/detections/components/alerts_kpis/alerts_count_panel/index.tsx b/...s/security_solution/public/detections/components/alerts_kpis/alerts_count_panel/index.tsx
@@ -58,7 +58,7 @@ interface AlertsCountPanelProps {
   isExpanded?: boolean;
   setIsExpanded?: (status: boolean) => void;
 }
-const CHART_HEIGHT = '100%';
+const CHART_HEIGHT = 218; // px
 
 export const AlertsCountPanel = memo<AlertsCountPanelProps>(
   ({

diff --git a/...y_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.test.tsx b/...y_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.test.tsx
@@ -819,14 +819,14 @@ describe('AlertsHistogramPanel', () => {
       });
     });
 
-    it('renders LensEmbeddable with 100% height', async () => {
+    it('renders LensEmbeddable with provided height', async () => {
       await act(async () => {
         mount(
           <TestProviders>
             <AlertsHistogramPanel {...defaultProps} />
           </TestProviders>
         );
-        expect((LensEmbeddable as unknown as jest.Mock).mock.calls[0][0].height).toEqual('100%');
+        expect((LensEmbeddable as unknown as jest.Mock).mock.calls[0][0].height).toEqual(155);
       });
     });
 

diff --git a/...curity_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.tsx b/...curity_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.tsx
@@ -73,7 +73,7 @@ const OptionsFlexItem = styled(EuiFlexItem)`
 
 export const LEGEND_WITH_COUNTS_WIDTH = 300; // px
 
-const ChartHeight = '100%';
+const CHART_HEIGHT = 155; // px
 
 interface AlertsHistogramPanelProps {
   alignHeader?: 'center' | 'baseline' | 'stretch' | 'flexStart' | 'flexEnd';
@@ -118,7 +118,7 @@ const NO_LEGEND_DATA: LegendItem[] = [];
 export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
   ({
     alignHeader,
-    chartHeight,
+    chartHeight = CHART_HEIGHT,
     chartOptionsContextMenu,
     combinedQueries,
     comboboxRef,
@@ -442,7 +442,7 @@ export const AlertsHistogramPanel = memo<AlertsHistogramPanelProps>(
                   filters,
                 }}
                 getLensAttributes={getLensAttributes}
-                height={ChartHeight}
+                height={chartHeight ?? CHART_HEIGHT}
                 id={visualizationId}
                 inspectTitle={inspectTitle ?? title}
                 scopeId={SourcererScopeName.detections}

diff --git a/...s/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx b/...s/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx
@@ -206,7 +206,7 @@ export const PreviewHistogram = ({
                 applyGlobalQueriesAndFilters={false}
                 extraOptions={extraVisualizationOptions}
                 getLensAttributes={getRulePreviewLensAttributes}
-                height={`${CHART_HEIGHT}px`}
+                height={CHART_HEIGHT}
                 id={`${previewQueryId}-embeddable`}
                 inspectTitle={i18n.QUERY_GRAPH_HITS_TITLE}
                 scopeId={SourcererScopeName.detections}

diff --git a/...plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx b/...plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx
@@ -33,7 +33,7 @@ import { useQueryToggle } from '../../../../common/containers/query_toggle';
 import type { AddFilterProps } from '../../../components/alerts_kpis/common/types';
 import { createResetGroupByFieldAction } from '../../../components/alerts_kpis/alerts_histogram_panel/helpers';
 
-const TREND_CHART_HEIGHT = 280; // px
+const TREND_CHART_HEIGHT = 240; // px
 const CHART_PANEL_HEIGHT = 375; // px
 
 const DETECTIONS_ALERTS_CHARTS_PANEL_ID = 'detection-alerts-charts-panel';

diff --git a/...ins/security_solution/public/explore/components/risk_score/risk_score_over_time/index.tsx b/...ins/security_solution/public/explore/components/risk_score/risk_score_over_time/index.tsx
@@ -52,7 +52,7 @@ export interface RiskScoreOverTimeProps {
 
 const RISKY_THRESHOLD = 70;
 const DEFAULT_CHART_HEIGHT = 250;
-
+const CHART_HEIGHT = 180;
 const StyledEuiText = styled(EuiText)`
   font-size: 9px;
   font-weight: ${({ theme }) => theme.eui.euiFontWeightSemiBold};
@@ -135,7 +135,7 @@ const RiskScoreOverTimeComponent: React.FC<RiskScoreOverTimeProps> = ({
                   getLensAttributes={getRiskScoreOverTimeAreaAttributes}
                   stackByField={riskEntity}
                   id={`${queryId}-embeddable`}
-                  height="180px"
+                  height={CHART_HEIGHT}
                   extraOptions={{ spaceId }}
                 />
               ) : (

diff --git a/x-pack/plugins/security_solution/public/explore/components/stat_items/metric_embeddable.tsx b/x-pack/plugins/security_solution/public/explore/components/stat_items/metric_embeddable.tsx
@@ -17,6 +17,8 @@ export interface MetricEmbeddableProps {
   inspectTitle?: string;
 }
 
+const CHART_HEIGHT = 36;
+
 const MetricEmbeddableComponent = ({
   fields,
   id,
@@ -49,7 +51,7 @@ const MetricEmbeddableComponent = ({
                 <div data-test-subj="stat-title">
                   <VisualizationEmbeddable
                     data-test-subj="embeddable-metric"
-                    height="36px"
+                    height={CHART_HEIGHT}
                     id={`${id}-${field.key}-metric-embeddable`}
                     lensAttributes={field.lensAttributes}
                     timerange={timerange}

diff --git a/x-pack/plugins/security_solution/public/explore/components/stat_items/utils.tsx b/x-pack/plugins/security_solution/public/explore/components/stat_items/utils.tsx
@@ -20,7 +20,7 @@ import type { ChartSeriesData, ChartData } from '../../../common/components/char
 
 import type { StatItem } from './types';
 
-export const ChartHeight = '120px';
+export const ChartHeight = 120;
 
 export const FlexGroup = styled(EuiFlexGroup)`
   .no-margin {

diff --git a/...ution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx b/...ution/public/overview/components/detection_response/alerts_by_status/alerts_by_status.tsx
@@ -75,7 +75,7 @@ const StyledLegendFlexItem = styled(EuiFlexItem)`
   padding-top: 45px;
 `;
 
-const ChartSize = '120px';
+const ChartSize = 120;
 
 interface AlertsByStatusProps {
   additionalFilters?: ESBoolQuery[];

diff --git a/...ecurity_solution/public/overview/components/entity_analytics/risk_score/chart_content.tsx b/...ecurity_solution/public/overview/components/entity_analytics/risk_score/chart_content.tsx
@@ -17,6 +17,7 @@ import { generateSeverityFilter } from '../../../../explore/hosts/store/helpers'
 import { RiskScoreDonutChart } from '../common/risk_score_donut_chart';
 import { TOTAL_LABEL } from '../common/translations';
 
+const CHART_HEIGHT = 180;
 const ChartContentComponent = ({
   dataExists,
   kpiQueryId,
@@ -52,7 +53,7 @@ const ChartContentComponent = ({
           donutTextWrapperClassName="risk-score"
           extraOptions={extraOptions}
           getLensAttributes={getRiskScoreDonutAttributes}
-          height="180px"
+          height={CHART_HEIGHT}
           id={`${kpiQueryId}-donut`}
           isDonut={true}
           label={TOTAL_LABEL}

diff --git a/x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx b/x-pack/plugins/security_solution/public/overview/components/events_by_dataset/index.tsx
@@ -40,6 +40,7 @@ import { useInvalidFilterQuery } from '../../../common/hooks/use_invalid_filter_
 const DEFAULT_STACK_BY = 'event.dataset';
 
 const ID = 'eventsByDatasetOverview';
+const CHART_HEIGHT = 160;
 
 interface Props extends Pick<GlobalTimeArgs, 'from' | 'to' | 'deleteQuery' | 'setQuery'> {
   combinedQueries?: string;
@@ -204,6 +205,7 @@ const EventsByDatasetComponent: React.FC<Props> = ({
       scopeId={scopeId}
       {...eventsByDatasetHistogramConfigs}
       title={onlyField != null ? i18n.TOP(onlyField) : eventsByDatasetHistogramConfigs.title}
+      chartHeight={CHART_HEIGHT}
       hideQueryToggle={hideQueryToggle}
     />
   );