styling

angorayc · Jan 5, 2023 · 075ef5f · 075ef5f
1 parent 4d4a5cf
commit 075ef5f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx b/x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx
@@ -63,9 +63,10 @@ export interface DonutChartWrapperProps {
 
 /* Make this position absolute in order to overlap the text onto the donut */
 export const DonutTextWrapper = styled(EuiFlexGroup)<
-  EuiFlexGroupProps & { $isChartEmbeddablesEnabled?: boolean }
+  EuiFlexGroupProps & { $isChartEmbeddablesEnabled?: boolean; $dataExists?: boolean }
 >`
-  top: ${({ $isChartEmbeddablesEnabled }) => ($isChartEmbeddablesEnabled ? `66%` : `34%;`)};
+  top: ${({ $isChartEmbeddablesEnabled, $dataExists }) =>
+    $isChartEmbeddablesEnabled && !$dataExists ? `66%` : `34%;`};
   width: 100%;
   max-width: 77px;
   position: absolute;
@@ -101,6 +102,7 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
     >
       <StyledEuiFlexItem grow={isChartEmbeddablesEnabled}>
         <DonutTextWrapper
+          $dataExists={dataExists}
           $isChartEmbeddablesEnabled={isChartEmbeddablesEnabled}
           alignItems="center"
           direction="column"

diff --git a/...common/alerts/alerts_by_severity_donut.ts → ...s/common/alerts/alerts_by_status_donut.ts b/...common/alerts/alerts_by_severity_donut.ts → ...s/common/alerts/alerts_by_status_donut.ts
@@ -7,7 +7,7 @@
 
 import type { GetLensAttributes, LensAttributes } from '../../../types';
 
-export const getAlertsBySeverityAttributes: GetLensAttributes = (
+export const getAlertsByStatusAttributes: GetLensAttributes = (
   stackByField = 'kibana.alert.workflow_status',
   extraOptions
 ) =>

diff --git a/...public/overview/components/detection_response/alerts_by_status/alert_donut_embeddable.tsx b/...public/overview/components/detection_response/alerts_by_status/alert_donut_embeddable.tsx
@@ -7,7 +7,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { DonutChartWrapper } from '../../../../common/components/charts/donutchart';
 import { useRefetchByRestartingSession } from '../../../../common/components/page/use_refetch_by_session';
-import { getAlertsBySeverityAttributes } from '../../../../common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_severity_donut';
+import { getAlertsByStatusAttributes } from '../../../../common/components/visualization_actions/lens_attributes/common/alerts/alerts_by_status_donut';
 import { LensEmbeddable } from '../../../../common/components/visualization_actions/lens_embeddable';
 import type { EmbeddableData } from '../../../../common/components/visualization_actions/types';
 import { parseVisualizationData } from '../../../../common/components/visualization_actions/utils';
@@ -78,7 +78,7 @@ const AlertDonutEmbeddableComponent: React.FC<AlertDonutEmbeddableProps> = ({
         height={ChartSize}
         width={ChartSize}
         onLoad={onEmbeddableLoad}
-        getLensAttributes={getAlertsBySeverityAttributes}
+        getLensAttributes={getAlertsByStatusAttributes}
         stackByField="kibana.alert.workflow_status"
         scopeId={SourcererScopeName.detections}
         id={`alertsStatus${status}`}